Primefaces datatable header alignment

Question

I have a problem with primefaces datatable. As you can see there is an alignment problem with columns border and headers. Is this a primefaces bug or there is something wrong with my datatable? By the way datatable has dynamic columns.

<p:dataTable     scrollable="true" scrollWidth="100%" editable="true" editMode="cell"   
var="invoiceLine" value="#{myController.invoiceLines}"                          
                         selection="#{myController.selectedInvoiceLine}" selectionMode="single" rowKey="#{invoiceLine.uuid}"
                         >
<p:columns value="#{myController.columns}" var="column"
                           styleClass="ui-editable-column" width="50"
                           columnIndexVar="colIndex">

//some stuff
</p:columns>         

            </p:dataTable>

Answer 1

Do one trick,

Remove scrollable = true

and create new style class like,

.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper{
     overflow: auto;
     width: 100%;
     padding-bottom: 5px;}

apply styleClass to p:datatable like styleClass="ui-datatable-hor-scroll"

Answer 2

The problem is still present in 6.2. Another solution, with width set in style attribute, is to replace

<p:column style="width:100px">

with

<p:column style="width:calc(100px)">

MDN-calc() description

Answer 3

For anyone else who has this problem - Primfaces scrollable continues to have issues. I am on 5.1 and it isn't working.

Just use a normal datatable and then use CSS3 to get the scrolling to work:

https://jsfiddle.net/xuvsncr2/170/

Of course don't use table, thead, tr etc. for targeting elements. Instead use css classes so that you get the right datatable.

The tricky part is that in order to set the size of the scroll pane, you need to target the div directly surrounding the table. You can see how I did this below

Heres more on the flexbox for css3: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Heres an example of the css I used for primefaces. I just wrapped my datatable with a <div class="myCompanyScrollable thirtyEM">

.thirtyEM .ui-datatable-tablewrapper{
height: 30em;
}
.myCompanyScrollable table {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
}
.myCompanyScrollable table thead {
    /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 1.05em);
    display: table;
    table-layout: fixed;
}
.myCompanyScrollable table tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-y: scroll;
}
.myCompanyScrollable table tbody tr {
    width: 100%;
}
.myCompanyScrollable table tbody tr {
    display: table;
     width: 100%;
    table-layout: fixed;
}
/* decorations */
.myCompanyScrollable {
    border: 1px solid black;
    padding: 0.3em;
}
.myCompanyScrollable table {
    border: 1px solid lightgrey;
}
.myCompanyScrollable table td, .myCompanyScrollable table th {
    padding: 0.3em;
    border: 1px solid lightgrey;
}
.myCompanyScrollable table th {
    border: 1px solid grey;
}

Answer 4

This issue is solved in primefaces latest version ( 7.0 )

https://github.com/primefaces/primefaces

Answer 5

Try below jquery code

$('.datatableclassname').find(('div.ui-datatable-scrollable-header ')+'div.ui-dt-c').each(function(index) {
            var cur_obj = $(this);
            var column_num = parseInt(index+1);
            $('.datatableclassname div.ui-datatable-scrollable-body tr > td:nth-child('+column_num+') > div.ui-dt-c').css('width',cur_obj.width()+'px');
        });