feat(useRowSelect): Improve usePagination integration - only select rows on current page

[roginfarrer]

Problem

Currently, useRowSelect isn't all that smart about pagination -- the select all toggle will always select all rows, regardless of whether they're present on the page. While in some user flows this is the sensible behavior, in some cases it's desirable to only select the visible page's rows (this is what Gmail does, for example). If a user of React Table wants this feature, the would likely need to reimplement the useRowSelect plugin on their own.

Solution

My goal here was to maintain the same options provided by the library, so a completely optional and opt-in feature. This means adding a "AllPageRowsSelected" selected counterpart to "AllRowsSelected", and they can be implemented in the same way.

{
  id: 'selection',
-  Header: ({ getToggleAllRowsSelectedProps }) => (
+  Header: ({ getToggleAllPageRowsSelectedProps }) => (
    <div>
-      <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
+      <IndeterminateCheckbox {...getToggleAllPageRowsSelectedProps()} />
    </div>
  ),
  Cell: ({ row }) => (
    <div>
      <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
    </div>
  ),
},

Other changes

I noticed two subtle bugs with useRowSelect that I addressed:

• While writing a test for the new feature, I noticed that the order of useExpanded and useRowSelect impacted the rows that were selected. In order to operate the selection on the most current state of expanded rows, useExpanded needs to go first. Similarly, I noticed the same thing with usePagination, row selection will only work correctly if it usePagination is passed first
• The row selection referred directly to the row.subRows property, but I'm pretty sure it should resolve to the instance's getSubRows function (defaults to row => row.subRows)

Todo

• Update documentation to show new features

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tannerlinsley/react-table/objbfe8dt
✅ Preview: https://react-table-git-fork-roginfarrer-use-row-select-page-only.tannerlinsley.vercel.app

[tannerlinsley]

This is great! Do you think you'd be able to port these changes to the next branch for v8 too?

[tannerlinsley]

Add some docs around this and I'll be ready to merge!

[tannerlinsley]

Also, some other earlier PRs just came in, so you'll need to ingest those changes.

[roginfarrer]

@tannerlinsley I updated the docs site, should be all set to go. I'll open a new PR for v8.

[tannerlinsley]

🎉 This PR is included in version 7.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[gargroh]

The row selection referred directly to the row.subRows property, but I'm pretty sure it should resolve to the instance's getSubRows function (defaults to row => row.subRows)

@roginfarrer , faced any particular issue for doing mentioned change(#2585 (comment)) ?

Reason for asking is getSubRows(row) will not give correct child rows es. for custom subRows, minimal replication is at https://codesandbox.io/s/useexpanded-userowselect-parent-indeterminate-bug-i0zoy?file=/src/App.js (check by selecting row, and observe parent checkbox is not changed).

#2886 should fix the issue. Let me know in case this will break any of your change.

[roginfarrer]

Hi @gargroh, looks okay to me. I think the intent was to address a conflict that could arise if child rows did not use the subRows key, but it looks like that change wasn't necessary.