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

Basic Resize

Basic Resize
IdYearBrandColor
abb70bc92009FiatBlack
5f1803a62004JaguarBrown
ac12cbef1967BMWBlue
7444fac61981JaguarYellow
705d66971964BMWRed
18736cbe1971BMWMaroon
b843b8a71970FiatGreen
532f94622001RenaultBrown
1cb88e1e1984HondaYellow
3aff53d11981BMWGreen

Live Resize with Callback

IdYearBrandColor
514db1a11982HondaBrown
2dae16ae1963AudiYellow
26d2a6e11964BMWRed
bf64d4411988FiatOrange
95014a231970FiatBlack
4afc5d791982MercedesMaroon
54209fee1989MercedesBrown
c58c8bbf2007BMWRed
453f65c01994VolvoOrange
1d0676241992RenaultYellow

Expand Mode with Grouping

ManufacturerSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Totals:\$461,477\$673,376
Apple93%8%$12,767.00$91,551.00
Samsung80%14%$4,973.00$99,268.00
Microsoft23%87%$9,672.00$36,769.00
Philips71%14%$57,146.00$96,603.00
Sony26%98%$60,178.00$99,763.00
LG20%79%$48,624.00$96,420.00
Sharp58%77%$57,440.00$39,663.00
Panasonic94%72%$78,118.00$21,212.00
HTC20%38%$81,995.00$54,251.00
Nokia24%78%$50,564.00$37,876.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 © 2017
All rights reserved.
Running PrimeFaces-6.2.RC1 on Mojarra-2.3.2.