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

Mucho updates

Browse Source
This commit is contained in:
Tanner Linsley 2019-12-13 00:22:30 -07:00
parent 3109ca4d37
commit 9fa1396f26
51 changed files with 11266 additions and 512 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.babelrc
View File

@ -3,7 +3,8 @@
[
"@babel/preset-env",
{
"modules": false
"modules": false,
"loose": true
}
],
"@babel/react"

14
.size-snapshot.json
View File

@ -1,20 +1,20 @@
{
"dist/index.js": {
"bundled": 107809,
"minified": 51216,
"gzipped": 13492
"bundled": 104527,
"minified": 48274,
"gzipped": 12949
},
"dist/index.es.js": {
"bundled": 106966,
"minified": 50466,
"gzipped": 13339,
"bundled": 103640,
"minified": 47484,
"gzipped": 12791,
"treeshaked": {
"rollup": {
"code": 80,
"import_statements": 21
},
"webpack": {
"code": 8902
"code": 8227
}
}
},

21
CHANGELOG.md
View File

@ -1,3 +1,24 @@
## 7.0.0-rc.10
- Optimizations made to make accessors, prop getters and other internals much faster. 10x in some cases!
- Fixed docs for `usePagination` to have `pageIndex` and `pageSize` only available on the state object, not the instance
- Added a plugin order restriction to make sure `useResizeColumns` always comes before `useAbsoluteLayout`
- Fixed the `useFinalInstance` hook to not have an empty array as the first meta argument passed.
- Fixed an issue where memoized or ref-forwarded components could not be used as cell renderers
- The `toggleExpandedById` action has been renamed to `toggleExpanded`
- Added the `toggleAllExpanded` action
- Added the `setExpanded` action
- Changed `row.isAggregated` to `row.isGrouped`
- `state.expanded` and `state.selectedRowIds` are now objects (`{[rowId]: Bool}`), not arrays. This should help with mid-to-large size datasets while also being serializable (instead of a Set(), which is not as reliable)
- `state.filters` is now an array of objects (`{id, value}`). Since filters do have order and can be applied incrementally, it should be an array to ensure correct order.
- Moved the `flatColumns` and `flatColumnsDeps` hooks to be after row/data materialization. These hooks can then manipulate the `flatColumns` object after all data has been accessed without triggering row materialization again.
- Added the `row.allCells` property and the `cellColumns` reducer hook to determine which cells to create for each row. These cells are placed into `row.allCells`. The resulting cell array is not meant to be used for display in templating and is only made available for convenience and/or advanced templating.
- Added the `cells` reducer hook to determine which cells from the `row.allCells` array that should be placed into `row.cells`. The resulting cell array is the one that is intended for display in templating.
- Reducers are now passed the actual instance variable, not the instanceRef
- Added the `makeRenderer` utility (also exported)
- Removed `column.groupByBoundary` functionality. If needed, use the `flatColumns` hook to decorate, reorganize or re-order groupBy columns
- Fixed grouped row.id's to be truly unique
## 7.0.0-rc.9
- Fixed an issue where dependency hooks were not being reduced properly, thus the table would rerender unnecessarily

4
docs/api/useColumnOrder.md
View File

@ -9,12 +9,10 @@
The following options are supported via the main options object passed to `useTable(options)`
- `state.columnOrder: Array<ColumnId>`
- `initialState.columnOrder: Array<ColumnId>`
- Optional
- Defaults to `[]`
- Any column ID's not represented in this array will be naturally ordered based on their position in the original table's `column` structure
- `initialState.columnOrder`
- Identical to the `state.columnOrder` option above
### Instance Properties

12
docs/api/useExpanded.md
View File

@ -9,15 +9,13 @@
The following options are supported via the main options object passed to `useTable(options)`
- `state.expanded: Array<rowId: String>`
- `initialState.expanded: Object<rowId: String, expanded: Bool>`
- Optional
- Must be **memoized**
- An array of expanded row IDs.
- If a row's id is present in this array, that row will have an expanded state. For example, if `['3']` was passed as the `expanded` state, by default the **4th row in the original data array** would be expanded, since it would have that ID
- For nested expansion, you can **use nested IDs like `1.3`** to expand sub rows. For example, if `['3', '3.5']` was passed as the `expanded` state, then the **the 4th row would be expanded, along with the 6th subRow of the 4th row as well**.
- An `object` of expanded row IDs with boolean property values.
- If a row's id is set to true in this object, that row will have an expanded state. For example, if `{ '3': true }` was passed as the `expanded` state, by default the **4th row in the original data array** would be expanded, since it would have that ID
- For nested expansion, you can **use nested IDs like `1.3`** to expand sub rows. For example, if `{ '3': true, '3.5': true }` was passed as the `expanded` state, then the **the 4th row would be expanded, along with the 6th subRow of the 4th row as well**.
- This information is stored in state since the table is allowed to manipulate the filter through user interaction.
- `initialState.expanded`
- Identical to the `state.expanded` option above
- `getSubRows: Function(row, relativeIndex) => Rows[]`
- Optional
- See the [useTable hook](#table-options) for more details
@ -42,7 +40,7 @@ The following options are supported via the main options object passed to `useTa
The following properties are available on the table instance returned from `useTable`
- `rows: Array<Row>`
- An array of **sorted** rows.
- An array of **expanded** rows.
### Row Properties

6
docs/api/useFilters.md
View File

@ -9,11 +9,9 @@
The following options are supported via the main options object passed to `useTable(options)`
- `state.filters: Object<columnId: filterValue>`
- `initialState.filters: Array<Object<id: String, value: any>>`
- Must be **memoized**
- An object of columnId's and their corresponding filter values. This information is stored in state since the table is allowed to manipulate the filter through user interaction.
- `initialState.filters`
- Identical to the `state.filters` option above
- An array of objects containing columnId's and their corresponding filter values. This information is stored in state since the table is allowed to manipulate the filter through user interaction.
- `manualFilters: Bool`
- Enables filter detection functionality, but does not automatically perform row filtering.
- Turn this on if you wish to implement your own row filter outside of the table (eg. server-side or manual row grouping/nesting)

4
docs/api/useGroupBy.md
View File

@ -12,11 +12,9 @@
The following options are supported via the main options object passed to `useTable(options)`
- `state.groupBy: Array<String>`
- `initialState.groupBy: Array<String>`
- Must be **memoized**
- An array of groupBy ID strings, controlling which columns are used to calculate row grouping and aggregation. This information is stored in state since the table is allowed to manipulate the groupBy through user interaction.
- `initialState.groupBy`
- Identical to the `state.groupBy` option above
- `manualGroupBy: Bool`
- Enables groupBy detection and functionality, but does not automatically perform row grouping.
- Turn this on if you wish to implement your own row grouping outside of the table (eg. server-side or manual row grouping/nesting)

18
docs/api/usePagination.md
View File

@ -11,18 +11,14 @@
The following options are supported via the main options object passed to `useTable(options)`
- `state.pageSize: Int`
- `initialState.pageSize: Int`
- **Required**
- Defaults to `10`
- Determines the amount of rows on any given page
- `initialState.pageSize`
- Identical to the `state.pageSize` option above
- `state.pageIndex: Int`
- `initialState.pageIndex: Int`
- **Required**
- Defaults to `0`
- The index of the page that should be displayed via the `page` instance value
- `initialState.pageIndex`
- Identical to the `state.pageIndex` option above
- `pageCount: Int`
- **Required if `manualPagination` is set to `true`**
- If `manualPagination` is `true`, then this value used to determine the amount of pages available. This amount is then used to materialize the `pageOptions` and also compute the `canNextPage` values on the table instance.
@ -31,7 +27,7 @@ The following options are supported via the main options object passed to `useTa
- Turn this on if you wish to implement your own pagination outside of the table (eg. server-side pagination or any other manual pagination technique)
- `autoResetPage: Boolean`
- Defaults to `true`
- When `true`, the `expanded` state will automatically reset if `manualPagination` is `false` and any of the following conditions are met:
- When `true`, the `pageIndex` state will automatically reset if `manualPagination` is `false` and any of the following conditions are met:
- `data` is changed
- `manualSortBy` is `false` and `state.sortBy` is changed
- `manualFilters` is `false` and `state.filters` is changed
@ -49,6 +45,10 @@ The following options are supported via the main options object passed to `useTa
The following values are provided to the table `instance`:
- `state.pageIndex: Int`
- This is the current `pageIndex` value, located on the state.
- `state.pageSize: Int`
- This is the current `pageSize` value, located on the state.
- `page: Array<row>`
- An array of rows for the **current** page, determined by the current `pageIndex` value.
- `pageCount: Int`
@ -73,10 +73,6 @@ The following values are provided to the table `instance`:
- `setPageSize: Function(pageSize)`
- This function sets `state.pageSize` to the new value.
- As a result of a pageSize change, a new `state.pageIndex` is also calculated. It is calculated via `Math.floor(currentTopRowIndex / newPageSize)`
- `pageIndex: Int`
- This is the resolved `state.pageIndex` value.
- `pageSize: Int`
- This is the resolved `state.pageSize` value.
### Example

8
docs/api/useRowSelect.md
View File

@ -9,17 +9,17 @@
The following options are supported via the main options object passed to `useTable(options)`
- `initialState.selectedRowIds: Set<RowPathKey>`
- `initialState.selectedRowIds: Object<rowId: Boolean>`
- Optional
- Defaults to `new Set()`
- If a row's ID is found in this array, it will have a selected state.
- Defaults to `{}`
- If a row's ID is set to `true` in this object, it will have a selected state.
- `manualRowSelectedKey: String`
- Optional
- Defaults to `isSelected`
- If this key is found on the **original** data row, and it is true, this row will be manually selected
- `autoResetSelectedRows: Boolean`
- Defaults to `true`
- When `true`, the `expanded` state will automatically reset if any of the following conditions are met:
- When `true`, the `selectedRowIds` state will automatically reset if any of the following conditions are met:
- `data` is changed
- To disable, set to `false`
- For more information see the FAQ ["How do I stop my table state from automatically resetting when my data changes?"](./faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)

4
docs/api/useRowState.md
View File

@ -9,14 +9,12 @@
The following options are supported via the main options object passed to `useTable(options)`
- `state.rowState: Object<RowPathKey:Object<any, cellState: {columnId: Object}>>`
- `initialState.rowState: Object<RowPathKey:Object<any, cellState: {columnId: Object}>>`
- Optional
- Defaults to `{}`
- If a row's ID is found in this array, it will have the state of the value corresponding to that key.
- Individual row states can contain anything, but they also contain a `cellState` key, which provides cell-level state based on column ID's to every
**prepared** cell in the table.
- `initialState.rowState`
- Identical to the `state.rowState` option above
- `initialRowStateAccessor: Function`
- Optional
- This function may optionally return the initial state for a row.

4
docs/api/useSortBy.md
View File

@ -14,11 +14,9 @@
The following options are supported via the main options object passed to `useTable(options)`
- `state.sortBy: Array<Object<id: columnId, desc: Bool>>`
- `initialState.sortBy: Array<Object<id: columnId, desc: Bool>>`
- Must be **memoized**
- An array of sorting objects. If there is more than one object in the array, multi-sorting will be enabled. Each sorting object should contain an `id` key with the corresponding column ID to sort by. An optional `desc` key may be set to true or false to indicated ascending or descending sorting for that column. This information is stored in state since the table is allowed to manipulate the filter through user interaction.
- `initialState.sortBy`
- Identical to the `state.sortBy` option above
- `manualSorting: Bool`
- Enables sorting detection functionality, but does not automatically perform row sorting. Turn this on if you wish to implement your own sorting outside of the table (eg. server-side or manual row grouping/nesting)
- `disableSortBy: Bool`

12
docs/api/useTable.md
View File

@ -93,6 +93,11 @@ The following options are supported on any column object you can pass to `column
- Receives the table instance and cell model as props
- Must return valid JSX
- This function (or component) is primarily used for formatting the column value, eg. If your column accessor returns a date object, you can use a `Cell` function to format that date to a readable format.
- `show: Bool`
- Optional
- Defaults to `undefined`
- If set to `true`, will take priority over any state in `hiddenColumns` and force this column to be visible at all times.
- If set to `false` will take priority over any state in `hiddenColumns` and force this column to be hidden at all times.
- `width: Int`
- Optional
- Defaults to `150`
@ -240,7 +245,12 @@ The following properties are available on every `Column` object returned by the
The following additional properties are available on every `row` object returned by the table instance.
- `cells: Array<Cell>`
- An array of `Cell` objects containing properties and functions specific to the row and column it belongs to.
- An array of visible `Cell` objects containing properties and functions specific to the row and column it belongs to.
- These cells are normally intended for display
- See [Cell Properties](#cell-properties) for more information
- `allCells: Array<Cell>`
- An array of all `Cell` objects containing properties and functions specific to the row and column it belongs to.
- Not every cell contained here is guaranteed that it should be displayed and is made available here for convenience and advanced templating purposes.
- See [Cell Properties](#cell-properties) for more information
- `values: Object<columnId: any>`
- A map of this row's **resolved** values by columnId, eg. `{ firstName: 'Tanner', lastName: 'Linsley' }`

25
examples/expanding/src/App.js
View File

@ -62,25 +62,22 @@ function Table({ columns: userColumns, data }) {
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(
(row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
)
})}
</tr>
)}
)}
{rows.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
<br />
<div>Showing the first 20 results of {rows.length} rows</div>
<pre>
<code>{JSON.stringify({ expanded }, null, 2)}</code>
<code>{JSON.stringify({ expanded: expanded }, null, 2)}</code>
</pre>
</>
)

4
examples/grouping-column/.babelrc Normal file
View File

@ -0,0 +1,4 @@
{
"presets": ["react-app"],
"plugins": ["styled-components"]
}

1
examples/grouping-column/.env Normal file
View File

@ -0,0 +1 @@
SKIP_PREFLIGHT_CHECK=true

7
examples/grouping-column/.eslintrc Normal file
View File

@ -0,0 +1,7 @@
{
"extends": ["react-app", "prettier"],
"rules": {
// "eqeqeq": 0,
// "jsx-a11y/anchor-is-valid": 0
}
}

23
examples/grouping-column/.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

29
examples/grouping-column/.rescriptsrc.js Normal file
View File

@ -0,0 +1,29 @@
const path = require('path')
const resolveFrom = require('resolve-from')
const fixLinkedDependencies = config => {
config.resolve = {
...config.resolve,
alias: {
...config.resolve.alias,
react$: resolveFrom(path.resolve('node_modules'), 'react'),
'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
},
}
return config
}
const includeSrcDirectory = config => {
config.resolve = {
...config.resolve,
modules: [path.resolve('src'), ...config.resolve.modules],
}
return config
}
module.exports = [
['use-babel-config', '.babelrc'],
['use-eslint-config', '.eslintrc'],
fixLinkedDependencies,
// includeSrcDirectory,
]

6
examples/grouping-column/README.md Normal file
View File

@ -0,0 +1,6 @@
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and Rescripts.
You can:
- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/grouping-column)
- `yarn` and `yarn start` to run and edit the example

35
examples/grouping-column/package.json Normal file
View File

@ -0,0 +1,35 @@
{
"private": true,
"scripts": {
"start": "rescripts start",
"build": "rescripts build",
"test": "rescripts test",
"eject": "rescripts eject"
},
"dependencies": {
"namor": "^1.1.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"react-table": "latest",
"styled-components": "^4.3.2"
},
"devDependencies": {
"@rescripts/cli": "^0.0.11",
"@rescripts/rescript-use-babel-config": "^0.0.8",
"@rescripts/rescript-use-eslint-config": "^0.0.9",
"babel-eslint": "10.0.1"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

BIN
examples/grouping-column/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

38
examples/grouping-column/public/index.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

15
examples/grouping-column/public/manifest.json Normal file
View File

@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

305
examples/grouping-column/src/App.js Normal file
View File

@ -0,0 +1,305 @@
import React from 'react'
import styled from 'styled-components'
import { useTable, useGroupBy, useExpanded } from 'react-table'
import makeData from './makeData'
const Styles = styled.div`
padding: 1rem;
table {
border-spacing: 0;
border: 1px solid black;
tr {
:last-child {
td {
border-bottom: 0;
}
}
}
th,
td {
margin: 0;
padding: 0.5rem;
border-bottom: 1px solid black;
border-right: 1px solid black;
:last-child {
border-right: 0;
}
}
}
`
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state: { groupBy, expanded },
} = useTable(
{
columns,
data,
},
useGroupBy,
useExpanded,
// Our custom plugin to add the expander column
hooks => {
hooks.flatColumns.push((columns, instance) => {
if (!instance.state.groupBy.length) {
return columns
}
return [
{
id: 'expander', // Make sure it has an ID
// Build our expander column
Header: ({ flatColumns, state: { groupBy } }) => {
return groupBy.map(columnId => {
const column = flatColumns.find(d => d.id === columnId)
return (
<span {...column.getHeaderProps()}>
{column.canGroupBy ? (
// If the column can be grouped, let's add a toggle
<span {...column.getGroupByToggleProps()}>
{column.isGrouped ? '🛑 ' : '👊 '}
</span>
) : null}
{column.render('Header')}{' '}
</span>
)
})
},
Cell: ({ row }) => {
if (row.canExpand) {
const groupedCell = row.allCells.find(d => d.isGrouped)
return (
<span
{...row.getExpandedToggleProps({
style: {
// We can even use the row.depth property
// and paddingLeft to indicate the depth
// of the row
paddingLeft: `${row.depth * 2}rem`,
},
})}
>
{row.isExpanded ? '👇' : '👉'} {groupedCell.render('Cell')}{' '}
({row.subRows.length})
</span>
)
}
return null
},
},
...columns.map(d => ({ ...d, isVisible: !d.isGrouped })),
]
})
}
)
// We don't want to render all of the rows for this example, so cap
// it at 20 for this use case
const firstPageRows = rows.slice(0, 100)
return (
<>
<pre>
<code>{JSON.stringify({ groupBy, expanded: expanded }, null, 2)}</code>
</pre>
<Legend />
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>
{column.canGroupBy ? (
// If the column can be grouped, let's add a toggle
<span {...column.getGroupByToggleProps()}>
{column.isGrouped ? '🛑 ' : '👊 '}
</span>
) : null}
{column.render('Header')}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{firstPageRows.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td
// For educational purposes, let's color the
// cell depending on what type it is given
// from the useGroupBy hook
{...cell.getCellProps()}
style={{
background: cell.isGrouped
? '#0aff0082'
: cell.isAggregated
? '#ffa50078'
: cell.isRepeatedValue
? '#ff000042'
: 'white',
}}
>
{cell.isAggregated
? // If the cell is aggregated, use the Aggregated
// renderer for cell
cell.render('Aggregated')
: cell.isRepeatedValue
? null // For cells with repeated values, render null
: // Otherwise, just render the regular cell
cell.render('Cell')}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
<br />
<div>Showing the first 100 results of {rows.length} rows</div>
</>
)
}
function Legend() {
return (
<div
style={{
padding: '0.5rem 0',
}}
>
<span
style={{
display: 'inline-block',
background: '#0aff0082',
padding: '0.5rem',
}}
>
Grouped
</span>{' '}
<span
style={{
display: 'inline-block',
background: '#ffa50078',
padding: '0.5rem',
}}
>
Aggregated
</span>{' '}
<span
style={{
display: 'inline-block',
background: '#ff000042',
padding: '0.5rem',
}}
>
Repeated Value
</span>
</div>
)
}
// This is a custom aggregator that
// takes in an array of values and
// returns the rounded median
function roundedMedian(values) {
let min = values[0] || ''
let max = values[0] || ''
values.forEach(value => {
min = Math.min(min, value)
max = Math.max(max, value)
})
return Math.round((min + max) / 2)
}
function App() {
const columns = React.useMemo(
() => [
{
Header: 'Name',
columns: [
{
Header: 'First Name',
accessor: 'firstName',
// Use a two-stage aggregator here to first
// count the total rows being aggregated,
// then sum any of those counts if they are
// aggregated further
aggregate: ['sum', 'count'],
Aggregated: ({ cell: { value } }) => `${value} Names`,
},
{
Header: 'Last Name',
accessor: 'lastName',
// Use another two-stage aggregator here to
// first count the UNIQUE values from the rows
// being aggregated, then sum those counts if
// they are aggregated further
aggregate: ['sum', 'uniqueCount'],
Aggregated: ({ cell: { value } }) => `${value} Unique Names`,
},
],
},
{
Header: 'Info',
columns: [
{
Header: 'Age',
accessor: 'age',
// Aggregate the average age of visitors
aggregate: 'average',
Aggregated: ({ cell: { value } }) => `${value} (avg)`,
},
{
Header: 'Visits',
accessor: 'visits',
// Aggregate the sum of all visits
aggregate: 'sum',
Aggregated: ({ cell: { value } }) => `${value} (total)`,
},
{
Header: 'Status',
accessor: 'status',
},
{
Header: 'Profile Progress',
accessor: 'progress',
// Use our custom roundedMedian aggregator
aggregate: roundedMedian,
Aggregated: ({ cell: { value } }) => `${value} (med)`,
},
],
},
],
[]
)
const data = React.useMemo(() => makeData(100000), [])
return (
<Styles>
<Table columns={columns} data={data} />
</Styles>
)
}
export default App

9
examples/grouping-column/src/App.test.js Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
it('renders without crashing', () => {
const div = document.createElement('div')
ReactDOM.render(<App />, div)
ReactDOM.unmountComponentAtNode(div)
})

13
examples/grouping-column/src/index.css Normal file
View File

@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

6
examples/grouping-column/src/index.js Normal file
View File

@ -0,0 +1,6 @@
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))

40
examples/grouping-column/src/makeData.js Normal file
View File

@ -0,0 +1,40 @@
import namor from 'namor'
const range = len => {
const arr = []
for (let i = 0; i < len; i++) {
arr.push(i)
}
return arr
}
const newPerson = () => {
const statusChance = Math.random()
return {
firstName: namor.generate({ words: 1, numbers: 0 }),
lastName: namor.generate({ words: 1, numbers: 0 }),
age: Math.floor(Math.random() * 30),
visits: Math.floor(Math.random() * 100),
progress: Math.floor(Math.random() * 100),
status:
statusChance > 0.66
? 'relationship'
: statusChance > 0.33
? 'complicated'
: 'single',
}
}
export default function makeData(...lens) {
const makeDataLevel = (depth = 0) => {
const len = lens[depth]
return range(len).map(d => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
}
})
}
return makeDataLevel()
}

10145
examples/grouping-column/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

4
examples/kitchen-sink-controlled/src/App.js
View File

@ -433,9 +433,9 @@ function Table({ columns, data, updateMyData, skipPageReset }) {
canNextPage,
canPreviousPage,
groupBy,
expanded,
expanded: expanded,
filters,
selectedRowIds: [...selectedRowIds.values()],
selectedRowIds: selectedRowIds,
},
null,
2

4
examples/kitchen-sink/src/App.js
View File

@ -432,9 +432,9 @@ function Table({ columns, data, updateMyData, skipReset }) {
canNextPage,
canPreviousPage,
groupBy,
expanded,
expanded: expanded,
filters,
selectedRowIds: [...selectedRowIds.values()],
selectedRowIds: selectedRowIds,
},
null,
2

4
examples/row-selection/src/App.js
View File

@ -94,12 +94,12 @@ function Table({ columns, data }) {
})}
</tbody>
</table>
<p>Selected Rows: {selectedRowIds.size}</p>
<p>Selected Rows: {Object.keys(selectedRowIds).length}</p>
<pre>
<code>
{JSON.stringify(
{
selectedRowIds: [...selectedRowIds.values()],
selectedRowIds: selectedRowIds,
'selectedFlatRows[].original': selectedFlatRows.map(
d => d.original
),

2
examples/sub-components/src/App.js
View File

@ -57,7 +57,7 @@ function Table({ columns: userColumns, data, renderRowSubComponent }) {
return (
<>
<pre>
<code>{JSON.stringify({ expanded }, null, 2)}</code>
<code>{JSON.stringify({ expanded: expanded }, null, 2)}</code>
</pre>
<table {...getTableProps()}>
<thead>

10
src/hooks/useColumnVisibility.js
View File

@ -117,8 +117,16 @@ function useInstanceBeforeDimensions(instance) {
state: { hiddenColumns },
} = instance
const isMountedRef = React.useRef(false)
if (!isMountedRef.current) {
}
const handleColumn = (column, parentVisible) => {
column.isVisible = parentVisible && !hiddenColumns.includes(column.id)
column.isVisible =
typeof column.isVisible !== 'undefined'
? column.isVisible
: parentVisible && !hiddenColumns.includes(column.id)
let totalVisibleHeaderCount = 0

269
src/hooks/useTable.js
View File

@ -6,7 +6,7 @@ import {
reduceHooks,
loopHooks,
makePropGetter,
flexRender,
makeRenderer,
decorateColumnTree,
makeHeaderGroups,
flattenBy,
@ -18,8 +18,6 @@ import makeDefaultPluginHooks from '../makeDefaultPluginHooks'
import { useColumnVisibility } from './useColumnVisibility'
let renderErr = 'Renderer Error'
const defaultInitialState = {}
const defaultColumnInstance = {}
const defaultReducer = (state, action, prevState) => state
@ -123,11 +121,11 @@ export const useTable = (props, ...plugins) => {
? getStateReducer()
: [getStateReducer()]),
].reduce(
(s, handler) => handler(s, action, state, instanceRef) || s,
(s, handler) => handler(s, action, state, getInstance()) || s,
state
)
},
[getStateReducers, getStateReducer]
[getStateReducers, getStateReducer, getInstance]
)
// Start the reducer
@ -172,33 +170,97 @@ export const useTable = (props, ...plugins) => {
getInstance().columns = columns
// Get the flat list of all columns and allow hooks to decorate
// those columns (and trigger this memoization via deps)
let flatColumns = React.useMemo(() => flattenBy(columns, 'columns'), [
columns,
])
getInstance().flatColumns = flatColumns
// Access the row model
const [rows, flatRows] = React.useMemo(() => {
let flatRows = []
// Access the row's data
const accessRow = (originalRow, i, depth = 0, parent) => {
// Keep the original reference around
const original = originalRow
const id = getRowId(originalRow, i, parent)
const row = {
id,
original,
index: i,
depth,
cells: [{}], // This is a dummy cell
}
flatRows.push(row)
// Process any subRows
let subRows = getSubRows(originalRow, i)
if (subRows) {
row.subRows = subRows.map((d, i) => accessRow(d, i, depth + 1, row))
}
// Override common array functions (and the dummy cell's getCellProps function)
// to show an error if it is accessed without calling prepareRow
const unpreparedAccessWarning = () => {
throw new Error(
'React-Table: You have not called prepareRow(row) one or more rows you are attempting to render.'
)
}
row.cells.map = unpreparedAccessWarning
row.cells.filter = unpreparedAccessWarning
row.cells.forEach = unpreparedAccessWarning
row.cells[0].getCellProps = unpreparedAccessWarning
// Create the cells and values
row.values = {}
flatColumns.forEach(({ id, accessor }) => {
row.values[id] = accessor
? accessor(originalRow, i, { subRows, depth, data })
: undefined
})
return row
}
// Use the resolved data
const accessedData = data.map((d, i) => accessRow(d, i))
return [accessedData, flatRows]
}, [data, flatColumns, getRowId, getSubRows])
getInstance().rows = rows
getInstance().flatRows = flatRows
// Snapshot hook and disallow more from being added
const getFlatColumns = useConsumeHookGetter(
const flatColumnsHooks = useConsumeHookGetter(
getInstance().hooks,
'flatColumns'
)
// Snapshot hook and disallow more from being added
const getFlatColumnsDeps = useConsumeHookGetter(
const flatColumnsDepsHooks = useConsumeHookGetter(
getInstance().hooks,
'flatColumnsDeps'
)
// Get the flat list of all columns and allow hooks to decorate
// Get the flat list of all columns AFTER the rows
// have been access, and allow hooks to decorate
// those columns (and trigger this memoization via deps)
let flatColumns = React.useMemo(
() =>
reduceHooks(
getFlatColumns(),
flattenBy(columns, 'columns'),
getInstance()
),
flatColumns = React.useMemo(
() => reduceHooks(flatColumnsHooks(), flatColumns, getInstance()),
[
columns,
getFlatColumns,
flatColumns,
flatColumnsHooks,
getInstance,
// eslint-disable-next-line react-hooks/exhaustive-deps
...reduceHooks(getFlatColumnsDeps(), [], getInstance()),
...reduceHooks(flatColumnsDepsHooks(), [], getInstance()),
]
)
@ -243,66 +305,6 @@ export const useTable = (props, ...plugins) => {
getInstance().headers = headers
// Access the row model
const [rows, flatRows] = React.useMemo(() => {
let flatRows = []
// Access the row's data
const accessRow = (originalRow, i, depth = 0, parent) => {
// Keep the original reference around
const original = originalRow
const id = getRowId(originalRow, i, parent)
const row = {
id,
original,
index: i,
depth,
cells: [{}], // This is a dummy cell
}
flatRows.push(row)
// Process any subRows
let subRows = getSubRows(originalRow, i)
if (subRows) {
row.subRows = subRows.map((d, i) => accessRow(d, i, depth + 1, row))
}
// Override common array functions (and the dummy cell's getCellProps function)
// to show an error if it is accessed without calling prepareRow
const unpreparedAccessWarning = () => {
throw new Error(
'React-Table: You have not called prepareRow(row) one or more rows you are attempting to render.'
)
}
row.cells.map = unpreparedAccessWarning
row.cells.filter = unpreparedAccessWarning
row.cells.forEach = unpreparedAccessWarning
row.cells[0].getCellProps = unpreparedAccessWarning
// Create the cells and values
row.values = {}
flatColumns.forEach(column => {
row.values[column.id] = column.accessor
? column.accessor(originalRow, i, { subRows, depth, data })
: undefined
})
return row
}
// Use the resolved data
const accessedData = data.map((d, i) => accessRow(d, i))
return [accessedData, flatRows]
}, [data, flatColumns, getRowId, getSubRows])
getInstance().rows = rows
getInstance().flatRows = flatRows
// Provide a flat header list for utilities
getInstance().flatHeaders = headerGroups.reduce(
(all, headerGroup) => [...all, ...headerGroup.headers],
@ -342,36 +344,26 @@ export const useTable = (props, ...plugins) => {
// Each materialized header needs to be assigned a render function and other
// prop getter properties here.
getInstance().flatHeaders.forEach(column => {
// Give columns/headers rendering power
column.render = (type, userProps = {}) => {
const Comp = typeof type === 'string' ? column[type] : type
;[...getInstance().flatHeaders, ...getInstance().flatColumns].forEach(
column => {
// Give columns/headers rendering power
column.render = makeRenderer(getInstance(), column)
if (typeof Comp === 'undefined') {
throw new Error(renderErr)
}
// Give columns/headers a default getHeaderProps
column.getHeaderProps = makePropGetter(
getHeaderPropsHooks(),
getInstance(),
column
)
return flexRender(Comp, {
...getInstance(),
column,
...userProps,
})
// Give columns/headers a default getFooterProps
column.getFooterProps = makePropGetter(
getFooterPropsHooks(),
getInstance(),
column
)
}
// Give columns/headers a default getHeaderProps
column.getHeaderProps = makePropGetter(
getHeaderPropsHooks(),
getInstance(),
column
)
// Give columns/headers a default getFooterProps
column.getFooterProps = makePropGetter(
getFooterPropsHooks(),
getInstance(),
column
)
})
)
// Snapshot hook and disallow more from being added
const getHeaderGroupPropsHooks = useConsumeHookGetter(
@ -459,51 +451,50 @@ export const useTable = (props, ...plugins) => {
'getCellProps'
)
// Snapshot hook and disallow more from being added
const cellsHooks = useConsumeHookGetter(getInstance().hooks, 'cells')
getInstance().prepareRow = React.useCallback(
row => {
row.getRowProps = makePropGetter(getRowPropsHooks(), getInstance(), row)
// Build the visible cells for each row
row.cells = getInstance()
.flatColumns.filter(d => d.isVisible)
.map(column => {
const cell = {
column,
row,
value: row.values[column.id],
}
row.allCells = flatColumns.map(column => {
const cell = {
column,
row,
value: row.values[column.id],
}
// Give each cell a getCellProps base
cell.getCellProps = makePropGetter(
getCellPropsHooks(),
getInstance(),
cell
)
// Give each cell a getCellProps base
cell.getCellProps = makePropGetter(
getCellPropsHooks(),
getInstance(),
cell
)
// Give each cell a renderer function (supports multiple renderers)
cell.render = (type, userProps = {}) => {
const Comp = typeof type === 'string' ? column[type] : type
if (typeof Comp === 'undefined') {
throw new Error(renderErr)
}
return flexRender(Comp, {
...getInstance(),
column,
row,
cell,
...userProps,
})
}
return cell
// Give each cell a renderer function (supports multiple renderers)
cell.render = makeRenderer(getInstance(), column, {
row,
cell,
})
return cell
})
row.cells = reduceHooks(cellsHooks(), row.allCells, getInstance())
// need to apply any row specific hooks (useExpanded requires this)
loopHooks(getPrepareRowHooks(), row, getInstance())
},
[getCellPropsHooks, getInstance, getPrepareRowHooks, getRowPropsHooks]
[
getRowPropsHooks,
getInstance,
flatColumns,
cellsHooks,
getPrepareRowHooks,
getCellPropsHooks,
]
)
// Snapshot hook and disallow more from being added
@ -534,7 +525,7 @@ export const useTable = (props, ...plugins) => {
'useFinalInstance'
)
loopHooks(getUseFinalInstanceHooks(), [], getInstance())
loopHooks(getUseFinalInstanceHooks(), getInstance())
return getInstance()
}

15
src/makeDefaultPluginHooks.js
View File

@ -1,33 +1,35 @@
const defaultCells = cell => cell.filter(d => d.column.isVisible)
const defaultGetHeaderProps = (props, instance, column) => ({
key: ['header', column.id].join('_'),
key: `header_${column.id}`,
colSpan: column.totalVisibleHeaderCount,
...props,
})
const defaultGetFooterProps = (props, instance, column) => ({
key: ['footer', column.id].join('_'),
key: `footer_${column.id}`,
colSpan: column.totalVisibleHeaderCount,
...props,
})
const defaultGetHeaderGroupProps = (props, instance, headerGroup, index) => ({
key: ['header', index].join('_'),
key: `headerGroup_${index}`,
...props,
})
const defaultGetFooterGroupProps = (props, instance, headerGroup, index) => ({
key: ['footer', index].join('_'),
key: `footerGroup_${index}`,
...props,
})
const defaultGetRowProps = (props, instance, row) => ({
key: ['row', row.id].join('_'),
key: `row_${row.id}`,
...props,
})
const defaultGetCellProps = (props, instance, cell) => ({
...props,
key: ['cell', cell.row.id, cell.column.id].join('_'),
key: `cell_${cell.row.id}_${cell.column.id}`,
})
export default function makeDefaultPluginHooks() {
@ -43,6 +45,7 @@ export default function makeDefaultPluginHooks() {
useInstanceBeforeDimensions: [],
useInstance: [],
useRows: [],
cells: [defaultCells],
prepareRow: [],
getTableProps: [],
getTableBodyProps: [],

58
src/plugin-hooks/tests/__snapshots__/useExpanded.test.js.snap
View File

@ -10,10 +10,10 @@ Snapshot Diff:
<pre>
<code>
{
- "expanded": []
+ "expanded": [
+ "0"
+ ]
- "expanded": {}
+ "expanded": {
+ "0": true
+ }
}
</code>
</pre>
@ -161,11 +161,11 @@ Snapshot Diff:
<pre>
<code>
{
"expanded": [
- "0"
+ "0",
+ "0.0"
]
"expanded": {
- "0": true
+ "0": true,
+ "0.0": true
}
}
</code>
</pre>
@ -311,12 +311,12 @@ Snapshot Diff:
<pre>
<code>
{
"expanded": [
"0",
- "0.0"
+ "0.0",
+ "0.0.0"
]
"expanded": {
"0": true,
- "0.0": true
+ "0.0": true,
+ "0.0.0": true
}
}
</code>
</pre>
@ -461,13 +461,13 @@ Snapshot Diff:
@@ -3,11 +3,12 @@
<code>
{
"expanded": [
"0",
"0.0",
- "0.0.0"
+ "0.0.0",
+ "0.0.0.0"
]
"expanded": {
"0": true,
"0.0": true,
- "0.0.0": true
+ "0.0.0": true,
+ "0.0.0.0": true
}
}
</code>
</pre>
@ -528,13 +528,13 @@ Snapshot Diff:
<pre>
<code>
{
- "expanded": [
- "0",
- "0.0",
- "0.0.0",
- "0.0.0.0"
- ]
+ "expanded": []
- "expanded": {
- "0": true,
- "0.0": true,
- "0.0.0": true,
- "0.0.0.0": true
- }
+ "expanded": {}
}
</code>
</pre>

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

@ -485,45 +485,45 @@ Snapshot Diff:
<pre>
<code>
{
- "selectedRowIds": []
+ "selectedRowIds": [
+ "0",
+ "1",
+ "2",
+ "2.0",
+ "2.1",
+ "3",
+ "4",
+ "5",
+ "6",
+ "6.0",
+ "6.1",
+ "7",
+ "8",
+ "9",
+ "10",
+ "10.0",
+ "10.1",
+ "11",
+ "12",
+ "13",
+ "14",
+ "14.0",
+ "14.1",
+ "15",
+ "16",
+ "17",
+ "18",
+ "18.0",
+ "18.1",
+ "19",
+ "20",
+ "21",
+ "22",
+ "22.0",
+ "22.1",
+ "23"
+ ]
- "selectedRowIds": {}
+ "selectedRowIds": {
+ "0": true,
+ "1": true,
+ "2": true,
+ "3": true,
+ "4": true,
+ "5": true,
+ "6": true,
+ "7": true,
+ "8": true,
+ "9": true,
+ "10": true,
+ "11": true,
+ "12": true,
+ "13": true,
+ "14": true,
+ "15": true,
+ "16": true,
+ "17": true,
+ "18": true,
+ "19": true,
+ "20": true,
+ "21": true,
+ "22": true,
+ "23": true,
+ "2.0": true,
+ "2.1": true,
+ "6.0": true,
+ "6.1": true,
+ "10.0": true,
+ "10.1": true,
+ "14.0": true,
+ "14.1": true,
+ "18.0": true,
+ "18.1": true,
+ "22.0": true,
+ "22.1": true
+ }
}
</code>
</pre>
@ -1015,45 +1015,45 @@ Snapshot Diff:
<pre>
<code>
{
- "selectedRowIds": [
- "0",
- "1",
- "2",
- "2.0",
- "2.1",
- "3",
- "4",
- "5",
- "6",
- "6.0",
- "6.1",
- "7",
- "8",
- "9",
- "10",
- "10.0",
- "10.1",
- "11",
- "12",
- "13",
- "14",
- "14.0",
- "14.1",
- "15",
- "16",
- "17",
- "18",
- "18.0",
- "18.1",
- "19",
- "20",
- "21",
- "22",
- "22.0",
- "22.1",
- "23"
- ]
+ "selectedRowIds": []
- "selectedRowIds": {
- "0": true,
- "1": true,
- "2": true,
- "3": true,
- "4": true,
- "5": true,
- "6": true,
- "7": true,
- "8": true,
- "9": true,
- "10": true,
- "11": true,
- "12": true,
- "13": true,
- "14": true,
- "15": true,
- "16": true,
- "17": true,
- "18": true,
- "19": true,
- "20": true,
- "21": true,
- "22": true,
- "23": true,
- "2.0": true,
- "2.1": true,
- "6.0": true,
- "6.1": true,
- "10.0": true,
- "10.1": true,
- "14.0": true,
- "14.1": true,
- "18.0": true,
- "18.1": true,
- "22.0": true,
- "22.1": true
- }
+ "selectedRowIds": {}
}
</code>
</pre>
@ -1129,13 +1129,13 @@ Snapshot Diff:
<pre>
<code>
{
- "selectedRowIds": []
+ "selectedRowIds": [
+ "0",
+ "2",
+ "2.0",
+ "2.1"
+ ]
- "selectedRowIds": {}
+ "selectedRowIds": {
+ "0": true,
+ "2": true,
+ "2.0": true,
+ "2.1": true
+ }
}
</code>
</pre>
@ -1198,13 +1198,13 @@ Snapshot Diff:
<pre>
<code>
{
"selectedRowIds": [
- "0",
- "2",
- "2.0",
- "2.1"
+ "0"
]
"selectedRowIds": {
- "0": true,
- "2": true,
- "2.0": true,
- "2.1": true
+ "0": true
}
}
</code>
</pre>
@ -1241,11 +1241,11 @@ Snapshot Diff:
<pre>
<code>
{
"selectedRowIds": [
- "0"
+ "0",
+ "2.0"
]
"selectedRowIds": {
- "0": true
+ "0": true,
+ "2.0": true
}
}
</code>
</pre>
@ -1295,12 +1295,12 @@ Snapshot Diff:
<pre>
<code>
{
"selectedRowIds": [
"0",
- "2.0"
+ "2.0",
+ "2.1"
]
"selectedRowIds": {
"0": true,
- "2.0": true
+ "2.0": true,
+ "2.1": true
}
}
</code>
</pre>
@ -1350,12 +1350,12 @@ Snapshot Diff:
<pre>
<code>
{
"selectedRowIds": [
"0",
- "2.0",
- "2.1"
+ "2.0"
]
"selectedRowIds": {
"0": true,
- "2.0": true,
- "2.1": true
+ "2.0": true
}
}
</code>
</pre>

2
src/plugin-hooks/tests/useExpanded.test.js
View File

@ -64,7 +64,7 @@ function Table({ columns: userColumns, data, SubComponent }) {
return (
<>
<pre>
<code>{JSON.stringify({ expanded }, null, 2)}</code>
<code>{JSON.stringify({ expanded: expanded }, null, 2)}</code>
</pre>
<table {...getTableProps()}>
<thead>

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

@ -113,14 +113,10 @@ function Table({ columns, data }) {
)}
</tbody>
</table>
<p>Selected Rows: {selectedRowIds.size}</p>
<p>Selected Rows: {Object.keys(selectedRowIds).length}</p>
<pre>
<code>
{JSON.stringify(
{ selectedRowIds: [...selectedRowIds.values()] },
null,
2
)}
{JSON.stringify({ selectedRowIds: selectedRowIds }, null, 2)}
</code>
</pre>
</>

10
src/plugin-hooks/useAbsoluteLayout.js
View File

@ -1,4 +1,5 @@
// Calculating column/cells widths
import { ensurePluginOrder } from '../utils'
const cellStyles = {
position: 'absolute',
top: 0,
@ -8,6 +9,7 @@ export const useAbsoluteLayout = hooks => {
hooks.getTableBodyProps.push(getRowStyles)
hooks.getRowProps.push(getRowStyles)
hooks.getHeaderGroupProps.push(getRowStyles)
hooks.useInstance.push(useInstance)
hooks.getHeaderProps.push((props, instance, header) => [
props,
@ -43,3 +45,9 @@ const getRowStyles = (props, instance) => [
},
},
]
function useInstance({ plugins }) {
ensurePluginOrder(plugins, [], useAbsoluteLayout.pluginName, [
'useResizeColumns',
])
}

67
src/plugin-hooks/useExpanded.js
View File

@ -7,10 +7,12 @@ import {
useMountedLayoutEffect,
useGetLatest,
} from '../utils'
import { useConsumeHookGetter } from '../publicUtils'
import { useConsumeHookGetter, functionalUpdate } from '../publicUtils'
// Actions
actions.toggleExpandedById = 'toggleExpandedById'
actions.toggleExpanded = 'toggleExpanded'
actions.toggleAllExpanded = 'toggleAllExpanded'
actions.setExpanded = 'setExpanded'
actions.resetExpanded = 'resetExpanded'
export const useExpanded = hooks => {
@ -39,7 +41,7 @@ const defaultGetExpandedToggleProps = (props, instance, row) => [
function reducer(state, action) {
if (action.type === actions.init) {
return {
expanded: [],
expanded: {},
...state,
}
}
@ -47,27 +49,40 @@ function reducer(state, action) {
if (action.type === actions.resetExpanded) {
return {
...state,
expanded: [],
expanded: {},
}
}
if (action.type === actions.toggleExpandedById) {
const { id, expanded } = action
const exists = state.expanded.includes(id)
const shouldExist = typeof expanded !== 'undefined' ? expanded : !exists
let newExpanded = new Set(state.expanded)
if (!exists && shouldExist) {
newExpanded.add(id)
} else if (exists && !shouldExist) {
newExpanded.delete(id)
} else {
return state
}
if (action.type === actions.setExpanded) {
return {
...state,
expanded: [...newExpanded.values()],
expanded: functionalUpdate(action.expanded, state.expanded),
}
}
if (action.type === actions.toggleExpanded) {
const { id, expanded: setExpanded } = action
const exists = state.expanded[id]
const shouldExist =
typeof setExpanded !== 'undefined' ? setExpanded : !exists
if (!exists && shouldExist) {
return {
...state,
expanded: {
...state.expanded,
[id]: true,
},
}
} else if (exists && !shouldExist) {
const { [id]: _, ...rest } = state.expanded
return {
...state,
expanded: rest,
}
} else {
return state
}
}
}
@ -94,8 +109,8 @@ function useInstance(instance) {
}
}, [dispatch, data])
const toggleExpandedById = (id, expanded) => {
dispatch({ type: actions.toggleExpandedById, id, expanded })
const toggleExpanded = (id, expanded) => {
dispatch({ type: actions.toggleExpanded, id, expanded })
}
// use reference to avoid memory leak in #1608
@ -107,7 +122,7 @@ function useInstance(instance) {
)
hooks.prepareRow.push(row => {
row.toggleExpanded = set => instance.toggleExpandedById(row.id, set)
row.toggleExpanded = set => instance.toggleExpanded(row.id, set)
row.getExpandedToggleProps = makePropGetter(
getExpandedTogglePropsHooks(),
@ -124,13 +139,15 @@ function useInstance(instance) {
return rows
}, [paginateExpandedRows, rows, manualExpandedKey, expanded, expandSubRows])
const expandedDepth = findExpandedDepth(expanded)
const expandedDepth = React.useMemo(() => findExpandedDepth(expanded), [
expanded,
])
Object.assign(instance, {
toggleExpandedById,
preExpandedRows: rows,
expandedRows,
rows: expandedRows,
toggleExpanded,
expandedDepth,
})
}
@ -138,7 +155,7 @@ function useInstance(instance) {
function findExpandedDepth(expanded) {
let maxDepth = 0
expanded.forEach(id => {
Object.keys(expanded).forEach(id => {
const splitId = id.split('.')
maxDepth = Math.max(maxDepth, splitId.length)
})

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

@ -22,10 +22,10 @@ export const useFilters = hooks => {
useFilters.pluginName = 'useFilters'
function reducer(state, action, previousState, instanceRef) {
function reducer(state, action, previousState, instance) {
if (action.type === actions.init) {
return {
filters: {},
filters: [],
...state,
}
}
@ -33,13 +33,14 @@ function reducer(state, action, previousState, instanceRef) {
if (action.type === actions.resetFilters) {
return {
...state,
filters: {},
filters: [],
}
}
if (action.type === actions.setFilter) {
const { columnId, filterValue } = action
const { flatColumns, userFilterTypes } = instanceRef.current
const { flatColumns, userFilterTypes } = instance
const column = flatColumns.find(d => d.id === columnId)
if (!column) {
@ -54,50 +55,59 @@ function reducer(state, action, previousState, instanceRef) {
filterTypes
)
const newFilter = functionalUpdate(filterValue, state.filters[columnId])
const previousfilter = state.filters.find(d => d.id === columnId)
const newFilter = functionalUpdate(
filterValue,
previousfilter && previousfilter.value
)
//
if (shouldAutoRemove(filterMethod.autoRemove, newFilter)) {
const { [columnId]: remove, ...newFilters } = state.filters
return {
...state,
filters: newFilters,
filters: state.filters.filter(d => d.id !== columnId),
}
}
if (previousfilter) {
return {
...state,
filters: state.filters.map(d => {
if (d.id === columnId) {
return { id: columnId, value: newFilter }
}
return d
}),
}
}
return {
...state,
filters: {
...state.filters,
[columnId]: newFilter,
},
filters: [...state.filters, { id: columnId, value: newFilter }],
}
}
if (action.type === actions.setAllFilters) {
const { filters } = action
const { flatColumns, filterTypes: userFilterTypes } = instanceRef.current
const newFilters = functionalUpdate(filters, state.filters)
// Filter out undefined values
Object.keys(newFilters).forEach(id => {
const newFilter = newFilters[id]
const column = flatColumns.find(d => d.id === id)
const filterMethod = getFilterMethod(
column.filter,
userFilterTypes || {},
filterTypes
)
if (shouldAutoRemove(filterMethod.autoRemove, newFilter)) {
delete newFilters[id]
}
})
const { flatColumns, filterTypes: userFilterTypes } = instance
return {
...state,
filters: newFilters,
// Filter out undefined values
filters: functionalUpdate(filters, state.filters).filter(filter => {
const column = flatColumns.find(d => d.id === filter.id)
const filterMethod = getFilterMethod(
column.filter,
userFilterTypes || {},
filterTypes
)
if (shouldAutoRemove(filterMethod.autoRemove, filter.value)) {
return false
}
return true
}),
}
}
}
@ -150,7 +160,8 @@ function useInstance(instance) {
// Provide the current filter value to the column for
// convenience
column.filterValue = filters[id]
const found = filters.find(d => d.id === id)
column.filterValue = found && found.value
})
// TODO: Create a filter cache for incremental high speed multi-filtering
@ -159,7 +170,7 @@ function useInstance(instance) {
// This would make multi-filtering a lot faster though. Too far?
const { filteredRows, filteredFlatRows } = React.useMemo(() => {
if (manualFilters || !Object.keys(filters).length) {
if (manualFilters || !filters.length) {
return {
filteredRows: rows,
filteredFlatRows: flatRows,
@ -172,8 +183,8 @@ function useInstance(instance) {
const filterRows = (rows, depth = 0) => {
let filteredRows = rows
filteredRows = Object.entries(filters).reduce(
(filteredSoFar, [columnId, filterValue]) => {
filteredRows = filters.reduce(
(filteredSoFar, { id: columnId, value: filterValue }) => {
// Find the filters column
const column = flatColumns.find(d => d.id === columnId)
@ -263,14 +274,14 @@ function useInstance(instance) {
}, [dispatch, manualFilters ? null : data])
Object.assign(instance, {
setFilter,
setAllFilters,
preFilteredRows: rows,
preFilteredFlatRows: flatRows,
filteredRows,
filteredFlatRows,
rows: filteredRows,
flatRows: filteredFlatRows,
setFilter,
setAllFilters,
})
}

45
src/plugin-hooks/useGroupBy.js
View File

@ -88,15 +88,14 @@ function flatColumns(flatColumns, { state: { groupBy } }) {
const groupByColumns = groupBy.map(g => flatColumns.find(col => col.id === g))
const nonGroupByColumns = flatColumns.filter(col => !groupBy.includes(col.id))
// If a groupByBoundary column is found, place the groupBy's after it
const groupByBoundaryColumnIndex =
flatColumns.findIndex(column => column.groupByBoundary) + 1
flatColumns = [...groupByColumns, ...nonGroupByColumns]
return [
...nonGroupByColumns.slice(0, groupByBoundaryColumnIndex),
...groupByColumns,
...nonGroupByColumns.slice(groupByBoundaryColumnIndex),
]
flatColumns.forEach(column => {
column.isGrouped = groupBy.includes(column.id)
column.groupedIndex = groupBy.indexOf(column.id)
})
return flatColumns
}
const defaultUserAggregations = {}
@ -110,8 +109,6 @@ function useInstance(instance) {
flatHeaders,
groupByFn = defaultGroupByFn,
manualGroupBy,
defaultCanGroupBy,
disableGroupBy,
aggregations: userAggregations = defaultUserAggregations,
hooks,
plugins,
@ -119,6 +116,8 @@ function useInstance(instance) {
dispatch,
autoResetGroupBy = true,
manaulGroupBy,
disableGroupBy,
defaultCanGroupBy,
} = instance
ensurePluginOrder(plugins, [], 'useGroupBy', ['useSortBy', 'useExpanded'])
@ -127,13 +126,10 @@ function useInstance(instance) {
flatColumns.forEach(column => {
const {
id,
accessor,
defaultGroupBy: defaultColumnGroupBy,
disableGroupBy: columnDisableGroupBy,
} = column
column.isGrouped = groupBy.includes(id)
column.groupedIndex = groupBy.indexOf(id)
column.canGroupBy = accessor
? getFirstDefined(
@ -144,7 +140,7 @@ function useInstance(instance) {
: getFirstDefined(defaultColumnGroupBy, defaultCanGroupBy, false)
if (column.canGroupBy) {
column.toggleGroupBy = () => toggleGroupBy(column.id)
column.toggleGroupBy = () => instance.toggleGroupBy(column.id)
}
column.Aggregated = column.Aggregated || column.Cell
@ -168,7 +164,7 @@ function useInstance(instance) {
})
hooks.prepareRow.push(row => {
row.cells.forEach(cell => {
row.allCells.forEach(cell => {
// Grouped cells are in the groupBy and the pivot cell for the row
cell.isGrouped = cell.column.isGrouped && cell.column.id === row.groupByID
// Repeated cells are any columns in the groupBy that are not grouped
@ -236,10 +232,9 @@ function useInstance(instance) {
let groupedFlatRows = []
// Recursively group the data
const groupRecursively = (rows, depth = 0) => {
const groupRecursively = (rows, depth = 0, parentId) => {
// This is the last level, just return the rows
if (depth >= groupBy.length) {
groupedFlatRows = groupedFlatRows.concat(rows)
if (depth === groupBy.length) {
return rows
}
@ -251,15 +246,16 @@ function useInstance(instance) {
// Recurse to sub rows before aggregation
groupedRows = Object.entries(groupedRows).map(
([groupByVal, subRows], index) => {
const id = `${columnId}:${groupByVal}`
let id = `${columnId}:${groupByVal}`
id = parentId ? `${parentId}>${id}` : id
subRows = groupRecursively(subRows, depth + 1)
subRows = groupRecursively(subRows, depth + 1, id)
const values = aggregateRowsToValues(subRows, depth < groupBy.length)
const row = {
id,
isAggregated: true,
isGrouped: true,
groupByID: columnId,
groupByVal,
values,
@ -268,7 +264,7 @@ function useInstance(instance) {
index,
}
groupedFlatRows.push(row)
groupedFlatRows.push(row, ...subRows)
return row
}
@ -300,11 +296,12 @@ function useInstance(instance) {
}, [dispatch, manaulGroupBy ? null : data])
Object.assign(instance, {
preGroupedRows: rows,
preGroupedFlatRow: flatRows,
groupedRows,
groupedFlatRows,
toggleGroupBy,
rows: groupedRows,
flatRows: groupedFlatRows,
preGroupedRows: rows,
toggleGroupBy,
})
}

4
src/plugin-hooks/usePagination.js
View File

@ -25,7 +25,7 @@ export const usePagination = hooks => {
usePagination.pluginName = pluginName
function reducer(state, action, previousState, instanceRef) {
function reducer(state, action, previousState, instance) {
if (action.type === actions.init) {
return {
pageSize: 10,
@ -42,7 +42,7 @@ function reducer(state, action, previousState, instanceRef) {
}
if (action.type === actions.gotoPage) {
const { pageCount } = instanceRef.current
const { pageCount } = instance
const newPageIndex = functionalUpdate(action.pageIndex, state.pageIndex)
if (newPageIndex < 0 || newPageIndex > pageCount - 1) {

12
src/plugin-hooks/useResizeColumns.js
View File

@ -17,6 +17,11 @@ actions.columnDoneResizing = 'columnDoneResizing'
export const useResizeColumns = hooks => {
hooks.getResizerProps = [defaultGetResizerProps]
hooks.getHeaderProps.push({
style: {
position: 'relative',
},
})
hooks.stateReducers.push(reducer)
hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions)
}
@ -188,16 +193,9 @@ const useInstanceBeforeDimensions = instance => {
const {
flatHeaders,
disableResizing,
hooks: { getHeaderProps },
state: { columnResizing },
} = instance
getHeaderProps.push({
style: {
position: 'relative',
},
})
const getInstance = useGetLatest(instance)
const getResizerPropsHooks = useConsumeHookGetter(

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

@ -64,15 +64,16 @@ const defaultGetToggleAllRowsSelectedProps = (props, instance) => [
checked: instance.isAllRowsSelected,
title: 'Toggle All Rows Selected',
indeterminate: Boolean(
!instance.isAllRowsSelected && instance.state.selectedRowIds.size
!instance.isAllRowsSelected &&
Object.keys(instance.state.selectedRowIds).length
),
},
]
function reducer(state, action, previousState, instanceRef) {
function reducer(state, action, previousState, instance) {
if (action.type === actions.init) {
return {
selectedRowIds: new Set(),
selectedRowIds: {},
...state,
}
}
@ -80,48 +81,61 @@ function reducer(state, action, previousState, instanceRef) {
if (action.type === actions.resetSelectedRows) {
return {
...state,
selectedRowIds: new Set(),
selectedRowIds: {},
}
}
if (action.type === actions.toggleAllRowsSelected) {
const { selected } = action
const { isAllRowsSelected, flatRowsById } = instanceRef.current
const { isAllRowsSelected, flatRowsById } = instance
const selectAll =
typeof selected !== 'undefined' ? selected : !isAllRowsSelected
if (selectAll) {
const selectedRowIds = {}
Object.keys(flatRowsById).forEach(rowId => {
selectedRowIds[rowId] = true
})
return {
...state,
selectedRowIds,
}
}
return {
...state,
selectedRowIds: selectAll ? new Set(flatRowsById.keys()) : new Set(),
selectedRowIds: {},
}
}
if (action.type === actions.toggleRowSelected) {
const { id, selected } = action
const { flatGroupedRowsById } = instanceRef.current
const { flatGroupedRowsById } = instance
// Join the ids of deep rows
// to make a key, then manage all of the keys
// in a flat object
const row = flatGroupedRowsById.get(id)
const row = flatGroupedRowsById[id]
const isSelected = row.isSelected
const shouldExist = typeof set !== 'undefined' ? selected : !isSelected
const shouldExist = typeof selected !== 'undefined' ? selected : !isSelected
if (isSelected === shouldExist) {
return state
}
let newSelectedRowPaths = new Set(state.selectedRowIds)
let newSelectedRowPaths = { ...state.selectedRowIds }
const handleRowById = id => {
const row = flatGroupedRowsById.get(id)
const row = flatGroupedRowsById[id]
if (!row.isAggregated) {
if (!row.isGrouped) {
if (!isSelected && shouldExist) {
newSelectedRowPaths.add(id)
newSelectedRowPaths[id] = true
} else if (isSelected && !shouldExist) {
newSelectedRowPaths.delete(id)
delete newSelectedRowPaths[id]
}
}
@ -182,23 +196,25 @@ function useInstance(instance) {
)
const [flatRowsById, flatGroupedRowsById] = React.useMemo(() => {
const map = new Map()
const groupedMap = new Map()
const all = {}
const grouped = {}
flatRows.forEach(row => {
if (!row.isAggregated) {
map.set(row.id, row)
if (!row.isGrouped) {
all[row.id] = row
}
groupedMap.set(row.id, row)
grouped[row.id] = row
})
return [map, groupedMap]
return [all, grouped]
}, [flatRows])
let isAllRowsSelected = Boolean(flatRowsById.size && selectedRowIds.size)
let isAllRowsSelected = Boolean(
Object.keys(flatRowsById).length && Object.keys(selectedRowIds).length
)
if (isAllRowsSelected) {
if ([...flatRowsById.keys()].some(d => !selectedRowIds.has(d))) {
if (Object.keys(flatRowsById).some(id => !selectedRowIds[id])) {
isAllRowsSelected = false
}
}
@ -255,11 +271,11 @@ function useInstance(instance) {
}
function getRowIsSelected(row, selectedRowIds) {
if (selectedRowIds.has(row.id)) {
if (selectedRowIds[row.id]) {
return true
}
if (row.isAggregated || (row.subRows && row.subRows.length)) {
if (row.subRows && row.subRows.length) {
let allChildrenSelected = true
let someSelected = false

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

@ -55,7 +55,7 @@ const defaultGetSortByToggleProps = (props, instance, column) => {
}
// Reducer
function reducer(state, action, previousState, instanceRef) {
function reducer(state, action, previousState, instance) {
if (action.type === actions.init) {
return {
sortBy: [],
@ -89,7 +89,7 @@ function reducer(state, action, previousState, instanceRef) {
disableSortRemove,
disableMultiRemove,
maxMultiSortColCount = Number.MAX_SAFE_INTEGER,
} = instanceRef.current
} = instance
const { sortBy } = state
@ -335,9 +335,9 @@ function useInstance(instance) {
}, [manualSortBy ? null : data])
Object.assign(instance, {
toggleSortBy,
preSortedRows: rows,
sortedRows,
rows: sortedRows,
toggleSortBy,
})
}

55
src/publicUtils.js
View File

@ -1,11 +1,13 @@
import React from 'react'
let renderErr = 'Renderer Error'
export const actions = {
init: 'init',
}
export const defaultColumn = {
Cell: ({ cell: { value = '' } }) => String(value),
Cell: ({ cell: { value = '' } }) => value,
width: 150,
minWidth: 0,
maxWidth: Number.MAX_SAFE_INTEGER,
@ -43,11 +45,18 @@ function mergeProps(...propList) {
props = {
...props,
...rest,
style: {
...(props.style || {}),
...(style || {}),
},
className: [props.className, className].filter(Boolean).join(' '),
}
if (style) {
props.style = props.style
? { ...(props.style || {}), ...(style || {}) }
: style
}
if (className) {
props.className = props.className
? props.className + ' ' + className
: className
}
if (props.className === '') {
@ -220,3 +229,37 @@ export function useConsumeHookGetter(hooks, hookName) {
hooks[hookName] = undefined
return getter
}
export function makeRenderer(instance, column, meta = {}) {
return (type, userProps = {}) => {
const Comp = typeof type === 'string' ? column[type] : type
if (typeof Comp === 'undefined') {
throw new Error(renderErr)
}
return flexRender(Comp, { ...instance, column, ...meta, ...userProps })
}
}
export function flexRender(Comp, props) {
return isReactComponent(Comp) ? <Comp {...props} /> : Comp
}
function isClassComponent(component) {
return (
typeof component === 'function' &&
!!(() => {
let proto = Object.getPrototypeOf(component)
return proto.prototype && proto.prototype.isReactComponent
})()
)
}
function isFunctionComponent(component) {
return typeof component === 'function'
}
function isReactComponent(component) {
return isClassComponent(component) || isFunctionComponent(component)
}

2
src/utility-hooks/useTokenPagination.js
View File

@ -1,6 +1,6 @@
import React from 'react'
// Token pagination behaves a bit differently from
// Token pagination behaves a bit different from
// index based pagination. This hook aids in that process.
export const useTokenPagination = () => {

25
src/utils.js
View File

@ -219,28 +219,6 @@ export function getElementDimensions(element) {
}
}
export function flexRender(Comp, props) {
return isReactComponent(Comp) ? <Comp {...props} /> : Comp
}
function isClassComponent(component) {
return (
typeof component === 'function' &&
!!(() => {
let proto = Object.getPrototypeOf(component)
return proto.prototype && proto.prototype.isReactComponent
})()
)
}
function isFunctionComponent(component) {
return typeof component === 'function'
}
function isReactComponent(component) {
return isClassComponent(component) || isFunctionComponent(component)
}
export function isFunction(a) {
if (typeof a === 'function') {
return a
@ -273,8 +251,7 @@ export function expandRows(
const handleRow = row => {
row.isExpanded =
(row.original && row.original[manualExpandedKey]) ||
expanded.includes(row.id)
(row.original && row.original[manualExpandedKey]) || expanded[row.id]
row.canExpand = row.subRows && !!row.subRows.length