Alignement des en-têtes datables avec les primitives

Question

J'ai un problème avec les primitives datables. Comme vous pouvez le voir, il y a un problème d'alignement avec les colonnes border et headers. Est-ce un bug de primefaces ou il y a quelque chose qui ne va pas avec ma datatable? Par ailleurs, datatable a des colonnes dynamiques.

<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

Faites un tour,

Remove scrollable = true 

et créer de nouvelles classes de style comme,

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

appliquent styleClass-p:datatable comme styleClass="ui-datatable-hor-scroll"

Answer 2

Essayez ci-dessous le code jquery

$('.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'); 
     }); 

Answer 3

Pour toute personne qui a ce problème - Primfaces scrollable continue d'avoir des problèmes. Je suis sur 5.1 et ça ne marche pas.

Il suffit d'utiliser une datatable normale et ensuite utiliser CSS3 pour obtenir le défilement au travail:

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

Bien sûr, ne pas utiliser la table, thead, tr etc. pour des éléments de ciblage. A la place, utilisez les classes css pour obtenir la bonne date. La partie délicate est que pour définir la taille du volet de défilement, vous devez cibler la div entourant directement la table. Vous pouvez voir comment je l'ai fait ci-dessous

Heres plus sur le FlexBox CSS3: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Heres un exemple de css j'ai utilisé pour primefaces. J'ai juste enveloppé mon datatable avec un <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; 
}