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.
Vertical
Flexible Scroll
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.
Virtual Scroll
Horizontal and Vertical
Frozen Rows
Frozen Columns
{{slotProps.data.name}}
<div class="card">
<h5>Vertical</h5>
<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>
<div class="card">
<h5>Flexible Scroll</h5>
<p>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.</p>
<Button label="Show" icon="pi pi-external-link" @click="openDialog" />
</div>
<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="Ok" icon="pi pi-check" @click="closeDialog" />
</template>
</Dialog>
<div class="card">
<h5>Virtual Scroll</h5>
<DataTable :value="virtualCustomers" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
:virtualScroll="true" :virtualRowHeight="45" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
<Column field="name" header="Name">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="country.name" header="Country">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="representative.name" header="Representative">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="status" header="Status">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
</DataTable>
</div>
<div class="card">
<h5>Horizontal and Vertical</h5>
<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="Company" 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="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="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: 700">{{slotProps.data.name}}</span>
</template>
</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>
import CustomerService from '../../service/CustomerService';
export default {
data() {
return {
customers: null,
virtualCustomers: null,
lazyTotalRecords: 0,
frozenValue: null,
loading: false,
dialogVisible: false
}
},
customerService: null,
inmemoryData: null,
created() {
this.customerService = new CustomerService();
},
mounted() {
this.loading = true;
this.customerService.getCustomersLarge().then(data => {
this.customers = data;
this.loading = false;
});
this.customerService.getCustomersXLarge().then(data => this.inmemoryData = data);
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.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]};
}
return chunk;
},
onVirtualScroll(event) {
setTimeout(() => {
//last chunk
if (event.first === 480)
this.virtualCustomers = this.loadChunk(event.first, 20)
else
this.virtualCustomers = this.loadChunk(event.first, event.rows)
}, 250);
},
openDialog() {
this.dialogVisible = true;
},
closeDialog() {
this.dialogVisible = false;
}
}
}