22

I am trying to set the column widths of my data table. I have looked at this question for an answer How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?.

I am however trying to do something a little bit different. I only want the column to be as wide as the widest element it it is displaying. Most of my data is text.

So for example, it should not look like this

-----------------------------
| This is some text         |
-----------------------------

It should look like this

---------------------
| This is some text |
---------------------

If there are multiple rows, the coulmn should be as large as the widest element.

Community
  • 1
  • 1
user489041
  • 27,916
  • 55
  • 135
  • 204

5 Answers5

59

I always use

<p:dataTable ........ tableStyle="width:auto">

And does what I think you expect your datatable to do.

Maco
  • 741
  • 6
  • 5
38

If you want the table width remain 100%, use

tableStyle="table-layout: auto;"
Szarpul
  • 1,531
  • 11
  • 21
  • 4
    This works the way I want except that the columns and the header are not aligned any more. – Jonathas Pacífico Apr 27 '15 at 13:28
  • 2
    You can also add the following to your own custom .css file to override the default Primefaces style that centers the heading, which is centered by default: .ui-datatable thead th, .ui-datatable tfoot td { text-align: left !important; } – Fuzzy Analysis Aug 30 '15 at 11:15
3

Maco's answer works like a charm. However, for those whose data columns and headers become unaligned, one solution is to add a style to each <p:column> with the desired min-width attribute (note it has to be the same for all <p:column> of the <p:dataTable>). It might be more practical to define a style class in your css and refer to it using styleClass attribute in <p:column>. In that way, if you decide to change the minimum width, you would only have to change it in one place.

<p:column style="min-width: 100px;">
...
</p:column>

Tested in PF 5.3

CheshellCat
  • 51
  • 4
  • @Kukeltje I can see it being used at the PF 3.0 docs, so at least in that version, if not before. – CheshellCat Apr 20 '17 at 12:06
  • @Kukeltje I can assure you it works with 5.3. I put 3.0 because I checked that it was possible in the oldest docs currently published in their webpage, sorry if it caused confusion. – CheshellCat Apr 20 '17 at 14:06
1

@Szarpul's answer works fine. I extended it so that you can have columns with fixed with, columns that adjust its width and a column that takes up the remainder.

For fixed width set the width attribute to the desired width. For flexible width set it to any value greater than 0. If the width of the content is longer it will grow to the width of the longest element. The styling prevents that text will be wrapped at each space. For a column that takes up the remaining space do not define the width. You can even use more columns without a width, they will then split up the remaining space equally.

Here is an example:

<p:dataTable tableStyle="table-layout: auto;">
    <p:column width="300" headerText="Text" />
    <p:column width="300" headerText="Some more Text" />
    <p:column width="1" headerText="Text" style="white-space: nowrap;"/>
    <p:column width="1" headerText="Some more Text" style="white-space: nowrap;"/>
    <p:column headerText="Remainder" />
</p:dataTable>

This will look like this:

-----------------------------------------------------------------------------------------
|        Text        |   Some more Text   | Text | Some more Text |      Remainder      |
-----------------------------------------------------------------------------------------

This works for <p:treeTable> as well. I tested this solution for both components on Chrome 84 and IE 11.

Hendrik
  • 413
  • 7
  • 17
-2

tableStyle="width: auto !important; " this change width headers also

I.Zhyvcnyn
  • 1