Client mode

Client mode: the demo holds all 240 rows and the hook slices the current page out of them. No round trip, and no total to manage. You need pageSize and, optionally, a controlled page.

pnpm dlx shadcn@latest add @gridcn/data-grid-pagination-demo

Client slice vs server mode

// client mode — the hook slices `data` for you
const pager = useDataGridPagination({ data: rows, pageSize: 25 });

// server mode — you own page/pageSize/total and fetch the page yourself
const pager = useDataGridPagination({
  page,
  pageSize,
  total: serverTotal,
  onPageChange: setPage,
  onPageSizeChange: (next) => {
    setPageSize(next);
    setPage(1);
  },
});

Both return the same controls shape, so <DataGridPaginationBar {...pager.controls} /> doesn't need to know which mode it's in. The footer sits outside the provider in both cases, so it reads no store.

Use client mode when the dataset already fits in memory (a few hundred to a few thousand rows). Switch to server mode when a page is a real API call. See TanStack Query and SWR.

Behavior reference

• Pagination: the add-on reference, including the composable footer parts

Related

• Server side: the full remote contract, not just pages