Invalid data sharing as unrelated data

Question

We have a data table as shown. There are 3 frozen columns and scrollable rest. Frozen columns are incorrectly configured as shown. If the frozen columns attribute is removed, the table looks right. Any suggestions to solve the problem.

Answer 1

I had similar problems in the past with frozen data and using a lot of different scripts in different posts, which I found that the script below works in all browsers and does not require setting the height that it will calculate. As an added bonus, it also fires a browser event to force the table to resize correctly.

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 far as I know, there is nothing good about it.

The easiest way, as we decided, is to resize smaller tr and th each time a datatable is restored (including ajax events such as sorting, etc.).

, . .

Answer 3

Primary files frozen with datatable:

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