Primefaces datatable frozen columns misallignment

Question

We have a data table as shown in the image. There are 3 frozen columns and rest scrollable. The frozen columns are misalligned as shown. If frozen columns attribute is removed, the table looks properly. Any suggestions to solve the problem.

Answer 1

I have had similar issues in the past with frozen datatable and using many different scripts across different posts I have found the below script works in ALL browsers and does not require you to set a height it will calculate it. As an added bonus it also triggers a browser event to force the table to resize properly.

synchronizeRowsHeight : function() {
   var $leftRows = $('.ui-datatable-frozenlayout-left').find('tr');
   var $rightRows = $('.ui-datatable-frozenlayout-right').find('tr');

   $leftRows.each(function(index) {
         var $leftRow = $(this);
         var $leftHeight = $leftRow.innerHeight();
         var $rightRow = $rightRows.eq(index);
         var $rightHeight = $rightRow.innerHeight();

         if ($rightHeight > $leftHeight) {
                $leftRow.innerHeight($rightHeight);
                var diff = $rightHeight - $leftRow.innerHeight();
                if (diff != 0)
                       $leftRow.innerHeight($rightHeight + diff);
         } else if ($rightHeight < $leftHeight) {
                $rightRow.innerHeight($leftHeight);
                var diff = $leftHeight - $rightRow.innerHeight();
                if (diff != 0)
                       $rightRow.innerHeight($leftHeight + diff);
         }
   })

   // fire a resize event to tell the table to repaint
   $(window).trigger('resize');
}

Answer 2

We have the same Problem in a similar use case. As to my knowledge there is no nice solution to this.

The easiest way, as we solved it, is to resize the heights of the smaller tr's and th's every time the datatable is redrawn (including ajax events like sorting etc.)

Another possible way would be to prevent different heights by e.g. stop the lines from breaking.

Answer 3

Primefaces datatable frozen:

Frozen datatable has 2 parts left(fixed) and right(dynamic/scrollable)

<script type='text/javascript'>
function synchronizeRowsHeight() {
  //aligning table header row
  var $leftHeaderRow = $('.ui-datatable-frozenlayout-left .ui-datatable-scrollable-header-box tr');
  var $rightHeaderRow = $('.ui-datatable-frozenlayout-right .ui-datatable-scrollable-header-box tr');
  $leftHeaderRow.outerHeight(35);//height(px) in int    
  $rightHeaderRow.outerHeight(35);//height(px) in int   

  //aligning table data rows
   var $leftRows = $('.ui-datatable-frozenlayout-left .ui-datatable-scrollable-body tr');
   var $rightRows = $('.ui-datatable-frozenlayout-right .ui-datatable-scrollable-body tr');
   $leftRows.each(function (index) {
     var $leftRow = $leftRows.eq(index); 
     var $rightRow = $rightRows.eq(index);
     $rightRow.innerHeight($leftRow.innerHeight());
     $leftRow.innerHeight($rightRow.innerHeight());       
  });   
}
</script>

Call the above javascript function from your bean like

RequestContext.getCurrentInstance().execute("synchronizeRowsHeight();");