vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2025-10-16 11:55:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/react-tools/react-table

Browse Source
This commit is contained in:
tannerlinsley 2019-08-19 16:41:49 -06:00
commit 4a45cd6574
7 changed files with 450 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -63,7 +63,12 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
</td>
<td align="center" valign="middle">
<a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
<img width='480' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-retool.png">
<img width='350' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-retool.png">
</a>
</td>
<td align="center" valign="middle">
<a href="http://bjntech.com/index.html&utm_campaign=react_table" target="_blank">
<img width='250' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-bjn.png">
</a>
</td>
</tr>
@ -118,7 +123,6 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
</a>
</td>
<td>
<div>Nicholas Kaufmann</div>
<div><a href="https://www.metso.com/">Pekka</a></div>
<div>Jon Eickmeier</div>
</td>

4
src/hooks/useTable.js
View File

@ -189,7 +189,7 @@ export const useTable = (props, ...plugins) => {
// Create the cells and values
row.values = {}
instanceRef.current.columns.forEach(column => {
columns.forEach(column => {
row.values[column.id] = column.accessor
? column.accessor(originalRow, i, { subRows, depth, data })
: undefined
@ -203,7 +203,7 @@ export const useTable = (props, ...plugins) => {
if (process.env.NODE_ENV === 'development' && debug)
console.timeEnd('getAccessedRows')
return [accessedData, rowPaths, flatRows]
}, [debug, data, subRowsKey])
}, [debug, data, columns, subRowsKey])
instanceRef.current.rows = rows
instanceRef.current.rowPaths = rowPaths

400
src/plugin-hooks/tests/__snapshots__/useRowSelect.test.js.snap
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders a table with seletable rows 1`] = `
exports[`renders a table with selectable rows 1`] = `
Snapshot Diff:
- First value
+ Second value
@ -57,7 +57,227 @@ Snapshot Diff:
<td
class=""
>
@@ -314,15 +314,20 @@
@@ -333,11 +333,11 @@
</td>
<td
class=""
>
<div>
- Not Selected
+ Selected
</div>
</td>
<td
class=""
>
@@ -389,11 +389,11 @@
</td>
<td
class=""
>
<div>
- Not Selected
+ Selected
</div>
</td>
<td
class=""
>
@@ -426,15 +426,22 @@
</td>
</tr>
</tbody>
</table>
<p>
- Selected Rows: 0
+ Selected Rows: 6
</p>
<pre>
<code>
{
- "selectedRows": []
+ "selectedRows": [
+ "0",
+ "1",
+ "2",
+ "2.0",
+ "2.1",
+ "3"
+ ]
}
</code>
</pre>
</DocumentFragment>
`;
exports[`renders a table with selectable rows 2`] = `
Snapshot Diff:
- First value
+ Second value
@@ -109,11 +109,11 @@
</td>
<td
class=""
>
<div>
- Selected
+ Not Selected
</div>
</td>
<td
class=""
>
@@ -165,11 +165,11 @@
</td>
<td
class=""
>
<div>
- Selected
+ Not Selected
</div>
</td>
<td
class=""
>
@@ -221,11 +221,11 @@
</td>
<td
class=""
>
<div>
- Selected
+ Not Selected
</div>
</td>
<td
class=""
>
@@ -277,11 +277,11 @@
</td>
<td
class=""
>
<div>
- Selected
+ Not Selected
</div>
</td>
<td
class=""
>
@@ -333,11 +333,11 @@
</td>
<td
class=""
>
<div>
- Selected
+ Not Selected
</div>
</td>
<td
class=""
>
@@ -389,11 +389,11 @@
</td>
<td
class=""
>
<div>
- Selected
+ Not Selected
</div>
</td>
<td
class=""
>
@@ -426,22 +426,15 @@
</td>
</tr>
</tbody>
</table>
<p>
- Selected Rows: 6
+ Selected Rows: 0
</p>
<pre>
<code>
{
- "selectedRows": [
- "0",
- "1",
- "2",
- "2.0",
- "2.1",
- "3"
- ]
+ "selectedRows": []
}
</code>
</pre>
</DocumentFragment>
`;
exports[`renders a table with selectable rows 3`] = `
Snapshot Diff:
- First value
+ Second value
@@ -109,11 +109,11 @@
</td>
<td
class=""
>
<div>
- Not Selected
+ Selected
</div>
</td>
<td
class=""
>
@@ -221,11 +221,11 @@
</td>
<td
class=""
>
<div>
- Not Selected
+ Selected
</div>
</td>
<td
class=""
>
@@ -277,11 +277,11 @@
</td>
<td
class=""
>
<div>
- Not Selected
+ Selected
</div>
</td>
<td
class=""
>
@@ -333,11 +333,11 @@
</td>
<td
class=""
>
<div>
- Not Selected
+ Selected
</div>
</td>
<td
class=""
>
@@ -426,15 +426,20 @@
</td>
</tr>
</tbody>
@ -72,9 +292,9 @@ Snapshot Diff:
- "selectedRows": []
+ "selectedRows": [
+ "0",
+ "1",
+ "2",
+ "3"
+ "2.0",
+ "2.1"
+ ]
}
</code>
@ -82,37 +302,11 @@ Snapshot Diff:
</DocumentFragment>
`;
exports[`renders a table with seletable rows 2`] = `
exports[`renders a table with selectable rows 4`] = `
Snapshot Diff:
- First value
+ Second value
@@ -109,11 +109,11 @@
</td>
<td
class=""
>
<div>
- Selected
+ Not Selected
</div>
</td>
<td
class=""
>
@@ -165,11 +165,11 @@
</td>
<td
class=""
>
<div>
- Selected
+ Not Selected
</div>
</td>
<td
class=""
>
@@ -221,11 +221,11 @@
</td>
<td
@ -139,37 +333,50 @@ Snapshot Diff:
<td
class=""
>
@@ -314,20 +314,15 @@
@@ -333,11 +333,11 @@
</td>
<td
class=""
>
<div>
- Selected
+ Not Selected
</div>
</td>
<td
class=""
>
@@ -426,20 +426,17 @@
</td>
</tr>
</tbody>
</table>
<p>
- Selected Rows: 4
+ Selected Rows: 0
+ Selected Rows: 1
</p>
<pre>
<code>
{
- "selectedRows": [
"selectedRows": [
- "0",
- "1",
- "2",
- "3"
- ]
+ "selectedRows": []
- "2.0",
- "2.1"
+ "0"
]
}
</code>
</pre>
</DocumentFragment>
`;
exports[`renders a table with seletable rows 3`] = `
exports[`renders a table with selectable rows 5`] = `
Snapshot Diff:
- First value
+ Second value
@@ -109,11 +109,11 @@
@@ -277,11 +277,11 @@
</td>
<td
class=""
@ -182,6 +389,34 @@ Snapshot Diff:
<td
class=""
>
@@ -426,17 +426,18 @@
</td>
</tr>
</tbody>
</table>
<p>
- Selected Rows: 1
+ Selected Rows: 2
</p>
<pre>
<code>
{
"selectedRows": [
- "0"
+ "0",
+ "2.0"
]
}
</code>
</pre>
</DocumentFragment>
`;
exports[`renders a table with selectable rows 6`] = `
Snapshot Diff:
- First value
+ Second value
@@ -221,11 +221,11 @@
</td>
<td
@ -195,23 +430,94 @@ Snapshot Diff:
<td
class=""
>
@@ -314,15 +314,18 @@
@@ -333,11 +333,11 @@
</td>
<td
class=""
>
<div>
- Not Selected
+ Selected
</div>
</td>
<td
class=""
>
@@ -426,18 +426,20 @@
</td>
</tr>
</tbody>
</table>
<p>
- Selected Rows: 0
+ Selected Rows: 2
- Selected Rows: 2
+ Selected Rows: 4
</p>
<pre>
<code>
{
- "selectedRows": []
+ "selectedRows": [
+ "0",
"selectedRows": [
"0",
- "2.0"
+ "2.0",
+ "2.1",
+ "2"
+ ]
]
}
</code>
</pre>
</DocumentFragment>
`;
exports[`renders a table with selectable rows 7`] = `
Snapshot Diff:
- First value
+ Second value
@@ -221,11 +221,11 @@
</td>
<td
class=""
>
<div>
- Selected
+ Not Selected
</div>
</td>
<td
class=""
>
@@ -333,11 +333,11 @@
</td>
<td
class=""
>
<div>
- Selected
+ Not Selected
</div>
</td>
<td
class=""
>
@@ -426,20 +426,18 @@
</td>
</tr>
</tbody>
</table>
<p>
- Selected Rows: 4
+ Selected Rows: 2
</p>
<pre>
<code>
{
"selectedRows": [
"0",
- "2.0",
- "2.1",
- "2"
+ "2.0"
]
}
</code>
</pre>

45
src/plugin-hooks/tests/useRowSelect.test.js
View File

@ -2,6 +2,7 @@ import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import { useTable } from '../../hooks/useTable'
import { useRowSelect } from '../useRowSelect'
import { useExpanded } from '../useExpanded'
const data = [
{
@ -27,6 +28,25 @@ const data = [
visits: 20,
status: 'Complicated',
progress: 10,
expanded: true,
subRows: [
{
firstName: 'bob',
lastName: 'ross',
age: 52,
visits: 40,
status: 'In Relationship',
progress: 30,
},
{
firstName: 'john',
lastName: 'smith',
age: 21,
visits: 30,
status: 'Single',
progress: 60,
},
],
},
{
firstName: 'jaylen',
@ -51,7 +71,8 @@ function Table({ columns, data }) {
columns,
data,
},
useRowSelect
useRowSelect,
useExpanded
)
// Render the UI for your table
@ -164,7 +185,7 @@ function App() {
return <Table columns={columns} data={data} />
}
test('renders a table with seletable rows', () => {
test('renders a table with selectable rows', () => {
const { getByLabelText, getAllByLabelText, asFragment } = render(<App />)
const fragment1 = asFragment()
@ -182,7 +203,27 @@ test('renders a table with seletable rows', () => {
const fragment4 = asFragment()
fireEvent.click(getAllByLabelText('Select Row')[2])
const fragment5 = asFragment()
fireEvent.click(getAllByLabelText('Select Row')[3])
const fragment6 = asFragment()
fireEvent.click(getAllByLabelText('Select Row')[4])
const fragment7 = asFragment()
fireEvent.click(getAllByLabelText('Select Row')[4])
const fragment8 = asFragment()
expect(fragment1).toMatchDiffSnapshot(fragment2)
expect(fragment2).toMatchDiffSnapshot(fragment3)
expect(fragment3).toMatchDiffSnapshot(fragment4)
expect(fragment4).toMatchDiffSnapshot(fragment5)
expect(fragment5).toMatchDiffSnapshot(fragment6)
expect(fragment6).toMatchDiffSnapshot(fragment7)
expect(fragment7).toMatchDiffSnapshot(fragment8)
})

8
src/plugin-hooks/useFilters.js
View File

@ -146,14 +146,14 @@ function useMain(instance) {
// Find the filters column
const column = columns.find(d => d.id === columnID)
if (depth === 0) {
column.preFilteredRows = filteredSoFar
}
if (!column) {
return filteredSoFar
}
if (depth === 0) {
column.preFilteredRows = filteredSoFar
}
const filterMethod = getFilterMethod(
column.filter,
userFilterTypes || {},

26
src/plugin-hooks/useRowSelect.js
View File

@ -50,6 +50,20 @@ function useMain(instance) {
}, actions.toggleRowSelectedAll)
}
const updateParentRow = (selectedRows, path) => {
const parentPath = path.slice(0, path.length - 1)
const parentKey = parentPath.join(".")
const selected = rowPaths.filter(path =>
path !== parentKey && path.startsWith(parentKey) && !selectedRows.has(path)
).length === 0
if (selected) {
selectedRows.add(parentKey)
} else {
selectedRows.delete(parentKey)
}
if (parentPath.length > 1) updateParentRow(selectedRows, parentPath)
}
const toggleRowSelected = (path, set) => {
const key = path.join('.')
@ -62,13 +76,21 @@ function useMain(instance) {
let newSelectedRows = new Set(old.selectedRows)
if (!exists && shouldExist) {
newSelectedRows.add(key)
rowPaths.forEach((rowPath) => {
if (rowPath.startsWith(key)) newSelectedRows.add(rowPath)
})
} else if (exists && !shouldExist) {
newSelectedRows.delete(key)
rowPaths.forEach((rowPath) => {
if (rowPath.startsWith(key)) newSelectedRows.delete(rowPath)
})
} else {
return old
}
// If the row is a subRow update
// its parent row to reflect changes
if (path.length > 1) updateParentRow(newSelectedRows, path)
return {
...old,
selectedRows: [...newSelectedRows.values()],

23
src/plugin-hooks/useSortBy.js
View File

@ -210,15 +210,28 @@ function useMain(instance) {
if (process.env.NODE_ENV === 'development' && debug)
console.time('getSortedRows')
// Filter out sortBys that correspond to non existing columns
const availableSortBy = sortBy.filter(sort =>
columns.find(col => col.id === sort.id)
)
const sortData = rows => {
// Use the orderByFn to compose multiple sortBy's together.
// This will also perform a stable sorting using the row index
// if needed.
const sortedData = orderByFn(
rows,
sortBy.map(sort => {
availableSortBy.map(sort => {
// Support custom sorting methods for each column
const { sortType } = columns.find(d => d.id === sort.id)
const column = columns.find(d => d.id === sort.id)
if (!column) {
throw new Error(
`React-Table: Could not find a column with id: ${sort.id} while sorting`
)
}
const { sortType } = column
// Look up sortBy functions in this order:
// column function
@ -238,11 +251,11 @@ function useMain(instance) {
sortMethod(a.values[sort.id], b.values[sort.id], sort.desc)
}),
// Map the directions
sortBy.map(sort => {
availableSortBy.map(sort => {
// Detect and use the sortInverted option
const { sortInverted } = columns.find(d => d.id === sort.id)
const column = columns.find(d => d.id === sort.id)
if (sortInverted) {
if (column && column.sortInverted) {
return sort.desc
}