mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 17:02:38 +00:00
Improve DataTable demo performance
This commit is contained in:
mertsincan
parent
69d9c0875b
commit
27db388223
48 changed files with 1560 additions and 1366 deletions
|
|
@ -10,65 +10,67 @@
|
|||
</p>
|
||||
<p>Note that, the implementation of <i>checkbox selection</i> in lazy mode needs to be handled manually as in this example since the DataTable cannot know about the whole dataset.</p>
|
||||
</DocSectionText>
|
||||
<div class="card p-fluid">
|
||||
<DataTable
|
||||
ref="dt"
|
||||
v-model:filters="filters"
|
||||
v-model:selection="selectedCustomers"
|
||||
:value="customers"
|
||||
lazy
|
||||
paginator
|
||||
:first="first"
|
||||
:rows="10"
|
||||
dataKey="id"
|
||||
:totalRecords="totalRecords"
|
||||
:loading="loading"
|
||||
@page="onPage($event)"
|
||||
@sort="onSort($event)"
|
||||
@filter="onFilter($event)"
|
||||
filterDisplay="row"
|
||||
:globalFilterFields="['name', 'country.name', 'company', 'representative.name']"
|
||||
:selectAll="selectAll"
|
||||
@select-all-change="onSelectAllChange"
|
||||
@row-select="onRowSelect"
|
||||
@row-unselect="onRowUnselect"
|
||||
tableStyle="min-width: 75rem"
|
||||
>
|
||||
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
|
||||
<Column field="name" header="Name" filterMatchMode="startsWith" sortable>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
|
||||
<template #body="{ data }">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="company" header="Company" filterMatchMode="contains" sortable>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
|
||||
<template #body="{ data }">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
|
||||
<span>{{ data.representative.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
<DeferredDemo @load="loadDemoData">
|
||||
<div class="card p-fluid">
|
||||
<DataTable
|
||||
ref="dt"
|
||||
v-model:filters="filters"
|
||||
v-model:selection="selectedCustomers"
|
||||
:value="customers"
|
||||
lazy
|
||||
paginator
|
||||
:first="first"
|
||||
:rows="10"
|
||||
dataKey="id"
|
||||
:totalRecords="totalRecords"
|
||||
:loading="loading"
|
||||
@page="onPage($event)"
|
||||
@sort="onSort($event)"
|
||||
@filter="onFilter($event)"
|
||||
filterDisplay="row"
|
||||
:globalFilterFields="['name', 'country.name', 'company', 'representative.name']"
|
||||
:selectAll="selectAll"
|
||||
@select-all-change="onSelectAllChange"
|
||||
@row-select="onRowSelect"
|
||||
@row-unselect="onRowUnselect"
|
||||
tableStyle="min-width: 75rem"
|
||||
>
|
||||
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
|
||||
<Column field="name" header="Name" filterMatchMode="startsWith" sortable>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
|
||||
<template #body="{ data }">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="company" header="Company" filterMatchMode="contains" sortable>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="representative.name" header="Representative" filterField="representative.name" sortable>
|
||||
<template #body="{ data }">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
|
||||
<span>{{ data.representative.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</DeferredDemo>
|
||||
<DocSectionCode :code="code" :service="['CustomerService']" />
|
||||
</template>
|
||||
|
||||
|
|
@ -213,8 +215,8 @@ export default {
|
|||
this.loading = true;
|
||||
|
||||
this.lazyParams = {
|
||||
first: this.$refs.dt.first,
|
||||
rows: this.$refs.dt.rows,
|
||||
first: 0,
|
||||
rows: 10,
|
||||
sortField: null,
|
||||
sortOrder: null,
|
||||
filters: this.filters
|
||||
|
|
@ -324,8 +326,8 @@ onMounted(() => {
|
|||
loading.value = true;
|
||||
|
||||
lazyParams.value = {
|
||||
first: dt.value.first,
|
||||
rows: dt.value.rows,
|
||||
first: 0,
|
||||
rows: 10,
|
||||
sortField: null,
|
||||
sortOrder: null,
|
||||
filters: filters.value
|
||||
|
|
@ -425,20 +427,20 @@ const onRowUnselect = () => {
|
|||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loading = true;
|
||||
|
||||
this.lazyParams = {
|
||||
first: this.$refs.dt.first,
|
||||
rows: this.$refs.dt.rows,
|
||||
sortField: null,
|
||||
sortOrder: null,
|
||||
filters: this.filters
|
||||
};
|
||||
|
||||
this.loadLazyData();
|
||||
},
|
||||
methods: {
|
||||
loadDemoData() {
|
||||
this.loading = true;
|
||||
|
||||
this.lazyParams = {
|
||||
first: 0,
|
||||
rows: 10,
|
||||
sortField: null,
|
||||
sortOrder: null,
|
||||
filters: this.filters
|
||||
};
|
||||
|
||||
this.loadLazyData();
|
||||
},
|
||||
loadLazyData(event) {
|
||||
this.loading = true;
|
||||
this.lazyParams = { ...this.lazyParams, first: event?.first || this.first };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue