Mastering Vue 3 with PrimeVue: Table Pagination and Sorting
Written on
Introduction to PrimeVue Framework
PrimeVue is an intuitive UI framework designed for Vue 3 applications. This guide will help you kick-start your development with PrimeVue by focusing on essential features like table pagination, sorting, and row selection.
Table Pagination with PrimeVue
Integrating table pagination into your Vue 3 application using PrimeVue is straightforward. Here’s a basic example:
<template>
<div>
- <DataTable
:value="cars"
class="p-datatable-striped"
paginator :rows="10"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown" :rowsPerPageOptions="[10, 20, 50]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
>
<Column field="vin" header="Vin"> </Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<template #paginatorLeft>
<Button type="button" icon="pi pi-refresh" class="p-button-text" /></template>
<template #paginatorRight>
<Button type="button" icon="pi pi-cloud" class="p-button-text" /></template>
</DataTable>
</div>
</template>
<script>
const seed = [
{ brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
{ brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
{ brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
];
let cars = [...seed];
for (let i = 1; i <= 100; i++) {
cars.push(...seed);
}
export default {
name: "App",
data() {
return {
cars,};
},
methods: {},
};
</script>
To enable pagination, simply add the paginator property. The rows attribute determines how many entries appear per page. The paginatorTemplate allows you to customize the pagination layout, while rowsPerPageOptions provides choices for users to select how many rows they wish to see. The currentPageReportTemplate informs users of their current position in the dataset. Additionally, you can populate the paginatorLeft and paginatorRight slots to include buttons for page navigation.
This video demonstrates how to build a table component in Vue.js v3 that includes sorting functionality.
Table Sorting Features
To make table columns sortable, you can use the sortable property for each column. Here’s how it looks:
<template>
<div>
<DataTable :value="cars" sortMode="multiple">
<Column field="vin" header="Vin" sortable="true"> </Column>
<Column field="year" header="Year" sortable="true"></Column>
<Column field="brand" header="Brand" sortable="true"></Column>
<Column field="color" header="Color" sortable="true"></Column>
</DataTable>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
cars: [
{ brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
{ brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
{ brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
],
};
},
methods: {},
};
</script>
By setting sortable to true, you allow users to sort the data in each column. The sortMode property set to 'multiple' enables sorting across various columns simultaneously.
This video illustrates using Tanstack Table in Vue.js to achieve advanced sorting capabilities.
Table Row Selection Capabilities
To enable row selection, use the selectionMode property in your table setup. Here's an example:
<template>
<div>
- <DataTable
:value="cars"
v-model:selection="selectedCars"
selectionMode="single"
dataKey="vin"
>
<Column field="vin" header="Vin"> </Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selectedCars: [],
cars: [
{ brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
{ brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
{ brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
],
};
},
methods: {},
};
</script>
The dataKey attribute identifies the unique property for each row, and the selections are linked to the selectedCars reactive data property using v-model.
Conclusion
In summary, PrimeVue offers powerful components for implementing pagination, row selection, and sorting in your tables. Mastering these features can significantly enhance the user experience in your Vue 3 applications.