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

Basic Resize

Basic Resize
IdYearBrandColor
ab4f86531995FordGreen
e33636f12006BMWYellow
0a86eab31961JaguarMaroon
5f70bd851996BMWGreen
16a55a611980HondaBlack
1dd133381968FiatGreen
2e17e3092004BMWSilver
87d937762005HondaRed
98a7177b2007BMWRed
37b445b51989FordYellow

Live Resize with Callback

IdYearBrandColor
df2011951976JaguarWhite
8c2a7ecd1961VolkswagenBlack
563802e12006JaguarOrange
e60128ba1992FordBlack
834079481993BMWSilver
66db29521994RenaultSilver
8f92b7982008AudiSilver
85343ceb1978VolvoYellow
7722f2741964FiatRed
6196b6ed2003VolkswagenWhite

Expand Mode with Grouping

ManufacturerSale Rate
SalesProfit
Last YearThis YearLast YearThis Year
Totals:\$360,352\$602,602
Apple82%99%$50,163.00$45,328.00
Samsung3%98%$6,431.00$81,225.00
Microsoft27%88%$21,279.00$72,520.00
Philips47%99%$5,334.00$60,204.00
Sony85%73%$55,879.00$52,509.00
LG59%83%$52,441.00$72,202.00
Sharp24%29%$74,889.00$67,234.00
Panasonic61%96%$23,482.00$41,983.00
HTC17%99%$46,611.00$74,584.00
Nokia7%31%$23,843.00$34,813.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.