Table Pagination

The Table Pagination component provides a standardized way to handle pagination controls for tables in your application. It includes features like row count selection, page navigation, and optionally editable current page input.

Basic Usage

Role Name	Date	Status
No results found Try a different search term.

1 - 10 of 100

<template>
  <div class="spr-h-fit">
    <spr-table :headers="headers" :data-table="data" :full-height="true">
      <template #footer>
        <spr-table-pagination
          v-model:selected-row-count="selectedRowCount"
          v-model:current-page="currentPage"
          :total-items="totalItems"
          :dropdown-selection="dropdownSelection"
          :version="'backend'"
          @previous="handlePrevious"
          @next="handleNext"
        />
      </template>
    </spr-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import SprTable from '@/components/table/table.vue';
import SprTablePagination from '@/components/table/table-pagination/table-pagination.vue';
import tableData from '@/mock/tableData';

const rawData = ref([
  ...Array.from({ length: 100 }, (_, i) => ({
    name: {
      title: `Shift ${i + 1}`,
      subtext: `Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam. Item ${i + 1}`,
      image: `https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg`,
    },
    lastUpdate: {
      title: `Nov ${(i % 30) + 1}, 2025`,
      subtext: `Lorem ipsum dolor item ${i + 1}`,
      image: `https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg`,
    },
    status: {
      title: ['Success', 'Pending', 'Failed'][i % 3],
      subtext: `Lorem ipsum dolor sit amet, consectetur, sed etiam. Status ${i + 1}`,
      image: `https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg`,
    },
  })),
]);

const headers = ref([
  { field: 'name', name: 'Role Name', hasAvatar: true, hasSubtext: true },
  { field: 'lastUpdate', name: 'Date' },
  { field: 'status', name: 'Status' },
]);

const totalItems = ref(tableData.value.length);
const currentPage = ref(1);
const dropdownSelection = [
  { text: '10', value: '10' },
  { text: '20', value: '20' },
  { text: '30', value: '30' },
];

const selectedRowCount = ref(10);
const data = ref(rawData.value.slice(0, selectedRowCount.value));

const updateDataTable = () => {
  data.value = rawData.value.slice(
    (currentPage.value - 1) * selectedRowCount.value,
    currentPage.value * selectedRowCount.value,
  );
};

const handlePrevious = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    updateDataTable();
  }
};

const handleNext = () => {
  if (currentPage.value * selectedRowCount.value < totalItems.value) {
    currentPage.value++;
    updateDataTable();
  }
};

watch(selectedRowCount, () => {
  currentPage.value = 1; // Reset to first page when row count changes
  updateDataTable();
});

watch(currentPage, (newValue) => {
  if (!currentPage.value) return;
  else if (currentPage.value > Math.ceil(totalItems.value / selectedRowCount.value)) {
    currentPage.value = Math.ceil(totalItems.value / selectedRowCount.value);
  }
  updateDataTable();
});
</script>

With Editable Current Page

You can enable direct page number input by setting the editable-current-page prop:

Role Name	Date	Status
No results found Try a different search term.

Pageof 10

<template>
  <spr-table-pagination
    :selected-row-count="10"
    :total-items="100"
    :current-page="1"
    :editable-current-page="true"
    :dropdown-selection="[
      { text: '10', value: '10' },
      { text: '20', value: '20' },
      { text: '50', value: '50' },
      { text: '100', value: '100' },
    ]"
  />
</template>

API Reference

Props

Name	Type	Default	Required	Description
selectedRowCount	number	10	Yes	The number of rows to display per page
totalItems	number	1	Yes	Total number of items in the dataset
currentPage	number	1	Yes	Current active page number
dropdownSelection	Array<{ text: string; value: string }>	[ { text: 10, value: 10 }, { text: 20, value: 20 }, { text: 50, value: 50 }, { text: 100, value: 100 }, ]	Yes	Available options for rows per page
bordered	boolean	true	No	Whether to show border around the pagination component
editableCurrentPage	boolean	false	No	Enable direct input of page number

Events

Name	Parameters	Description
update:selectedRowCount	(value: number)	Emitted when the number of rows per page changes
update:currentPage	(value: number)	Emitted when the current page number changes
previous	-	Emitted when the previous page button is clicked
next	-	Emitted when the next page button is clicked