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

Demo update

pull/104/head
cagataycivici 2019-11-19 15:46:50 +03:00
parent 724eb71144
commit 93931a510e
1 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,7 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3>Vertical</h3> <h3>Vertical</h3>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px"> <DataTable :value="cars" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column> <Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column> <Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column> <Column field="brand" header="Brand"></Column>
@ -19,7 +19,7 @@
</DataTable> </DataTable>
<h3>Virtual Scroll</h3> <h3>Virtual Scroll</h3>
<DataTable :value="lazyCars" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" <DataTable :value="lazyCars" :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="vin" header="Vin">
<template #loading> <template #loading>
@ -44,7 +44,7 @@
</DataTable> </DataTable>
<h3>Horizontal and Vertical</h3> <h3>Horizontal and Vertical</h3>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px"> <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="vin" header="Vin" headerStyle="width: 250px" columnKey="vin_1"></Column>
<Column field="year" header="Year" headerStyle="width: 250px" columnKey="year_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="brand" header="Brand" headerStyle="width: 250px" columnKey="brand_1"></Column>
@ -56,7 +56,7 @@
</DataTable> </DataTable>
<h3>Frozen Rows</h3> <h3>Frozen Rows</h3>
<DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px"> <DataTable :value="cars" :frozenValue="frozenCars" :scrollable="true" scrollHeight="200px" :loading="loading">
<Column field="vin" header="Vin"></Column> <Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column> <Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column> <Column field="brand" header="Brand"></Column>
@ -64,7 +64,7 @@
</DataTable> </DataTable>
<h3>Frozen Columns</h3> <h3>Frozen Columns</h3>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px"> <DataTable :value="cars" :scrollable="true" scrollHeight="200px" frozenWidth="300px" :loading="loading">
<Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true"> <Column field="vin" header="Vin" headerStyle="width: 300px" columnKey="vin_1" :frozen="true">
<template #body="slotProps"> <template #body="slotProps">
<span style="font-weight: bold">{{slotProps.data.vin}}</span> <span style="font-weight: bold">{{slotProps.data.vin}}</span>
@ -109,7 +109,8 @@ export default {
cars: null, cars: null,
frozenCars: null, frozenCars: null,
lazyCars: null, lazyCars: null,
lazyTotalRecords: 0 lazyTotalRecords: 0,
loading: false
} }
}, },
carService: null, carService: null,
@ -161,8 +162,15 @@ export default {
]; ];
}, },
mounted() { mounted() {
this.carService.getCarsLarge().then(data => this.cars = data); this.loading = true;
setTimeout(() => {
this.carService.getCarsLarge().then(data => {
this.cars = data
this.loading = false;
});
}, 150);
this.frozenCars = [ this.frozenCars = [
{brand: "BMW", year: 2013, color: "Grey", vin: "fh2uf23"}, {brand: "BMW", year: 2013, color: "Grey", vin: "fh2uf23"},
{brand: "Chevrolet", year: 2011, color: "Black", vin: "4525g23"} {brand: "Chevrolet", year: 2011, color: "Black", vin: "4525g23"}