Dynamically calculate pageCount when using manualPagination

Using v7?

Thanks for using the beta version of React Table v7! We’re very excited about it.

Describe the bug I am using v7.0.0-rc15 with both useSortBy and usePagination hooks. Mostly everything is working exactly as I would expect and I am very happy with how this project is turning out so thank you for it!

However, I wanted to tell you / ask about an issue I ran into when in manualPagination mode. I have custom controls for paginating and controlling page size over a server, when I update the pageSize via setPageSize or change the page via gotoPage I would expect the pageCount to be re-calculated. I see that we have to explicitly pass in our own pageCount whenever we use both manualPagination and are calling useTable({}). Since pageCount doesn’t appear to update when I update the page or size, I run into bugs, such as react-table thinking their are less pages than their actually are.

I can work around these issues by relying on a Ref, and dynamically updating the pageCount between renders, however it’d be much cleaner/more convenient if the API could optionally make pageCount a function during render. For example:

If I was able to do the following:

const {
  pageCount,
} = useTable({
  initialState: { pageIndex: defaultPageIndex, pageSize: defaultPageSize },
  manualPagination: true,
  pageCount: (pageSize: number) => Math.ceil(totalRows / pageSize)
});

console.log(pageCount); // Up-to-date page count

Now react-table wouldn’t have to update it for me, and I’d have the ability to have better control over the pageCount when I was using manualPagination.

If this is already supported by something please let me know. Maybe I am missing something in the docs that I can’t find, or possibly just am misusing this setup.

To Reproduce Steps to reproduce the behavior:

1. Make a new table with usePagination
2. Set manualPagination to true and set a pageCount of 1000 and a pageSize of 50
3. Update pageSize to 25
4. See pageCount stay at 20

Expected behavior Given the example above I’d expect to be able to have the pageCount easily update to 40.

Codesandbox! Use a new react-table codesandbox to reproduce the issue.

I’ll try to put together a sandbox and update this issue showing more details, but I think it’s pretty straightforward from the steps I wrote out.

Desktop (please complete the following information):

• OS: macOS 10.15
• Browser: Chrome/Safari/Firefox
• Version: Latest

Additional context Sorry if this is a non-issue or is already documented but I tried without success to find anything else about this, it is a beta after all. Perhaps this will help others when they are searching for a similar solution.

[Domiii]

@Dema 's explanation lays bare the problem with this API: it contains a circular reference blooper.

It wants us to compute pageCount manually, but that depends on pageSize, which is stored internally.

@tannerlinsley Why close the thread? I understand you are busy, but that does not render this issue invalid. Can you re-open it?

Ideal Solution

Instead of pageCount, useTable should take totalRowCount (or somesuch). Then it can easily compute pageCount and friends for us, without us having to store pageSize separately.

Temporary Workaround

Until that API change happens:

Compute pageCount, canPreviousPage, canNextPage, pageOptions manually, after calling useTable.

E.g.:

let { pageSize, pageCount } = tableInstance.state;
pageCount = manualPagination ? Math.ceil(totalCount / pageSize) : pageCount;

More can be found in the usePagination hook.

[Dema]

The issue is that sometimes we don’t know the pageCount. But instead we know only a totalRowCount. And as this done there’s an issue with pageSize being a return value of useTable hook, but to calculate pageCount from totalRowCount we need the pageSize.

There’re two possible solutions: 1) allow pageCount to be a function (pageSize:number)=>number or add a new property totalRowCount, so user can either specify pageCount or totalRowCount and the useTable can calculate pageCount internally.