vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Scroll demo update

pull/358/head
cagataycivici 2020-06-30 16:41:55 +03:00
parent 466cc61e51
commit 7531811ced
1 changed files with 226 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

488
src/views/datatable/DataTableScrollDemo.vue
View File

@ -10,11 +10,11 @@
<div class="content-section implementation">
<div class="card">
<h5>Vertical</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" :loading="loading">
<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 :value="customers" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="representative.name" header="Representative"></Column>
<Column field="status" header="Status"></Column>
</DataTable>
</div>
@ -26,39 +26,38 @@
<Button label="Show" icon="pi pi-external-link" @click="openDialog" />
</div>
<Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
<DataTable :value="cars" :scrollable="true" scrollHeight="flex">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
<DataTable :value="customers" :scrollable="true" scrollHeight="flex">
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="representative.name" header="Representative"></Column>
<Column field="status" header="Company"></Column>
</DataTable>
<template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeDialog" />
<Button label="No" icon="pi pi-times" @click="closeDialog" class="p-button-secondary"/>
<Button label="Ok" icon="pi pi-check" @click="closeDialog" />
</template>
</Dialog>
<div class="card">
<h5>Virtual Scroll</h5>
<DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
<DataTable :value="virtualCustomers" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
:virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
<Column field="vin" header="Vin">
<Column field="name" header="Name">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="year" header="Year">
<Column field="country.name" header="Country">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="brand" header="Brand">
<Column field="representative.name" header="Representative">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="color" header="Color">
<Column field="status" header="Status">
<template #loading>
<span class="loading-text"></span>
</template>
@ -68,45 +67,43 @@
<div class="card">
<h5>Horizontal and Vertical</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading">
<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 :value="customers" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading">
<Column field="id" header="Id" headerStyle="width: 250px" columnKey="id"></Column>
<Column field="name" header="Name" headerStyle="width: 250px" columnKey="name"></Column>
<Column field="country.name" header="Country" headerStyle="width: 250px" columnKey="country"></Column>
<Column field="date" header="Date" headerStyle="width: 250px" columnKey="date"></Column>
<Column field="company" header="Country" headerStyle="width: 250px" columnKey="company"></Column>
<Column field="status" header="Status" headerStyle="width: 250px" columnKey="status"></Column>
<Column field="activity" header="Activity" headerStyle="width: 250px" columnKey="activity"></Column>
<Column field="representative.name" header="Representative" headerStyle="width: 250px" columnKey="representative"></Column>
</DataTable>
</div>
<div class="card">
<h5>Frozen Rows</h5>
<DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading">
<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 :value="customers" :frozenValue="frozenValue" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="representative.name" header="Representative"></Column>
<Column field="status" header="Status"></Column>
</DataTable>
</div>
<div class="card">
<h5>Frozen Columns</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true">
<DataTable :value="customers" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
<Column field="name" header="Name" headerStyle="width: 300px" columnKey="name" :frozen="true">
<template #body="slotProps">
<span style="font-weight: bold">{{slotProps.data.vin}}</span>
<span style="font-weight: 700">{{slotProps.data.name}}</span>
</template>
</Column>
<Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_1"></Column>
<Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_1"></Column>
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_1"></Column>
<Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_2"></Column>
<Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_2"></Column>
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_2"></Column>
<Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_3"></Column>
<Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_3"></Column>
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_3"></Column>
<Column field="id" header="Id" headerStyle="width: 300px" columnKey="id"></Column>
<Column field="country.name" header="Country" headerStyle="width: 300px" columnKey="country"></Column>
<Column field="date" header="Date" headerStyle="width: 300px" columnKey="date"></Column>
<Column field="company" header="Country" headerStyle="width: 300px" columnKey="company"></Column>
<Column field="status" header="Status" headerStyle="width: 300px" columnKey="status"></Column>
<Column field="activity" header="Activity" headerStyle="width: 300px" columnKey="activity"></Column>
<Column field="representative.name" header="Representative" headerStyle="width: 300px" columnKey="representative"></Column>
</DataTable>
</div>
</div>
@ -116,197 +113,191 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Vertical&lt;/h3&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" :loading="loading"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Vertical&lt;/h5&gt;
&lt;DataTable :value="customers" :scrollable="true" scrollHeight="200px" :loading="loading"&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Flexible Scroll&lt;/h3&gt;
&lt;p&gt;Flex scroll feature makes the scrollable viewport section dynamic so that it can grow or shrink relative to the parent size of the table.
Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.&lt;/p&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Flexible Scroll&lt;/h5&gt;
&lt;p&gt;Flex scroll feature makes the scrollable viewport section dynamic so that it can grow or shrink relative to the parent size of the table.
Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.&lt;/p&gt;
&lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
&lt;Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;Button label="Show" icon="pi pi-external-link" @click="openDialog" /&gt;
&lt;/div&gt;
&lt;Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
&lt;DataTable :value="customers" :scrollable="true" scrollHeight="flex"&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Company"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;template #footer&gt;
&lt;Button label="Yes" icon="pi pi-check" @click="closeDialog" /&gt;
&lt;Button label="No" icon="pi pi-times" @click="closeDialog" class="p-button-secondary"/&gt;
&lt;Button label="Ok" icon="pi pi-check" @click="closeDialog" /&gt;
&lt;/template&gt;
&lt;/Dialog&gt;
&lt;h3&gt;Virtual Scroll&lt;/h3&gt;
&lt;DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
:virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords"&gt;
&lt;Column field="vin" header="Vin"&gt;
&lt;template #loading&gt;
&lt;span class="loading-text"&gt;&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;
&lt;template #loading&gt;
&lt;span class="loading-text"&gt;&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;
&lt;template #loading&gt;
&lt;span class="loading-text"&gt;&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;
&lt;template #loading&gt;
&lt;span class="loading-text"&gt;&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Virtual Scroll&lt;/h5&gt;
&lt;DataTable :value="virtualCustomers" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
:virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords"&gt;
&lt;Column field="name" header="Name"&gt;
&lt;template #loading&gt;
&lt;span class="loading-text"&gt;&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="country.name" header="Country"&gt;
&lt;template #loading&gt;
&lt;span class="loading-text"&gt;&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative"&gt;
&lt;template #loading&gt;
&lt;span class="loading-text"&gt;&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="status" header="Status"&gt;
&lt;template #loading&gt;
&lt;span class="loading-text"&gt;&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal and Vertical&lt;/h3&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading"&gt;
&lt;Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_1"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_1"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_1"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_2"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_2"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_2"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Horizontal and Vertical&lt;/h5&gt;
&lt;DataTable :value="customers" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading"&gt;
&lt;Column field="id" header="Id" headerStyle="width: 250px" columnKey="id"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" headerStyle="width: 250px" columnKey="name"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country" headerStyle="width: 250px" columnKey="country"&gt;&lt;/Column&gt;
&lt;Column field="date" header="Date" headerStyle="width: 250px" columnKey="date"&gt;&lt;/Column&gt;
&lt;Column field="company" header="Country" headerStyle="width: 250px" columnKey="company"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status" headerStyle="width: 250px" columnKey="status"&gt;&lt;/Column&gt;
&lt;Column field="activity" header="Activity" headerStyle="width: 250px" columnKey="activity"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" headerStyle="width: 250px" columnKey="representative"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Frozen Rows&lt;/h3&gt;
&lt;DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Frozen Rows&lt;/h5&gt;
&lt;DataTable :value="customers" :frozenValue="frozenValue" :scrollable="true" scrollHeight="200px" :loading="loading"&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Frozen Columns&lt;/h3&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading"&gt;
&lt;Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true"&gt;
&lt;template #body="slotProps"&gt;
&lt;span style="font-weight: bold"&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_1"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_1"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_1"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_2"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_2"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_2"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_3"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_3"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_3"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Frozen Columns&lt;/h5&gt;
&lt;DataTable :value="customers" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading"&gt;
&lt;Column field="name" header="Name" headerStyle="width: 300px" columnKey="name" :frozen="true"&gt;
&lt;template #body="slotProps"&gt;
&lt;span style="font-weight: 700"&gt;{{slotProps.data.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="id" header="Id" headerStyle="width: 300px" columnKey="id"&gt;&lt;/Column&gt;
&lt;Column field="country.name" header="Country" headerStyle="width: 300px" columnKey="country"&gt;&lt;/Column&gt;
&lt;Column field="date" header="Date" headerStyle="width: 300px" columnKey="date"&gt;&lt;/Column&gt;
&lt;Column field="company" header="Country" headerStyle="width: 300px" columnKey="company"&gt;&lt;/Column&gt;
&lt;Column field="status" header="Status" headerStyle="width: 300px" columnKey="status"&gt;&lt;/Column&gt;
&lt;Column field="activity" header="Activity" headerStyle="width: 300px" columnKey="activity"&gt;&lt;/Column&gt;
&lt;Column field="representative.name" header="Representative" headerStyle="width: 300px" columnKey="representative"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
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 &lt; 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 {
}
}
}
</CodeHighlight>
<CodeHighlight lang="css">
.loading-text {
display: block;
background-color: #f1f1f1;
min-height: 19px;
animation: pulse 1s infinite ease-in-out;
text-indent: -99999px;
overflow: hidden;
}
</CodeHighlight>
</TabPanel>
</TabView>
@ -336,105 +316,89 @@ export default {
</template>
<script>
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)}};
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() {