Reusable pagination example doesn't filter/offset data

[jschuur]

I implemented the reusable pagination component, but when I use the pagination controls, they don't change the segment of the data shown. It always shows all the rows, regardless of the page or rows per page selected.

Relevant code:

export default function FeedListTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {

  // ...

  const table = useReactTable({
    data,
    columns,
    // ...
  });

  return (
    // ...
    <DataTablePagination table={table} />
    // ...
  );
}

Should TanStack Table handle limiting the data to the right page size and offset or do I need to do that to the data before I render the table? Filtering seems to be done automatically.

I can see table.previousPage() and table.setPageSize(Number(value)) click and value change handlers in the reusable component, but they don't seem to be working.

[jschuur]

Turns out I was missing passing in getPaginationRowModel: getPaginationRowModel(), into useReactTable. That gets the data to React Table to use in its pagination handlers.