fixes #381

xaksis · Sep 30, 2018 · ae60de6 · ae60de6
1 parent 5817148
commit ae60de6
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 32 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -17,10 +17,12 @@
       :rows="rows"
       theme="black-rhino"
       :line-numbers="true"
+      max-height="200px"
+      :fixed-header="true"
       :pagination-options="{
         mode: 'pages',
         perPage: 3,
-        enabled: true,
+        enabled: false,
       }"
       :select-options="{
         enabled: false,

diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -60,37 +60,40 @@
           </slot>
         </div>
       </div>
-      <table
-        v-if="fixedHeader"
-        class="vgt-fixed-header"
-        :class="tableStyleClasses">
-        <!-- Table header -->
-        <thead is="vgt-table-header"
-          ref="table-header-secondary"
-          @on-toggle-select-all="toggleSelectAll"
-          @on-sort-change="sort"
-          @filter-changed="filterRows"
-          :columns="columns"
-          :line-numbers="lineNumbers"
-          :selectable="selectable"
-          :all-selected="allSelected"
-          :all-selected-indeterminate="allSelectedIndeterminate"
-          :mode="mode"
-          :typed-columns="typedColumns"
-          :sort-column="sortColumn"
-          :sort-type="sortType"
-          :isSortableColumn="isSortableColumn"
-          :getClasses="getClasses"
-          :searchEnabled="searchEnabled"
-          :paginated="paginated"
-          :table-ref="$refs.table">
-          <template slot="table-column" slot-scope="props">
-            <slot name="table-column" :column="props.column">
-              <span>{{props.column.label}}</span>
-            </slot>
-          </template>
-        </thead>
-      </table>
+      <div
+        :class="{'vgt-responsive': responsive}">
+        <table
+          v-if="fixedHeader"
+          class="vgt-fixed-header"
+          :class="tableStyleClasses">
+          <!-- Table header -->
+          <thead is="vgt-table-header"
+            ref="table-header-secondary"
+            @on-toggle-select-all="toggleSelectAll"
+            @on-sort-change="sort"
+            @filter-changed="filterRows"
+            :columns="columns"
+            :line-numbers="lineNumbers"
+            :selectable="selectable"
+            :all-selected="allSelected"
+            :all-selected-indeterminate="allSelectedIndeterminate"
+            :mode="mode"
+            :typed-columns="typedColumns"
+            :sort-column="sortColumn"
+            :sort-type="sortType"
+            :isSortableColumn="isSortableColumn"
+            :getClasses="getClasses"
+            :searchEnabled="searchEnabled"
+            :paginated="paginated"
+            :table-ref="$refs.table">
+            <template slot="table-column" slot-scope="props">
+              <slot name="table-column" :column="props.column">
+                <span>{{props.column.label}}</span>
+              </slot>
+            </template>
+          </thead>
+        </table>
+      </div>
       <div
         :class="{'vgt-responsive': responsive}"
         :style="wrapperStyles">

diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
@@ -29,6 +29,7 @@
 .vgt-responsive {
   width: 100%;
   overflow-x: auto;
+  position: relative;
 }
 
 .vgt-text-disabled{