diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue index 1357818c7..bb66932b8 100755 --- a/src/views/datatable/DataTableScrollDemo.vue +++ b/src/views/datatable/DataTableScrollDemo.vue @@ -10,11 +10,11 @@
Vertical
- - - - - + + + + +
@@ -26,39 +26,38 @@
- - - - - - + + + + + +
Virtual Scroll
- - + - + - + - + @@ -68,45 +67,43 @@
Horizontal and Vertical
- - - - - - - - - + + + + + + + + +
Frozen Rows
- - - - - + + + + +
Frozen Columns
- - + + - - - - - - - - - + + + + + + +
@@ -116,197 +113,191 @@ -import CarService from '../../service/CarService'; +import CustomerService from '../../service/CustomerService'; export default { data() { return { - cars: null, - frozenCars: null, - lazyCars: null, + customers: null, + virtualCustomers: null, lazyTotalRecords: 0, + frozenValue: null, loading: false, dialogVisible: false } }, - carService: null, + customerService: null, inmemoryData: null, created() { - this.carService = new CarService(); - - this.inmemoryData = [ - {"brand": "VW", "year": 2012, "color": "Orange"}, - {"brand": "Audi", "year": 2011, "color": "Black"}, - {"brand": "Renault", "year": 2005, "color": "Gray"}, - {"brand": "BMW", "year": 2003, "color": "Blue"}, - {"brand": "Mercedes", "year": 1995, "color": "Orange"}, - {"brand": "Volvo", "year": 2005, "color": "Black"}, - {"brand": "Honda", "year": 2012, "color": "Yellow"}, - {"brand": "Jaguar", "year": 2013, "color": "Orange"}, - {"brand": "Ford", "year": 2000, "color": "Black"}, - {"brand": "Fiat", "year": 2013, "color": "Red"}, - {"brand": "VW", "year": 2012, "color": "Orange"}, - {"brand": "Audi", "year": 2011, "color": "Black"}, - {"brand": "Renault", "year": 2005, "color": "Gray"}, - {"brand": "BMW", "year": 2003, "color": "Blue"}, - {"brand": "Mercedes", "year": 1995, "color": "Orange"}, - {"brand": "Volvo", "year": 2005, "color": "Black"}, - {"brand": "Honda", "year": 2012, "color": "Yellow"}, - {"brand": "Jaguar", "year": 2013, "color": "Orange"}, - {"brand": "Ford", "year": 2000, "color": "Black"}, - {"brand": "Fiat", "year": 2013, "color": "Red"}, - {"brand": "VW", "year": 2012, "color": "Orange"}, - {"brand": "Audi", "year": 2011, "color": "Black"}, - {"brand": "Renault", "year": 2005, "color": "Gray"}, - {"brand": "BMW", "year": 2003, "color": "Blue"}, - {"brand": "Mercedes", "year": 1995, "color": "Orange"}, - {"brand": "Volvo", "year": 2005, "color": "Black"}, - {"brand": "Honda", "year": 2012, "color": "Yellow"}, - {"brand": "Jaguar", "year": 2013, "color": "Orange"}, - {"brand": "Ford", "year": 2000, "color": "Black"}, - {"brand": "Fiat", "year": 2013, "color": "Red"}, - {"brand": "VW", "year": 2012, "color": "Orange"}, - {"brand": "Audi", "year": 2011, "color": "Black"}, - {"brand": "Renault", "year": 2005, "color": "Gray"}, - {"brand": "BMW", "year": 2003, "color": "Blue"}, - {"brand": "Mercedes", "year": 1995, "color": "Orange"}, - {"brand": "Volvo", "year": 2005, "color": "Black"}, - {"brand": "Honda", "year": 2012, "color": "Yellow"}, - {"brand": "Jaguar", "year": 2013, "color": "Orange"}, - {"brand": "Ford", "year": 2000, "color": "Black"}, - {"brand": "Fiat", "year": 2013, "color": "Red"} - ]; + this.customerService = new CustomerService(); }, mounted() { this.loading = true; - this.carService.getCarsLarge().then(data => { - this.cars = data + this.customerService.getCustomersLarge().then(data => { + this.customers = data; this.loading = false; }); + this.customerService.getCustomersXLarge().then(data => this.inmemoryData = data); - this.frozenCars = [ - {brand: "BMW", year: 2013, color: "Grey", vin: "fh2uf23"}, - {brand: "Chevrolet", year: 2011, color: "Black", vin: "4525g23"} + this.frozenValue = [ + { + id: 1255, + name: "James McAdams", + country: { + name: "United States", + code: "us" + }, + company: "McAdams Consulting Ltd", + date: "2014-02-13", + status: "qualified", + activity: 23, + representative: { + name: "Ioni Bowcher", + image: "ionibowcher.png" + } + }, + { + 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" + } + } ]; setTimeout(() => { - this.lazyCars = this.loadChunk(0, 40); - this.lazyTotalRecords = 250000; + this.virtualCustomers = this.loadChunk(0, 40); + this.lazyTotalRecords = 500; }, 250); }, methods: { loadChunk(index, length) { let chunk = []; - for (let i = 0; i < length; i++) { - chunk[i] = {...this.inmemoryData[i], ...{vin: (index + i)}}; + for (let i = 0; i < length; i++) { + chunk[i] = {...this.inmemoryData[i]}; } return chunk; }, onVirtualScroll(event) { - /* - For demo purposes keep loading the same dataset, - in a real production application, this data should come from server by building the query with LazyLoadEvent options - */ setTimeout(() => { //last chunk - if (event.first === 249980) - this.lazyCars = this.loadChunk(event.first, 20) + if (event.first === 480) + this.virtualCustomers = this.loadChunk(event.first, 20) else - this.lazyCars = this.loadChunk(event.first, event.rows) + this.virtualCustomers = this.loadChunk(event.first, event.rows) }, 250); }, openDialog() { @@ -317,17 +308,6 @@ export default { } } } - - - -.loading-text { - display: block; - background-color: #f1f1f1; - min-height: 19px; - animation: pulse 1s infinite ease-in-out; - text-indent: -99999px; - overflow: hidden; -} @@ -336,105 +316,89 @@ export default {