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="content-section implementation">
<div class="card"> <div class="card">
<h5>Vertical</h5> <h5>Vertical</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" :loading="loading"> <DataTable :value="customers" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column> <Column field="name" header="Name"></Column>
<Column field="year" header="Year"></Column> <Column field="country.name" header="Country"></Column>
<Column field="brand" header="Brand"></Column> <Column field="representative.name" header="Representative"></Column>
<Column field="color" header="Color"></Column> <Column field="status" header="Status"></Column>
</DataTable> </DataTable>
</div> </div>
@ -26,39 +26,38 @@
<Button label="Show" icon="pi pi-external-link" @click="openDialog" /> <Button label="Show" icon="pi pi-external-link" @click="openDialog" />
</div> </div>
<Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '50vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"> <Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
<DataTable :value="cars" :scrollable="true" scrollHeight="flex"> <DataTable :value="customers" :scrollable="true" scrollHeight="flex">
<Column field="vin" header="Vin"></Column> <Column field="name" header="Name"></Column>
<Column field="year" header="Year"></Column> <Column field="country.name" header="Country"></Column>
<Column field="brand" header="Brand"></Column> <Column field="representative.name" header="Representative"></Column>
<Column field="color" header="Color"></Column> <Column field="status" header="Company"></Column>
</DataTable> </DataTable>
<template #footer> <template #footer>
<Button label="Yes" icon="pi pi-check" @click="closeDialog" /> <Button label="Ok" icon="pi pi-check" @click="closeDialog" />
<Button label="No" icon="pi pi-times" @click="closeDialog" class="p-button-secondary"/>
</template> </template>
</Dialog> </Dialog>
<div class="card"> <div class="card">
<h5>Virtual Scroll</h5> <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"> :virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
<Column field="vin" header="Vin"> <Column field="name" header="Name">
<template #loading> <template #loading>
<span class="loading-text"></span> <span class="loading-text"></span>
</template> </template>
</Column> </Column>
<Column field="year" header="Year"> <Column field="country.name" header="Country">
<template #loading> <template #loading>
<span class="loading-text"></span> <span class="loading-text"></span>
</template> </template>
</Column> </Column>
<Column field="brand" header="Brand"> <Column field="representative.name" header="Representative">
<template #loading> <template #loading>
<span class="loading-text"></span> <span class="loading-text"></span>
</template> </template>
</Column> </Column>
<Column field="color" header="Color"> <Column field="status" header="Status">
<template #loading> <template #loading>
<span class="loading-text"></span> <span class="loading-text"></span>
</template> </template>
@ -68,45 +67,43 @@
<div class="card"> <div class="card">
<h5>Horizontal and Vertical</h5> <h5>Horizontal and Vertical</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading"> <DataTable :value="customers" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"></Column> <Column field="id" header="Id" headerStyle="width: 250px" columnKey="id"></Column>
<Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_1"></Column> <Column field="name" header="Name" headerStyle="width: 250px" columnKey="name"></Column>
<Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_1"></Column> <Column field="country.name" header="Country" headerStyle="width: 250px" columnKey="country"></Column>
<Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_1"></Column> <Column field="date" header="Date" headerStyle="width: 250px" columnKey="date"></Column>
<Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_2"></Column> <Column field="company" header="Country" headerStyle="width: 250px" columnKey="company"></Column>
<Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_2"></Column> <Column field="status" header="Status" headerStyle="width: 250px" columnKey="status"></Column>
<Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_2"></Column> <Column field="activity" header="Activity" headerStyle="width: 250px" columnKey="activity"></Column>
<Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"></Column> <Column field="representative.name" header="Representative" headerStyle="width: 250px" columnKey="representative"></Column>
</DataTable> </DataTable>
</div> </div>
<div class="card"> <div class="card">
<h5>Frozen Rows</h5> <h5>Frozen Rows</h5>
<DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading"> <DataTable :value="customers" :frozenValue="frozenValue" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column> <Column field="name" header="Name"></Column>
<Column field="year" header="Year"></Column> <Column field="country.name" header="Country"></Column>
<Column field="brand" header="Brand"></Column> <Column field="representative.name" header="Representative"></Column>
<Column field="color" header="Color"></Column> <Column field="status" header="Status"></Column>
</DataTable> </DataTable>
</div> </div>
<div class="card"> <div class="card">
<h5>Frozen Columns</h5> <h5>Frozen Columns</h5>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading"> <DataTable :value="customers" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true"> <Column field="name" header="Name" headerStyle="width: 300px" columnKey="name" :frozen="true">
<template #body="slotProps"> <template #body="slotProps">
<span style="font-weight: bold">{{slotProps.data.vin}}</span> <span style="font-weight: 700">{{slotProps.data.name}}</span>
</template> </template>
</Column> </Column>
<Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_1"></Column> <Column field="id" header="Id" headerStyle="width: 300px" columnKey="id"></Column>
<Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_1"></Column> <Column field="country.name" header="Country" headerStyle="width: 300px" columnKey="country"></Column>
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_1"></Column> <Column field="date" header="Date" headerStyle="width: 300px" columnKey="date"></Column>
<Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_2"></Column> <Column field="company" header="Country" headerStyle="width: 300px" columnKey="company"></Column>
<Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_2"></Column> <Column field="status" header="Status" headerStyle="width: 300px" columnKey="status"></Column>
<Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_2"></Column> <Column field="activity" header="Activity" headerStyle="width: 300px" columnKey="activity"></Column>
<Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_3"></Column> <Column field="representative.name" header="Representative" headerStyle="width: 300px" columnKey="representative"></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>
</DataTable> </DataTable>
</div> </div>
</div> </div>
@ -116,197 +113,191 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Vertical&lt;/h3&gt; &lt;div class="card"&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" :loading="loading"&gt; &lt;h5&gt;Vertical&lt;/h5&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;DataTable :value="customers" :scrollable="true" scrollHeight="200px" :loading="loading"&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;/DataTable&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;div class="card"&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. &lt;h5&gt;Flexible Scroll&lt;/h5&gt;
Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.&lt;/p&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;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;/div&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="flex"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Dialog header="Flex Scroll" :visible.sync="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}"&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;DataTable :value="customers" :scrollable="true" scrollHeight="flex"&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&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;/DataTable&gt;
&lt;template #footer&gt; &lt;template #footer&gt;
&lt;Button label="Yes" icon="pi pi-check" @click="closeDialog" /&gt; &lt;Button label="Ok" icon="pi pi-check" @click="closeDialog" /&gt;
&lt;Button label="No" icon="pi pi-times" @click="closeDialog" class="p-button-secondary"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Dialog&gt; &lt;/Dialog&gt;
&lt;h3&gt;Virtual Scroll&lt;/h3&gt; &lt;div class="card"&gt;
&lt;DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading" &lt;h5&gt;Virtual Scroll&lt;/h5&gt;
:virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords"&gt; &lt;DataTable :value="virtualCustomers" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
&lt;Column field="vin" header="Vin"&gt; :virtualScroll="true" :virtualRowHeight="30" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords"&gt;
&lt;template #loading&gt; &lt;Column field="name" header="Name"&gt;
&lt;span class="loading-text"&gt;&lt;/span&gt; &lt;template #loading&gt;
&lt;/template&gt; &lt;span class="loading-text"&gt;&lt;/span&gt;
&lt;/Column&gt; &lt;/template&gt;
&lt;Column field="year" header="Year"&gt; &lt;/Column&gt;
&lt;template #loading&gt; &lt;Column field="country.name" header="Country"&gt;
&lt;span class="loading-text"&gt;&lt;/span&gt; &lt;template #loading&gt;
&lt;/template&gt; &lt;span class="loading-text"&gt;&lt;/span&gt;
&lt;/Column&gt; &lt;/template&gt;
&lt;Column field="brand" header="Brand"&gt; &lt;/Column&gt;
&lt;template #loading&gt; &lt;Column field="representative.name" header="Representative"&gt;
&lt;span class="loading-text"&gt;&lt;/span&gt; &lt;template #loading&gt;
&lt;/template&gt; &lt;span class="loading-text"&gt;&lt;/span&gt;
&lt;/Column&gt; &lt;/template&gt;
&lt;Column field="color" header="Color"&gt; &lt;/Column&gt;
&lt;template #loading&gt; &lt;Column field="status" header="Status"&gt;
&lt;span class="loading-text"&gt;&lt;/span&gt; &lt;template #loading&gt;
&lt;/template&gt; &lt;span class="loading-text"&gt;&lt;/span&gt;
&lt;/Column&gt; &lt;/template&gt;
&lt;/DataTable&gt; &lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal and Vertical&lt;/h3&gt; &lt;div class="card"&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading"&gt; &lt;h5&gt;Horizontal and Vertical&lt;/h5&gt;
&lt;Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"&gt;&lt;/Column&gt; &lt;DataTable :value="customers" :scrollable="true" scrollHeight="200px" style="width: 600px" :loading="loading"&gt;
&lt;Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_1"&gt;&lt;/Column&gt; &lt;Column field="id" header="Id" headerStyle="width: 250px" columnKey="id"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_1"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name" headerStyle="width: 250px" columnKey="name"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_1"&gt;&lt;/Column&gt; &lt;Column field="country.name" header="Country" headerStyle="width: 250px" columnKey="country"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_2"&gt;&lt;/Column&gt; &lt;Column field="date" header="Date" headerStyle="width: 250px" columnKey="date"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_2"&gt;&lt;/Column&gt; &lt;Column field="company" header="Country" headerStyle="width: 250px" columnKey="company"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_2"&gt;&lt;/Column&gt; &lt;Column field="status" header="Status" headerStyle="width: 250px" columnKey="status"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" headerStyle="width: 250px" columnKey="color_2"&gt;&lt;/Column&gt; &lt;Column field="activity" header="Activity" headerStyle="width: 250px" columnKey="activity"&gt;&lt;/Column&gt;
&lt;/DataTable&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;div class="card"&gt;
&lt;DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading"&gt; &lt;h5&gt;Frozen Rows&lt;/h5&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;DataTable :value="customers" :frozenValue="frozenValue" :scrollable="true" scrollHeight="200px" :loading="loading"&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="country.name" header="Country"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
&lt;/DataTable&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;div class="card"&gt;
&lt;DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading"&gt; &lt;h5&gt;Frozen Columns&lt;/h5&gt;
&lt;Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true"&gt; &lt;DataTable :value="customers" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading"&gt;
&lt;template #body="slotProps"&gt; &lt;Column field="name" header="Name" headerStyle="width: 300px" columnKey="name" :frozen="true"&gt;
&lt;span style="font-weight: bold"&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/span&gt; &lt;template #body="slotProps"&gt;
&lt;/template&gt; &lt;span style="font-weight: 700"&gt;{{slotProps.data.name}}&lt;/span&gt;
&lt;/Column&gt; &lt;/template&gt;
&lt;Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_1"&gt;&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_1"&gt;&lt;/Column&gt; &lt;Column field="id" header="Id" headerStyle="width: 300px" columnKey="id"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_1"&gt;&lt;/Column&gt; &lt;Column field="country.name" header="Country" headerStyle="width: 300px" columnKey="country"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_2"&gt;&lt;/Column&gt; &lt;Column field="date" header="Date" headerStyle="width: 300px" columnKey="date"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_2"&gt;&lt;/Column&gt; &lt;Column field="company" header="Country" headerStyle="width: 300px" columnKey="company"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_2"&gt;&lt;/Column&gt; &lt;Column field="status" header="Status" headerStyle="width: 300px" columnKey="status"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" headerStyle="width: 300px" columnKey="year_3"&gt;&lt;/Column&gt; &lt;Column field="activity" header="Activity" headerStyle="width: 300px" columnKey="activity"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand" headerStyle="width: 300px" columnKey="brand_3"&gt;&lt;/Column&gt; &lt;Column field="representative.name" header="Representative" headerStyle="width: 300px" columnKey="representative"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color" headerStyle="width: 300px" columnKey="color_3"&gt;&lt;/Column&gt; &lt;/DataTable&gt;
&lt;/DataTable&gt; &lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import CustomerService from '../../service/CustomerService';
export default { export default {
data() { data() {
return { return {
cars: null, customers: null,
frozenCars: null, virtualCustomers: null,
lazyCars: null,
lazyTotalRecords: 0, lazyTotalRecords: 0,
frozenValue: null,
loading: false, loading: false,
dialogVisible: false dialogVisible: false
} }
}, },
carService: null, customerService: null,
inmemoryData: null, inmemoryData: null,
created() { created() {
this.carService = new CarService(); this.customerService = new CustomerService();
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"}
];
}, },
mounted() { mounted() {
this.loading = true; this.loading = true;
this.carService.getCarsLarge().then(data => { this.customerService.getCustomersLarge().then(data => {
this.cars = data this.customers = data;
this.loading = false; this.loading = false;
}); });
this.customerService.getCustomersXLarge().then(data => this.inmemoryData = data);
this.frozenCars = [ this.frozenValue = [
{brand: "BMW", year: 2013, color: "Grey", vin: "fh2uf23"}, {
{brand: "Chevrolet", year: 2011, color: "Black", vin: "4525g23"} 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(() => { setTimeout(() => {
this.lazyCars = this.loadChunk(0, 40); this.virtualCustomers = this.loadChunk(0, 40);
this.lazyTotalRecords = 250000; this.lazyTotalRecords = 500;
}, 250); }, 250);
}, },
methods: { methods: {
loadChunk(index, length) { loadChunk(index, length) {
let chunk = []; let chunk = [];
for (let i = 0; i &lt; length; i++) { for (let i = 0; i < length; i++) {
chunk[i] = {...this.inmemoryData[i], ...{vin: (index + i)}}; chunk[i] = {...this.inmemoryData[i]};
} }
return chunk; return chunk;
}, },
onVirtualScroll(event) { 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(() => { setTimeout(() => {
//last chunk //last chunk
if (event.first === 249980) if (event.first === 480)
this.lazyCars = this.loadChunk(event.first, 20) this.virtualCustomers = this.loadChunk(event.first, 20)
else else
this.lazyCars = this.loadChunk(event.first, event.rows) this.virtualCustomers = this.loadChunk(event.first, event.rows)
}, 250); }, 250);
}, },
openDialog() { 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> </CodeHighlight>
</TabPanel> </TabPanel>
</TabView> </TabView>
@ -336,105 +316,89 @@ export default {
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import CustomerService from '../../service/CustomerService';
export default { export default {
data() { data() {
return { return {
cars: null, customers: null,
frozenCars: null, virtualCustomers: null,
lazyCars: null,
lazyTotalRecords: 0, lazyTotalRecords: 0,
frozenValue: null,
loading: false, loading: false,
dialogVisible: false dialogVisible: false
} }
}, },
carService: null, customerService: null,
inmemoryData: null, inmemoryData: null,
created() { created() {
this.carService = new CarService(); this.customerService = new CustomerService();
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"}
];
}, },
mounted() { mounted() {
this.loading = true; this.loading = true;
this.carService.getCarsLarge().then(data => { this.customerService.getCustomersLarge().then(data => {
this.cars = data this.customers = data;
this.loading = false; this.loading = false;
}); });
this.customerService.getCustomersXLarge().then(data => this.inmemoryData = data);
this.frozenCars = [ this.frozenValue = [
{brand: "BMW", year: 2013, color: "Grey", vin: "fh2uf23"}, {
{brand: "Chevrolet", year: 2011, color: "Black", vin: "4525g23"} 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(() => { setTimeout(() => {
this.lazyCars = this.loadChunk(0, 40); this.virtualCustomers = this.loadChunk(0, 40);
this.lazyTotalRecords = 250000; this.lazyTotalRecords = 500;
}, 250); }, 250);
}, },
methods: { methods: {
loadChunk(index, length) { loadChunk(index, length) {
let chunk = []; let chunk = [];
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
chunk[i] = {...this.inmemoryData[i], ...{vin: (index + i)}}; chunk[i] = {...this.inmemoryData[i]};
} }
return chunk; return chunk;
}, },
onVirtualScroll(event) { 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(() => { setTimeout(() => {
//last chunk //last chunk
if (event.first === 249980) if (event.first === 480)
this.lazyCars = this.loadChunk(event.first, 20) this.virtualCustomers = this.loadChunk(event.first, 20)
else else
this.lazyCars = this.loadChunk(event.first, event.rows) this.virtualCustomers = this.loadChunk(event.first, event.rows)
}, 250); }, 250);
}, },
openDialog() { openDialog() {