DataTable - Column Resize

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

Documentation

Basic Resize

Basic Resize
IdYearBrandColor
a15f56f31997HondaSilver
f6f9f16c1974MercedesYellow
eabd813c1999MercedesOrange
d07d64861962BMWWhite
c11ddc201973AudiMaroon
699b9cb81976RenaultMaroon
4ccaae261984FiatSilver
cf3f571c1974AudiYellow
7739d1df2001BMWBlue
27f071552007VolvoBlue

Live Resize with Callback

IdYearBrandColor
003cfc1e1994JaguarBlack
bc9314f81999RenaultBlack
1801b01b2005VolkswagenBrown
6031b0ec1988BMWBlack
f017e6a41969MercedesMaroon
52e751051964RenaultSilver
71a00f961976VolkswagenGreen
8420d0711972HondaBlack
27f6ba161988AudiOrange
fc086ae21998HondaMaroon

Expand Mode with Grouping

ManufacturerSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Totals:\$554,185\$591,975
Apple0%56%$91,866.00$84,263.00
Samsung5%30%$97,245.00$97,038.00
Microsoft97%96%$50,494.00$46,745.00
Philips62%39%$22,166.00$26,995.00
Sony68%13%$60,695.00$36,456.00
LG47%98%$75,393.00$37,184.00
Sharp18%90%$5,371.00$91,926.00
Panasonic69%97%$75,773.00$97,124.00
HTC48%28%$55,318.00$1,144.00
Nokia5%23%$19,864.00$73,100.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.