2

I am using a PrimeFaces dataTable. I need the column headers to word-wrap and be resizable. Here are my issues:

  • When I do styleClass="wrap" resizableColumns="true", only resizable is working.
  • When I do styleClass="wrap" resizableColumns="false", only word-wrap is working.

My code is:

<p:dataTable id="transitCycleHighLevelDataTable" var="record"
    value="#{transitCycleMB.highLevel}" rowKey="#{record.group}"
    paginator="true" paginatorPosition="bottom" rows="10"
    styleClass="wrap" resizableColumns="true" scrollable="true"
    scrollWidth="100%" scrollHeight="250"
    rowsPerPageTemplate="10,20,50"
    paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {RowsPerPageDropdown} {NextPageLink} {LastPageLink} {Exporters}"
    currentPageReportTemplate="(Displaying {startRecord} - {endRecord} of {totalRecords}, Page: {currentPage}/{totalPages})">
Jake Reece
  • 1,140
  • 1
  • 12
  • 23
Mars
  • 153
  • 2
  • 3
  • 13

1 Answers1

1

Adding this style to your dataTable will allow the column headers to wrap and the columns to remain resizable:

.ui-datatable thead th {
   white-space: normal !important;
}

Note: This was tested and works on PrimeFaces 6.2.

Jake Reece
  • 1,140
  • 1
  • 12
  • 23
  • Hi, please ad the PF version this at least works on! Cheers thanks for answering – Kukeltje Oct 23 '18 at 07:05
  • Good idea. Done. – Jake Reece Oct 23 '18 at 12:21
  • Would a selector of `.wrap.ui-datatable thead th` and not using `!important` also work? Always better to use more specific selectors instead of `!important` (if it works without) – Kukeltje Oct 23 '18 at 12:31
  • I think your selector would work here, but I'll leave my answer as-is since it doesn't require that the `dataTable` have a `wrap` class. This makes it more versatile for future visitors. You're welcome to add another answer, of course =) – Jake Reece Oct 23 '18 at 12:59
  • I understand but fully disagree ;-). It means it is automatically applied to all datatables, and if done in a generic css in a template, it would make it harder to override when it is **not** wanted. If you want this everywhere, you can have a selector with the `.wrap` in it, but e.g. add the wrap class on the body of the template. It will still be applicable everywhere but easier to override. Also see https://stackoverflow.com/questions/5701149/when-to-use-the-important-property-in-css and https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles – Kukeltje Oct 23 '18 at 14:29
  • Ahh, I think we made different assumptions around OP's desire to have the effects propagated. I found this question searching for a way to apply these styles to _all_ `dataTable`s, and you are trying to narrow the scope to to only specific `dataTable`(s). Your suggestions make sense for your intent. But given that 1) OP didn't provide propagation specificity, 2) OP didn't mention using the `dataTable` in a template, and 3) I believe that people who find this question in the future will, like myself, want these styles applied to all `dataTable`s, I'll leave this answer as-is. – Jake Reece Oct 23 '18 at 14:55
  • But please do add your own answer for those who may want to limit the scope of the styling as you suggested. – Jake Reece Oct 23 '18 at 14:56