Resizing, reordering, and toggling columns in dataTable

The dataTable component offers enhanced features on its content, such as resizing of columns, reordering of rows and columns via drag and drop, and toggling of columns for visibility.

How to do it…

Resizing should be enabled by setting the resizableColumns attribute to true, as shown here:

<p:dataTable id="resizing" var="car" value="#{dataTableBean.cars}"
  resizableColumns="true">
  <p:column headerText="Year">
    <h:outputText value="#{car.year}" />
  </p:column>
  <p:column headerText="Name">
    <h:outputText value="#{car.name}" />
  </p:column>
</p:dataTable>

Note

After resizing, the state of the columns is preserved on the postback of a page via cookie-based persistence.

Reordering of rows and columns is possible with the draggableRows and draggableColumns attributes respectively. A sample definition is given here:

<p:dataTable value="#{dataTableBean.cars}" var="car"
  draggableRows...