DataTable - Column Resize

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

Basic Resize

Basic Resize
IdYearBrandColor
e435ff042002RenaultMaroon
1f720ecd2005VolvoOrange
2f1c33fb1991VolvoGreen
5415d9a71970BMWBlack
e2522f9b1988BMWBlue
4d198e8a1999VolvoMaroon
45027e811990AudiMaroon
0c7592231994RenaultMaroon
dbc081421979JaguarRed
1f0c14871992HondaBlue

Live Resize with Callback

IdYearBrandColor
85e91ce01975AudiBlack
499fe0861979FordYellow
ba5a21831964VolvoYellow
cb4b21112002MercedesOrange
eaaddbd22004VolkswagenBlack
28535c3a1975MercedesBrown
dd9bd35d1978VolkswagenRed
a19eab641968HondaRed
f5f4e3232003VolkswagenWhite
ada7792a2006VolvoBlack

Expand Mode with Grouping

ManufacturerSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Totals:\$522,368\$485,116
Apple35%77%$14,994.00$17,322.00
Samsung99%81%$38,342.00$42,731.00
Microsoft55%99%$35,868.00$84,452.00
Philips70%88%$48,928.00$64,712.00
Sony80%70%$89,867.00$8,564.00
LG49%27%$9,262.00$41,095.00
Sharp98%49%$81,187.00$56,652.00
Panasonic67%73%$94,859.00$67,838.00
HTC6%50%$79,366.00$21,883.00
Nokia66%91%$29,695.00$79,867.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>