Usage with react-query

[wisaac407]

I'm trying to use react-table with react-query and I'm having trouble figuring out the best way to handle pagination.

This is the best I've come up with, but it seems a bit clunky:

  const [queryPageIndex, setQueryPageIndex] = useState(0);
  const [queryPageSize, setQueryPageSize] = useState(10);

  const { data } = useQuery(['items', {pageSize: queryPageSize, 'index': queryPageIndex}], listItems)

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    state: { pageIndex, pageSize },
  } = useTable(
    {
      columns,
      data: data.items,
      initialState: { pageIndex: 0 },
      manualPagination: true,
      pageCount: data && data.pageCount,
    },
    usePagination
  )

  useEffect(() => {
    setQueryPageIndex(pageIndex);
    setQueryPageSize(pageSize);
  }, [pageIndex, pageSize])

Is there a way to pass pageIndex and pageSize to useTable to avoid having to duplicate the state?

[peraltafederico]

@wisaac407 I approached this problem the same as you... Nothing better came to my mind yet :(

Did you find something else through this time?

[andregamma]

Have you found any solution or is there any complete example for react-query?

[cjol]

I've ended up with a different solution, but just as (if not more) clunky - duplicating the data state rather than the table state:

  const [data, setData] = React.useState([]);
  const table = useTable(
    { columns, data, ... },
    usePagination
  );
  const result = useQuery(
    ["items", {count: table.state.pageSize, page: table.state.pageIndex}],
    fetchItems
  );
  React.useEffect(() => {
    setData(result.data || []);
  }, [result.data, setData]);

[cjol]

Yes, you are totally right that this isn't a good solution! I observed that the problem is basically "linearizing" the circular dependencies between useQuery and useTable, and I thought I would share a different linearisation option "for science"!

[cjol]

Although just to say I don't think it would significantly affect memory usage, since the data array will be assigned to state by reference rather than being a deep duplicate. The other reason this solution came up is that it creates an imperative getData function which maps to the example of server fetching @tannerlinsley gives in the documentation for react-table.

Now as to whether it's confusing that we are using an imperative pattern here when react-query generally follows a declarative approach - definitely!

[winlx]

I'm trying to use react-table with react-query and I'm having trouble figuring out the best way to handle pagination.

This is the best I've come up with, but it seems a bit clunky:

  const [queryPageIndex, setQueryPageIndex] = useState(0);
  const [queryPageSize, setQueryPageSize] = useState(10);
...

Is there a way to pass pageIndex and pageSize to useTable to avoid having to duplicate the state?

You can use useRef instead of useState to prevent unnecessary re-render.

[cjol]

You can use useRef instead of useState to prevent unnecessary re-render.

But the second render is the important one, right? If you useRef, you'll get one render from the internal table state updating (but before the ref has been updated). useQuery will then be reading the old value of the ref during the render, so it wouldn't fire?

[TheRakeshPurohit]

looking forward to the official answer by @tannerlinsley

[jordan-erisman]

Anyone have a good workflow for this yet?

[ArniyhJS]

it's September and no official way to go about with this.
still waiting for a good workflow.

[Gusis93]

I think this would all be solved if react-query offered a way to handle the fetching manually with enabled: false. Because refetch doesn't allow for parameters but it should if you are using pagination. Then you could manually refetch the data sending the pageSize and pageIndex from react-table. Instead it makes you duplicate the data from the pageIndex and pageSize into state variables. I don't think there is any other way.

This is possible when using the infiniteQuery, you are allowed to send parameters but then all the data is stored and is complicated to recover.

I have been looking at it for 1 day and decided to move away from react-query, I don't think this 2 are compatible for this case.

[melbourne2991]

You could use useMutation that effectively allows this, but that feels quite icky too me

[arnaud-deprez]

Hi all,

First, I'm not a react-table nor react-query maintainer and I think it's indeed a pity we don't have good examples/docs on how to integrate both solutions.

So I went to the same path as you, met same difficulties, and I was not happy with the useEffect solution neither because it triggers another round trip in the react lifecycle of the components.

Then I thought about another solution which consist of maintaining the queryState ourself and control the state of react-table.

The problem is when the table instance from react-table modify its state - when you go to the next page for example - you need to reflect that in your queryState.
In my solution, I actually don't let react-table manages its state, but I control it using the useControlledState hook.

So here we go:

// This is my queryState, it could also contains some other filters properties
const [queryPageIndex, setQueryPageIndex] = useState(0);
const [queryPageSize, setQueryPageSize] = useState(10);

const { data } = useQuery(['items', {pageSize: queryPageSize, 'index': queryPageIndex}], listItems)

const useControlledState = (state) => {
  return useMemo(() => (
    {
       ...state,
       pageIndex: queryPageIndex,
       pageSize: queryPageSize
    }
  ), 
  [state, queryPageIndex, queryPageSize])
}

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
// As I control the state, I should not use those
//    gotoPage,
//    nextPage,
//    previousPage,
//    setPageSize,
    state: { pageIndex, pageSize },
// And I can also get back my additional props (see below)
     setQueryPageIndex,
     setQueryPageSize
  } = useTable(
    {
      columns,
      data: data.items,
      // initialState: { pageIndex: 0 }, I don't need that anymore
      useControlledState, <-- that is the hook
      manualPagination: true,
      pageCount: data && data.pageCount,
     // I can also pass other props
     setQueryPageIndex,
     setQueryPageSize
    },
    usePagination
  )

I think it's better as we use a hook to control the react-table before the react lifecycle loop is triggered and we avoid the useEffect roundtrip.

[Eli250]

@arnaud-deprez is there a Typescript version of this solution? I have applied this method using Typescript but I am facing type issues.

[arnaud-deprez]

I'd recommend to use the v8 version that @adairrr pointed out in this issue: React Table Pagination Controlled Example | TanStack Table Docs.

I didn't try it with typescript types definitions yet.

[tannerlinsley]

The controlled state story is already much better in v8 (most of the examples show how to control the state). With this better approach to controlled state, you don't have to go to weird lengths to achieve a better result with React Query. You can control the state in your own state variable, pass that state/handler pair to react-table and then base your data query variables off of that controlled state. We're working on a new example that will show how to do that with React Query. Stay tuned!

[NixBiks]

But to me it seems that the state is reset when you refresh the data (e.g. in the sorting example - if you refresh the data then you lose your sorting state). I'm currently trying to sort server side so I have the sorting controlled and then a useEffect on the sorting. But I lose the sorting state once new data is fetched (consequently I can only sort by one direction). I also tried to use fully controlled instead of just having the sorting controlled but that gave me an infinite loop - not sure if that is expected.

But in general using react-table v8 is a really great experience!

[talatkuyuk]

The controlled state story is already much better in v8 (most of the examples show how to control the state). With this better approach to controlled state, you don't have to go to weird lengths to achieve a better result with React Query. You can control the state in your own state variable, pass that state/handler pair to react-table and then base your data query variables off of that controlled state. We're working on a new example that will show how to do that with React Query. Stay tuned!

Is it possible to have an example about react-table usage with RTK Query as well in this perspective? Currently I am using RTK Query in my nextjs project and want to use React Table in order to show my data. I am trying to find an example for that. Thank you.

[lewi6]

where you at now with that example ??

[adairrr]

For those that stumble across this thread looking how to accomplish pagination in combination with react query, they have added an example with v8 here!

React Table Pagination Controlled Example | TanStack Table Docs

[dsacramone]

Would be nice to have a documented example for those still using v7, using react-query/pagination with row selction.

[yano1978]

Looks like example is broken though 😥

[MartinP-C]

You can view the example source in the repo if it's helpful: https://github.com/TanStack/table/tree/main/examples/react/pagination-controlled

[yano1978]

Apparently example's working again, nevertheless, I had figured out how to make it work myself a while go 😉
Thanks anyway!

[Ryanjso]

Looks like it was moved to https://tanstack.com/table/v8/docs/framework/react/examples/pagination-controlled

[tar-aldev]

Hi. What about filtering?

[dbmikus]

The controlled pagination example doesn't have an example if we are using an opaque cursor string instead of page indexes. I use a pagination string when it's possible that data gets inserted somewhere in the list of already seen pages. Is there a good example using a cursor string? Or how can I map the cursor string to a page index?

[dir]

I'm in the same boat, 0 documentation and very little talk about how to handle backend cursor-based pagination. I am going to opt for completely ignoring tanstack table's pagination handling and doing the pagination on my side. A bit unfortunate, but what can you do.

[KevinVandy]

There's not really much to document when it comes to integrating Tanstack Table and TanStack Query. They are responsible for different things. But if you're asking about server-side manualPagination, there's a lot of documentation for that. We even have a react-query pagination example in the docs.

Pagination Guide
Pagination with React Query Example

In my own MRT docs, I have more examples like this: https://www.material-react-table.com/docs/examples/react-query