vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improve DataTable demo performance

Browse source
This commit is contained in:
mertsincan 2023-12-31 14:08:33 +00:00
parent 69d9c0875b
commit 27db388223
48 changed files with 1560 additions and 1366 deletions
Download patch file Download diff file Expand all files Collapse all files

60
doc/datatable/scroll/FrozenRowsDoc.vue
View file

@ -2,30 +2,32 @@
<DocSectionText v-bind="$attrs">
<p>Rows can be fixed during scrolling by enabling the <i>frozenValue</i> property.</p>
</DocSectionText>
<div class="card">
<DataTable
:value="customers"
:frozenValue="lockedCustomers"
scrollable
scrollHeight="400px"
:pt="{
table: { style: 'min-width: 50rem' },
bodyrow: ({ props }) => ({
class: [{ 'font-bold': props.frozenRow }]
})
}"
>
<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>
<Column style="flex: 0 0 4rem">
<template #body="{ data, frozenRow, index }">
<Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
</template>
</Column>
</DataTable>
</div>
<DeferredDemo @load="loadDemoData">
<div class="card">
<DataTable
:value="customers"
:frozenValue="lockedCustomers"
scrollable
scrollHeight="400px"
:pt="{
table: { style: 'min-width: 50rem' },
bodyrow: ({ props }) => ({
class: [{ 'font-bold': props.frozenRow }]
})
}"
>
<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>
<Column style="flex: 0 0 4rem">
<template #body="{ data, frozenRow, index }">
<Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
</template>
</Column>
</DataTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['CustomerService']" />
</template>
@ -255,12 +257,12 @@ onMounted(() => {
}
};
},
mounted() {
CustomerService.getCustomersMedium().then((data) => {
this.customers = data;
});
},
methods: {
loadDemoData() {
CustomerService.getCustomersMedium().then((data) => {
this.customers = data;
});
},
toggleLock(data, frozen, index) {
if (frozen) {
this.lockedCustomers = this.lockedCustomers.filter((c, i) => i !== index);