Server-side Pagination

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