<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>