From b50286bca6e0d0867c288c65c38eb8e698d97a2c Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 18 Nov 2019 17:52:30 +0300
Subject: [PATCH] Implemented Frozen Rows

---
 src/components/datatable/DataTable.vue      | 17 ++++++++++-
 src/components/datatable/ScrollableView.vue |  1 +
 src/views/datatable/DataTableScrollDemo.vue | 32 +++++++++++++++------
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index c190036b2..c09322c38 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -60,6 +60,17 @@
                         @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
                         @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
                 </template>
+                <template #frozenbody>
+                    <DTTableBody :value="frozenValue" :columns="columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
+                        :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
+                        :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
+                        :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$scopedSlots"
+                        @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
+                        @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
+                        @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
+                        @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
+                        @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
+                </template>
                 <template #footer>
                     <DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" />
                 </template>
@@ -278,7 +289,11 @@ export default {
         scrollHeight: {
             type: String,
             default: null
-        }
+        },
+        frozenValue: {
+            type: Array,
+            default: null
+        },
     },
     data() {
         return {
diff --git a/src/components/datatable/ScrollableView.vue b/src/components/datatable/ScrollableView.vue
index 6f07d4615..180ce433e 100644
--- a/src/components/datatable/ScrollableView.vue
+++ b/src/components/datatable/ScrollableView.vue
@@ -7,6 +7,7 @@
                         <col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
                     </colgroup>
                     <slot name="header"></slot>
+                    <slot name="frozenbody"></slot>
                 </table>
             </div>
         </div>
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index dbd9103dd..90ed12762 100644
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -20,14 +20,22 @@
 
             <h3>Horizontal and Vertical</h3>
             <DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px">
-                <Column field="vin" header="Vin" headerStyle="width: 250px"></Column>
-                <Column field="year" header="Year" headerStyle="width: 250px"></Column>
-                <Column field="brand" header="Brand" headerStyle="width: 250px"></Column>
-                <Column field="color" header="Color" headerStyle="width: 250px"></Column>
-                <Column field="vin" header="Vin" headerStyle="width: 250px"></Column>
-                <Column field="year" header="Year" headerStyle="width: 250px"></Column>
-                <Column field="brand" header="Brand" headerStyle="width: 250px"></Column>
-                <Column field="color" header="Color" headerStyle="width: 250px"></Column>
+                <Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"></Column>
+                <Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_1"></Column>
+                <Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_1"></Column>
+                <Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_1"></Column>
+                <Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_2"></Column>
+                <Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_2"></Column>
+                <Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_2"></Column>
+                <Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"></Column>
+            </DataTable>
+
+            <h3>Frozen Rows</h3>
+            <DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px">
+                <Column field="vin" header="Vin"></Column>
+                <Column field="year" header="Year"></Column>
+                <Column field="brand" header="Brand"></Column>
+                <Column field="color" header="Color"></Column>
             </DataTable>
 		</div>
 
@@ -55,7 +63,8 @@ import DataTableSubMenu from './DataTableSubMenu';
 export default {
     data() {
         return {
-            cars: null
+            cars: null,
+            frozenCars: null
         }
     },
     carService: null,
@@ -64,6 +73,11 @@ export default {
     },
     mounted() {
         this.carService.getCarsLarge().then(data => this.cars = data);
+
+        this.frozenCars = [
+            {brand: "BMW", year: 2013, color: "Grey", vin: "fh2uf23"},
+            {brand: "Chevrolet", year: 2011, color: "Black", vin: "4525g23"}
+        ];
     },
     components: {
         'DataTableSubMenu': DataTableSubMenu