How to handle pagination outside of the component `table` is defined in?

I just started using tanstack table today. Mostly going from the example on https://ui.shadcn.com/docs/components/data-table

However I'm having quite some trouble making it re-useable for more than just a single table...

I would like to turn it into an API like this:

<DataTable data={data} columns={columns} pagination={pagination} onPaginationChange={handlePagination} />

<DataTable data={data} columns={columns} pagination={pagination} onPaginationChange={handlePagination} />

<DataTable data={data} columns={columns} pagination={pagination} onPaginationChange={handlePagination} />

<DataTable data={data} columns={columns} pagination={pagination} onPaginationChange={handlePagination} />

However, I can't seem to wrap my head around how to get the pagination part to work without having direct access to the

table

table

table

table and thus moving the table outside of the DataTable component I'm trying to make reusable.

I thought I found a way with

onPaginationChange

onPaginationChange

onPaginationChange

onPaginationChange in the

useReactTable

useReactTable

useReactTable

useReactTable hook. But for some reason if I call

table.getState()

table.getState()

table.getState()

table.getState() inside, the state is always old, and not the new "changed" state?

I looked at the docs, it says it gets an updater, but no info on how to use it?

I tried to use it like this, but that also didn't work.

onPaginationChange(updater) {
      return updater((old) => {
        console.log(table.getState())
        return { ...old }
       })
    },

onPaginationChange(updater) {
      return updater((old) => {
        console.log(table.getState())
        return { ...old }
       })
    },

onPaginationChange(updater) {
      return updater((old) => {
        console.log(table.getState())
        return { ...old }
       })
    },

onPaginationChange(updater) {
      return updater((old) => {
        console.log(table.getState())
        return { ...old }
       })
    },

I checked out the examples as well but all of them use

table

table

table

table at the top level. Does anyone know how i can control pagination, filters, and sorting from a level above where

table

table

table

table is

How to handle pagination outside of the component `table` is defined in?

Similar Threads

Similar Threads

Similar Threads