vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2026-08-12 04:50:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: useExpanded uses flat array for state

Browse Source 
useExpanded now uses a flat array of row path keys for tracking expanded state instead of nested
objects. This is both easier to use as a developer, but also enables expanding all rows or even
leaving nested rows in an expanded state, despite their parent rows' expanded state.

BREAKING CHANGE: See description
This commit is contained in:
tannerlinsley
2019-08-29 09:14:11 -06:00
parent 51165d92f6
commit b10446b8c4
6 changed files with 676 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/api.md
+4 -4
View File
@@ -940,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
examples/expanding/src/App.js
+3 -3
View File
@@ -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>
</>
)
}
src/plugin-hooks/tests/__snapshots__/useExpanded.test.js.snap
+624 -41
View File
@@ -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=""
>
`;
src/plugin-hooks/tests/useExpanded.test.js
+17 -9
View File
@@ -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)
})
src/plugin-hooks/useExpanded.js
+28 -20
View File
@@ -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
}
src/utils.js
-16
View File
@@ -232,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)