mirror of
https://github.com/gosticks/react-table.git
synced 2026-08-19 16:30:21 +00:00
Compare commits
12
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 tannerlinsley
|
0e54ef0005 | ||
|
tannerlinsley
|
b10446b8c4 | ||
|
tannerlinsley
|
51165d92f6 | ||
|
tannerlinsley
|
bb8b10ca64 | ||
|
gargrohandTanner Linsley
|
8742ce39c2 | ||
|
tannerlinsley
|
0486c5c787 | ||
|
dependabot[bot]andTanner Linsley
|
f4b165d378 | ||
|
tannerlinsley
|
e7722b1d95 | ||
|
tannerlinsley
|
25cdefb2a1 | ||
|
Tanner LinsleyandGitHub
|
4e3d1dd10a | ||
|
Tanner LinsleyandGitHub
|
f6a1203403 | ||
|
Tanner LinsleyandGitHub
|
a810556e57 |
@@ -30,15 +30,17 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
|
||||
|
||||
## Features
|
||||
|
||||
- Lightweight (4kb - 10kb depending on features and tree-shaking)
|
||||
- Lightweight (4kb - 11kb depending on features and tree-shaking)
|
||||
- Headless (100% customizable, Bring-your-own-UI)
|
||||
- Client-side & Server-side pagination support
|
||||
- Auto out of the box, fully controllable API
|
||||
- Sorting (Multi and Stable)
|
||||
- Filters
|
||||
- Pivoting & Aggregation
|
||||
- Row Selection
|
||||
- Row Expansion
|
||||
- Fully controllable
|
||||
- Column Ordering
|
||||
- Animatable
|
||||
- Server-side/controlled data/state
|
||||
- Extensible via hook-based plugin system
|
||||
- <a href="https://medium.com/@tannerlinsley/why-i-wrote-react-table-and-the-problems-it-has-solved-for-nozzle-others-445c4e93d4a8#.axza4ixba" target="\_parent">"Why I wrote React Table and the problems it has solved for Nozzle.io"</a> by Tanner Linsley
|
||||
|
||||
|
||||
+6
-4
@@ -458,6 +458,8 @@ The following properties are available on every `Column` object returned by the
|
||||
- This function is used to resolve any props needed for this column's UI that is responsible for toggling the sort direction when the user clicks it.
|
||||
- You can use the `getSortByToggleProps` hook to extend its functionality.
|
||||
- Custom props may be passed. **NOTE: Custom props may override built-in sortBy props, so be careful!**
|
||||
- `clearSorting: Function() => void`
|
||||
- This function can be used to programmatically clear the sorting for this column.
|
||||
- `isSorted: Boolean`
|
||||
- Denotes whether this column is currently being sorted
|
||||
- `sortedIndex: Int`
|
||||
@@ -938,12 +940,12 @@ function App() {
|
||||
|
||||
The following options are supported via the main options object passed to `useTable(options)`
|
||||
|
||||
- `state[0].expanded: Object<[pathIndex]: Boolean | ExpandedStateObject>`
|
||||
- `state[0].expanded: Array<pathKey: String>`
|
||||
- Optional
|
||||
- Must be **memoized**
|
||||
- An nested object of expanded paths.
|
||||
- A `pathIndex` can be set as the key and its value set to `true` to expand that row's subRows into view. For example, if `{ '3': true }` was passed as the `expanded` state, the **4th row in the original data array** would be expanded.
|
||||
- For nested expansion, you may **use another object** instead of a Boolean to expand sub rows. For example, if `{ '3': { '5' : true }}` was passed as the `expanded` state, then the **6th subRow of the 4th row and the 4th row of the original data array** would be expanded.
|
||||
- An array of expanded path keys.
|
||||
- If a row's path key (`row.path.join('.')`) is present in this array, that row will have an expanded state. For example, if `['3']` was passed as the `expanded` state, the **4th row in the original data array** would be expanded.
|
||||
- For nested expansion, you may **join the row path with a `.`** to expand sub rows. For example, if `['3', '3.5']` was passed as the `expanded` state, then the **6th subRow of the 4th row and also the 4th row of the original data array** would be expanded.
|
||||
- This information is stored in state since the table is allowed to manipulate the filter through user interaction.
|
||||
- `getSubRows: Function(row, relativeIndex) => Rows[]`
|
||||
- Optional
|
||||
|
||||
@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
|
||||
|
||||
You can:
|
||||
|
||||
- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
|
||||
- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
|
||||
- `yarn` and `yarn start` to run and edit the example
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-scripts": "3.0.1",
|
||||
"react-spring": "^8.0.27",
|
||||
"react-table": "next",
|
||||
"styled-components": "^4.3.2"
|
||||
},
|
||||
|
||||
@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
|
||||
|
||||
You can:
|
||||
|
||||
- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
|
||||
- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-ordering)
|
||||
- `yarn` and `yarn start` to run and edit the example
|
||||
|
||||
@@ -7,13 +7,10 @@
|
||||
"eject": "rescripts eject"
|
||||
},
|
||||
"dependencies": {
|
||||
"framer-motion": "^1.6.3",
|
||||
"match-sorter": "^4.0.1",
|
||||
"namor": "^1.1.2",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-scripts": "3.0.1",
|
||||
"react-spring": "^8.0.27",
|
||||
"react-table": "next",
|
||||
"styled-components": "^4.3.2"
|
||||
},
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { useTable, useSortBy, useFilters, useColumnOrder } from 'react-table'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import matchSorter from 'match-sorter'
|
||||
import { useTable, useColumnOrder } from 'react-table'
|
||||
|
||||
import makeData from './makeData'
|
||||
|
||||
@@ -81,20 +79,18 @@ function Table({ columns, data }) {
|
||||
))}
|
||||
</thead>
|
||||
<tbody>
|
||||
<AnimatePresence>
|
||||
{rows.slice(0, 10).map(
|
||||
(row, i) =>
|
||||
prepareRow(row) || (
|
||||
<tr {...row.getRowProps()}>
|
||||
{row.cells.map((cell, i) => {
|
||||
return (
|
||||
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
</AnimatePresence>
|
||||
{rows.slice(0, 10).map(
|
||||
(row, i) =>
|
||||
prepareRow(row) || (
|
||||
<tr {...row.getRowProps()}>
|
||||
{row.cells.map((cell, i) => {
|
||||
return (
|
||||
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<pre>
|
||||
|
||||
@@ -50,9 +50,6 @@ function Table({ columns: userColumns, data }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<pre>
|
||||
<code>{JSON.stringify({ expanded }, null, 2)}</code>
|
||||
</pre>
|
||||
<table {...getTableProps()}>
|
||||
<thead>
|
||||
{headerGroups.map(headerGroup => (
|
||||
@@ -80,6 +77,9 @@ function Table({ columns: userColumns, data }) {
|
||||
</table>
|
||||
<br />
|
||||
<div>Showing the first 20 results of {rows.length} rows</div>
|
||||
<pre>
|
||||
<code>{JSON.stringify({ expanded }, null, 2)}</code>
|
||||
</pre>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Generated
+175
-39
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-table",
|
||||
"version": "7.0.0-alpha.12",
|
||||
"version": "7.0.0-alpha.29",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@@ -1605,16 +1605,17 @@
|
||||
}
|
||||
},
|
||||
"@testing-library/dom": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-5.6.0.tgz",
|
||||
"integrity": "sha512-nAsRvQLr/b6TGNjuHMEbWXCNPLrQYnzqa/KKQZL7wBOtfptUxsa4Ah9aqkHW0ZmCSFmUDj4nFUxWPVTeMu0iCw==",
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.1.0.tgz",
|
||||
"integrity": "sha512-qivqFvnbVIH3DyArFofEU/jlOhkGIioIemOy9A9M/NQTpPyDDQmtVkAfoB18RKN581f0s/RJMRBbq9WfMIhFTw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.5",
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@sheerun/mutationobserver-shim": "^0.3.2",
|
||||
"@types/testing-library__dom": "^6.0.0",
|
||||
"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": {
|
||||
@@ -1635,13 +1636,14 @@
|
||||
}
|
||||
},
|
||||
"@testing-library/react": {
|
||||
"version": "8.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-8.0.7.tgz",
|
||||
"integrity": "sha512-6XoeWSr3UCdxMswbkW0BmuXYw8a6w+stt+5gg4D4zAcljfhXETQ5o28bjJFwNab4OPg8gBNK8KIVot86L4Q8Vg==",
|
||||
"version": "9.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.1.3.tgz",
|
||||
"integrity": "sha512-qFVo6TsEbpEFpOmKjIxMHDujOKVdvVpcYFcUfJeWBqMO8eja5pN9SZnt6W6AzW3a1MRvRfw3X0Fhx3eXnBJxjA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.4",
|
||||
"@testing-library/dom": "^5.5.4"
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@testing-library/dom": "^6.0.0",
|
||||
"@types/testing-library__react": "^9.1.0"
|
||||
}
|
||||
},
|
||||
"@types/babel__core": {
|
||||
@@ -1751,12 +1753,43 @@
|
||||
"integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/pretty-format": {
|
||||
"version": "20.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/pretty-format/-/pretty-format-20.0.1.tgz",
|
||||
"integrity": "sha512-Oh7wnvVUCtVIWnCHQWe9qDZKn0fGyk5AMq99jXml0x39K59P+z9qe31CNRtop9TceCpS7NmoK+J9eGeCnyFgnw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/prop-types": {
|
||||
"version": "15.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz",
|
||||
"integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
|
||||
"integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "16.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.2.tgz",
|
||||
"integrity": "sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"version": "16.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.0.tgz",
|
||||
"integrity": "sha512-OL2lk7LYGjxn4b0efW3Pvf2KBVP0y1v3wip1Bp7nA79NkOpElH98q3WdCEdDj93b2b0zaeBG9DvriuKjIK5xDA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/resolve": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
|
||||
@@ -1778,6 +1811,25 @@
|
||||
"integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/testing-library__dom": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.0.1.tgz",
|
||||
"integrity": "sha512-j8wJmvER0VVrmDtab80SwA4MgF0vzFm6hSyk3j2bw9PXyJxgMjFDF8ihJDzo2gUOMP+HpEquHRZcUXOhLmYexA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/pretty-format": "*"
|
||||
}
|
||||
},
|
||||
"@types/testing-library__react": {
|
||||
"version": "9.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/testing-library__react/-/testing-library__react-9.1.1.tgz",
|
||||
"integrity": "sha512-8/toTJaIlS3BC7JrK2ElTnbjH8tmFP7atdL2ZsIa1JDmH9RKSm/7Wp5oMDJzXoWr988Mv7ym/XZ8LRglyoGCGw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react-dom": "*",
|
||||
"@types/testing-library__dom": "*"
|
||||
}
|
||||
},
|
||||
"@types/yargs": {
|
||||
"version": "12.0.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-12.0.12.tgz",
|
||||
@@ -2334,6 +2386,12 @@
|
||||
"regenerator-runtime": "^0.10.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
|
||||
"integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
|
||||
"dev": true
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.10.5",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
|
||||
@@ -2367,6 +2425,12 @@
|
||||
"source-map-support": "^0.4.15"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
|
||||
"integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map-support": {
|
||||
"version": "0.4.18",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
|
||||
@@ -2388,6 +2452,12 @@
|
||||
"regenerator-runtime": "^0.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
|
||||
"integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
|
||||
"dev": true
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.11.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
|
||||
@@ -3179,9 +3249,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"core-js": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
|
||||
"integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.2.1.tgz",
|
||||
"integrity": "sha512-Qa5XSVefSVPRxy2XfUC13WbvqkxhkwB3ve+pgCQveNgYzbM/UxZeu1dcOX/xr4UmfUd+muuvsaxilQzCyUurMw==",
|
||||
"dev": true
|
||||
},
|
||||
"core-js-compat": {
|
||||
@@ -3363,6 +3433,12 @@
|
||||
"cssom": "0.3.x"
|
||||
}
|
||||
},
|
||||
"csstype": {
|
||||
"version": "2.6.6",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz",
|
||||
"integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==",
|
||||
"dev": true
|
||||
},
|
||||
"currently-unhandled": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
|
||||
@@ -4112,9 +4188,9 @@
|
||||
}
|
||||
},
|
||||
"eslint-plugin-react-hooks": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.1.tgz",
|
||||
"integrity": "sha512-wHhmGJyVuijnYIJXZJHDUF2WM+rJYTjulUTqF9k61d3BTk8etydz+M4dXUVH7M76ZRS85rqBTCx0Es/lLsrjnA==",
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
|
||||
"integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==",
|
||||
"dev": true
|
||||
},
|
||||
"eslint-plugin-standard": {
|
||||
@@ -4134,9 +4210,9 @@
|
||||
}
|
||||
},
|
||||
"eslint-utils": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.0.tgz",
|
||||
"integrity": "sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==",
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.2.tgz",
|
||||
"integrity": "sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"eslint-visitor-keys": "^1.0.0"
|
||||
@@ -5731,9 +5807,9 @@
|
||||
}
|
||||
},
|
||||
"husky": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/husky/-/husky-3.0.2.tgz",
|
||||
"integrity": "sha512-WXCtaME2x0o4PJlKY4ap8BzLA+D0zlvefqAvLCPriOOu+x0dpO5uc5tlB7CY6/0SE2EESmoZsj4jW5D09KrJoA==",
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/husky/-/husky-3.0.4.tgz",
|
||||
"integrity": "sha512-7Rnt8aJfy+MlV28snmYK7O7vWwtOfeVxV6KhLpUFXlmx5ukQ1nQmNUB7QsAwSgdySB5X+bm7q7JIRgazqBUzKA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.2",
|
||||
@@ -5743,7 +5819,7 @@
|
||||
"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"
|
||||
@@ -5765,15 +5841,6 @@
|
||||
"integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==",
|
||||
"dev": true
|
||||
},
|
||||
"is-ci": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
|
||||
"integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ci-info": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"locate-path": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
|
||||
@@ -5784,9 +5851,9 @@
|
||||
}
|
||||
},
|
||||
"p-limit": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
|
||||
"integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.1.tgz",
|
||||
"integrity": "sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"p-try": "^2.0.0"
|
||||
@@ -5834,6 +5901,15 @@
|
||||
"find-up": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"please-upgrade-node": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
|
||||
"integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"semver-compare": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
|
||||
@@ -6040,6 +6116,15 @@
|
||||
"integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==",
|
||||
"dev": true
|
||||
},
|
||||
"is-ci": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
|
||||
"integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ci-info": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"is-ci-cli": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/is-ci-cli/-/is-ci-cli-1.1.1.tgz",
|
||||
@@ -9346,6 +9431,12 @@
|
||||
"integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
|
||||
"dev": true
|
||||
},
|
||||
"prettier": {
|
||||
"version": "1.18.2",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.18.2.tgz",
|
||||
"integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==",
|
||||
"dev": true
|
||||
},
|
||||
"prettier-linter-helpers": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
|
||||
@@ -9477,6 +9568,29 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react": {
|
||||
"version": "16.9.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz",
|
||||
"integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "16.9.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz",
|
||||
"integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"scheduler": "^0.15.0"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.8.6",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
|
||||
@@ -10035,6 +10149,16 @@
|
||||
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
|
||||
"dev": true
|
||||
},
|
||||
"scheduler": {
|
||||
"version": "0.15.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
|
||||
"integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"semver": {
|
||||
"version": "5.7.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
|
||||
@@ -10289,6 +10413,18 @@
|
||||
"kind-of": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"snapshot-diff": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/snapshot-diff/-/snapshot-diff-0.5.2.tgz",
|
||||
"integrity": "sha512-6cKemS91iEZCRRHQUjYBcPMIUz70lqWVoffqx7nhZ2XP/tG+EJKK0O8tANW0zHcmaEOfu00cfzKhsg08QdC9fg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"jest-diff": "^24.0.0",
|
||||
"jest-snapshot": "^24.0.0",
|
||||
"pretty-format": "^24.0.0",
|
||||
"strip-ansi": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
@@ -11105,9 +11241,9 @@
|
||||
}
|
||||
},
|
||||
"wait-for-expect": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-1.2.0.tgz",
|
||||
"integrity": "sha512-EJhKpA+5UHixduMBEGhTFuLuVgQBKWxkFbefOdj2bbk2/OpA5Opsc4aUTGmF+qJ+v3kTGxDRNYwKaT4j6g5n8Q==",
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-1.3.0.tgz",
|
||||
"integrity": "sha512-8fJU7jiA96HfGPt+P/UilelSAZfhMBJ52YhKzlmZQvKEZU2EcD1GQ0yqGB6liLdHjYtYAoGVigYwdxr5rktvzA==",
|
||||
"dev": true
|
||||
},
|
||||
"walker": {
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-table",
|
||||
"version": "7.0.0-alpha.31",
|
||||
"version": "7.0.0-alpha.33",
|
||||
"description": "A fast, lightweight, opinionated table and datagrid built on React",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/tannerlinsley/react-table#readme",
|
||||
|
||||
@@ -121,8 +121,8 @@ export const useTable = (props, ...plugins) => {
|
||||
|
||||
// Make the headerGroups
|
||||
const headerGroups = React.useMemo(
|
||||
() => makeHeaderGroups(flatColumns, columns, defaultColumn),
|
||||
[columns, defaultColumn, flatColumns]
|
||||
() => makeHeaderGroups(flatColumns, defaultColumn),
|
||||
[defaultColumn, flatColumns]
|
||||
)
|
||||
|
||||
const headers = React.useMemo(() => headerGroups[0].headers, [headerGroups])
|
||||
|
||||
@@ -10,10 +10,10 @@ Snapshot Diff:
|
||||
<pre>
|
||||
<code>
|
||||
{
|
||||
- "expanded": {}
|
||||
+ "expanded": {
|
||||
+ "0": true
|
||||
+ }
|
||||
- "expanded": []
|
||||
+ "expanded": [
|
||||
+ "0"
|
||||
+ ]
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
@@ -220,22 +220,21 @@ Snapshot Diff:
|
||||
- First value
|
||||
+ Second value
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
@@ -1,11 +1,12 @@
|
||||
<DocumentFragment>
|
||||
<pre>
|
||||
<code>
|
||||
{
|
||||
"expanded": {
|
||||
- "0": true
|
||||
+ "0": {
|
||||
+ "0": true
|
||||
+ }
|
||||
}
|
||||
"expanded": [
|
||||
- "0"
|
||||
+ "0",
|
||||
+ "0.0"
|
||||
]
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<table
|
||||
@@ -127,10 +129,53 @@
|
||||
@@ -127,11 +128,54 @@
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
@@ -281,15 +280,16 @@ Snapshot Diff:
|
||||
+ >
|
||||
+ <td
|
||||
+ class=""
|
||||
+ >
|
||||
>
|
||||
+ <span
|
||||
+ style="cursor: pointer; padding-left: 4rem;"
|
||||
>
|
||||
+ >
|
||||
👉
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
@@ -160,10 +205,139 @@
|
||||
class=""
|
||||
@@ -160,10 +204,139 @@
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
@@ -436,22 +436,21 @@ Snapshot Diff:
|
||||
- First value
|
||||
+ Second value
|
||||
|
||||
@@ -2,11 +2,13 @@
|
||||
@@ -2,11 +2,12 @@
|
||||
<pre>
|
||||
<code>
|
||||
{
|
||||
"expanded": {
|
||||
"0": {
|
||||
- "0": true
|
||||
+ "0": {
|
||||
+ "0": true
|
||||
+ }
|
||||
}
|
||||
}
|
||||
"expanded": [
|
||||
"0",
|
||||
- "0.0"
|
||||
+ "0.0",
|
||||
+ "0.0.0"
|
||||
]
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
@@ -172,10 +174,53 @@
|
||||
<table
|
||||
@@ -171,11 +172,54 @@
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
@@ -497,15 +496,16 @@ Snapshot Diff:
|
||||
+ >
|
||||
+ <td
|
||||
+ class=""
|
||||
+ >
|
||||
>
|
||||
+ <span
|
||||
+ style="cursor: pointer; padding-left: 6rem;"
|
||||
>
|
||||
+ >
|
||||
👉
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
@@ -205,10 +250,139 @@
|
||||
class=""
|
||||
@@ -204,10 +248,139 @@
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
@@ -652,22 +652,21 @@ Snapshot Diff:
|
||||
- First value
|
||||
+ Second value
|
||||
|
||||
@@ -3,11 +3,13 @@
|
||||
@@ -3,11 +3,12 @@
|
||||
<code>
|
||||
{
|
||||
"expanded": {
|
||||
"0": {
|
||||
"0": {
|
||||
- "0": true
|
||||
+ "0": {
|
||||
+ "0": true
|
||||
+ }
|
||||
}
|
||||
}
|
||||
}
|
||||
"expanded": [
|
||||
"0",
|
||||
"0.0",
|
||||
- "0.0.0"
|
||||
+ "0.0.0",
|
||||
+ "0.0.0.0"
|
||||
]
|
||||
}
|
||||
</code>
|
||||
@@ -218,11 +220,11 @@
|
||||
</pre>
|
||||
<table
|
||||
@@ -216,11 +217,11 @@
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
@@ -680,7 +679,7 @@ Snapshot Diff:
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
@@ -250,10 +252,30 @@
|
||||
@@ -248,10 +249,30 @@
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
@@ -712,3 +711,587 @@ Snapshot Diff:
|
||||
class=""
|
||||
>
|
||||
`;
|
||||
|
||||
exports[`renders an expandable table 5`] = `
|
||||
Snapshot Diff:
|
||||
- First value
|
||||
+ Second value
|
||||
|
||||
@@ -1,15 +1,10 @@
|
||||
<DocumentFragment>
|
||||
<pre>
|
||||
<code>
|
||||
{
|
||||
- "expanded": [
|
||||
- "0",
|
||||
- "0.0",
|
||||
- "0.0.0",
|
||||
- "0.0.0.0"
|
||||
- ]
|
||||
+ "expanded": []
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
<table
|
||||
class=""
|
||||
@@ -88,140 +83,11 @@
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
style="cursor: pointer; padding-left: 0rem;"
|
||||
>
|
||||
- 👇
|
||||
- </span>
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- tanner
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- linsley
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 29
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 100
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- In Relationship
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 50
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr
|
||||
- class=""
|
||||
- >
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- <span
|
||||
- style="cursor: pointer; padding-left: 2rem;"
|
||||
- >
|
||||
- 👇
|
||||
- </span>
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- tanner
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- linsley
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 29
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 100
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- In Relationship
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 50
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr
|
||||
- class=""
|
||||
- >
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- <span
|
||||
- style="cursor: pointer; padding-left: 4rem;"
|
||||
- >
|
||||
- 👇
|
||||
- </span>
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- tanner
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- linsley
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 29
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 100
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- In Relationship
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 50
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr
|
||||
- class=""
|
||||
- >
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- <span
|
||||
- style="cursor: pointer; padding-left: 6rem;"
|
||||
- >
|
||||
- 👇
|
||||
+ 👉
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
@@ -249,417 +115,10 @@
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
50
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr>
|
||||
- <td
|
||||
- colspan="7"
|
||||
- >
|
||||
- <pre>
|
||||
- <code>
|
||||
- {
|
||||
- "values": {
|
||||
- "firstName": "tanner",
|
||||
- "lastName": "linsley",
|
||||
- "age": 29,
|
||||
- "visits": 100,
|
||||
- "status": "In Relationship",
|
||||
- "progress": 50
|
||||
- }
|
||||
- }
|
||||
- </code>
|
||||
- </pre>
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr
|
||||
- class=""
|
||||
- >
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- <span
|
||||
- style="cursor: pointer; padding-left: 6rem;"
|
||||
- >
|
||||
- 👉
|
||||
- </span>
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- derek
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- perkins
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 40
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 40
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- Single
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 80
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr
|
||||
- class=""
|
||||
- >
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- <span
|
||||
- style="cursor: pointer; padding-left: 6rem;"
|
||||
- >
|
||||
- 👉
|
||||
- </span>
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- joe
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- bergevin
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 45
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 20
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- Complicated
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 10
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr
|
||||
- class=""
|
||||
- >
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- <span
|
||||
- style="cursor: pointer; padding-left: 6rem;"
|
||||
- >
|
||||
- 👉
|
||||
- </span>
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- jaylen
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- linsley
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 26
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 99
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- In Relationship
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 70
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr
|
||||
- class=""
|
||||
- >
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- <span
|
||||
- style="cursor: pointer; padding-left: 4rem;"
|
||||
- >
|
||||
- 👉
|
||||
- </span>
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- derek
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- perkins
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 40
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 40
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- Single
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 80
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr
|
||||
- class=""
|
||||
- >
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- <span
|
||||
- style="cursor: pointer; padding-left: 4rem;"
|
||||
- >
|
||||
- 👉
|
||||
- </span>
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- joe
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- bergevin
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 45
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 20
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- Complicated
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 10
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr
|
||||
- class=""
|
||||
- >
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- <span
|
||||
- style="cursor: pointer; padding-left: 4rem;"
|
||||
- >
|
||||
- 👉
|
||||
- </span>
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- jaylen
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- linsley
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 26
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 99
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- In Relationship
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 70
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr
|
||||
- class=""
|
||||
- >
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- <span
|
||||
- style="cursor: pointer; padding-left: 2rem;"
|
||||
- >
|
||||
- 👉
|
||||
- </span>
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- derek
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- perkins
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 40
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 40
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- Single
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 80
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr
|
||||
- class=""
|
||||
- >
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- <span
|
||||
- style="cursor: pointer; padding-left: 2rem;"
|
||||
- >
|
||||
- 👉
|
||||
- </span>
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- joe
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- bergevin
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 45
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 20
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- Complicated
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 10
|
||||
- </td>
|
||||
- </tr>
|
||||
- <tr
|
||||
- class=""
|
||||
- >
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- <span
|
||||
- style="cursor: pointer; padding-left: 2rem;"
|
||||
- >
|
||||
- 👉
|
||||
- </span>
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- jaylen
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- linsley
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 26
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 99
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- In Relationship
|
||||
- </td>
|
||||
- <td
|
||||
- class=""
|
||||
- >
|
||||
- 70
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class=""
|
||||
>
|
||||
`;
|
||||
|
||||
@@ -178,29 +178,37 @@ test('renders an expandable table', () => {
|
||||
|
||||
let expandButtons = getAllByText('👉')
|
||||
|
||||
const beforeGrouping = asFragment()
|
||||
const before = asFragment()
|
||||
|
||||
fireEvent.click(expandButtons[0])
|
||||
|
||||
const afterGrouping1 = asFragment()
|
||||
const after1 = asFragment()
|
||||
|
||||
expandButtons = getAllByText('👉')
|
||||
fireEvent.click(expandButtons[0])
|
||||
|
||||
const afterGrouping2 = asFragment()
|
||||
const after2 = asFragment()
|
||||
|
||||
expandButtons = getAllByText('👉')
|
||||
fireEvent.click(expandButtons[0])
|
||||
|
||||
const afterGrouping3 = asFragment()
|
||||
const after3 = asFragment()
|
||||
|
||||
expandButtons = getAllByText('👉')
|
||||
fireEvent.click(expandButtons[0])
|
||||
|
||||
const afterGrouping4 = asFragment()
|
||||
const after4 = asFragment()
|
||||
|
||||
expect(beforeGrouping).toMatchDiffSnapshot(afterGrouping1)
|
||||
expect(afterGrouping1).toMatchDiffSnapshot(afterGrouping2)
|
||||
expect(afterGrouping2).toMatchDiffSnapshot(afterGrouping3)
|
||||
expect(afterGrouping3).toMatchDiffSnapshot(afterGrouping4)
|
||||
expandButtons = getAllByText('👇')
|
||||
expandButtons.reverse().forEach(button => {
|
||||
fireEvent.click(button)
|
||||
})
|
||||
|
||||
const after5 = asFragment()
|
||||
|
||||
expect(before).toMatchDiffSnapshot(after1)
|
||||
expect(after1).toMatchDiffSnapshot(after2)
|
||||
expect(after2).toMatchDiffSnapshot(after3)
|
||||
expect(after3).toMatchDiffSnapshot(after4)
|
||||
expect(after4).toMatchDiffSnapshot(after5)
|
||||
})
|
||||
|
||||
@@ -1,17 +1,11 @@
|
||||
import { useMemo } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import {
|
||||
getBy,
|
||||
getFirstDefined,
|
||||
setBy,
|
||||
mergeProps,
|
||||
applyPropHooks,
|
||||
} from '../utils'
|
||||
import { mergeProps, applyPropHooks } from '../utils'
|
||||
import { addActions, actions } from '../actions'
|
||||
import { defaultState } from '../hooks/useTableState'
|
||||
|
||||
defaultState.expanded = {}
|
||||
defaultState.expanded = []
|
||||
|
||||
addActions('toggleExpanded', 'useExpanded')
|
||||
|
||||
@@ -40,13 +34,24 @@ function useMain(instance) {
|
||||
} = instance
|
||||
|
||||
const toggleExpandedByPath = (path, set) => {
|
||||
const key = path.join('.')
|
||||
|
||||
return setState(old => {
|
||||
const { expanded } = old
|
||||
const existing = getBy(expanded, path)
|
||||
set = getFirstDefined(set, existing ? undefined : true)
|
||||
const exists = old.expanded.includes(key)
|
||||
const shouldExist = typeof set !== 'undefined' ? set : !exists
|
||||
let newExpanded = new Set(old.expanded)
|
||||
|
||||
if (!exists && shouldExist) {
|
||||
newExpanded.add(key)
|
||||
} else if (exists && !shouldExist) {
|
||||
newExpanded.delete(key)
|
||||
} else {
|
||||
return old
|
||||
}
|
||||
|
||||
return {
|
||||
...old,
|
||||
expanded: setBy(expanded, path, set),
|
||||
expanded: [...newExpanded.values()],
|
||||
}
|
||||
}, actions.toggleExpanded)
|
||||
}
|
||||
@@ -81,9 +86,10 @@ function useMain(instance) {
|
||||
// Here we do some mutation, but it's the last stage in the
|
||||
// immutable process so this is safe
|
||||
const handleRow = row => {
|
||||
const key = row.path.join('.')
|
||||
row.isExpanded =
|
||||
(row.original && row.original[manualExpandedKey]) ||
|
||||
getBy(expanded, row.path)
|
||||
expanded.includes(key)
|
||||
|
||||
expandedRows.push(row)
|
||||
|
||||
@@ -116,11 +122,13 @@ function useMain(instance) {
|
||||
}
|
||||
}
|
||||
|
||||
function findExpandedDepth(obj, depth = 1) {
|
||||
return Object.values(obj).reduce((prev, curr) => {
|
||||
if (typeof curr === 'object') {
|
||||
return Math.max(prev, findExpandedDepth(curr, depth + 1))
|
||||
}
|
||||
return depth
|
||||
}, 0)
|
||||
function findExpandedDepth(expanded) {
|
||||
let maxDepth = 0
|
||||
|
||||
expanded.forEach(key => {
|
||||
const path = key.split('.')
|
||||
maxDepth = Math.max(maxDepth, path.length)
|
||||
})
|
||||
|
||||
return maxDepth
|
||||
}
|
||||
|
||||
@@ -173,7 +173,18 @@ function useMain(instance) {
|
||||
|
||||
if (column.canSort) {
|
||||
column.toggleSortBy = (desc, multi) =>
|
||||
toggleSortBy(column.id, desc, multi)
|
||||
toggleSortBy(column.id, desc, multi);
|
||||
|
||||
column.clearSorting = () => {
|
||||
return setState(old => {
|
||||
const { sortBy } = old;
|
||||
const newSortBy = sortBy.filter(d => d.id !== column.id);
|
||||
return {
|
||||
...old,
|
||||
sortBy: newSortBy,
|
||||
}
|
||||
}, actions.sortByChange);
|
||||
};
|
||||
}
|
||||
|
||||
column.getSortByToggleProps = props => {
|
||||
|
||||
+2
-20
@@ -2,7 +2,7 @@ import React from 'react'
|
||||
|
||||
const columnFallbacks = {
|
||||
Header: () => null,
|
||||
Cell: ({ cell: { value = '' } }) => value,
|
||||
Cell: ({ cell: { value = '' } }) => String(value),
|
||||
show: true,
|
||||
}
|
||||
|
||||
@@ -79,11 +79,9 @@ export function decorateColumnTree(columns, defaultColumn, parent, depth = 0) {
|
||||
}
|
||||
|
||||
// Build the header groups from the bottom up
|
||||
export function makeHeaderGroups(flatColumns, columns, defaultColumn) {
|
||||
export function makeHeaderGroups(flatColumns, defaultColumn) {
|
||||
const headerGroups = []
|
||||
|
||||
const maxDepth = findMaxDepth(columns)
|
||||
|
||||
// Build each header group from the bottom up
|
||||
const buildGroup = (columns, depth) => {
|
||||
const headerGroup = {
|
||||
@@ -234,22 +232,6 @@ export function defaultGroupByFn(rows, columnID) {
|
||||
}, {})
|
||||
}
|
||||
|
||||
export function setBy(obj = {}, path, value) {
|
||||
path = makePathArray(path)
|
||||
const recurse = (obj, depth = 0) => {
|
||||
const key = path[depth]
|
||||
const target = typeof obj[key] !== 'object' ? {} : obj[key]
|
||||
const subValue =
|
||||
depth === path.length - 1 ? value : recurse(target, depth + 1)
|
||||
return {
|
||||
...obj,
|
||||
[key]: subValue,
|
||||
}
|
||||
}
|
||||
|
||||
return recurse(obj)
|
||||
}
|
||||
|
||||
export function getElementDimensions(element) {
|
||||
const rect = element.getBoundingClientRect()
|
||||
const style = window.getComputedStyle(element)
|
||||
|
||||
@@ -2956,16 +2956,16 @@ eslint-scope@^4.0.3:
|
||||
estraverse "^4.1.1"
|
||||
|
||||
eslint-utils@^1.3.0, eslint-utils@^1.3.1:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.0.tgz#e2c3c8dba768425f897cf0f9e51fe2e241485d4c"
|
||||
integrity sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==
|
||||
version "1.4.2"
|
||||
resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.2.tgz#166a5180ef6ab7eb462f162fd0e6f2463d7309ab"
|
||||
integrity sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==
|
||||
dependencies:
|
||||
eslint-visitor-keys "^1.0.0"
|
||||
|
||||
eslint-visitor-keys@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
|
||||
integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
|
||||
integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
|
||||
|
||||
eslint@5.x, eslint@^5.6.0:
|
||||
version "5.16.0"
|
||||
|
||||
Reference in New Issue
Block a user