DataTable - Column Resize

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

Basic Resize

Basic Resize
IdYearBrandColor
3eb9f08d1971VolvoGreen
f7992e652006MercedesYellow
16967da41990VolvoSilver
bd5770461999AudiGreen
faae546b1976RenaultMaroon
dd55b75b1994JaguarYellow
1c603b961961RenaultWhite
ca0dcd3f1975AudiSilver
638460011980VolkswagenBlack
6900a3be1963JaguarRed

Live Resize with Callback

IdYearBrandColor
0b0ffc681998VolkswagenSilver
167262a61977FiatBlue
40a17b341996FiatYellow
ffe9ec9d1961AudiRed
c8df5df62004VolvoYellow
205ce7521984VolkswagenBlue
44f767612004JaguarOrange
15e069091999RenaultOrange
ed457cfd1999JaguarSilver
42ff93cc1998JaguarSilver

Expand Mode with Grouping

ManufacturerSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Totals:\$339,983\$473,701
Apple9%6%$34,147.00$77,451.00
Samsung64%25%$58,360.00$16,580.00
Microsoft82%11%$24,412.00$54,414.00
Philips40%59%$30,200.00$62,684.00
Sony32%89%$4,628.00$98,556.00
LG21%71%$70,872.00$44,730.00
Sharp13%14%$4,535.00$44,402.00
Panasonic1%46%$81,031.00$11,981.00
HTC7%81%$2,309.00$9,501.00
Nokia42%77%$29,489.00$53,402.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>