DataTable - Column Resize Columns can be resized in two ways, with a helper or live.

Basic Resize

Basic Resize
IdYearBrandColor
9fce25491967FiatBlack
c9c22e191999JaguarWhite
8b8213271976JaguarBlue
5fe4cc1c2002RenaultGreen
4e2981b91981BMWBlack
991da83d1996AudiSilver
b2b814071979AudiBlack
a6ac78921963AudiSilver
09d588d82003BMWBlack
39c6cdfe2005AudiBrown

Live Resize with Callback

IdYearBrandColor
0f09eeae1998JaguarOrange
bbd63a891994AudiWhite
c6e2f5c92004HondaRed
4b7938b51964VolkswagenMaroon
81b75f301975FiatYellow
3a3e2a761966JaguarSilver
3029159b1998RenaultWhite
bbfdaaf71991JaguarMaroon
41ca2dc01999BMWMaroon
c4c021472007FordWhite

Expand Mode with Grouping

ManufacturerSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Totals:\$475,301\$358,166
Apple69%97%$19,604.00$1,567.00
Samsung85%22%$45,788.00$38,593.00
Microsoft19%77%$70,402.00$36,403.00
Philips30%67%$18,496.00$96,706.00
Sony13%23%$92,194.00$24,185.00
LG46%35%$40,821.00$50,766.00
Sharp99%59%$55,069.00$96,836.00
Panasonic64%71%$6,623.00$3,270.00
HTC12%5%$77,457.00$7,301.00
Nokia6%97%$48,847.00$2,539.00
<h:form id="form">
    <p:growl id="msgs" showDetail="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>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.0.16 on Mojarra-2.2.8.