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

Basic Resize

Basic Resize
IdYearBrandColor
2649c54d1984FordBlack
462d4c721982RenaultWhite
e15d1c5b1961FordOrange
be67089e1974MercedesWhite
3836a4db1991RenaultGreen
f1e071221986MercedesMaroon
317b367b1970BMWBlue
603508741978MercedesRed
bc69971e1973FiatOrange
c5e8c1571980AudiYellow

Live Resize with Callback

IdYearBrandColor
51d96d031983VolkswagenMaroon
71d44c811978AudiGreen
d8576f6e1998FiatMaroon
a92b1a561997BMWOrange
a7c5ac2b2000VolvoWhite
64b5db4e1992AudiBlack
3b6c50ad1965JaguarBrown
9368e3431996FordBlue
7256df751962RenaultBlue
16b8c6451997HondaGreen

Expand Mode with Grouping

ManufacturerSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Totals:\$469,346\$462,694
Apple3%24%$44,157.00$95,518.00
Samsung94%89%$52,231.00$3,040.00
Microsoft1%52%$50,792.00$36,765.00
Philips57%21%$74,007.00$1,994.00
Sony44%3%$490.00$32,996.00
LG53%69%$72,562.00$26,139.00
Sharp93%59%$94,512.00$36,983.00
Panasonic4%13%$77,848.00$86,180.00
HTC47%57%$819.00$97,274.00
Nokia46%50%$1,928.00$45,805.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.3-SNAPSHOT on Mojarra-2.3.2.