diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue index ece4b3a93..7c3446fdf 100755 --- a/src/views/datatable/DataTableScrollDemo.vue +++ b/src/views/datatable/DataTableScrollDemo.vue @@ -3,7 +3,7 @@

DataTable Scroll

-

Data scrolling is available horizontally, vertically or both. Virtual Scrolling mode is also provided to deal with large datasets by loading data on demand during scrolling.

+

Data scrolling is available horizontally, vertically or both with support for frozen rows and columns.

@@ -128,16 +128,214 @@
-
- - 

 

+import CustomerService from '../../service/CustomerService';
 
+export default {
+    data() {
+        return {
+            customers1: null,
+            customers2: null,
+            customersGrouped: null,
+            lockedCustomers: [],
+            unlockedCustomers: null,
+            loading: false,
+            dialogVisible: false,
+            idFrozen: false
+        }
+    },
+    customerService: null,
+    created() {
+        this.customerService = new CustomerService();
+    },
+    mounted() {
+        this.loading = true;
+
+        this.customerService.getCustomersLarge().then(data => {
+            this.customers1 = data;
+            this.loading = false;
+        });
+        this.customerService.getCustomersMedium().then(data => this.customers2 = data);
+        this.customerService.getCustomersMedium().then(data => this.unlockedCustomers = data);
+        this.customerService.getCustomersMedium().then(data => this.customersGrouped = data);
+
+        this.lockedCustomers = [
+            {
+                id: 5135,
+                name: "Geraldine Bisset",
+                country: {
+                    name: "France",
+                   code: "fr"
+                },
+                company: "Bisset Group",
+                status: "proposal",
+                date: "2019-05-05",
+                activity: 0,
+                representative: {
+                    name: "Amy Elsner",
+                    image: "amyelsner.png"
+                }
+            }
+        ];
+    },
+    methods: {
+        openDialog() {
+            this.dialogVisible = true;
+        },
+        closeDialog() {
+            this.dialogVisible = false;
+        },
+        formatCurrency(value) {
+            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
+        },
+        calculateCustomerTotal(name) {
+            let total = 0;
+
+            if (this.customersGrouped) {
+                for (let customer of this.customersGrouped) {
+                    if (customer.representative.name === name) {
+                        total++;
+                    }
+                }
+            }
+
+            return total;
+        },
+        toggleLock(data, frozen, index) {
+            if (frozen) {
+                this.lockedCustomers = this.lockedCustomers.filter((c, i) => i !== index);
+                this.unlockedCustomers.push(data);
+            }
+            else {
+                this.unlockedCustomers = this.unlockedCustomers.filter((c, i) => i !== index);
+                this.lockedCustomers.push(data);
+            }
+
+            this.unlockedCustomers.sort((val1, val2) => {
+                return val1.id < val2.id ? -1 : 1;
+            });
+        }
+    }
+}
@@ -147,7 +345,6 @@ diff --git a/src/views/dropdown/DropdownDemo.vue b/src/views/dropdown/DropdownDemo.vue index e51f96148..89ab5cfed 100755 --- a/src/views/dropdown/DropdownDemo.vue +++ b/src/views/dropdown/DropdownDemo.vue @@ -25,7 +25,6 @@
- {{selectedGroupedCity}}
Advanced with Templating, Filtering and Clear Icon
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue index 20d02e462..cbf881ad9 100755 --- a/src/views/dropdown/DropdownDoc.vue +++ b/src/views/dropdown/DropdownDoc.vue @@ -570,6 +570,7 @@ export default {