DataTable - Column Resize

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

Documentation

Basic Resize

Basic Resize
IdYearBrandColor
1b4349322008MercedesGreen
73a30d952006BMWOrange
17ce9a311972VolkswagenGreen
f3d7dd0d1960VolvoBlack
540deac81988JaguarBlue
d7d4fb561968FiatSilver
9e474b631984VolvoSilver
7eefe21b2008JaguarOrange
6ad06a0c1977FiatSilver
2978b3491998JaguarBlue

Live Resize with Callback

IdYearBrandColor
d94640cd1981RenaultBlue
375907d31996VolvoSilver
5d0b6d701978FiatMaroon
69a6f9761986BMWYellow
6c6d33e21997BMWSilver
07b6ccd82002VolvoBlack
c569632a2009HondaOrange
502896101996JaguarOrange
ec53c9051999FiatRed
cd49b26f2003MercedesBlue

Expand Mode with Grouping

ManufacturerSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Totals:\$454,029\$540,609
Apple75%76%$47,347.00$3,778.00
Samsung11%43%$69,504.00$10,248.00
Microsoft54%96%$64,814.00$73,374.00
Philips15%0%$21,024.00$69,500.00
Sony16%78%$46,456.00$78,994.00
LG11%13%$69,027.00$76,922.00
Sharp65%8%$80,297.00$59,996.00
Panasonic70%96%$26,629.00$83,253.00
HTC68%84%$14,421.00$48,779.00
Nokia19%55%$14,510.00$35,765.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.