Vue 3 Development with the PrimeVue Framework — Table Pagination, Sorting, and Row Selection

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Table Pagination

We can add table pagination easily into our Vue 3 app with PrimeVue.

For instance, we can write:

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

We add the paginator prop to enable pagination.

rows has the rows per page.

paginatorTemplate lets us specify the layout of the pagination bar with a string.

rowsPerPageOptions has the rows per page options for pagination.

currentPageReportTemplate has the string template to display the page info to the user.

We populate the paginatorLeft and paginatorRight slots to add the buttons for navigating the pages.

Table Sorting

We can make table columns sortable with the sortable prop on each column.

For instance, we can write:

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

We set sortable to true to enable sorting for each column.

sortMode set to 'multiple' lets us sort by multiple columns.

Table Row Selection

We can enable selection for table rows with the selectionMode prop:

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

dataKey has the property name of the unique identifier of each row.

We bind the selections to the selectedCars reactive property with v-model .

Conclusion

We can add pagination, row selection, and sorting to tables with PrimeVue’s table components.