TableFooter

The row under a table with the item count and, when needed, pagination.

48 repositories

1<template>2  <TableFooter v-model:page="page" :total="total" :items-per-page="pageSize" :count-label="countLabel" :loading="isPending" />3</template>

Props

Name	Type	Default
total	number	-
countLabel	string	-
itemsPerPage	number	-
page	number	-
loading	boolean	false
siblingCount	number	-
prevLabel	string	"Previous"
nextLabel	string	"Next"

Slots

Name	Description
default	Replaces `countLabel` for a count that needs more than plain text.

Guidelines

Structure

The footer row of the Tables UI pattern, rendered right below Table: the item count on the left, Pagination on the right once total spans more than one page.

<TableFooter
  v-model:page="page"
  :total="total"
  :items-per-page="pageSize"
  :count-label="$t('repositories.count', { count: total })"
  :loading="isPending"
  :prev-label="$t('common.pagination.previous')"
  :next-label="$t('common.pagination.next')"
/>

countLabel is your own formatted, translated string; the default slot replaces it when the count needs more than text (a tooltip, a second figure).
Pagination renders only when you bind v-model:page and pass itemsPerPage, and only once there's more than one page. A "Load more" list or a short unpaginated list omits both and keeps just the count.
loading swaps the count and Pagination for Skeleton bars, so the row keeps its place during a first load. The bars are aria-hidden; Table's own skeleton announces the load.

Do

Render it under every real data table, even one that never paginates - the count belongs in the footer regardless.
Pass the same pending flag you give Table's skeleton (loading + loadingStyle="skeleton") so the table and its footer load together.
Pass siblingCount when you prefetch neighbouring pages, so the prefetch window and the visible page numbers agree.

Don't

Don't hand-build the count + Pagination row - this component exists so every table's footer matches.
Don't hide the footer while loading; pass loading instead so nothing below it jumps when data arrives.