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
e0eaf06d1968BMWBlack
18a066391979BMWBlue
c6b2f7901996VolkswagenOrange
017048631972HondaBrown
5edc809c1962VolvoMaroon
a30ce0b71972FordBrown
233ee6401985JaguarWhite
c3241c341986AudiMaroon
90ff6f9f1974RenaultSilver
df815c481979BMWWhite
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.