Adjusting width of column to content in p:dataTable

Question

I want the columns of my table to adjust its width to the biggest element. Like doubleclicking an excel-column...

I've tried lots of attributes and solutions of other questions but nothing really did what i wanted.

Here are my settings for the dataTable which is nested in a p:scollPanel:

<p:dataTable scrollable="true" scrollWidth="auto" scrollHeight="390"
             tableStyle="width: auto; white-space: nowrap; font-size: smaller"
             id=carTable" var="vehicles"
             value="#{dgBean.vehicles}">

Using:

• primefaces 6.0
• jsf 2.2.1

UPDATE:

I don't know why, but it seems like table-layout: auto is not used AND two divs are generated. 1 for the Header of my table and the other for the body of my table. That's why the first layout I've posted shows up and the header and body fit nicely on their own but the header doesn't fit the body.

Generated HTML:

<div class="ui-widget-header ui-datatable-scrollable-header" style="width: 1199px;">
    <div class="ui-datatable-scrollable-header-box" style="margin-right: 15px;">
        <table role="grid">
            <thead id="j_idt5:j_idt14:carTable_head">...</thead>
        </table>
    </div>
</div>
<div class="ui-datatable-scrollable-body" tabindex="-1" style="height: 390px; margin-right: 0px; width: 1199px;">
    <table role="grid">
        <thead class="ui-datatable-scrollable-theadclone" style="height: 0px;">...</thead>
        <tbody id="j_idt5:j_idt14:carTable_data" class="ui-datatable-data ui-widget-content" tabindex="0">...</tbody>
    </table>
</div>

So it seems like 2 tables are generated. Does anyone have a clue how to fix this using pf?

UPDATE from comment

Applying

.ui-datatable-scrollable-header-box table, .ui-datatable-scrollable-footer-box table, .ui-datatable-scrollable-body table {
    table-layout: auto;
}

to the Showcase produces (deleted my former images as reputation is not high enough for more than 2):

Showcase with edited css

Answer 1

I want the columns of my table to adjust its width to the biggest element.

PrimeFaces DataTable default style uses table-layout: fixed;. So if only that, replace your tableStyle content with table-layout: auto; to make usage of the automatic table layout algorithm as stated on w3schools.com:

The column width is set by the widest unbreakable content in the cells

From everthing you wrote (including comments) until now, I assume you want a vertically and horizontally scrollable DataTable that automatically sizes its columns to its content.

I claim this is not possible with the built in functionalities of PrimeFaces DataTable, because as you allready noted, if you make the DataTable scrollable, the rendered output differs in that there are different tables for the header, body and footer (to make header and footer sticky).

I don't get it why its not working.

Column sizes calculated with the automatic table layout algorithm with table-layout: auto; will differ for all three tables (except they incidentally have the same broadest unbreakable content, like header and footer in ShowCase). The difference in size gets relativated if the table gets broader (because additional space is equaly distributed to the columns), so it might look like everthing is OK as Kukeltje commented. But if you shrink the width of the table, differences get visible.

             |  broadest content   | stretched by 1000
--------------------------------------------------------
             | column 1 | column 2 | column 1 | column 2
--------------------------------------------------------
header table | 2        | 3        | 502      | 503
body table   | 4        | 6        | 504      | 506
footer table | 2        | 3        | 502      | 503

As you maybe have noticed, the rendered body table also contains the header content but hidden. So assumed the header content would be broader than the body content, everything would be fine at least for the header and body table.

                   |  broadest content
========================================
                   | column 1 | column 2
========================================
header table       | 5        | 7
----------------------------------------
hidden header part | 5        | 7
body part          | 4        | 6
________________________________________
body table         | 5        | 7
----------------------------------------
footer table       | 2        | 3

The easiest workaround is to disable scrollability and enable pagination. With this, you have a more or less controllable height of the DataTable (with rows attribute) while preserving the remaining requirements.

From my point of view the paginator looks like it is just replacing the vertical scrolling.

More or less (therefore the easiest workaround). Most important thing is that only one table is renderd and therefore header, body and footer content is used to calculate the column widths:

            |  broadest content
---------------------------------
            | column 1 | column 2
---------------------------------
header part | 2        | 3
body part   | 4        | 6
footer part | 2        | 3
_________________________________
full table  | 4        | 6

How does that aid my horizontal problem?

With table-layout: auto; you get horizontal scrolling within the paginator viewport out of the box.

Another approach is to disable scrollability and wrap the DataTable with a ScrollPanel. This has some disadvantages in that the header is scrollable too and there are issues with resizing you have to handle, so I would not recommend it.

Best solution will be a customized renderer (note the hidden header content in the rendered body table if scrollability is enabled and extend vice verca) and/or customized JS/CSS for your DataTable, but thats out of scope of your question.

Easiest solution would be to not insist on automatic column sizing according to table content and take DataTable with scrolling capabilities as is.