DataTable - Column Resize

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

Basic Resize

Basic Resize
IdYearBrandColor
9ee8be3b1961VolvoBlue
8615f81a1988JaguarMaroon
62cc5cfa1968JaguarBrown
d20507751983VolkswagenBrown
c52ed7f62004VolvoYellow
24d0ec431988HondaYellow
1497c8bc1972HondaBrown
744322941995FordWhite
3b11c0d11965VolkswagenBlack
855f3e0c1969HondaSilver

Live Resize with Callback

IdYearBrandColor
3a21828d2005VolkswagenYellow
4bc4458c2003VolvoRed
96d577151976JaguarBlue
175da8cb1964BMWWhite
6522f66d1972BMWMaroon
9b3dd2b71986FordOrange
8e9b9c951991FordOrange
928962f42007JaguarGreen
66a03cda1969JaguarBrown
c6bc11d41975JaguarMaroon

Expand Mode with Grouping

ManufacturerSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Totals:\$334,116\$557,805
Apple96%13%$24,497.00$86,081.00
Samsung5%82%$57,880.00$81,134.00
Microsoft79%17%$59,914.00$22,909.00
Philips43%27%$22,162.00$36,319.00
Sony73%35%$576.00$7,728.00
LG93%28%$41,380.00$77,980.00
Sharp24%69%$33,631.00$43,966.00
Panasonic63%21%$3,022.00$54,694.00
HTC85%50%$26,410.00$56,661.00
Nokia23%54%$64,644.00$90,333.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>