DataTable - Selection

There are various ways to select rows from the datatable.

Documentation
Basic
IdYearBrandColor
b3936bbe1964JaguarBrown
d3c66fca1977FiatGreen
8ca929f62006AudiBrown
07d727311987MercedesGreen
f708a71a1966AudiSilver
24c5e6102007VolvoSilver
16f191522006RenaultYellow
34f4fae92007VolvoBlue
54d557dc1986JaguarSilver
eddaa37f1996VolkswagenBlack
Single with Row Click
IdYearBrandColor
e8be1ea31960AudiRed
c8cfcf282008FordBrown
5cd17b291998VolkswagenBrown
61a28fc91964BMWBlack
185353631960AudiMaroon
45b59cce1992BMWBlue
d9f04f2a1965MercedesBrown
79de7a121969VolvoGreen
96743e511981MercedesYellow
b03cf3911972VolkswagenWhite
Select Events
IdYearBrandColor
5b8862c71997RenaultMaroon
39c073ea1999RenaultBlue
d00174a91997HondaBrown
3e4c42a31964HondaBlack
cfe64f0c1974FiatWhite
0786da062005JaguarBlue
ef94ff271993FiatBlack
af65cd081996VolvoBrown
5918c26d1985FiatMaroon
5a8101fa1979AudiOrange
Multiple with Meta and Shift keys
IdYearBrandColor
2bf93edc1990RenaultBrown
a0be7a201977VolvoSilver
2f145c391994FiatSilver
9c2cd9ec1989AudiYellow
4dcdd9222002FiatBlack
14a09a0e1973BMWOrange
f44f43121985VolvoYellow
ea48b9db1996BMWWhite
494b76bc1971MercedesRed
f1dd9d9b1979BMWYellow
RadioButton
IdYearBrandColor
7755aa012007VolvoWhite
59e097dc1991MercedesYellow
60fa9f5b1987HondaSilver
7e1d75211965MercedesRed
45666a151980BMWWhite
81f7f2f11972AudiBlack
1e59046b1992RenaultBrown
d57254b71979BMWRed
76dd4d081961VolkswagenBlack
c136ec012005BMWYellow
Checkbox
IdYearBrandColor
825f16d31985VolkswagenYellow
40c326f61967RenaultBrown
a6de7c4c2008FiatBrown
16dd69c41976AudiYellow
1c415d081965MercedesSilver
035758c61999FiatBrown
4ac895911976JaguarMaroon
f758777d2006FiatOrange
3e87353e1982BMWYellow
6af06fef1973AudiRed
Car Info
Selected Cars
<style type="text/css">
    .value {
        font-weight: bold;
    }
    
    .ui-datatable {
        margin-bottom: 25px
    }
    
    .ui-datatable .ui-datatable-footer {
        text-align:left;
    }
    
    .ui-datalist ul {
        padding: 0 0 0 10px;
        margin: 5px 0;
    }
    
    .ui-datatable .ui-button-icon-only .ui-button-text {
        padding: 0;
        line-height: 1.2;
    }
</style>


<h:form id="form">
    <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />

    <p:dataTable id="basicDT" var="car" value="#{dtSelectionView.cars1}">
        <f:facet name="header">
            Basic
        </f:facet>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <p:column style="width:32px;text-align: center">
             <p:commandButton update=":form:carDetail" oncomplete="PF('carDialog').show()" icon="pi pi-search" title="View">
                <f:setPropertyActionListener value="#{car}" target="#{dtSelectionView.selectedCar}" />
            </p:commandButton>
        </p:column>
    </p:dataTable>
    
    <p:dataTable id="singleDT" var="car" value="#{dtSelectionView.cars2}" selectionMode="single" selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}">
        <f:facet name="header">
            Single with Row Click
        </f:facet>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <f:facet name="footer">
            <p:commandButton process="singleDT" update=":form:carDetail" icon="pi pi-search" value="View" oncomplete="PF('carDialog').show()" />
        </f:facet>
    </p:dataTable>
    
    <p:dataTable id="eventsDT" var="car" value="#{dtSelectionView.cars3}" selectionMode="single" selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}">
        <f:facet name="header">
            Select Events
        </f:facet>
        <p:ajax event="rowSelect" listener="#{dtSelectionView.onRowSelect}" update=":form:msgs" />
        <p:ajax event="rowUnselect" listener="#{dtSelectionView.onRowUnselect}" update=":form:msgs" />
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>
    
    <p:dataTable id="multipleDT" var="car" value="#{dtSelectionView.cars4}" selectionMode="multiple" selection="#{dtSelectionView.selectedCars}" rowKey="#{car.id}">
        <f:facet name="header">
            Multiple with Meta and Shift keys
        </f:facet>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <f:facet name="footer">
            <p:commandButton process="multipleDT" update=":form:multiCarDetail" icon="pi pi-search" value="View" oncomplete="PF('multiCarDialog').show()" />
        </f:facet>
    </p:dataTable>
    
    <p:dataTable id="radioDT" var="car" value="#{dtSelectionView.cars5}" selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}">
        <f:facet name="header">
            RadioButton
        </f:facet>
        <p:column selectionMode="single" style="width:16px;text-align:center"/>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <f:facet name="footer">
            <p:commandButton process="radioDT" update=":form:carDetail" icon="pi pi-search" value="View" oncomplete="PF('carDialog').show()" />
        </f:facet>
    </p:dataTable>
    
    <p:dataTable id="checkboxDT" var="car" value="#{dtSelectionView.cars6}" selection="#{dtSelectionView.selectedCars}" rowKey="#{car.id}" style="margin-bottom:0">
        <f:facet name="header">
            Checkbox
        </f:facet>
        <p:column selectionMode="multiple" style="width:16px;text-align:center"/>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
        <f:facet name="footer">
            <p:commandButton process="checkboxDT" update=":form:multiCarDetail" icon="pi pi-search" value="View" oncomplete="PF('multiCarDialog').show()" />
        </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 dtSelectionView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/> 
                </f:facet>
                
                <h:outputText value="Id:" />
                <h:outputText value="#{dtSelectionView.selectedCar.id}" />

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

                <h:outputText value="Color:" />
                <h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>
            
                <h:outputText value="Price" />
                <h:outputText value="$#{dtSelectionView.selectedCar.price}" />
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
    
    <p:dialog header="Selected Cars" widgetVar="multiCarDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" width="220">
        <p:outputPanel id="multiCarDetail" style="text-align:center;">
            <ui:repeat value="#{dtSelectionView.selectedCars}" var="car">
                <h:outputText value="#{car.id} - #{car.brand}" style="display:block"/>
            </ui:repeat>
        </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.