fix(use-pagination): fixed use pagination pageIndex bug

Use pagination will no longer synchronously reset the pageIndex to 0 on mount
This commit is contained in:
tannerlinsley
2019-08-15 09:55:22 -06:00
parent f9242f604d
commit d50ec588bc
20 changed files with 809 additions and 791 deletions
+1
View File
@@ -13,4 +13,5 @@ module.exports = {
rootDir: path.resolve(__dirname, '../../'),
roots: ['<rootDir>/src', __dirname],
transformIgnorePatterns: ['node_modules'],
snapshotSerializers: [require.resolve('snapshot-diff/serializer.js')],
}
+1
View File
@@ -1 +1,2 @@
import '@testing-library/jest-dom/extend-expect'
import 'snapshot-diff/extend-expect'
+4 -1
View File
@@ -1,6 +1,6 @@
import React from 'react'
import styled from 'styled-components'
import { useTable, usePagination } from 'react-table'
import { useTable, usePagination, useTableState } from 'react-table'
import makeData from './makeData'
@@ -38,6 +38,8 @@ const Styles = styled.div`
`
function Table({ columns, data }) {
const tableState = useTableState({ pageIndex: 2 })
// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
@@ -60,6 +62,7 @@ function Table({ columns, data }) {
{
columns,
data,
state: tableState,
},
usePagination
)
+7 -7
View File
@@ -51,12 +51,12 @@
"@commitlint/cli": "^8.1.0",
"@commitlint/config-conventional": "^8.1.0",
"@svgr/rollup": "^4.3.2",
"@testing-library/dom": "^5.6.0",
"@testing-library/dom": "^6.0.0",
"@testing-library/jest-dom": "^4.0.0",
"@testing-library/react": "^8.0.7",
"@testing-library/react": "^9.1.1",
"babel-eslint": "9.x",
"commitizen": "^4.0.3",
"core-js": "3",
"core-js": "3.2.1",
"cross-env": "^5.2.0",
"eslint": "5.x",
"eslint-config-prettier": "^4.3.0",
@@ -70,9 +70,9 @@
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "1.6.1",
"eslint-plugin-react-hooks": "1.7.0",
"eslint-plugin-standard": "^4.0.0",
"husky": "^3.0.2",
"husky": "^3.0.3",
"is-ci-cli": "^1.1.1",
"jest": "^24.8.0",
"jest-cli": "^24.8.0",
@@ -81,8 +81,8 @@
"jest-watch-typeahead": "^0.3.1",
"lint-staged": "^9.2.1",
"prop-types": "^15.5.0",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"rollup": "^0.68.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^9.1.3",
-3
View File
@@ -1,6 +1,3 @@
import '@testing-library/react/cleanup-after-each'
import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import { render } from '@testing-library/react'
import { useTable } from '../useTable'
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders an expandable table 1`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -10,64 +10,64 @@ exports[`renders an expandable table 1`] = `
<pre>
<code>
{
- \\"expanded\\": {}
+ \\"expanded\\": {
+ \\"0\\": true
- "expanded": {}
+ "expanded": {
+ "0": true
+ }
}
</code>
</pre>
<table
class=\\"\\"
class=""
@@ -82,10 +84,53 @@
<td
class=\\"\\"
class=""
>
<span
style=\\"cursor: pointer; padding-left: 0rem;\\"
style="cursor: pointer; padding-left: 0rem;"
+ >
+ 👇
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ tanner
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ linsley
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 29
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 100
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ In Relationship
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 50
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ class=""
+ >
+ <td
+ class=\\"\\"
+ class=""
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 2rem;\\"
+ style="cursor: pointer; padding-left: 2rem;"
>
👉
</span>
@@ -76,147 +76,147 @@ exports[`renders an expandable table 1`] = `
@@ -115,10 +160,139 @@
</td>
<td
class=\\"\\"
class=""
>
50
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ class=""
+ >
+ <td
+ class=\\"\\"
+ class=""
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 2rem;\\"
+ style="cursor: pointer; padding-left: 2rem;"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ derek
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ perkins
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 40
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 40
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ Single
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 80
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ class=""
+ >
+ <td
+ class=\\"\\"
+ class=""
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 2rem;\\"
+ style="cursor: pointer; padding-left: 2rem;"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ joe
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ bergevin
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 45
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 20
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ Complicated
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 10
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ class=""
+ >
+ <td
+ class=\\"\\"
+ class=""
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 2rem;\\"
+ style="cursor: pointer; padding-left: 2rem;"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ jaylen
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ linsley
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 26
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 99
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ In Relationship
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 70
</td>
</tr>
<tr
class=\\"\\"
>"
class=""
>
`;
exports[`renders an expandable table 2`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -225,10 +225,10 @@ exports[`renders an expandable table 2`] = `
<pre>
<code>
{
\\"expanded\\": {
- \\"0\\": true
+ \\"0\\": {
+ \\"0\\": true
"expanded": {
- "0": true
+ "0": {
+ "0": true
+ }
}
}
@@ -237,53 +237,53 @@ exports[`renders an expandable table 2`] = `
<table
@@ -127,10 +129,53 @@
<td
class=\\"\\"
class=""
>
<span
style=\\"cursor: pointer; padding-left: 2rem;\\"
style="cursor: pointer; padding-left: 2rem;"
+ >
+ 👇
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ tanner
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ linsley
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 29
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 100
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ In Relationship
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 50
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ class=""
+ >
+ <td
+ class=\\"\\"
+ class=""
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 4rem;\\"
+ style="cursor: pointer; padding-left: 4rem;"
>
👉
</span>
@@ -292,147 +292,147 @@ exports[`renders an expandable table 2`] = `
@@ -160,10 +205,139 @@
</td>
<td
class=\\"\\"
class=""
>
50
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ class=""
+ >
+ <td
+ class=\\"\\"
+ class=""
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 4rem;\\"
+ style="cursor: pointer; padding-left: 4rem;"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ derek
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ perkins
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 40
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 40
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ Single
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 80
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ class=""
+ >
+ <td
+ class=\\"\\"
+ class=""
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 4rem;\\"
+ style="cursor: pointer; padding-left: 4rem;"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ joe
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ bergevin
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 45
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 20
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ Complicated
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 10
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ class=""
+ >
+ <td
+ class=\\"\\"
+ class=""
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 4rem;\\"
+ style="cursor: pointer; padding-left: 4rem;"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ jaylen
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ linsley
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 26
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 99
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ In Relationship
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 70
</td>
</tr>
<tr
class=\\"\\"
>"
class=""
>
`;
exports[`renders an expandable table 3`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -440,11 +440,11 @@ exports[`renders an expandable table 3`] = `
<pre>
<code>
{
\\"expanded\\": {
\\"0\\": {
- \\"0\\": true
+ \\"0\\": {
+ \\"0\\": true
"expanded": {
"0": {
- "0": true
+ "0": {
+ "0": true
+ }
}
}
@@ -453,53 +453,53 @@ exports[`renders an expandable table 3`] = `
</pre>
@@ -172,10 +174,53 @@
<td
class=\\"\\"
class=""
>
<span
style=\\"cursor: pointer; padding-left: 4rem;\\"
style="cursor: pointer; padding-left: 4rem;"
+ >
+ 👇
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ tanner
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ linsley
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 29
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 100
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ In Relationship
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 50
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ class=""
+ >
+ <td
+ class=\\"\\"
+ class=""
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 6rem;\\"
+ style="cursor: pointer; padding-left: 6rem;"
>
👉
</span>
@@ -508,159 +508,159 @@ exports[`renders an expandable table 3`] = `
@@ -205,10 +250,139 @@
</td>
<td
class=\\"\\"
class=""
>
50
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ class=""
+ >
+ <td
+ class=\\"\\"
+ class=""
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 6rem;\\"
+ style="cursor: pointer; padding-left: 6rem;"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ derek
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ perkins
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 40
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 40
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ Single
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 80
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ class=""
+ >
+ <td
+ class=\\"\\"
+ class=""
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 6rem;\\"
+ style="cursor: pointer; padding-left: 6rem;"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ joe
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ bergevin
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 45
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 20
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ Complicated
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 10
+ </td>
+ </tr>
+ <tr
+ class=\\"\\"
+ class=""
+ >
+ <td
+ class=\\"\\"
+ class=""
+ >
+ <span
+ style=\\"cursor: pointer; padding-left: 6rem;\\"
+ style="cursor: pointer; padding-left: 6rem;"
+ >
+ 👉
+ </span>
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ jaylen
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ linsley
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 26
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 99
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ In Relationship
+ </td>
+ <td
+ class=\\"\\"
+ class=""
+ >
+ 70
</td>
</tr>
<tr
class=\\"\\"
>"
class=""
>
`;
exports[`renders an expandable table 4`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -3,11 +3,13 @@
<code>
{
\\"expanded\\": {
\\"0\\": {
\\"0\\": {
- \\"0\\": true
+ \\"0\\": {
+ \\"0\\": true
"expanded": {
"0": {
"0": {
- "0": true
+ "0": {
+ "0": true
+ }
}
}
@@ -668,40 +668,40 @@ exports[`renders an expandable table 4`] = `
}
</code>
@@ -218,11 +220,11 @@
class=\\"\\"
class=""
>
<span
style=\\"cursor: pointer; padding-left: 6rem;\\"
style="cursor: pointer; padding-left: 6rem;"
>
- 👉
+ 👇
</span>
</td>
<td
class=\\"\\"
class=""
>
@@ -250,10 +252,30 @@
</td>
<td
class=\\"\\"
class=""
>
50
+ </td>
+ </tr>
+ <tr>
+ <td
+ colspan=\\"7\\"
+ colspan="7"
+ >
+ <pre>
+ <code>
+ {
+ \\"values\\": {
+ \\"firstName\\": \\"tanner\\",
+ \\"lastName\\": \\"linsley\\",
+ \\"age\\": 29,
+ \\"visits\\": 100,
+ \\"status\\": \\"In Relationship\\",
+ \\"progress\\": 50
+ "values": {
+ "firstName": "tanner",
+ "lastName": "linsley",
+ "age": 29,
+ "visits": 100,
+ "status": "In Relationship",
+ "progress": 50
+ }
+ }
+ </code>
@@ -709,6 +709,6 @@ exports[`renders an expandable table 4`] = `
</td>
</tr>
<tr
class=\\"\\"
>"
class=""
>
`;
@@ -1,197 +1,197 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders a filterable table 1`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -37,11 +37,11 @@
colspan=\\"1\\"
colspan="1"
>
Last Name
<input
placeholder=\\"Search...\\"
- value=\\"\\"
+ value=\\"l\\"
placeholder="Search..."
- value=""
+ value="l"
/>
</th>
<th
class=\\"\\"
colspan=\\"1\\"
class=""
colspan="1"
@@ -115,78 +115,10 @@
</td>
<td
class=\\"\\"
class=""
>
progress: 50
- </td>
- </tr>
- <tr
- class=\\"\\"
- class=""
- >
- <td
- class=\\"\\"
- class=""
- >
- firstName: derek
- </td>
- <td
- class=\\"\\"
- class=""
- >
- lastName: perkins
- </td>
- <td
- class=\\"\\"
- class=""
- >
- age: 40
- </td>
- <td
- class=\\"\\"
- class=""
- >
- visits: 40
- </td>
- <td
- class=\\"\\"
- class=""
- >
- status: Single
- </td>
- <td
- class=\\"\\"
- class=""
- >
- progress: 80
- </td>
- </tr>
- <tr
- class=\\"\\"
- class=""
- >
- <td
- class=\\"\\"
- class=""
- >
- firstName: joe
- </td>
- <td
- class=\\"\\"
- class=""
- >
- lastName: bergevin
- </td>
- <td
- class=\\"\\"
- class=""
- >
- age: 45
- </td>
- <td
- class=\\"\\"
- class=""
- >
- visits: 20
- </td>
- <td
- class=\\"\\"
- class=""
- >
- status: Complicated
- </td>
- <td
- class=\\"\\"
- class=""
- >
- progress: 10
</td>
</tr>
<tr
class=\\"\\"
>"
class=""
>
`;
exports[`renders a filterable table 2`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -37,11 +37,11 @@
colspan=\\"1\\"
colspan="1"
>
Last Name
<input
placeholder=\\"Search...\\"
- value=\\"l\\"
+ value=\\"er\\"
placeholder="Search..."
- value="l"
+ value="er"
/>
</th>
<th
class=\\"\\"
colspan=\\"1\\"
class=""
colspan="1"
@@ -89,70 +89,70 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- firstName: tanner
+ firstName: derek
</td>
<td
class=\\"\\"
class=""
>
- lastName: linsley
+ lastName: perkins
</td>
<td
class=\\"\\"
class=""
>
- age: 29
+ age: 40
</td>
<td
class=\\"\\"
class=""
>
- visits: 100
+ visits: 40
</td>
<td
class=\\"\\"
class=""
>
- status: In Relationship
+ status: Single
</td>
<td
class=\\"\\"
class=""
>
- progress: 50
+ progress: 80
</td>
</tr>
<tr
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- firstName: jaylen
+ firstName: joe
</td>
<td
class=\\"\\"
class=""
>
- lastName: linsley
+ lastName: bergevin
</td>
<td
class=\\"\\"
class=""
>
- age: 26
+ age: 45
</td>
<td
class=\\"\\"
class=""
>
- visits: 99
+ visits: 20
</td>
<td
class=\\"\\"
class=""
>
- status: In Relationship
+ status: Complicated
</td>
<td
class=\\"\\"
class=""
>
- progress: 70
+ progress: 10
@@ -199,5 +199,5 @@ exports[`renders a filterable table 2`] = `
</tr>
</tbody>
</table>
</DocumentFragment>"
</DocumentFragment>
`;
@@ -1,15 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders a groupable table 1`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -29,13 +29,13 @@
<span
class=\\"\\"
style=\\"cursor: pointer;\\"
title=\\"Toggle GroupBy\\"
class=""
style="cursor: pointer;"
title="Toggle GroupBy"
>
- 👊
+ 🛑
@@ -18,12 +18,12 @@ exports[`renders a groupable table 1`] = `
+ Last Name
</th>
<th
class=\\"\\"
colspan=\\"1\\"
class=""
colspan="1"
>
@@ -44,11 +44,11 @@
style=\\"cursor: pointer;\\"
title=\\"Toggle GroupBy\\"
style="cursor: pointer;"
title="Toggle GroupBy"
>
👊
</span>
@@ -31,36 +31,36 @@ exports[`renders a groupable table 1`] = `
+ First Name
</th>
<th
class=\\"\\"
colspan=\\"1\\"
class=""
colspan="1"
>
@@ -107,138 +107,119 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- firstName: tanner
- </td>
- <td
- class=\\"\\"
- class=""
+ <span
+ style=\\"cursor: pointer;\\"
+ style="cursor: pointer;"
>
- lastName: linsley
- </td>
- <td
- class=\\"\\"
- class=""
- >
- age: 29
- </td>
- <td
- class=\\"\\"
- class=""
- >
- visits: 100
- </td>
- <td
- class=\\"\\"
- class=""
- >
- status: In Relationship
+ 👉
@@ -68,135 +68,135 @@ exports[`renders a groupable table 1`] = `
+ lastName: linsley (2)
</td>
<td
class=\\"\\"
class=""
>
- progress: 50
- </td>
- </tr>
- <tr
- class=\\"\\"
- class=""
- >
- <td
- class=\\"\\"
- class=""
- >
- firstName: derek
- </td>
- <td
- class=\\"\\"
- class=""
- >
- lastName: perkins
+ 2 Names
</td>
<td
class=\\"\\"
class=""
>
- age: 40
+ 27.5 (avg)
</td>
<td
class=\\"\\"
class=""
>
- visits: 40
+ 199 (total)
</td>
<td
class=\\"\\"
class=""
>
- status: Single
+ status: null
</td>
<td
class=\\"\\"
class=""
>
- progress: 80
+ 60 (med)
</td>
</tr>
<tr
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- firstName: joe
+ <span
+ style=\\"cursor: pointer;\\"
+ style="cursor: pointer;"
+ >
+ 👉
+ </span>
+ lastName: perkins (1)
</td>
<td
class=\\"\\"
class=""
>
- lastName: bergevin
+ 1 Names
</td>
<td
class=\\"\\"
class=""
>
- age: 45
+ 40 (avg)
</td>
<td
class=\\"\\"
class=""
>
- visits: 20
+ 40 (total)
</td>
<td
class=\\"\\"
class=""
>
- status: Complicated
+ status: null
</td>
<td
class=\\"\\"
class=""
>
- progress: 10
+ 80 (med)
</td>
</tr>
<tr
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- firstName: jaylen
+ <span
+ style=\\"cursor: pointer;\\"
+ style="cursor: pointer;"
+ >
+ 👉
+ </span>
+ lastName: bergevin (1)
</td>
<td
class=\\"\\"
class=""
>
- lastName: linsley
+ 1 Names
</td>
<td
class=\\"\\"
class=""
>
- age: 26
+ 45 (avg)
</td>
<td
class=\\"\\"
class=""
>
- visits: 99
+ 20 (total)
</td>
<td
class=\\"\\"
class=""
>
- status: In Relationship
+ status: null
</td>
<td
class=\\"\\"
class=""
>
- progress: 70
+ 10 (med)
@@ -204,41 +204,41 @@ exports[`renders a groupable table 1`] = `
</tr>
</tbody>
</table>
</DocumentFragment>"
</DocumentFragment>
`;
exports[`renders a groupable table 2`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -6,17 +6,29 @@
<tr
class=\\"\\"
class=""
>
<th
class=\\"\\"
- colspan=\\"2\\"
+ colspan=\\"1\\"
class=""
- colspan="2"
+ colspan="1"
>
Name
</th>
<th
class=\\"\\"
- colspan=\\"4\\"
+ colspan=\\"1\\"
class=""
- colspan="4"
+ colspan="1"
+ >
+ Info
+ </th>
+ <th
+ class=\\"\\"
+ colspan=\\"1\\"
+ class=""
+ colspan="1"
+ >
+ Name
+ </th>
+ <th
+ class=\\"\\"
+ colspan=\\"3\\"
+ class=""
+ colspan="3"
>
Info
</th>
@@ -246,9 +246,9 @@ exports[`renders a groupable table 2`] = `
<tr
@@ -42,13 +54,13 @@
<span
class=\\"\\"
style=\\"cursor: pointer;\\"
title=\\"Toggle GroupBy\\"
class=""
style="cursor: pointer;"
title="Toggle GroupBy"
>
- 👊
+ 🛑
@@ -257,12 +257,12 @@ exports[`renders a groupable table 2`] = `
+ Visits
</th>
<th
class=\\"\\"
colspan=\\"1\\"
class=""
colspan="1"
>
@@ -57,11 +69,11 @@
style=\\"cursor: pointer;\\"
title=\\"Toggle GroupBy\\"
style="cursor: pointer;"
title="Toggle GroupBy"
>
👊
</span>
@@ -270,12 +270,12 @@ exports[`renders a groupable table 2`] = `
+ First Name
</th>
<th
class=\\"\\"
colspan=\\"1\\"
class=""
colspan="1"
>
@@ -70,11 +82,11 @@
style=\\"cursor: pointer;\\"
title=\\"Toggle GroupBy\\"
style="cursor: pointer;"
title="Toggle GroupBy"
>
👊
</span>
@@ -283,8 +283,8 @@ exports[`renders a groupable table 2`] = `
+ Age
</th>
<th
class=\\"\\"
colspan=\\"1\\"
class=""
colspan="1"
>
@@ -114,10 +126,13 @@
>
@@ -293,10 +293,10 @@ exports[`renders a groupable table 2`] = `
lastName: linsley (2)
</td>
+ <td
+ class=\\"\\"
+ class=""
+ />
<td
class=\\"\\"
class=""
>
2 Names
</td>
@@ -304,42 +304,42 @@ exports[`renders a groupable table 2`] = `
27.5 (avg)
</td>
<td
class=\\"\\"
class=""
>
- 199 (total)
- </td>
- <td
- class=\\"\\"
- class=""
- >
status: null
</td>
<td
class=\\"\\"
class=""
>
@@ -155,22 +165,20 @@
</span>
lastName: perkins (1)
</td>
<td
class=\\"\\"
class=""
- >
- 1 Names
- </td>
+ />
<td
class=\\"\\"
class=""
>
- 40 (avg)
+ 1 Names
</td>
<td
class=\\"\\"
class=""
>
- 40 (total)
+ 40 (avg)
</td>
<td
class=\\"\\"
class=""
>
status: null
@@ -194,22 +202,20 @@
@@ -347,25 +347,25 @@ exports[`renders a groupable table 2`] = `
lastName: bergevin (1)
</td>
<td
class=\\"\\"
class=""
- >
- 1 Names
- </td>
+ />
<td
class=\\"\\"
class=""
>
- 45 (avg)
+ 1 Names
</td>
<td
class=\\"\\"
class=""
>
- 20 (total)
+ 45 (avg)
</td>
<td
class=\\"\\"
class=""
>
status: null"
status: null
`;
@@ -1,320 +1,138 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders a paginated table 1`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -65,11 +65,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 1
+ tanner 11
- tanner 21
+ tanner 31
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -99,11 +99,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 2
+ tanner 12
- tanner 22
+ tanner 32
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -133,11 +133,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 3
+ tanner 13
- tanner 23
+ tanner 33
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -167,11 +167,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 4
+ tanner 14
- tanner 24
+ tanner 34
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -201,11 +201,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 5
+ tanner 15
- tanner 25
+ tanner 35
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -235,11 +235,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 6
+ tanner 16
- tanner 26
+ tanner 36
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -269,11 +269,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 7
+ tanner 17
- tanner 27
+ tanner 37
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -303,11 +303,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 8
+ tanner 18
- tanner 28
+ tanner 38
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -337,11 +337,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 9
+ tanner 19
- tanner 29
+ tanner 39
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -371,11 +371,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 10
+ tanner 20
- tanner 30
+ tanner 40
</td>
<td
class=\\"\\"
>
linsley
@@ -404,19 +404,15 @@
</tbody>
</table>
<div
class=\\"pagination\\"
>
- <button
- disabled=\\"\\"
- >
+ <button>
&lt;&lt;
</button>
- <button
- disabled=\\"\\"
- >
+ <button>
&lt;
</button>
<button>
&gt;
@@ -427,20 +423,20 @@
</button>
<span>
Page
<strong>
- 1 of 10
+ 2 of 10
</strong>
</span>
<span>
| Go to page:
<input
style=\\"width: 100px;\\"
type=\\"number\\"
- value=\\"1\\"
+ value=\\"2\\"
/>
</span>
<select>
<option"
`;
exports[`renders a paginated table 2`] = `
"Snapshot Diff:
- First value
+ Second value
@@ -65,11 +65,11 @@
class=\\"\\"
>
<td
class=\\"\\"
>
- tanner 11
+ tanner 21
</td>
<td
class=\\"\\"
>
linsley
@@ -99,11 +99,11 @@
class=\\"\\"
>
<td
class=\\"\\"
>
- tanner 12
+ tanner 22
</td>
<td
class=\\"\\"
>
linsley
@@ -133,11 +133,11 @@
class=\\"\\"
>
<td
class=\\"\\"
>
- tanner 13
+ tanner 23
</td>
<td
class=\\"\\"
>
linsley
@@ -167,11 +167,11 @@
class=\\"\\"
>
<td
class=\\"\\"
>
- tanner 14
+ tanner 24
</td>
<td
class=\\"\\"
>
linsley
@@ -201,11 +201,11 @@
class=\\"\\"
>
<td
class=\\"\\"
>
- tanner 15
+ tanner 25
</td>
<td
class=\\"\\"
>
linsley
@@ -235,11 +235,11 @@
class=\\"\\"
>
<td
class=\\"\\"
>
- tanner 16
+ tanner 26
</td>
<td
class=\\"\\"
>
linsley
@@ -269,11 +269,11 @@
class=\\"\\"
>
<td
class=\\"\\"
>
- tanner 17
+ tanner 27
</td>
<td
class=\\"\\"
>
linsley
@@ -303,11 +303,11 @@
class=\\"\\"
>
<td
class=\\"\\"
>
- tanner 18
+ tanner 28
</td>
<td
class=\\"\\"
>
linsley
@@ -337,11 +337,11 @@
class=\\"\\"
>
<td
class=\\"\\"
>
- tanner 19
+ tanner 29
</td>
<td
class=\\"\\"
>
linsley
@@ -371,11 +371,11 @@
class=\\"\\"
>
<td
class=\\"\\"
>
- tanner 20
+ tanner 30
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -423,20 +423,20 @@
@@ -323,158 +141,318 @@ exports[`renders a paginated table 2`] = `
<span>
Page
<strong>
- 2 of 10
+ 3 of 10
- 3 of 10
+ 4 of 10
</strong>
</span>
<span>
| Go to page:
<input
style=\\"width: 100px;\\"
type=\\"number\\"
- value=\\"2\\"
+ value=\\"3\\"
style="width: 100px;"
type="number"
- value="3"
+ value="4"
/>
</span>
<select>
<option"
<option
`;
exports[`renders a paginated table 3`] = `
"Snapshot Diff:
exports[`renders a paginated table 2`] = `
Snapshot Diff:
- First value
+ Second value
@@ -65,11 +65,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 21
+ tanner 91
- tanner 31
+ tanner 41
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -99,11 +99,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 22
+ tanner 92
- tanner 32
+ tanner 42
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -133,11 +133,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 23
+ tanner 93
- tanner 33
+ tanner 43
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -167,11 +167,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 24
+ tanner 94
- tanner 34
+ tanner 44
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -201,11 +201,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 25
+ tanner 95
- tanner 35
+ tanner 45
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -235,11 +235,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 26
+ tanner 96
- tanner 36
+ tanner 46
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -269,11 +269,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 27
+ tanner 97
- tanner 37
+ tanner 47
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -303,11 +303,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 28
+ tanner 98
- tanner 38
+ tanner 48
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -337,11 +337,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 29
+ tanner 99
- tanner 39
+ tanner 49
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -371,11 +371,11 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- tanner 30
- tanner 40
+ tanner 50
</td>
<td
class=""
>
linsley
@@ -423,20 +423,20 @@
</button>
<span>
Page
<strong>
- 4 of 10
+ 5 of 10
</strong>
</span>
<span>
| Go to page:
<input
style="width: 100px;"
type="number"
- value="4"
+ value="5"
/>
</span>
<select>
<option
`;
exports[`renders a paginated table 3`] = `
Snapshot Diff:
- First value
+ Second value
@@ -65,11 +65,11 @@
class=""
>
<td
class=""
>
- tanner 41
+ tanner 91
</td>
<td
class=""
>
linsley
@@ -99,11 +99,11 @@
class=""
>
<td
class=""
>
- tanner 42
+ tanner 92
</td>
<td
class=""
>
linsley
@@ -133,11 +133,11 @@
class=""
>
<td
class=""
>
- tanner 43
+ tanner 93
</td>
<td
class=""
>
linsley
@@ -167,11 +167,11 @@
class=""
>
<td
class=""
>
- tanner 44
+ tanner 94
</td>
<td
class=""
>
linsley
@@ -201,11 +201,11 @@
class=""
>
<td
class=""
>
- tanner 45
+ tanner 95
</td>
<td
class=""
>
linsley
@@ -235,11 +235,11 @@
class=""
>
<td
class=""
>
- tanner 46
+ tanner 96
</td>
<td
class=""
>
linsley
@@ -269,11 +269,11 @@
class=""
>
<td
class=""
>
- tanner 47
+ tanner 97
</td>
<td
class=""
>
linsley
@@ -303,11 +303,11 @@
class=""
>
<td
class=""
>
- tanner 48
+ tanner 98
</td>
<td
class=""
>
linsley
@@ -337,11 +337,11 @@
class=""
>
<td
class=""
>
- tanner 49
+ tanner 99
</td>
<td
class=""
>
linsley
@@ -371,11 +371,11 @@
class=""
>
<td
class=""
>
- tanner 50
+ tanner 100
</td>
<td
class=\\"\\"
class=""
>
linsley
@@ -412,31 +412,35 @@
@@ -485,14 +463,14 @@ exports[`renders a paginated table 3`] = `
- <button>
+ <button
+ disabled=\\"\\"
+ disabled=""
+ >
&gt;
</button>
- <button>
+ <button
+ disabled=\\"\\"
+ disabled=""
+ >
&gt;&gt;
</button>
@@ -500,7 +478,7 @@ exports[`renders a paginated table 3`] = `
<span>
Page
<strong>
- 3 of 10
- 5 of 10
+ 10 of 10
</strong>
@@ -508,13 +486,13 @@ exports[`renders a paginated table 3`] = `
<span>
| Go to page:
<input
style=\\"width: 100px;\\"
type=\\"number\\"
- value=\\"3\\"
+ value=\\"10\\"
style="width: 100px;"
type="number"
- value="5"
+ value="10"
/>
</span>
<select>
<option"
<option
`;
@@ -1,14 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders a table with seletable rows 1`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -109,11 +109,11 @@
</td>
<td
class=\\"\\"
class=""
>
<div>
- Not Selected
@@ -16,12 +16,12 @@ exports[`renders a table with seletable rows 1`] = `
</div>
</td>
<td
class=\\"\\"
class=""
>
@@ -165,11 +165,11 @@
</td>
<td
class=\\"\\"
class=""
>
<div>
- Not Selected
@@ -29,12 +29,12 @@ exports[`renders a table with seletable rows 1`] = `
</div>
</td>
<td
class=\\"\\"
class=""
>
@@ -221,11 +221,11 @@
</td>
<td
class=\\"\\"
class=""
>
<div>
- Not Selected
@@ -42,12 +42,12 @@ exports[`renders a table with seletable rows 1`] = `
</div>
</td>
<td
class=\\"\\"
class=""
>
@@ -277,11 +277,11 @@
</td>
<td
class=\\"\\"
class=""
>
<div>
- Not Selected
@@ -55,7 +55,7 @@ exports[`renders a table with seletable rows 1`] = `
</div>
</td>
<td
class=\\"\\"
class=""
>
@@ -314,15 +314,20 @@
</td>
@@ -69,28 +69,28 @@ exports[`renders a table with seletable rows 1`] = `
<pre>
<code>
{
- \\"selectedRows\\": []
+ \\"selectedRows\\": [
+ \\"0\\",
+ \\"1\\",
+ \\"2\\",
+ \\"3\\"
- "selectedRows": []
+ "selectedRows": [
+ "0",
+ "1",
+ "2",
+ "3"
+ ]
}
</code>
</pre>
</DocumentFragment>"
</DocumentFragment>
`;
exports[`renders a table with seletable rows 2`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -109,11 +109,11 @@
</td>
<td
class=\\"\\"
class=""
>
<div>
- Selected
@@ -98,12 +98,12 @@ exports[`renders a table with seletable rows 2`] = `
</div>
</td>
<td
class=\\"\\"
class=""
>
@@ -165,11 +165,11 @@
</td>
<td
class=\\"\\"
class=""
>
<div>
- Selected
@@ -111,12 +111,12 @@ exports[`renders a table with seletable rows 2`] = `
</div>
</td>
<td
class=\\"\\"
class=""
>
@@ -221,11 +221,11 @@
</td>
<td
class=\\"\\"
class=""
>
<div>
- Selected
@@ -124,12 +124,12 @@ exports[`renders a table with seletable rows 2`] = `
</div>
</td>
<td
class=\\"\\"
class=""
>
@@ -277,11 +277,11 @@
</td>
<td
class=\\"\\"
class=""
>
<div>
- Selected
@@ -137,7 +137,7 @@ exports[`renders a table with seletable rows 2`] = `
</div>
</td>
<td
class=\\"\\"
class=""
>
@@ -314,20 +314,15 @@
</td>
@@ -151,28 +151,28 @@ exports[`renders a table with seletable rows 2`] = `
<pre>
<code>
{
- \\"selectedRows\\": [
- \\"0\\",
- \\"1\\",
- \\"2\\",
- \\"3\\"
- "selectedRows": [
- "0",
- "1",
- "2",
- "3"
- ]
+ \\"selectedRows\\": []
+ "selectedRows": []
}
</code>
</pre>
</DocumentFragment>"
</DocumentFragment>
`;
exports[`renders a table with seletable rows 3`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -109,11 +109,11 @@
</td>
<td
class=\\"\\"
class=""
>
<div>
- Not Selected
@@ -180,12 +180,12 @@ exports[`renders a table with seletable rows 3`] = `
</div>
</td>
<td
class=\\"\\"
class=""
>
@@ -221,11 +221,11 @@
</td>
<td
class=\\"\\"
class=""
>
<div>
- Not Selected
@@ -193,7 +193,7 @@ exports[`renders a table with seletable rows 3`] = `
</div>
</td>
<td
class=\\"\\"
class=""
>
@@ -314,15 +314,18 @@
</td>
@@ -207,13 +207,13 @@ exports[`renders a table with seletable rows 3`] = `
<pre>
<code>
{
- \\"selectedRows\\": []
+ \\"selectedRows\\": [
+ \\"0\\",
+ \\"2\\"
- "selectedRows": []
+ "selectedRows": [
+ "0",
+ "2"
+ ]
}
</code>
</pre>
</DocumentFragment>"
</DocumentFragment>
`;
@@ -1,14 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders a sortable table 1`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -31,11 +31,13 @@
colspan=\\"1\\"
style=\\"cursor: pointer;\\"
title=\\"Toggle SortBy\\"
colspan="1"
style="cursor: pointer;"
title="Toggle SortBy"
>
First Name
- <span />
@@ -17,124 +17,124 @@ exports[`renders a sortable table 1`] = `
+ </span>
</th>
<th
class=\\"\\"
colspan=\\"1\\"
style=\\"cursor: pointer;\\"
class=""
colspan="1"
style="cursor: pointer;"
@@ -87,104 +89,104 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- firstName: tanner
+ firstName: derek
</td>
<td
class=\\"\\"
class=""
>
- lastName: linsley
+ lastName: perkins
</td>
<td
class=\\"\\"
class=""
>
- age: 29
+ age: 40
</td>
<td
class=\\"\\"
class=""
>
- visits: 100
+ visits: 40
</td>
<td
class=\\"\\"
class=""
>
- status: In Relationship
+ status: Single
</td>
<td
class=\\"\\"
class=""
>
- progress: 50
+ progress: 80
</td>
</tr>
<tr
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- firstName: derek
+ firstName: joe
</td>
<td
class=\\"\\"
class=""
>
- lastName: perkins
+ lastName: bergevin
</td>
<td
class=\\"\\"
class=""
>
- age: 40
+ age: 45
</td>
<td
class=\\"\\"
class=""
>
- visits: 40
+ visits: 20
</td>
<td
class=\\"\\"
class=""
>
- status: Single
+ status: Complicated
</td>
<td
class=\\"\\"
class=""
>
- progress: 80
+ progress: 10
</td>
</tr>
<tr
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- firstName: joe
+ firstName: tanner
</td>
<td
class=\\"\\"
class=""
>
- lastName: bergevin
+ lastName: linsley
</td>
<td
class=\\"\\"
class=""
>
- age: 45
+ age: 29
</td>
<td
class=\\"\\"
class=""
>
- visits: 20
+ visits: 100
</td>
<td
class=\\"\\"
class=""
>
- status: Complicated
+ status: In Relationship
</td>
<td
class=\\"\\"
class=""
>
- progress: 10
+ progress: 50
@@ -142,17 +142,17 @@ exports[`renders a sortable table 1`] = `
</tr>
</tbody>
</table>
</DocumentFragment>"
</DocumentFragment>
`;
exports[`renders a sortable table 2`] = `
"Snapshot Diff:
Snapshot Diff:
- First value
+ Second value
@@ -32,11 +32,11 @@
style=\\"cursor: pointer;\\"
title=\\"Toggle SortBy\\"
style="cursor: pointer;"
title="Toggle SortBy"
>
First Name
<span>
@@ -161,86 +161,86 @@ exports[`renders a sortable table 2`] = `
</span>
</th>
<th
class=\\"\\"
colspan=\\"1\\"
class=""
colspan="1"
@@ -89,36 +89,36 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- firstName: derek
+ firstName: tanner
</td>
<td
class=\\"\\"
class=""
>
- lastName: perkins
+ lastName: linsley
</td>
<td
class=\\"\\"
class=""
>
- age: 40
+ age: 29
</td>
<td
class=\\"\\"
class=""
>
- visits: 40
+ visits: 100
</td>
<td
class=\\"\\"
class=""
>
- status: Single
+ status: In Relationship
</td>
<td
class=\\"\\"
class=""
>
- progress: 80
+ progress: 50
</td>
</tr>
<tr
class=\\"\\"
class=""
>
@@ -157,36 +157,36 @@
class=\\"\\"
class=""
>
<td
class=\\"\\"
class=""
>
- firstName: tanner
+ firstName: derek
</td>
<td
class=\\"\\"
class=""
>
- lastName: linsley
+ lastName: perkins
</td>
<td
class=\\"\\"
class=""
>
- age: 29
+ age: 40
</td>
<td
class=\\"\\"
class=""
>
- visits: 100
+ visits: 40
</td>
<td
class=\\"\\"
class=""
>
- status: In Relationship
+ status: Single
</td>
<td
class=\\"\\"
class=""
>
- progress: 50
+ progress: 80
@@ -248,5 +248,5 @@ exports[`renders a sortable table 2`] = `
</tr>
</tbody>
</table>
</DocumentFragment>"
</DocumentFragment>
`;
@@ -1,6 +1,3 @@
import '@testing-library/react/cleanup-after-each'
import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import { useTable } from '../../hooks/useTable'
@@ -1,6 +1,3 @@
import '@testing-library/react/cleanup-after-each'
import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import { useTable } from '../../hooks/useTable'
@@ -1,6 +1,3 @@
import '@testing-library/react/cleanup-after-each'
import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import { useTable } from '../../hooks/useTable'
+11 -10
View File
@@ -1,9 +1,7 @@
import '@testing-library/react/cleanup-after-each'
import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import { useTable } from '../../hooks/useTable'
import { useTableState } from '../../hooks/useTableState'
import { usePagination } from '../usePagination'
const data = [...new Array(100)].map((d, i) => ({
@@ -16,6 +14,8 @@ const data = [...new Array(100)].map((d, i) => ({
}))
function Table({ columns, data }) {
const tableState = useTableState({ pageIndex: 2 })
const {
getTableProps,
headerGroups,
@@ -34,6 +34,7 @@ function Table({ columns, data }) {
{
columns,
data,
state: tableState,
},
usePagination
)
@@ -160,21 +161,21 @@ function App() {
test('renders a paginated table', () => {
const { getByText, asFragment } = render(<App />)
const beforeSort = asFragment()
const fragment1 = asFragment()
fireEvent.click(getByText('>'))
const afterSort1 = asFragment()
const fragment2 = asFragment()
fireEvent.click(getByText('>'))
const afterSort2 = asFragment()
const fragment3 = asFragment()
fireEvent.click(getByText('>>'))
const afterSort3 = asFragment()
const fragment4 = asFragment()
expect(beforeSort).toMatchDiffSnapshot(afterSort1)
expect(afterSort1).toMatchDiffSnapshot(afterSort2)
expect(afterSort2).toMatchDiffSnapshot(afterSort3)
expect(fragment1).toMatchDiffSnapshot(fragment2)
expect(fragment2).toMatchDiffSnapshot(fragment3)
expect(fragment3).toMatchDiffSnapshot(fragment4)
})
@@ -1,6 +1,3 @@
import '@testing-library/react/cleanup-after-each'
import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import { useTable } from '../../hooks/useTable'
-3
View File
@@ -1,6 +1,3 @@
import '@testing-library/react/cleanup-after-each'
import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import { useTable } from '../../hooks/useTable'
+37 -26
View File
@@ -50,37 +50,48 @@ function useMain(instance) {
const rowDep = manualPagination || disablePageResetOnDataChange ? null : rows
useLayoutEffect(() => {
setState(
old => ({
...old,
pageIndex: 0,
}),
actions.pageChange
)
}, [setState, rowDep, filters, groupBy, sortBy])
const isPageIndexMountedRef = React.useRef()
const pages = React.useMemo(() => {
if (manualPagination) {
return undefined
}
if (process.env.NODE_ENV === 'development' && debug)
console.info('getPages')
useLayoutEffect(
() => {
if (isPageIndexMountedRef.current) {
setState(
old => ({
...old,
pageIndex: 0,
}),
actions.pageChange
)
}
isPageIndexMountedRef.current = true
},
[setState, rowDep, filters, groupBy, sortBy]
)
// Create a new pages with the first page ready to go.
const pages = rows.length ? [] : [[]]
const pages = React.useMemo(
() => {
if (manualPagination) {
return undefined
}
if (process.env.NODE_ENV === 'development' && debug)
console.info('getPages')
// Start the pageIndex and currentPage cursors
let cursor = 0
// Create a new pages with the first page ready to go.
const pages = rows.length ? [] : [[]]
while (cursor < rows.length) {
const end = cursor + pageSize
pages.push(rows.slice(cursor, end))
cursor = end
}
// Start the pageIndex and currentPage cursors
let cursor = 0
return pages
}, [debug, manualPagination, pageSize, rows])
while (cursor < rows.length) {
const end = cursor + pageSize
pages.push(rows.slice(cursor, end))
cursor = end
}
return pages
},
[debug, manualPagination, pageSize, rows]
)
const pageCount = manualPagination ? userPageCount : pages.length
+16 -7
View File
@@ -69,15 +69,24 @@ function useMain(instance) {
[setRowState]
)
const rowsMountedRef = React.useRef()
// When data changes, reset row and cell state
React.useEffect(() => {
setState(old => {
return {
...old,
rowState: {},
React.useEffect(
() => {
if (rowsMountedRef.current) {
setState(old => {
return {
...old,
rowState: {},
}
}, actions.setRowState)
}
}, actions.setRowState)
}, [rows, setState])
rowsMountedRef.current = true
},
[rows, setState]
)
hooks.prepareRow.push(row => {
const pathKey = row.path.join('.')
+76 -44
View File
@@ -691,7 +691,7 @@
"@babel/plugin-transform-react-jsx-self" "^7.0.0"
"@babel/plugin-transform-react-jsx-source" "^7.0.0"
"@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5":
"@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
@@ -1160,16 +1160,16 @@
"@svgr/plugin-svgo" "^4.3.1"
rollup-pluginutils "^2.8.1"
"@testing-library/dom@^5.5.4", "@testing-library/dom@^5.6.0":
version "5.6.0"
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-5.6.0.tgz#18a7c162a6a79964e731ad7b810022a28218047c"
integrity sha512-nAsRvQLr/b6TGNjuHMEbWXCNPLrQYnzqa/KKQZL7wBOtfptUxsa4Ah9aqkHW0ZmCSFmUDj4nFUxWPVTeMu0iCw==
"@testing-library/dom@^6.0.0":
version "6.0.0"
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.0.0.tgz#34e28e69e49bd6347fc64a5dde4c4f9aabbd17d3"
integrity sha512-B5XTz3uMsbqbdR9CZlnwpZjTE3fCWuqRkz/zvDc2Ej/vuHmTM0Ur2v0XPwr7usWfGIBsahEK5HL1E91+4IFiBg==
dependencies:
"@babel/runtime" "^7.4.5"
"@babel/runtime" "^7.5.5"
"@sheerun/mutationobserver-shim" "^0.3.2"
aria-query "3.0.0"
pretty-format "^24.8.0"
wait-for-expect "^1.2.0"
wait-for-expect "^1.3.0"
"@testing-library/jest-dom@^4.0.0":
version "4.0.0"
@@ -1186,13 +1186,14 @@
pretty-format "^24.0.0"
redent "^3.0.0"
"@testing-library/react@^8.0.7":
version "8.0.7"
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-8.0.7.tgz#b5992c9156e926850a0e3a7c882ae1aed83b1c77"
integrity sha512-6XoeWSr3UCdxMswbkW0BmuXYw8a6w+stt+5gg4D4zAcljfhXETQ5o28bjJFwNab4OPg8gBNK8KIVot86L4Q8Vg==
"@testing-library/react@^9.1.1":
version "9.1.1"
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.1.1.tgz#ee5b15c02b64cfbd14cdcad87fee2ed5f28fc2d1"
integrity sha512-mjX9l/onA5eVe8/4/obe7ZAw05U8s+kinXVglySVOMJo/oCSam9D9Dcg+aYVGsuBEuYV2W9m2LTP4KbNZh8BOw==
dependencies:
"@babel/runtime" "^7.5.4"
"@testing-library/dom" "^5.5.4"
"@babel/runtime" "^7.5.5"
"@testing-library/dom" "^6.0.0"
"@types/react-dom" "^16.8.5"
"@types/babel__core@^7.1.0":
version "7.1.2"
@@ -1281,11 +1282,31 @@
resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
"@types/prop-types@*":
version "15.7.1"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==
"@types/q@^1.5.1":
version "1.5.2"
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
"@types/react-dom@^16.8.5":
version "16.8.5"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.5.tgz#3e3f4d99199391a7fb40aa3a155c8dd99b899cbd"
integrity sha512-idCEjROZ2cqh29+trmTmZhsBAUNQuYrF92JHKzZ5+aiFM1mlSk3bb23CK7HhYuOY75Apgap5y2jTyHzaM2AJGA==
dependencies:
"@types/react" "*"
"@types/react@*":
version "16.9.1"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.1.tgz#862c83b4c9d5cd116e42fd9a4f3694843cd2c051"
integrity sha512-jGM2x8F7m7/r+81N/BOaUKVwbC5Cdw6ExlWEUpr77XPwVeNvAppnPEnMMLMfxRDYL8FPEX8MHjwtD2NQMJ0yyQ==
dependencies:
"@types/prop-types" "*"
csstype "^2.2.0"
"@types/resolve@0.0.8":
version "0.0.8"
resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -2291,10 +2312,10 @@ core-js-pure@3.1.4:
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.1.4.tgz#5fa17dc77002a169a3566cc48dc774d2e13e3769"
integrity sha512-uJ4Z7iPNwiu1foygbcZYJsJs1jiXrTTCvxfLDXNhI/I+NHbSIEyr548y4fcsCEyWY0XgfAG/qqaunJ1SThHenA==
core-js@3:
version "3.1.4"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07"
integrity sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==
core-js@3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.2.1.tgz#cd41f38534da6cc59f7db050fe67307de9868b09"
integrity sha512-Qa5XSVefSVPRxy2XfUC13WbvqkxhkwB3ve+pgCQveNgYzbM/UxZeu1dcOX/xr4UmfUd+muuvsaxilQzCyUurMw==
core-js@^2.4.0, core-js@^2.5.0:
version "2.6.9"
@@ -2423,6 +2444,11 @@ cssstyle@^1.0.0:
dependencies:
cssom "0.3.x"
csstype@^2.2.0:
version "2.6.6"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
currently-unhandled@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -2880,10 +2906,10 @@ eslint-plugin-promise@^4.2.1:
resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz#845fd8b2260ad8f82564c1222fce44ad71d9418a"
integrity sha512-VoM09vT7bfA7D+upt+FjeBO5eHIJQBUWki1aPvB+vbNiHS3+oGIJGIeyBtKQTME6UPXXy3vV07OL1tHd3ANuDw==
eslint-plugin-react-hooks@1.6.1:
version "1.6.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.1.tgz#3c66a5515ea3e0a221ffc5d4e75c971c217b1a4c"
integrity sha512-wHhmGJyVuijnYIJXZJHDUF2WM+rJYTjulUTqF9k61d3BTk8etydz+M4dXUVH7M76ZRS85rqBTCx0Es/lLsrjnA==
eslint-plugin-react-hooks@1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
integrity sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==
eslint-plugin-react@7.14.3:
version "7.14.3"
@@ -3802,10 +3828,10 @@ http-signature@~1.2.0:
jsprim "^1.2.2"
sshpk "^1.7.0"
husky@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/husky/-/husky-3.0.2.tgz#e78fd2ae16edca59fc88e56aeb8d70acdcc1c082"
integrity sha512-WXCtaME2x0o4PJlKY4ap8BzLA+D0zlvefqAvLCPriOOu+x0dpO5uc5tlB7CY6/0SE2EESmoZsj4jW5D09KrJoA==
husky@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/husky/-/husky-3.0.3.tgz#6f3fb99f60ef72cdf34e5d78445c2f798c441b1d"
integrity sha512-DBBMPSiBYEMx7EVUTRE/ymXJa/lOL+WplcsV/lZu+/HHGt0gzD+5BIz9EJnCrWyUa7hkMuBh7/9OZ04qDkM+Nw==
dependencies:
chalk "^2.4.2"
cosmiconfig "^5.2.1"
@@ -3814,7 +3840,7 @@ husky@^3.0.2:
is-ci "^2.0.0"
opencollective-postinstall "^2.0.2"
pkg-dir "^4.2.0"
please-upgrade-node "^3.1.1"
please-upgrade-node "^3.2.0"
read-pkg "^5.1.1"
run-node "^1.0.0"
slash "^3.0.0"
@@ -6255,6 +6281,13 @@ please-upgrade-node@^3.1.1:
dependencies:
semver-compare "^1.0.0"
please-upgrade-node@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==
dependencies:
semver-compare "^1.0.0"
pluralize@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
@@ -6407,30 +6440,29 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-dom@^16.8.3:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
react-dom@^16.9.0:
version "16.9.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.13.6"
scheduler "^0.15.0"
react-is@^16.8.1, react-is@^16.8.4:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
react@^16.8.3:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
react@^16.9.0:
version "16.9.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.13.6"
read-pkg-up@^1.0.1:
version "1.0.1"
@@ -6949,10 +6981,10 @@ sax@^1.2.4, sax@~1.2.4:
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
scheduler@^0.13.6:
version "0.13.6"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
scheduler@^0.15.0:
version "0.15.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"
integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
@@ -7759,10 +7791,10 @@ w3c-hr-time@^1.0.1:
dependencies:
browser-process-hrtime "^0.1.2"
wait-for-expect@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-1.2.0.tgz#fdab6a26e87d2039101db88bff3d8158e5c3e13f"
integrity sha512-EJhKpA+5UHixduMBEGhTFuLuVgQBKWxkFbefOdj2bbk2/OpA5Opsc4aUTGmF+qJ+v3kTGxDRNYwKaT4j6g5n8Q==
wait-for-expect@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-1.3.0.tgz#65241ce355425f907f5d127bdb5e72c412ff830c"
integrity sha512-8fJU7jiA96HfGPt+P/UilelSAZfhMBJ52YhKzlmZQvKEZU2EcD1GQ0yqGB6liLdHjYtYAoGVigYwdxr5rktvzA==
walker@^1.0.7, walker@~1.0.5:
version "1.0.7"