JARCH SHOWCASE
JARCH SHOWCASE
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.
Search all fields:
IdYearBrand
Color
23e3465d1965HondaBrown
13a1479a1992AudiBlack
c2d062fd2009JaguarMaroon
db3a019b1975JaguarRed
3cdaf5312003BMWRed
f49314231960FiatMaroon
312e4b041984FiatBlack
eb4715ec1971MercedesMaroon
73e07fe22001MercedesBrown
dabe4dc21994FiatOrange
Car Info
<a:form>
    <a: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">
            <a:outputPanel>
                <h:outputText value="Search all fields:" />
                <a:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" style="width:150px" placeholder="Enter keyword"/>
            </a:outputPanel>
        </f:facet>

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

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

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

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

        <a:column headerText="Color" filterBy="#{car.color}" sortBy="#{car.color}" filterMatchMode="in">
            <f:facet name="filter">
                <a:selectCheckboxMenu label="Colors" onchange="PF('carsTable').filter()" style="width:80px;" panelStyle="width:125px" scrollHeight="150">
                    <f:selectItems value="#{dtTableStateView.colors}" />
                </a:selectCheckboxMenu>
            </f:facet>
            <h:outputText value="#{car.color}" />
        </a:column>
    </a:dataTable>

    <a:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <a:outputPanel id="carDetail" style="text-align:center;">
            <a:panelGrid  columns="2" rendered="#{not empty dtTableStateView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <a: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}"/>
            </a:panelGrid>
        </a:outputPanel>
    </a:dialog>
</a:form>
                
JARCH, Copyright © 2022 All rights reserved. Running JARCH 24.3.0-SNAPSHOT on PrimeFaces-12.0.0 on Mojarra-2.3.13.