DataTable - Table State - since v6.0.10

TableState feature enables DataTable to maintain its state across pages by setting multiViewState attribute to true. In this demo, manipulate table with pagination, sorting, filtering and selection, then visit another page and then come back to this page. DataTable state should remain as you've left it.

Documentation
Search all fields:
IdYearBrand
Color
6d5950d71980FordMaroon
75f684191964HondaWhite
680856021979MercedesGreen
d79b59761993MercedesBrown
23b8b9a41965VolkswagenWhite
e6a20ce91988RenaultGreen
71fd39b71988MercedesBrown
38d4acb82003MercedesGreen
799695bc1997MercedesBlue
48d19ad62008AudiBlue

with LazyDataModel:
IdYearBrandColor
a5870cb41980FordYellow
a63790ad1999VolkswagenBrown
b1b6a4311962FiatRed
cafac9491960VolvoBlue
4544ab462003AudiRed
644d8abb1977MercedesOrange
66c2a6e01997VolkswagenBlue
33911afe1981FiatOrange
430a499b1978AudiBrown
a18ecebb2009MercedesOrange
Car Info
<style type="text/css">
    .ui-datatable .ui-datatable-header {
        text-align: right !important;
    }

    .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-chkbox {
        display: none;
    }
</style>


<h:form id="form">
    <p:messages id="messages" />

    <p:dataTable id="tableStateDT" var="car" value="#{dtTableStateView.cars}" widgetVar="carsTable" multiViewState="true"
                 rows="10" paginator="true"
                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                 rowsPerPageTemplate="5,10,15"
                 selectionMode="single" selection="#{dtTableStateView.selectedCar}" rowKey="#{car.id}"
                 emptyMessage="No cars found with given criteria" filteredValue="#{dtTableStateView.filteredCars}">

        <f:facet name="header">
            <p:outputPanel>
                <h:outputText value="Search all fields:" />
                <p:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" style="width:150px" placeholder="Enter keyword"/>
            </p:outputPanel>
        </f:facet>

        <p:ajax event="rowSelect" update=":form:carDetail" oncomplete="PF('carDialog').show()" />

        <p:column headerText="Id" filterBy="#{car.id}" sortBy="#{car.id}" filterMatchMode="contains">
            <h:outputText value="#{car.id}" />
        </p:column>

        <p:column headerText="Year" filterBy="#{car.year}" sortBy="#{car.year}" filterMatchMode="startsWith">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Brand" filterBy="#{car.brand}" sortBy="#{car.brand}" filterMatchMode="exact">
            <f:facet name="filter">
                <p:selectOneMenu onchange="PF('carsTable').filter()" style="width:100%; box-sizing: border-box;" >
                    <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
                    <f:selectItems value="#{dtTableStateView.brands}" />
                </p:selectOneMenu>
            </f:facet>
            <h:outputText value="#{car.brand}" />
        </p:column>

        <p:column headerText="Color" filterBy="#{car.color}" sortBy="#{car.color}" filterMatchMode="in">
            <f:facet name="filter">
                <p:selectCheckboxMenu label="Colors" onchange="PF('carsTable').filter()" style="width:100%; box-sizing: border-box;" scrollHeight="150">
                    <f:selectItems value="#{dtTableStateView.colors}" />
                </p:selectCheckboxMenu>
            </f:facet>
            <h:outputText value="#{car.color}" />
        </p:column>

        <f:facet name="paginatorTopLeft">
            <p:commandButton value="Clear table state" action="#{dtTableStateView.clearTableState}" update="@form"/>
        </f:facet>
    </p:dataTable>

    <br />
    with LazyDataModel:
    <p:dataTable var="car" value="#{dtLazyView.lazyModel}" paginator="true" rows="10"
                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                 rowsPerPageTemplate="5,10,15" id="carTable" lazy="true" multiViewState="true">
        <p:column headerText="Id" sortBy="#{car.id}" filterBy="#{car.id}">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" sortBy="#{car.year}" filterBy="#{car.year}">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" sortBy="#{car.brand}" filterBy="#{car.brand}">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" sortBy="#{car.color}" filterBy="#{car.color}">
            <h:outputText value="#{car.color}" />
        </p:column>

        <f:facet name="paginatorTopLeft">
            <p:commandButton value="Clear table state" action="#{dtTableStateView.clearTableState}" update="@form"/>
        </f:facet>
    </p:dataTable>

    <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty dtTableStateView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{dtTableStateView.selectedCar.brand}-big.gif"/>
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{dtTableStateView.selectedCar.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{dtTableStateView.selectedCar.year}" />

                <h:outputText value="Brand" />
                <h:outputText value="#{dtTableStateView.selectedCar.brand}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{dtTableStateView.selectedCar.color}" style="color:#{dtTableStateView.selectedCar.color}"/>
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>

</h:form>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.