wip - add FixedColumn::height

resources/views/grid/fixed-table.blade.php

@@ -31,7 +31,7 @@
 
     <div class="table-responsive table-wrapper">
         <div class="tables-container">
-            <div class="table-wrap table-main">
+            <div class="table-wrap table-main" data-height="{{ $tableHeight }}">
                 <table class="custom-data-table dataTable {{ $grid->formatTableClass() }}" id="{{ $tableId }}">
                     <thead>
                     @if ($headers = $grid->getComplexHeaders())
@@ -74,7 +74,7 @@
             </div>
 
             @if ($grid->leftVisibleColumns()->isNotEmpty() || $grid->leftVisibleComplexColumns()->isNotEmpty())
-                <div class="table-wrap table-fixed table-fixed-left">
+                <div class="table-wrap table-fixed table-fixed-left" data-height="{{ $tableHeight }}">
                     <table class="custom-data-table dataTable {{ $grid->formatTableClass() }} ">
                         <thead>
 
@@ -118,7 +118,7 @@
             @endif
 
             @if ($grid->rightVisibleColumns()->isNotEmpty() || $grid->rightVisibleComplexColumns()->isNotEmpty())
-                <div class="table-wrap table-fixed table-fixed-right">
+                <div class="table-wrap table-fixed table-fixed-right" data-height="{{ $tableHeight }}">
                     <table class="custom-data-table dataTable {{ $grid->formatTableClass() }} ">
                         <thead>
                         @if ($grid->getComplexHeaders())

src/Grid/Concerns/CanFixColumns.php

@@ -18,7 +18,7 @@ trait CanFixColumns
      * @param int $head
      * @param int $tail
      *
-     * @return $this
+     * @return FixColumns
      */
     public function fixColumns(int $head, int $tail = -1)
     {
@@ -26,7 +26,7 @@ trait CanFixColumns
 
         $this->resetActions();
 
-        return $this;
+        return $this->fixColumns;
     }
 
     protected function resetActions()

src/Grid/FixColumns.php

@@ -48,6 +48,11 @@ class FixColumns
      */
     protected $view = 'admin::grid.fixed-table';
 
+    /**
+     * @var int
+     */
+    protected $height;
+
     /**
      * FixColumns constructor.
      *
@@ -99,12 +104,26 @@ class FixColumns
         return $this->complexRight;
     }
 
+    /**
+     * @param int $height px
+     *
+     * @return $this
+     */
+    public function height(int $height)
+    {
+        $this->height = $height;
+
+        return $this;
+    }
+
     /**
      * @return \Closure
      */
     public function apply()
     {
         $this->grid->view($this->view);
+        $this->grid->with(['tableHeight' => $this->height]);
+
         $complexHeaders = $this->grid->getComplexHeaders();
 
         if ($this->head > 0) {
@@ -150,6 +169,8 @@ class FixColumns
         $script = <<<'JS'
 
 (function () {
+    var $tableMain = $('.table-main');
+    
     var theadHeight = $('.table-main thead tr').outerHeight();
     $('.table-fixed thead tr').outerHeight(theadHeight);
     
@@ -163,16 +184,21 @@ class FixColumns
         $('.table-fixed-right tbody tr').eq(i).outerHeight(height);
     });
     
-    if ($('.table-main').width() >= $('.table-main').prop('scrollWidth')) {
+    if ($tableMain.width() >= $tableMain.prop('scrollWidth')) {
         $('.table-fixed').hide();
     } else {
-        var height = ($(window).height() - 210);
+        var height = ($(window).height() - 215);
+        
+        $tableMain.each(function (k, v) {
+            $(v).css({height: ($(v).data('height') || height) + 'px'});
+        });
+        $('.table-fixed-right,.table-fixed-left').each(function (k, v) {
+            $(v).css({height: (($(v).data('height') || height) - 16) + 'px'});
+        });
         
-        $('.table-main,.table-fixed').css({height: height + 'px'});
         $('.table-fixed-right').css({right: '12px'});
-        $('.table-fixed-right,.table-fixed-left').css({height: (height - 16) + 'px'});
         
-        $('.table-main').scroll(function () {
+        $tableMain.scroll(function () {
             var self = $(this); 
             
             self.parents('.tables-container').find('.table-fixed-right,.table-fixed-left').scrollTop(self.scrollTop());