T
TanStack•3mo ago
broad-brown

Server-side Pagination

I have the following setup at this moment 
// Async component to load data

export default async function Page() { 
  const clans = await getClans(0, 10); 
  return <DataTable columns={columns} data={clans} /> ); 
}
// Async component to load data

export default async function Page() { 
  const clans = await getClans(0, 10); 
  return <DataTable columns={columns} data={clans} /> ); 
}
// Client component to display data

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: {
      pagination: { pageSize: 10 },
      columnVisibility: {
        abbreviation: false,
        familyRank: false,
      },
    },
  });

  return (
    <div className="flex flex-col gap-4">
      <Toolbar table={table} />
      <div className="overflow-hidden rounded-lg border ">
        <Table>
        </Table>
      </div>
      <Pagination table={table} />
    </div>
  );
}
// Client component to display data

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: {
      pagination: { pageSize: 10 },
      columnVisibility: {
        abbreviation: false,
        familyRank: false,
      },
    },
  });

  return (
    <div className="flex flex-col gap-4">
      <Toolbar table={table} />
      <div className="overflow-hidden rounded-lg border ">
        <Table>
        </Table>
      </div>
      <Pagination table={table} />
    </div>
  );
}
I want to switch from client-side to server-side pagination (and more later). What would be the "correct" way to get my Page component the necessary values like page and pageSize? I've been looking for examples in the docs & online, but haven't found anything that matches my setup.
1 Reply
quaint-moccasin
quaint-moccasin•3mo ago
If by Page you mean Pagination, table has table.getPageCount() to get the total amount of pages.

Did you find this page helpful?