DataTable - Column Resize

Columns can be resized in two ways, with a helper or live.

Documentation

Basic Resize

Basic Resize
IdYearBrandColor
1508da801975AudiBlue
55352cc91985VolvoBlue
2806e87f1976AudiRed
8a8fff541973MercedesMaroon
20db6db01984BMWRed
91fa95ac1962MercedesBlue
0036c3ae1975AudiGreen
a19448b61979HondaSilver
2b9df5ed1995FordWhite
847b529b1989FordRed

Live Resize with Callback

IdYearBrandColor
dc97d9391985FiatGreen
3f30d84f1999BMWOrange
46ae0c431978HondaBrown
15e075741968HondaGreen
398cf6552007JaguarOrange
b1121ddf2007MercedesBlack
7d6dbe521983BMWBlue
a36635fa1975BMWSilver
c5f5df851986RenaultYellow
ce6483511989AudiRed

Expand Mode with Grouping

ManufacturerSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Totals:\$575,607\$512,685
Apple78%12%$48,782.00$94,654.00
Samsung31%10%$99,243.00$28,599.00
Microsoft40%32%$4,367.00$52,538.00
Philips73%87%$62,174.00$45,167.00
Sony74%44%$68,342.00$8,964.00
LG66%34%$94,647.00$84,209.00
Sharp31%90%$12,795.00$64,044.00
Panasonic15%69%$37,749.00$53,821.00
HTC18%75%$94,027.00$54,420.00
Nokia38%12%$53,481.00$26,269.00
<h:form id="form">
    <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />
    
    <h3 style="margin-top:0">Basic Resize</h3>
    <p:dataTable id="cars1" var="car" value="#{dtResizableColumnsView.cars1}" resizableColumns="true" style="margin-bottom:20px">
        <f:facet name="header">
            Basic Resize
        </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:dataTable>
    
    <h3>Live Resize with Callback</h3>
    <p:dataTable id="cars2" var="car" value="#{dtResizableColumnsView.cars2}" resizableColumns="true" liveResize="true" style="margin-bottom:20px">
        <p:ajax event="colResize" update=":form:msgs" listener="#{dtResizableColumnsView.onResize}" />
        <f:facet name="header">
            
        </f:facet>
        <p:column headerText="Id" id="id">
            <h:outputText value="#{car.id}" />
        </p:column>
        <p:column headerText="Year" id="year">
            <h:outputText value="#{car.year}" />
        </p:column>
        <p:column headerText="Brand" id="brand">
            <h:outputText value="#{car.brand}" />
        </p:column>
        <p:column headerText="Color" id="color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>
    
    <h3>Expand Mode with Grouping</h3>
    <p:dataTable var="sale" value="#{dtGroupView.sales}" resizableColumns="true" resizeMode="expand">
        <f:facet name="header">
            
        </f:facet>

        <p:columnGroup type="header">
            <p:row>
                <p:column rowspan="3" headerText="Manufacturer" />
                <p:column colspan="4" headerText="Sale Rate" />
            </p:row>
            <p:row>
                <p:column colspan="2" headerText="Sales" />
                <p:column colspan="2" headerText="Profit" />
            </p:row>
            <p:row>
                <p:column headerText="Last Year" />
                <p:column headerText="This Year" />
                <p:column headerText="Last Year" />
                <p:column headerText="This Year" />
            </p:row>
        </p:columnGroup>

        <p:column>
            <h:outputText value="#{sale.manufacturer}" />
        </p:column>
        <p:column>
            <h:outputText value="#{sale.lastYearProfit}%" />
        </p:column>
        <p:column>
            <h:outputText value="#{sale.thisYearProfit}%" />
        </p:column>
        <p:column>
            <h:outputText value="#{sale.lastYearSale}">
                <f:convertNumber type="currency" currencySymbol="$" />
            </h:outputText>
        </p:column>
        <p:column>
            <h:outputText value="#{sale.thisYearSale}">
                <f:convertNumber type="currency" currencySymbol="$" />
            </h:outputText>
        </p:column>

        <p:columnGroup type="footer">
            <p:row>
                <p:column colspan="3" style="text-align:right" footerText="Totals:" />
                <p:column footerText="\$#{dtGroupView.lastYearTotal}" />

                <p:column footerText="\$#{dtGroupView.thisYearTotal}" />
            </p:row>
        </p:columnGroup>
    </p:dataTable>
</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.