CODEWITHSUNDEEP
jsf-2primefacesdatatable
user3516088
user3516088

Reputation: 155

Primefaces datatable frozen columns misallignment

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.

frozen columns misallignemnt

Upvotes: 5

Views: 4479

Answers (3)

Melloware
Melloware

Reputation: 12019

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

Upvotes: 4

Sanketik Gote
Sanketik Gote

Reputation: 51

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();");

Upvotes: 1

Abaddon666
Abaddon666

Reputation: 1623

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.

Upvotes: 0

Related Questions