ListPagination

The default pagination component for List pages.

Installation

pnpm dlx shadcn@latest add @shadmin/list-pagination

Usage

The <List> component already uses <ListPagination> by default. If you need to override the predefined page size options, override the <List pagination> prop:

import { List, ListPagination } from "@/components/admin";
 
const PostListPagination = () => (
  <ListPagination rowsPerPageOptions={[5, 10, 25]} />
);
 
export const PostList = () => (
  <List pagination={<PostListPagination />}>{/* ... */}</List>
);

Other components that create a ListContext, like <ReferenceManyField>, don't include pagination by default. You can use <ListPagination> to add pagination to them:

import {
  Show,
  TextField,
  ReferenceManyField,
  DataTable,
  ListPagination,
} from "@/components/admin";
 
export const UserShow = () => (
  <Show>
    <div className="flex flex-col gap-4">
      <TextField source="name" />
      <ReferenceManyField reference="posts" target="user_id">
        <DataTable>
          <DataTable.Col source="id" />
          <DataTable.Col source="title" />
          <DataTable.Col source="published" type="boolean" />
        </DataTable>
        <ListPagination />
      </ReferenceManyField>
    </div>
  </Show>
);

Props

PropRequiredTypeDefaultDescription
rowsPerPageOptionsOptionalnumber[][10, 25, 50, 100]Page size options
classNameOptionalstring-Wrapper classes

Custom Pagination