React-table: [v7-alpha.21] Pagination does not work with grouping

[agrinko]

First of all, thank you so much for your work - it is awesome!

Bug description
I noticed a bug when trying to use useGroupBy, useExpanded and usePagination hooks: as soon as the grouping is activated (either manually by the user, or programmatically, using default table state), the component runs into an infinite re-rendering cycle. Meaning that it starts re-rendering every several milliseconds without any reason. Also, pagination stops working.

To reproduce
To reproduce it, I slightly modified your original example of grouping:

1. Go to https://codesandbox.io/s/tannerlinsleyreact-table-grouping-zrmbi
2. Open the console: you'll see there's only one "rendering..." message logged from the component, which is as expected
3. Now click on any column to group by it
4. You'll notice infinitely many "rendering..." messages appearing in the console
5. Try clicking on "next page" button: pagination doesn't work
6. If you disable grouping of that column, everything works fine again
7. If you remove usePagination hook and adjust the component to use rows instance property instead of page, grouping works fine without infinite re-rendering

Expected behavior
Obviously, no infinite rendering and working pagination.

Additional context
I also noticed that nestExpandedRows table option doesn't have any effect. Either it is true or false, when you expand the last row in the grouped table, nested values are paginated and thus are not displayed. Maybe it's a separate bug, or maybe it's related.

I could live with this issue by simply disabling pagination when using grouping. But in my own code, I use a common Table component where I need to provide both functionalities for the outer components. And it seems there is no way to disable pagination with table options, is there? As a side note, it would be nice to have such an option

[paolostyle]

When you render rows you can do something like (paginationEnabled ? page : rows).map(renderRow); to disable pagination. You'll still have page in the instance state but you can just ignore it.

[agrinko]

@paolostyle , this doesn't help because infinite rendering bug is still present even when I use rows and ignore page property. It's a big performance issue, the table works very slow.

Right now I solved it by disabling pagination in an ugly way:

const { goupBy } = props;
const tableInstance = useTable(
  { ... },
  useGroupBy,
  useEpanded,
  !groupBy ? usePagination : undefined // disable pagination if grouping is enabled
);

I know it's against "the rules" to put a hook behind a condition, but as long as goupBy property is constant for a given instance of a component, the number of hooks executed for every component instance is constant and it works just fine. So it helps me avoid performance issues by disabling pagination when using grouping, but I still hope there will be a better solution soon :)

[zbluhm]

Pagination also does not appear to work with sorting:

Example: https://codesandbox.io/s/tannerlinsleyreact-table-pagination-0qo8w

Open the console after sorting a column and there will be an infinite rendering loop. Let me know if I should open a separate issue for this, although it seems related.

[agrinko]

@zbluhm , I see somebody already opened this issue, 11 minutes ago:
https://github.com/tannerlinsley/react-table/issues/1445

[nouman91]

any update on this? I am struggling with sorting and pagination

[tannerlinsley]

It'll be fixed soon. Hang tight.

[tannerlinsley]

FYI, this is working on a local copy I am working on. Will ship very soon.

[tannerlinsley]

This should be fixed. See https://github.com/tannerlinsley/react-table/tree/master/examples/kitchen-sink for an example.

[agrinko]

Awesome, thank you @tannerlinsley !