Skip to content

Commit 205c7a9

Browse files
roginfarrerRogin Farrer
roginfarrer
and
Rogin Farrer
authored
feat(useRowSelect): Improve usePagination integration - only select rows on current page (#2585)
* Working change, test, example of useRowSelect and usePagination * remove debugging logs * fix test plugin order * update site documentation * fix example readme * add demo to manifest Co-authored-by: Rogin Farrer <[email protected]>
1 parent 6a9223b commit 205c7a9

File tree

22 files changed

+11052
-18
lines changed

22 files changed

+11052
-18
lines changed

‎docs/src/manifests/manifest.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,11 @@
150150
"path": "/docs/examples/row-selection",
151151
"editUrl": "/docs/examples/row-selection.mdx"
152152
},
153+
{
154+
"title": "Row Selection With Pagination",
155+
"path": "/docs/examples/row-selection-and-pagination",
156+
"editUrl": "/docs/examples/row-selection-and-pagination.mdx"
157+
},
153158
{
154159
"title": "Expanding",
155160
"path": "/docs/examples/expanding",

‎docs/src/pages/docs/api/useRowSelect.md

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,26 @@ The following values are provided to the table `instance`:
3232
- Use this function to toggle a row's selected state.
3333
- Optionally pass `true` or `false` to set it to that state
3434
- `toggleAllRowsSelected: Function(?set: Bool) => void`
35-
- Use this function to toggle all rows as select or not
35+
- Use this function to toggle all rows as selected or not
3636
- Optionally pass `true` or `false` to set all rows to that state
37+
- `toggleAllPageRowsSelected: Function(?set: Bool) => void`
38+
- Use this function to toggle all of the current page's rows as selected or not
39+
- Optionally pass `true` or `false` to set all rows to that state
40+
- `getToggleAllPageRowsSelectedProps: Function(props) => props`
41+
- Use this function to get the props needed for a **select all checkbox (current page only)**.
42+
- Props:
43+
- `onChange: Function()`
44+
- `style.cursor: 'pointer'`
45+
- `checked: Bool`
46+
- `indeterminate: Bool`
47+
- `title: 'Toggle All Rows Selected'`
3748
- `getToggleAllRowsSelectedProps: Function(props) => props`
3849
- Use this function to get the props needed for a **select all checkbox**.
3950
- Props:
4051
- `onChange: Function()`
4152
- `style.cursor: 'pointer'`
4253
- `checked: Bool`
54+
- `indeterminate: Bool`
4355
- `title: 'Toggle All Rows Selected'`
4456
- `isAllRowsSelected: Bool`
4557
- Will be `true` if all rows are selected.
@@ -68,5 +80,12 @@ The following additional properties are available on every **prepared** `row` ob
6880

6981
### Example
7082

83+
#### Select All Checks All Rows
84+
7185
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-selection)
7286
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection)
87+
88+
#### Select All Checks Current Page's Rows
89+
90+
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-selection-and-pagination)
91+
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection-and-pagination)

‎docs/src/pages/docs/examples/row-selection-with-pagination.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
id: row-selection-and-pagination
3+
title: Row Selection and Pagination
4+
toc: false
5+
---
6+
7+
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection)
8+
- [View Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-selection)
9+
10+
<iframe
11+
src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/row-selection-and-pagination?autoresize=1&fontsize=14&theme=dark"
12+
title="tannerlinsley/react-table: row-selection-and-pagination"
13+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
14+
style={{
15+
width: '100%',
16+
height: '80vh',
17+
border: '0',
18+
borderRadius: 8,
19+
overflow: 'hidden',
20+
position: 'static',
21+
zIndex: 0,
22+
}}
23+
></iframe>

‎examples/row-selection-and-pagination/.babelrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"presets": ["react-app"],
3+
"plugins": ["styled-components"]
4+
}

‎examples/row-selection-and-pagination/.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎examples/row-selection-and-pagination/.eslintrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": ["react-app", "prettier"],
3+
"rules": {
4+
// "eqeqeq": 0,
5+
// "jsx-a11y/anchor-is-valid": 0
6+
}
7+
}

‎examples/row-selection-and-pagination/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎examples/row-selection-and-pagination/.rescriptsrc.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const path = require('path')
2+
const resolveFrom = require('resolve-from')
3+
4+
const fixLinkedDependencies = config => {
5+
config.resolve = {
6+
...config.resolve,
7+
alias: {
8+
...config.resolve.alias,
9+
react$: resolveFrom(path.resolve('node_modules'), 'react'),
10+
'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
11+
},
12+
}
13+
return config
14+
}
15+
16+
const includeSrcDirectory = config => {
17+
config.resolve = {
18+
...config.resolve,
19+
modules: [path.resolve('src'), ...config.resolve.modules],
20+
}
21+
return config
22+
}
23+
24+
module.exports = [
25+
['use-babel-config', '.babelrc'],
26+
['use-eslint-config', '.eslintrc'],
27+
fixLinkedDependencies,
28+
// includeSrcDirectory,
29+
]

‎examples/row-selection-and-pagination/README.md

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
# Row Selection and Pagination
2+
3+
- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection-and-pagination)
4+
- `yarn` and `yarn start` to run and edit the example
5+
6+
## Guide
7+
8+
To use `useRowSelect` and `usePagination` together (NOTE that `usePagination` goes first!):
9+
10+
```diff
11+
// Import React
12+
import React from 'react'
13+
14+
// Import React Table
15+
import {
16+
useTable,
17+
useGroupBy,
18+
useFilters,
19+
useSortBy,
20+
useExpanded,
21+
+ usePagination,
22+
+ useRowSelect,
23+
} from 'react-table'
24+
25+
+ const IndeterminateCheckbox = React.forwardRef(
26+
+ ({ indeterminate, ...rest }, ref) => {
27+
+ const defaultRef = React.useRef()
28+
+ const resolvedRef = ref || defaultRef
29+
+
30+
+ React.useEffect(() => {
31+
+ resolvedRef.current.indeterminate = indeterminate
32+
+ }, [resolvedRef, indeterminate])
33+
+
34+
+ return (
35+
+ <>
36+
+ <input type="checkbox" ref={resolvedRef} {...rest} />
37+
+ </>
38+
+ )
39+
+ }
40+
+ )
41+
42+
// Create a component to render your table
43+
function MyTable(props) {
44+
// Use the useTable hook to create your table configuration
45+
const instance = useTable(
46+
props,
47+
useGroupBy,
48+
useFilters,
49+
useSortBy,
50+
useExpanded,
51+
+ usePagination,
52+
+ useRowSelect
53+
+ hooks => {
54+
+ hooks.visibleColumns.push(columns => [
55+
+ {
56+
+ id: 'selection',
57+
+ Header: ({ getToggleAllPageRowsSelectedProps }) => (
58+
+ <div>
59+
+ <IndeterminateCheckbox {...getToggleAllPageRowsSelectedProps()} />
60+
+ </div>
61+
+ ),
62+
+ Cell: ({ row }) => (
63+
+ <div>
64+
+ <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
65+
+ </div>
66+
+ ),
67+
+ },
68+
+ ...columns,
69+
+ ])
70+
+ }
71+
)
72+
73+
// Use the state and functions returned from useTable to build your UI
74+
const {
75+
getTableProps,
76+
headerGroups,
77+
rows,
78+
getRowProps,
79+
prepareRow,
80+
+ pageOptions,
81+
+ page,
82+
+ state: { pageIndex, pageSize },
83+
+ gotoPage,
84+
+ previousPage,
85+
+ nextPage,
86+
+ setPageSize,
87+
+ canPreviousPage,
88+
+ canNextPage,
89+
} = instance
90+
91+
// Render the UI for your table
92+
return (
93+
<div>
94+
<table {...getTableProps()}>
95+
...
96+
</table>
97+
+ <div>
98+
+ <button onClick={() => previousPage()} disabled={!canPreviousPage}>
99+
+ Previous Page
100+
+ </button>
101+
+ <button onClick={() => nextPage()} disabled={!canNextPage}>
102+
+ Next Page
103+
+ </button>
104+
+ <div>
105+
+ Page{' '}
106+
+ <em>
107+
+ {pageIndex + 1} of {pageOptions.length}
108+
+ </em>
109+
+ </div>
110+
+ <div>Go to page:</div>
111+
+ <input
112+
+ type="number"
113+
+ defaultValue={pageIndex + 1 || 1}
114+
+ onChange={e => {
115+
+ const page = e.target.value ? Number(e.target.value) - 1 : 0
116+
+ gotoPage(page)
117+
+ }}
118+
+ />
119+
+ <select
120+
+ value={pageSize}
121+
+ onChange={e => {
122+
+ setPageSize(Number(e.target.value))
123+
+ }}
124+
+ >
125+
+ {pageSizeOptions.map(pageSize => (
126+
+ <option key={pageSize} value={pageSize}>
127+
+ Show {pageSize}
128+
+ </option>
129+
+ ))}
130+
+ </select>
131+
+ </div>
132+
</div>
133+
)
134+
}
135+
```

‎examples/row-selection-and-pagination/package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"private": true,
3+
"scripts": {
4+
"start": "rescripts start",
5+
"build": "rescripts build",
6+
"test": "rescripts test",
7+
"eject": "rescripts eject"
8+
},
9+
"dependencies": {
10+
"namor": "^1.1.2",
11+
"react": "^16.8.6",
12+
"react-dom": "^16.8.6",
13+
"react-scripts": "3.0.1",
14+
"react-table": "latest",
15+
"styled-components": "^4.3.2"
16+
},
17+
"devDependencies": {
18+
"@rescripts/cli": "^0.0.11",
19+
"@rescripts/rescript-use-babel-config": "^0.0.8",
20+
"@rescripts/rescript-use-eslint-config": "^0.0.9",
21+
"babel-eslint": "10.0.1"
22+
},
23+
"browserslist": {
24+
"production": [
25+
">0.2%",
26+
"not dead",
27+
"not op_mini all"
28+
],
29+
"development": [
30+
"last 1 chrome version",
31+
"last 1 firefox version",
32+
"last 1 safari version"
33+
]
34+
}
35+
}

0 commit comments

Comments
 (0)