Primefaces Datatable header width:auto

Question

I am developing a dynamic Datatable with Primefaces 5. I have set the table width to auto. This is really nice. My Column uses only the needed width, which is perfect. But I also use paginator and a Table header. So my table looks like this:

<p:dataTable var="row"  
             editingRow="#{row.status == CommonConstant.ROWSTATUS_EDIT}" 
             tableStyle="width:auto"
             value="#{componentBean.componentData[componentId].lazyModel}"
             id="#{componentId}" 
             editable="true" scrollable="false" scrollHeight="100%"
             resizableColumns="true"
             paginator="true"
             paginatorPosition="top"
             rowsPerPageTemplate="10 25 50 100"
             lazy="true">
  <f:facet name="header">   
    <p:outputPanel style="text-align:right">  
      <h:commandLink rendered="#{fn:indexOf(componentBean.componentData[componentId].loadedData.actions, CommonConstant.ACTIONTYPE_EXCEL) >= 0}" >
        <img border="0" src="img/excel.png" width="24"/>
        <p:dataExporter type="xls" target="#{componentId}" fileName="#{appDialogId}" />
      </h:commandLink>

      <h:commandLink rendered="#{fn:indexOf(componentBean.componentData[componentId].loadedData.actions, CommonConstant.ACTIONTYPE_PDF) >= 0}">
        <img border="0" src="img/pdf.png" width="24"/>
        <p:dataExporter type="pdf" target="#{componentId}" fileName="#{appDialogId}"/>
      </h:commandLink>

    </p:outputPanel>    

    <p:outputPanel>
      <h:outputText value="#{componentBean.componentData[componentId].loadedData.appdialogid}" />
    </p:outputPanel>                                              
  </f:facet>
...
</p:dataTable>

How can I force the Header and the paginator to have the same width than the table?

Answer 1

For plain data table try this:

.ui-datatable {
    display: table;
}

.ui-datatable table {
    table-layout: auto !important;
}

I haven't tried resizable or anything else yet.

Answer 2

I am assuming you are setting the auto width on the datatable as I can recreate your problem.

Try this:

1. set the style to min-width: $px on the div with the ui-datatable class to a value that makes your table happy
2. remove the auto width from the table and add table-layout: auto ! important to the table element so the colums still auto size somewhat but relative to the header.

Note: The width on the table element needs to remain as 100%, its default, so it fills the header.

The below is not really relevant but still 'good to know'.

All datatables in Primefaces 5 use table-layout: fixed. You can override to match the older Primefaces model using css.

.ui-datatable table, .ui-datatable-resizable table {
    table-layout: auto !important;
}

.ui-datatable-scrollable table {
    table-layout: fixed !important;
}

Scrollable data-tables need to remain as fixed.

It may help if you remove the outputPanels and use the data exporter facet for the links. If you prefer the links in the header put them in a span.

Priemfaces example

<f:facet name="{Exporters}">
        <h:commandLink> ...
        </h:commandLink> ...
</f:facet>

Answer 3

Enclose your datatable in a panelGrid

<p:panelGrid id="forautowidth" columns="1">
    --- Data Table Here ---
</p:panelGrid>

This has a somewhat annoying box around the table, but that is a good deal better then the overshooting paginator. Plus it works well as the browser page size changes