Clean way to handle pagination.pageCount, remove it from state?

[colindjk]

(Using V8)

Currently I have a bit of an issue with managing table state + having a paginated server response (currently using react-query but I think this is relevant in other cases).

Currently the basic pattern is like so:

const state = useTableState();

// Takes the state b/c it needs filters / pagination info
const query = usePaginatedQuery(state);

const instance = useTable(table, { data: query.data, state: state });

Now I have a bit of an issue, pageCount is tied directly to the server response, which is based on filters / pagination state, which creates a bit of a circular dependency.

I currently planned on doing one of two solutions:

• a useEffect (or maybe useLayoutEffect to avoid numbers changing quickly) after the react useTableInstance & use setPageCount there, but it feels a bit janky.
• Alternatively I could use useMemo before the useTableInstance for the table state to avoid unnecessary rerenders... but that would mean I'd have to check each slice of state for changes which feels even more jank (even though it might be slightly more efficient).

No other part of the state that I've found seems to have this issue, which is what made me remember - pageCount is a derived value, either from the length of the rows (client side) or from the API response (server side). It wouldn't make sense to actually set the value itself in most cases, since it's effectively purely derived from existing state + rows.

Basically: Is there any point to storing pageCount in state? Given the two scenarios I feel like either let it be derived, or allow an option to be provided for pageCount specifically.

[tannerlinsley]

Technically, the page count is state, or in other words, a persisted variable in the table instance that changes over time. It's either provided by the user or derived automatically. We'll have better docs around this soon, but I think the following should help:

• Manually controlling pagination?
  • If you know the page count, provide it to options.state.pagination.pageCount (-1 if it is unknown)
• Using client-side pagination?
  • Provide only your data

In both cases, use instance.getPageCount() to get the page count (the table will know whether to pass the state through or derive it automatically)

Note: I just released a new version that polishes this experience a bit more. Please give it a try :)

[tannerlinsley]

I just added a "pagination-controlled" example that you might be interested in :)

[colindjk]

Wow, thanks for being so helpful! I like that the solution avoids unnecessary re-renders :3. Definitely looked a little cleaner than what I had in mind 🙂