Attention: This component is still under progress and experimental.
b:table The table tag renders an HTML element of the type "table".
Tag attributes
rendered
tableBordered
tableCondensed
tableStriped
refreshTooltip
columnOptionsTooltip
ajaxDisableRenderRegionsOnRequest
Tag controls
ajax selection
custom toolbar
column width
toolbar facets
use table model
use selection listener
showRefreshButton
showToggleColumnButton
showOrderColumnButton
Rendered output
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 r1c1Sat Dec 16 22:27:23 GMT 2017
r2c1 Attention: tooltips could be attended to columns. doSomething with r2c1Sat Dec 16 22:27:24 GMT 2017
r3c1 Attention: tooltips could be attended to columns. doSomething with r3c1Sat Dec 16 22:27:25 GMT 2017
r4c1 Attention: tooltips could be attended to columns. doSomething with r4c1Sat Dec 16 22:27:26 GMT 2017
r5c1 Attention: tooltips could be attended to columns. doSomething with r5c1Sat Dec 16 22:27:27 GMT 2017
r6c1 Attention: tooltips could be attended to columns. doSomething with r6c1Sat Dec 16 22:27:28 GMT 2017
r7c1 Attention: tooltips could be attended to columns. doSomething with r7c1Sat Dec 16 22:27:29 GMT 2017
r8c1 Attention: tooltips could be attended to columns. doSomething with r8c1Sat Dec 16 22:27:30 GMT 2017
r9c1 Attention: tooltips could be attended to columns. doSomething with r9c1Sat Dec 16 22:27:31 GMT 2017
r10c1 Attention: tooltips could be attended to columns. doSomething with r10c1Sat Dec 16 22:27:32 GMT 2017

Table selected value:-
Button selected value:-
                            <!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 de.larmic.table.demo;

import de.larmic.butterfaces.event.TableSingleSelectionListener;
import de.larmic.butterfaces.model.table.TableModel;
import de.larmic.butterfaces.model.table.DefaultTableModel;
import de.larmic.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 de.larmic.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>