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

Renaming from Paginator to Pagination for demos

Browse source
This commit is contained in:
tugcekucukoglu 2024-05-09 09:06:02 +03:00
parent 36eeb0375e
commit a6acc4c50b
6 changed files with 12 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

156
doc/datatable/pagination/PaginationTemplateDoc.vue Normal file
View file

@ -0,0 +1,156 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Paginator UI is customized using the <i>paginatorTemplate</i> property. Each element can also be customized further with your own UI to replace the default one, refer to the
<PrimeVueNuxtLink to="/paginator">Paginator</PrimeVueNuxtLink> component for more information about the advanced customization options.
</p>
</DocSectionText>
<DeferredDemo @load="loadDemoData">
<div class="card">
<DataTable
:value="customers"
paginator
:rows="5"
:rowsPerPageOptions="[5, 10, 20, 50]"
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
currentPageReportTemplate="{first} to {last} of {totalRecords}"
tableStyle="min-width: 50rem"
>
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" text />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-download" text />
</template>
<Column field="name" header="Name" style="width: 25%"></Column>
<Column field="country.name" header="Country" style="width: 25%"></Column>
<Column field="company" header="Company" style="width: 25%"></Column>
<Column field="representative.name" header="Representative" style="width: 25%"></Column>
</DataTable>
</div>
</DeferredDemo>
<DocSectionCode :code="code" :service="['CustomerService']" />
</template>
<script>
import { CustomerService } from '@/service/CustomerService';
export default {
data() {
return {
customers: null,
code: {
basic: `
<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
currentPageReportTemplate="{first} to {last} of {totalRecords}">
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" text />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-download" text />
</template>
<Column field="name" header="Name" style="width: 25%"></Column>
<Column field="country.name" header="Country" style="width: 25%"></Column>
<Column field="company" header="Company" style="width: 25%"></Column>
<Column field="representative.name" header="Representative" style="width: 25%"></Column>
</DataTable>
`,
options: `
<template>
<div class="card">
<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
currentPageReportTemplate="{first} to {last} of {totalRecords}">
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" text />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-download" text />
</template>
<Column field="name" header="Name" style="width: 25%"></Column>
<Column field="country.name" header="Country" style="width: 25%"></Column>
<Column field="company" header="Company" style="width: 25%"></Column>
<Column field="representative.name" header="Representative" style="width: 25%"></Column>
</DataTable>
</div>
</template>
<script>
import { CustomerService } from '@/service/CustomerService';
export default {
data() {
return {
customers: null
};
},
mounted() {
CustomerService.getCustomersMedium().then((data) => (this.customers = data));
}
};
<\/script>
`,
composition: `
<template>
<div class="card">
<DataTable :value="customers" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" tableStyle="min-width: 50rem"
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
currentPageReportTemplate="{first} to {last} of {totalRecords}">
<template #paginatorstart>
<Button type="button" icon="pi pi-refresh" text />
</template>
<template #paginatorend>
<Button type="button" icon="pi pi-download" text />
</template>
<Column field="name" header="Name" style="width: 25%"></Column>
<Column field="country.name" header="Country" style="width: 25%"></Column>
<Column field="company" header="Company" style="width: 25%"></Column>
<Column field="representative.name" header="Representative" style="width: 25%"></Column>
</DataTable>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { CustomerService } from '@/service/CustomerService';
onMounted(() => {
CustomerService.getCustomersMedium().then((data) => (customers.value = data));
});
const customers = ref();
<\/script>
`,
data: `
{
id: 1000,
name: 'James Butt',
country: {
name: 'Algeria',
code: 'dz'
},
company: 'Benton, John B Jr',
date: '2015-09-13',
status: 'unqualified',
verified: true,
activity: 17,
representative: {
name: 'Ioni Bowcher',
image: 'ionibowcher.png'
},
balance: 70663
},
...
`
}
};
},
methods: {
loadDemoData() {
CustomerService.getCustomersMedium().then((data) => (this.customers = data));
}
}
};
</script>