TanStackT
TanStack•4mo ago•
1 reply
primary-violet

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} /> ); 
}


// 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.
Was this page helpful?