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

Basic Resize

Basic Resize
IdYearBrandColor
43c539d21982VolkswagenBlue
107396231997BMWMaroon
86cf6b661973RenaultBlack
548dcdd41986VolvoOrange
0e5128291985HondaYellow
f340d21e1972FordWhite
b03c23791990HondaBlack
72ffe7802004AudiRed
1bf894432004HondaMaroon
90addf3e1982FiatOrange

Live Resize with Callback

IdYearBrandColor
66754eb61965FordOrange
ddc0f4181988VolkswagenSilver
d6b68eb81985FiatBlack
1194dc541968AudiBrown
648a64d31963FiatOrange
2ad438cf1989FiatGreen
6d5086cd1962MercedesGreen
344b019e1978BMWSilver
f5c4b7b11990RenaultRed
af9c32d12009JaguarSilver

Expand Mode with Grouping

ManufacturerSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Totals:\$596,702\$504,378
Apple4%42%$63,004.00$3,248.00
Samsung35%12%$52,367.00$9,668.00
Microsoft94%34%$58,716.00$19,386.00
Philips51%40%$68,922.00$55,772.00
Sony27%15%$42,045.00$94,047.00
LG99%99%$73,371.00$18,607.00
Sharp30%21%$81,740.00$42,003.00
Panasonic24%38%$73,252.00$74,254.00
HTC93%43%$66,963.00$95,686.00
Nokia72%58%$16,322.00$91,707.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-SNAPSHOT on Mojarra-2.3.2.