Fork me on GitHub
Attention: This component is still under progress and experimental.
b:table The table tag renders an HTML element of the type "table".
Tag attributes
Tag controls
component
Attention: Column show and hide information will not be stored when not using a table model. Try toggling columns and and press refresh button. In this case column hide information will be used by checking hideColumn attribute.
Number of refresh clicks: 0
Readonly text
Action
Creation Date
r1c1 Attention: tooltips could be attended to columns. doSomething with r1c1Mon Jun 25 04:00:09 GMT 2018
r2c1 Attention: tooltips could be attended to columns. doSomething with r2c1Mon Jun 25 04:00:10 GMT 2018
r3c1 Attention: tooltips could be attended to columns. doSomething with r3c1Mon Jun 25 04:00:11 GMT 2018
r4c1 Attention: tooltips could be attended to columns. doSomething with r4c1Mon Jun 25 04:00:12 GMT 2018
r5c1 Attention: tooltips could be attended to columns. doSomething with r5c1Mon Jun 25 04:00:13 GMT 2018
r6c1 Attention: tooltips could be attended to columns. doSomething with r6c1Mon Jun 25 04:00:14 GMT 2018
r7c1 Attention: tooltips could be attended to columns. doSomething with r7c1Mon Jun 25 04:00:15 GMT 2018
r8c1 Attention: tooltips could be attended to columns. doSomething with r8c1Mon Jun 25 04:00:16 GMT 2018
r9c1 Attention: tooltips could be attended to columns. doSomething with r9c1Mon Jun 25 04:00:17 GMT 2018
r10c1 Attention: tooltips could be attended to columns. doSomething with r10c1Mon Jun 25 04:00:18 GMT 2018

-
-
                            <!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://xmlns.jcp.org/jsf/html" 
      xmlns:f="http://xmlns.jcp.org/jsf/core" 
      xmlns:b="http://butterfaces.org/components"> 
<h:head> 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
          rel="stylesheet">
</h:head> 
<body>
    <h:form id="formId">
        <h:panelGroup id="numberOfRefreshes"
                      layout="block"
                      styleClass="alert alert-success">
            Number of refresh clicks: #{myBean.numberOfRefreshes}
        </h:panelGroup>

        <b:tableToolbar tableId="table"
                        ajaxDisableRenderRegionsOnRequest="true"
                        refreshListener="#{myBean.toolbarRefreshListener}"
                        rendered="true">
            <!-- add refresh ajax event to enable refresh button -->
            <f:ajax event="refresh" render="formId:numberOfRefreshes" />
            <!-- add toggle ajax event to enable toggle column buttons -->
            <f:ajax event="toggle" />
            <!-- add order ajax event to enable order column buttons -->
            <f:ajax event="order" />
            <b:text value="#{myBean.filterValue}"
                    placeholder="Enter text..."
                    autoFocus="true"
                    hideLabel="true">
                <f:ajax event="keyup" render="table"/>
            </b:text>
        </b:tableToolbar>

        <b:table id="table"
                 var="rowItem"
                 value="#{myBean.value}"
                 model="#{myBean.tableModel}"
                 singleSelectionListener="#{myBean}"
                 tableBordered="false"
                 tableCondensed="false"
                 tableStriped="true"
                 ajaxDisableRenderRegionsOnRequest="true"
                 rendered="true">
            <!-- at this time you have to put an ajax tag to activate some features-->
            <f:ajax render="formId:selectedRow"/>
            <b:column id="column1"
                      label="Readonly text">
                /* text */
                <b:tooltip placement="top">
                   /* tooltip text */
                </b:tooltip>
            </b:column>
            <b:column id="column2"
                      sortColumnEnabled="false"
                      label="Action">
                /* action */
            </b:column>
            <b:column id="column3"
                      label="Creation date">
                /* date */
            </b:column>
            <b:column id="column4"
                      sortColumnEnabled="false"
                      hideColumn="true"
                      label="Readonly text (default hide)">
                /* disabled input with text */
            </b:column>
        </b:table>

        <h:panelGroup id="selectedRow">
            <h:output value="#{myBean.selectedRow.a}"
                      rendered="#{not empty myBean.selectedRow}"/>
        <h:panelGroup/>

    </h:form> 
</body> 
</html>
                        
                            package org.butterfaces.table.demo;

import org.butterfaces.event.TableSingleSelectionListener;
import org.butterfaces.model.table.TableModel;
import org.butterfaces.model.table.DefaultTableModel;
import org.butterfaces.model.table.TableToolbarRefreshListener;
import javax.faces.view.ViewScoped;
import javax.inject.Named;

@ViewScoped
@Named
public class MyBean implements Serializable, TableSingleSelectionListener, TableToolbarRefreshListener {

    private TableModel tableModel = new DefaultTableModel();

    private String filterValue;

    private int numberOfRefreshes;

    @PostConstruct
    public init() {
       // initial table ordering by first column
       tableModel.getTableRowSortingModel()
              .sortColumn("table", "column1", null, SortType.ASCENDING);
    }
    public List<DemoPojo> getValue() {
        final List<DemoPojo> pairs = new ArrayList<>();
        pairs.add(new DemoPojo(1L, "r1c1", "r1c2"));
        pairs.add(new DemoPojo(2L, "r2c1", "r2c2"));
        pairs.add(new DemoPojo(3L, "r3c1", "r3c2"));
        pairs.add(new DemoPojo(4L, "r4c1", "r4c2"));
        pairs.add(new DemoPojo(5L, "r5c1", "r5c2"));
        pairs.add(new DemoPojo(6L, "r6c1", "r6c2"));
        pairs.add(new DemoPojo(7L, "r7c1", "r7c2"));
        // TODO sort by table model
        return this.filterByValue(pairs, this.filterValue);
    }

    private DemoPojo selectedRow;

    @Override
    public void processTableSelection(final DemoPojo data) {
        this.selectedRow = data;
    }

    @Override
    public boolean isValueSelected(DemoPojo data) {
        return selectedRow != null ? data.getId() == selectedRow.getId() : false;
    }

    @Override
    public void onPreRefresh() {
        numberOfRefreshes++;
    }

    public int getNumberOfRefreshes() {
        return numberOfRefreshes;
    }

    public List<DemoPojo> filterByValue(final List<DemoPojo> pairs,
                                          final String filterValue) {
        // TODO implement me
        return pairs;
    }

    public String getFilterValue() {
        return this.filterValue;
    }

    public void setFilterValue(final String filterValue) {
        this.filterValue = filterValue;
    }

    public DemoPojo getSelectedRow() {
        return selectedRow;
    }

    public TableModel getTableModel() {
        return this.tableModel;
    }

}
                        
                            package org.butterfaces.table.demo;

public class DemoPojo {

    private final long id;
    private final String a;
    private final String b;
    private final String date;

    public DemoPojo(final long id, final String a, final String b) {
        this.id = id;
        this.a = a;
        this.b = b;
        this.date = new java.util.Date();
    }

    // getter

}
                        
                            <?xml version="1.0" encoding="UTF-8"?> 
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
                             http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
         version="3.0"> 
  <!-- override table and toolbar glyphicons by context param -->
  <!-- custom glyphicons (i.e. font-awesome) -->
  <!-- showcase shows default glyphicons -->
  <context-param>
     <param-name>org.butterfaces.glyhicon.refresh</param-name>
     <param-value>fa fa-refresh</param-value>
  </context-param>
  <context-param>
     <param-name>org.butterfaces.glyhicon.options</param-name>
     <param-value>fa fa-th</param-value>
  </context-param>
  <context-param>
     <param-name>org.butterfaces.glyhicon.sort.none</param-name>
     <param-value>fa fa-sort</param-value>
  </context-param>
  <context-param>
     <param-name>org.butterfaces.glyhicon.sort.ascending</param-name>
     <param-value>fa fa-sort-down</param-value>
  </context-param>
  <context-param>
     <param-name>org.butterfaces.glyhicon.sort.descending</param-name>
     <param-value>fa fa-sort-up</param-value>
  </context-param>

  <!-- Shows waiting panel over regions that will be renderer by ajax request -->
  <!-- Could be overridden by ajaxDisableRenderRegionsOnRequest component attribute -->
  <!-- default is true -->
  <context-param>
     <param-name>org.butterfaces.ajaxDisableRenderRegionsOnRequest</param-name>
     <param-value>true</param-value>
  </context-param>
</web-app>