vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 09:22:34 +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

74
doc/datatable/rowgroup/RowSpanRowGroupDoc.vue
View file

@ -2,39 +2,41 @@
<DocSectionText v-bind="$attrs">
<p>When <i>rowGroupMode</i> is configured to be <i>rowspan</i>, the grouping column spans multiple rows.</p>
</DocSectionText>
<div class="card">
<DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
<Column header="#" headerStyle="width:3rem">
<template #body="slotProps">
{{ slotProps.index + 1 }}
</template>
</Column>
<Column field="representative.name" header="Representative" style="min-width: 200px">
<template #body="slotProps">
<div class="flex align-items-center gap-2">
<img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" />
<span>{{ slotProps.data.representative.name }}</span>
</div>
</template>
</Column>
<Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 150px">
<template #body="slotProps">
<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-${slotProps.data.country.code}`" style="width: 24px" />
<span>{{ slotProps.data.country.name }}</span>
</div>
</template>
</Column>
<Column field="company" header="Company" style="min-width: 200px"></Column>
<Column field="status" header="Status" style="min-width: 100px">
<template #body="slotProps">
<Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
</template>
</Column>
<Column field="date" header="Date" style="min-width: 100px"></Column>
</DataTable>
</div>
<DeferredDemo @load="loadDemoData">
<div class="card">
<DataTable :value="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" tableStyle="min-width: 50rem">
<Column header="#" headerStyle="width:3rem">
<template #body="slotProps">
{{ slotProps.index + 1 }}
</template>
</Column>
<Column field="representative.name" header="Representative" style="min-width: 200px">
<template #body="slotProps">
<div class="flex align-items-center gap-2">
<img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" />
<span>{{ slotProps.data.representative.name }}</span>
</div>
</template>
</Column>
<Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 150px">
<template #body="slotProps">
<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-${slotProps.data.country.code}`" style="width: 24px" />
<span>{{ slotProps.data.country.name }}</span>
</div>
</template>
</Column>
<Column field="company" header="Company" style="min-width: 200px"></Column>
<Column field="status" header="Status" style="min-width: 100px">
<template #body="slotProps">
<Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
</template>
</Column>
<Column field="date" header="Date" style="min-width: 100px"></Column>
</DataTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['CustomerService']" />
</template>
@ -242,10 +244,10 @@ const getSeverity = (status) => {
}
};
},
mounted() {
CustomerService.getCustomersMedium().then((data) => (this.customers = data));
},
methods: {
loadDemoData() {
CustomerService.getCustomersMedium().then((data) => (this.customers = data));
},
onRowGroupExpand(event) {
this.$toast.add({ severity: 'info', summary: 'Row Group Expanded', detail: 'Value: ' + event.data, life: 3000 });
},