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
34c1ea601998FordOrange
d7cac9fa1970AudiBrown
737ad30d2006VolkswagenYellow
7217db211981VolvoMaroon
59d842082003AudiRed
0903325e1967MercedesBlack
8bc237c21993VolvoBlue
5f6400b01987JaguarBrown
bf0738171990HondaGreen
a82c32d71988FordOrange

with LazyDataModel:
IdYearBrandColor
0486283c1962AudiRed
01ee0d271976AudiMaroon
26d560c72000VolvoYellow
e4fdf5fc2007JaguarMaroon
5ea2e3f31988VolvoBlack
5b17d6831983BMWBlue
f9d3be0f1990VolvoYellow
d6f5e11c2004MercedesBrown
d0858f711962FordWhite
52721eaf1972VolvoWhite
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.