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

v7.0.0-rc.2

Browse Source
This commit is contained in:
Tanner Linsley 2019-12-06 16:30:08 -07:00
parent a152704fde
commit 562a2feaef
32 changed files with 765 additions and 808 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.size-snapshot.json
View File

@ -1,20 +1,20 @@
{
"dist/index.js": {
"bundled": 102847,
"minified": 50399,
"gzipped": 12909
"bundled": 100428,
"minified": 47447,
"gzipped": 12338
},
"dist/index.es.js": {
"bundled": 101791,
"minified": 49456,
"gzipped": 12726,
"bundled": 99612,
"minified": 46722,
"gzipped": 12193,
"treeshaked": {
"rollup": {
"code": 78,
"code": 80,
"import_statements": 21
},
"webpack": {
"code": 14193
"code": 8457
}
}
}

20
CHANGELOG.md
View File

@ -1,3 +1,23 @@
## 7.0.0-rc.2
- `reducerHandlers` has been deprecated in favor of the new `stateReducers` hook.
- The `previousState` and `instanceRef` are now both generally available in state reducers for convenience.
- The global action property `action.instanceRef` has been deprecated.
- The `reducer` option has been renamed to `stateReducer` and in addition to passing a single reducer function now also supports passing an array of reducers
- Renamed `manualSorting` to be `manualSortBy` to be consistent with other naming conventions
- Removed the `getResetPageDeps` option in favor of the new `autoResetPage` option.
- Removed the `getResetFilterDeps` option in favor of the new `autoResetFilters` option.
- Removed the `getResetSortByDeps` option in favor of the new `autoResetSortBy` option.
- Removed the `getResetGroupByDeps` option in favor of the new `autoResetGroupBy` option.
- Removed the `getResetExpandedDeps` option in favor of the new `autoResetExpanded` option.
- Added a new exported utility called `useAsyncDebounce` to aid with external async side-effects.
- A new `useGetLatest` hook is used internally to track latest instances in a less ref-driven and verbose way.
- A new `useMountedLayoutEffect` hooks is now used internally to handle post-mount side-effects, mostly dealing with autoReset functionality
- Plugin hooks are now "consumed" using an internal `useConsumeHookGetter` hook. When they are consumed, they can no longer be manipulated past that point in the table lifecycle. This should help ensure people are using them in a relatively safe order with consistent expectations.
- Drastically "reduced" the reducer logic itself to be easier to understand and to be a stable reference for the life of the table. This change also means that the reducer must no longer be double-run/back-compared by React for changes in closure, thus actions and stateReducers (including user state reducers) will only fire once per action.
- Removed `debug` and related logging. It has been somewhat useful during development, but is now very noisy in the code. We can debug lifecycle and performance as needed from here on out.
- Removed unnecessary exports from `./utils.js` and moved all intentionally exported utilities to a new `./publicUtils.js` file.
## 7.0.0-rc.1
- Minor regex optimizations during row path creation

11
docs/api/useExpanded.md
View File

@ -30,13 +30,10 @@ The following options are supported via the main options object passed to `useTa
- Defaults to `true`
- If set to `true`, expanded rows are rendered along with normal rows.
- If set to `false`, expanded rows will only be available through their parent row. This could be useful if you are implementing a custom expanded row view.
- `getResetExpandedDeps: Function(instance) => [...useEffectDependencies]`
- Optional
- Defaults to resetting the `expanded` state to `[]` when the dependencies below change
- ```js
const getResetExpandedDeps = ({ data }) => [data]
```
- If set, the dependencies returned from this function will be used to determine when the effect to reset the `expanded` state is fired.
- `autoResetExpanded: Boolean`
- Defaults to `true`
- When `true`, the `expanded` 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)

19
docs/api/usePagination.md
View File

@ -29,18 +29,13 @@ The following options are supported via the main options object passed to `useTa
- `manualPagination: Bool`
- Enables pagination functionality, but does not automatically perform row pagination.
- 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)
- `getResetPageDeps: Function(instance) => [...useEffectDependencies]`
- Optional
- Defaults to resetting the `pageIndex` to `0` when the dependencies below change
- ```js
const getResetPageDeps = ({
rows,
manualPagination,
state: { filters, groupBy, sortBy },
}) => [manualPagination ? null : rows, filters, groupBy, sortBy]
```
- Note that if `manualPagination` is set to `true`, then the pageIndex should not be reset when `rows` change
- If set, the dependencies returned from this function will be used to determine when the effect to reset the `pageIndex` state is fired.
- `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:
- `data` is changed
- `manualSortBy` is `false` and `state.sortBy` is changed
- `manualFilters` is `false` and `state.filters` is changed
- `manualGroupBy` is `false` and `state.groupBy` 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)
- `paginateExpandedRows: Bool`

11
docs/api/useRowSelect.md
View File

@ -19,13 +19,10 @@ The following options are supported via the main options object passed to `useTa
- Optional
- Defaults to `isSelected`
- If this key is found on the **original** data row, and it is true, this row will be manually selected
- `getResetSelectedRowPathsDeps: Function(instance) => [...useEffectDependencies]`
- Optional
- Defaults to resetting the `expanded` state to `[]` when the dependencies below change
- ```js
const getResetSelectedRowPathsDeps = ({ rows }) => [rows]
```
- If set, the dependencies returned from this function will be used to determine when the effect to reset the `selectedRowPaths` state is fired.
- `autoResetSelectedRows: Boolean`
- Defaults to `true`
- When `true`, the `expanded` 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)

11
docs/api/useRowState.md
View File

@ -21,13 +21,10 @@ The following options are supported via the main options object passed to `useTa
- Optional
- This function may optionally return the initial state for a row.
- If this function is defined, it will be passed a `Row` object, from which you can return a value to use as the initial state, eg. `row => row.original.initialState`
- `getResetRowStateDeps: Function(instance) => [...useEffectDependencies]`
- Optional
- Defaults to resetting the `rowState` state to `{}` when the dependencies below change
- ```js
const getResetRowStateDeps = ({ data }) => [data]
```
- If set, the dependencies returned from this function will be used to determine when the effect to reset the `rowState` state is fired.
- `autoResetRowState: Boolean`
- Defaults to `true`
- When `true`, the `rowState` 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)

105
docs/api/useSortBy.md
View File

@ -46,10 +46,10 @@ The following options are supported via the main options object passed to `useTa
- Must be **memoized**
- Allows overriding or adding additional sort types for columns to use. If a column's sort type isn't found on this object, it will default to using the built-in sort types.
- For more information on sort types, see Sorting
- `getResetSortByDeps: Function(instance) => [...useEffectDependencies]`
- Optional
- Defaults to `false`
- If set, the dependencies returned from this function will be used to determine when the effect to reset the `sortBy` state is fired.
- `autoResetSortBy: Boolean`
- Defaults to `true`
- When `true`, the `sortBy` 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)
@ -125,100 +125,3 @@ The following properties are available on every `Column` object returned by the
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/sorting)
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting)
# `useFilters`
- Plugin Hook
- Optional
`useFilters` is the hook that implements **row filtering**.
### Table Options
The following options are supported via the main options object passed to `useTable(options)`
- `state.filters: Object<columnId: filterValue>`
- 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
- `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)
- `disableFilters: Bool`
- Disables filtering for every column in the entire table.
- `defaultCanFilter: Bool`
- Optional
- Defaults to `false`
- If set to `true`, all columns will be filterable, regardless if they have a valid `accessor`
- `filterTypes: Object<filterKey: filterType>`
- Must be **memoized**
- Allows overriding or adding additional filter types for columns to use. If a column's filter type isn't found on this object, it will default to using the built-in filter types.
- For more information on filter types, see Filtering
- `getResetFiltersDeps: Function(instance) => [...useEffectDependencies]`
- Optional
- Defaults to `false`
- If set, the dependencies returned from this function will be used to determine when the effect to reset the `filters` state is fired.
- 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)
### Column Options
The following options are supported on any `Column` object passed to the `columns` options in `useTable()`
- `Filter: Function | React.Component => JSX`
- **Required**
- Receives the table instance and column model as props
- Must return valid JSX
- This function (or component) is used to render this column's filter UI, eg.
- `disableFilters: Bool`
- Optional
- If set to `true`, will disable filtering for this column
- `defaultCanFilter: Bool`
- Optional
- Defaults to `false`
- If set to `true`, this column will be filterable, regardless if it has a valid `accessor`
- `filter: String | Function`
- Optional
- Defaults to `text`
- The resolved function from the this string/function will be used to filter the this column's data.
- If a `string` is passed, the function with that name located on either the custom `filterTypes` option or the built-in filtering types object will be used. If
- If a `function` is passed, it will be used directly.
- For more information on filter types, see Filtering
- If a **function** is passed, it must be **memoized**
### Instance Properties
The following values are provided to the table `instance`:
- `rows: Array<Row>`
- An array of **filtered** rows.
- `preFilteredRows: Array<Row>`
- The array of rows **used right before filtering**.
- Among many other use-cases, these rows are directly useful for building option lists in filters, since the resulting filtered `rows` do not contain every possible option.
- `setFilter: Function(columnId, filterValue) => void`
- An instance-level function used to update the filter value for a specific column.
- `setAllFilters: Function(filtersObject) => void`
- An instance-level function used to update the values for **all** filters on the table, all at once.
### Column Properties
The following properties are available on every `Column` object returned by the table instance.
- `canFilter: Bool`
- Denotes whether a column is filterable or not depending on if it has a valid accessor/data model or is manually disabled via an option.
- `setFilter: Function(filterValue) => void`
- A column-level function used to update the filter value for this column
- `filterValue: any`
- The current filter value for this column, resolved from the table state's `filters` object
- `preFilteredRows: Array<row>`
- The array of rows that were originally passed to this columns filter **before** they were filtered.
- This array of rows can be useful if building faceted filter options.
- `filteredRows: Array<row>`
- The resulting array of rows received from this columns filter **after** they were filtered.
- This array of rows can be useful if building faceted filter options.
### Example
- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/filtering)
- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering)

76
docs/faq.md
View File

@ -26,36 +26,98 @@ useTable({
})
```
**It's important that the state override is done within a `useMemo` call to prevent the state variable from changing on every render. It's also just as important that you always use the `state` in any memoization dependencies to ensure that you do not block normal state updates.**
> **It's important that the state override is done within a `useMemo` call to prevent the state variable from changing on every render. It's also extremely important that you always use the `state` in any dependencies to ensure that you do not block normal state updates.**
## How can I debounce rapid table state changes?
React Table has a few built-in side-effects of it's own (most of which are meant for resetting parts of the state when `data` changes). By default, these state side-effects are on and when their conditions are met, they immediately fire off actions that will manipulate the table state. Sometimes, this may result in multiple rapid rerenders (usually just 2, or one more than normal), and could cause any side-effects you have watching the table state to also fire multiple times in-a-row. To alleviate this edge-case, React Table exports a `useAsyncDebounce` function that will allow you to debounce rapid side-effects and only use the latest one.
A good example of this when doing server-side pagination and sorting, a user changes the `sortBy` for a table and the `pageIndex` is automatically reset to `0` via an internal side effect. This would normally cause our effect below to fire 2 times, but with `useAsyncDebounce` we can make sure our data fetch function only gets called once:
```js
import { useTable, useAsyncDebounce } from 'react-table'
function Table({ data, onFetchData }) {
const {
state: { pageIndex, pageSize, sortBy, filters },
} = useTable({
data,
})
// Debounce our onFetchData call for 100ms
const onFetchDataDebounced = useAsyncDebounce(onFetchData, 100)
// When the these table states changes, fetch new data!
React.useEffect(() => {
// Every change will call our debounced function
onFetchDataDebounced({ pageIndex, pageSize, sortBy, filters })
// Only the last call after the 100ms debounce is over will be fired!
}, [onFetchDataDebounced, pageIndex, pageSize, sortBy, filters])
return </>
}
```
## How can I use the table state to fetch new data?
When managing your data externally or asynchronously (eg. server-side pagination/sorting/grouping/etc), you will need to fetch new data as the internal table state changes. With React Hooks, this is fantastically easier than it was before now that we have the `React.useEffect` hook. We can use this hook to "watch" the table state for specific changes and use those effects to trigger fetches for new data (or synchronize any other state you may be managing externally from your table component):
```js
function Table({ data, onFetchData }) {
const {
state: { pageIndex, pageSize, sortBy, filters },
} = useTable({
data,
})
// When the these table states change, fetch new data!
React.useEffect(() => {
onFetchData({ pageIndex, pageSize, sortBy, filters })
}, [fetchData, pageIndex, pageSize, sortBy, filters])
return </>
}
```
Using this approach, you can respond and trigger any type of side-effect using the table instance!
## How do I stop my table state from automatically resetting when my data changes?
Most plugins use state that _should_ normally reset when the data sources changes, but sometimes you need to suppress that from happening if you are filtering your data externally, or immutably editing your data while looking at it, or simply doing anything external with your data that you don't want to trigger a piece of table state to reset automatically.
For those situations, each plugin provides options like `getResetPageDeps` or `getResetExpandedDeps`, so and an so forth. These functions are provided the table `instance` and allowed to return an array of variables that will be injected into the `React.useEffect`'s dependency array that is responsible for watching and resetting those states. By returning a new array in one of these arrays, you can either stop the automatic resets from being triggered, or even trigger them more based on what you are returning. You can also return `false` for any of these options to disable the automatic resets completely, or pass `undefined` to allow the default dependendies to be used.
For those situations, each plugin provides a way to disable the state from automatically resetting internally when data or other dependencies for a piece of state change. By setting any of them to `false`, you can stop the automatic resets from being triggered.
Here is an example of completely disabling the page from resetting when data changes:
Here is an example of stopping basically every piece of state from changing as they normally do while we edit the `data` source for a table:
```js
const [data, setData] = React.useState([])
const skipPageResetRef = React.useRef()
const updateData = newData => {
// When data gets updated with this function, disable the
// page from resetting
// When data gets updated with this function, set a flag
// to disable all of the auto resetting
skipPageResetRef.current = true
setData(newData)
}
React.useEffect(() => {
// After the table has updated, always remove the flag
skipPageResetRef.current = false
})
useTable({
data,
getResetPageDeps: skipPageReset ? false : undefined,
...
autoResetPage: !skipPageReset,
autoResetExpanded: !skipPageReset,
autoResetGroupBy: !skipPageReset,
autoResetSelectedRows: !skipPageReset,
autoResetSortBy: !skipPageReset,
autoResetFilters: !skipPageReset,
autoResetRowState: !skipPageReset,
})
```
Now, when we update our data, the above table states will not automatically reset!
<!-- ## How can I hide/show columns? -->

2
examples/editable-data/src/App.js
View File

@ -102,7 +102,7 @@ function Table({ columns, data, updateMyData, skipPageReset }) {
data,
defaultColumn,
// use the skipPageReset option to disable page resetting temporarily
getResetPageDeps: skipPageReset ? false : undefined,
autoResetPage: !skipPageReset,
// updateMyData isn't part of the API, but
// anything we put into these options will
// automatically be available on the instance.

8
examples/grouping/yarn.lock
View File

@ -8087,10 +8087,10 @@ react-scripts@3.0.1:
optionalDependencies:
fsevents "2.0.6"
react-table@next:
version "7.0.0-alpha.7"
resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-alpha.7.tgz#0cb6da6f32adb397e68505b7cdd4880d15d73017"
integrity sha512-oXE9RRkE2CFk1OloNCSTPQ9qxOdujgkCoW5b/srbJsBog/ySkWuozBTQkxH1wGNmnSxGyTrTxJqXdXPQam7VAw==
react-table@latest:
version "7.0.0-rc.1"
resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-rc.1.tgz#33f61b904d246d862a46a05ac4d8eda6343ea83b"
integrity sha512-tAuZg+TY64UUgBPRts/q+0JguGZpliYdoQZl7lAnLAQ/reU/5c04sCx54QcpH7n/PYVHMJEYkIU0ito8ZZ011w==
react@^16.8.6:
version "16.8.6"

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

@ -306,7 +306,7 @@ function Table({ columns, data, updateMyData, skipPageReset }) {
updateMyData,
// We also need to pass this so the page doesn't change
// when we edit the data, undefined means using the default
getResetPageDeps: skipPageReset ? false : undefined,
autoResetPage: !skipPageReset,
},
useGroupBy,
useFilters,

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

@ -303,9 +303,9 @@ function Table({ columns, data, updateMyData, skipReset }) {
// cell renderer!
updateMyData,
// We also need to pass this so the page doesn't change
// when we edit the data. Undefined tells it to use the default
getResetPageDeps: skipReset ? false : undefined,
getResetSelectedRowPathsDeps: skipReset ? false : undefined,
// when we edit the data.
autoResetPage: !skipReset,
autoResetSelectedRows: !skipReset,
},
useFilters,
useGroupBy,

13
examples/pagination-controlled/src/App.js
View File

@ -77,8 +77,6 @@ function Table({
usePagination
)
// Now we can get our table state from the hoisted table state tuple
// Listen for changes in pagination and use the state to fetch our new data
React.useEffect(() => {
fetchData({ pageIndex, pageSize })
@ -107,7 +105,16 @@ function Table({
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
<span>
{column.isSorted
? column.isSortedDesc
? ' 🔽'
: ' 🔼'
: ''}
</span>
</th>
))}
</tr>
))}

8
examples/pagination-controlled/yarn.lock
View File

@ -8087,10 +8087,10 @@ react-scripts@3.0.1:
optionalDependencies:
fsevents "2.0.6"
react-table@next:
version "7.0.0-alpha.7"
resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-alpha.7.tgz#0cb6da6f32adb397e68505b7cdd4880d15d73017"
integrity sha512-oXE9RRkE2CFk1OloNCSTPQ9qxOdujgkCoW5b/srbJsBog/ySkWuozBTQkxH1wGNmnSxGyTrTxJqXdXPQam7VAw==
react-table@latest:
version "7.0.0-rc.1"
resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-rc.1.tgz#33f61b904d246d862a46a05ac4d8eda6343ea83b"
integrity sha512-tAuZg+TY64UUgBPRts/q+0JguGZpliYdoQZl7lAnLAQ/reU/5c04sCx54QcpH7n/PYVHMJEYkIU0ito8ZZ011w==
react@^16.8.6:
version "16.8.6"

1
examples/pagination/src/App.js
View File

@ -62,7 +62,6 @@ function Table({ columns, data }) {
columns,
data,
initialState: { pageIndex: 2 },
debug: true,
},
usePagination
)

8
examples/pagination/yarn.lock
View File

@ -8087,10 +8087,10 @@ react-scripts@3.0.1:
optionalDependencies:
fsevents "2.0.6"
react-table@next:
version "7.0.0-alpha.7"
resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-alpha.7.tgz#0cb6da6f32adb397e68505b7cdd4880d15d73017"
integrity sha512-oXE9RRkE2CFk1OloNCSTPQ9qxOdujgkCoW5b/srbJsBog/ySkWuozBTQkxH1wGNmnSxGyTrTxJqXdXPQam7VAw==
react-table@latest:
version "7.0.0-rc.1"
resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-rc.1.tgz#33f61b904d246d862a46a05ac4d8eda6343ea83b"
integrity sha512-tAuZg+TY64UUgBPRts/q+0JguGZpliYdoQZl7lAnLAQ/reU/5c04sCx54QcpH7n/PYVHMJEYkIU0ito8ZZ011w==
react@^16.8.6:
version "16.8.6"

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

@ -47,7 +47,6 @@ function Table({ columns, data }) {
{
columns,
data,
debug: true,
},
useRowSelect
)

4
package.json
View File

@ -1,7 +1,7 @@
{
"name": "react-table",
"version": "7.0.0-rc.1",
"description": "A fast, lightweight, opinionated table and datagrid built on React",
"version": "7.0.0-rc.2",
"description": "Hooks for building lightweight, fast and extendable datagrids for React",
"license": "MIT",
"homepage": "https://github.com/tannerlinsley/react-table#readme",
"repository": {

48
src/hooks/useColumnVisibility.js
View File

@ -2,20 +2,33 @@ import React from 'react'
import {
actions,
reducerHandlers,
functionalUpdate,
mergeProps,
applyPropHooks,
useGetLatest,
} from '../utils'
const pluginName = 'useColumnVisibility'
actions.resetHiddenColumns = 'resetHiddenColumns'
actions.toggleHideColumn = 'toggleHideColumn'
actions.setHiddenColumns = 'setHiddenColumns'
actions.toggleHideAllColumns = 'toggleHideAllColumns'
reducerHandlers[pluginName] = (state, action) => {
export const useColumnVisibility = hooks => {
hooks.getToggleHiddenProps = []
hooks.getToggleHideAllColumnsProps = []
hooks.stateReducers.push(reducer)
hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions)
hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => [
...deps,
instance.state.hiddenColumns,
])
hooks.useInstance.push(useInstance)
}
useColumnVisibility.pluginName = 'useColumnVisibility'
function reducer(state, action, previousState, instanceRef) {
if (action.type === actions.init) {
return {
hiddenColumns: [],
@ -62,25 +75,12 @@ reducerHandlers[pluginName] = (state, action) => {
return {
...state,
hiddenColumns: shouldAll
? action.instanceRef.current.flatColumns.map(d => d.id)
? instanceRef.current.flatColumns.map(d => d.id)
: [],
}
}
}
export const useColumnVisibility = hooks => {
hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => [
...deps,
instance.state.hiddenColumns,
])
hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions)
hooks.useInstance.push(useInstance)
hooks.getToggleHiddenProps = []
hooks.getToggleHideAllColumnsProps = []
}
useColumnVisibility.pluginName = pluginName
function useInstanceBeforeDimensions(instance) {
const {
headers,
@ -123,8 +123,7 @@ function useInstance(instance) {
state: { hiddenColumns },
} = instance
const instanceRef = React.useRef()
instanceRef.current = instance
const getInstance = useGetLatest(instance)
const allColumnsHidden = flatColumns.length === hiddenColumns.length
@ -149,10 +148,7 @@ function useInstance(instance) {
checked: column.isVisible,
title: 'Toggle Column Visible',
},
applyPropHooks(
instanceRef.current.hooks.getToggleHiddenProps,
instanceRef.current
),
applyPropHooks(getInstance().hooks.getToggleHiddenProps, getInstance()),
props
)
}
@ -188,8 +184,8 @@ function useInstance(instance) {
indeterminate: !allColumnsHidden && hiddenColumns.length,
},
applyPropHooks(
instanceRef.current.hooks.getToggleHideAllColumnsProps,
instanceRef.current
getInstance().hooks.getToggleHideAllColumnsProps,
getInstance()
),
props
)

361
src/hooks/useTable.js
View File

@ -3,7 +3,6 @@ import React from 'react'
//
import {
actions,
reducerHandlers,
applyHooks,
applyPropHooks,
mergeProps,
@ -11,17 +10,14 @@ import {
decorateColumnTree,
makeHeaderGroups,
flattenBy,
useGetLatest,
useConsumeHookGetter,
} from '../utils'
import { useColumnVisibility } from './useColumnVisibility'
let renderErr = 'Renderer Error'
if (process.env.NODE_ENV !== 'production') {
renderErr =
'You must specify a valid render component. This could be "column.Cell", "column.Header", "column.Filter", "column.Aggregated" or any other custom renderer component.'
}
const defaultInitialState = {}
const defaultColumnInstance = {}
const defaultReducer = (state, action, prevState) => state
@ -38,60 +34,21 @@ export const useTable = (props, ...plugins) => {
defaultColumn = defaultColumnInstance,
getSubRows = defaultGetSubRows,
getRowId = defaultGetRowId,
reducer: userReducer = defaultReducer,
stateReducer: userStateReducer = defaultReducer,
useControlledState = defaultUseControlledState,
debug,
} = props
plugins = [useColumnVisibility, ...plugins]
debug = process.env.NODE_ENV === 'production' ? false : debug
const reducer = (state, action) => {
let nextState = Object.keys(reducerHandlers)
.map(key => reducerHandlers[key])
.reduce((state, handler) => handler(state, action) || state, state)
nextState = userReducer(nextState, action, state)
if (process.env.NODE_ENV !== 'production' && debug) {
console.info('')
console.info('React Table Action: ', action)
console.info('New State: ', nextState)
}
return nextState
}
// But use the users table state if provided
const [reducerState, originalDispatch] = React.useReducer(
reducer,
undefined,
() => reducer(initialState, { type: actions.init })
)
const state = useControlledState(reducerState)
// The table instance ref
// The table instance
let instanceRef = React.useRef({})
const dispatch = React.useCallback(action => {
if (!action.type) {
if (process.env.NODE_ENV !== 'production') {
console.info({ action })
throw new Error('Unknown Action Type! 👆')
}
throw new Error()
}
originalDispatch({ ...action, instanceRef })
}, [])
Object.assign(instanceRef.current, {
...props,
data, // The raw data
state, // The state dispatcher
dispatch, // The resolved table state
plugins, // All resolved plugins
plugins,
data,
hooks: {
stateReducers: [],
columnsBeforeHeaderGroups: [],
columnsBeforeHeaderGroupsDeps: [],
useInstanceBeforeDimensions: [],
@ -109,14 +66,56 @@ export const useTable = (props, ...plugins) => {
},
})
// Allow plugins to register hooks
if (process.env.NODE_ENV !== 'production' && debug) console.time('plugins')
// Allow plugins to register hooks as early as possible
plugins.filter(Boolean).forEach(plugin => {
plugin(instanceRef.current.hooks)
})
if (process.env.NODE_ENV !== 'production' && debug) console.timeEnd('plugins')
// Snapshot hook and disallow more from being added
const getStateReducers = useConsumeHookGetter(
instanceRef.current.hooks,
'stateReducers'
)
// Setup user reducer ref
const getUserStateReducer = useGetLatest(userStateReducer)
// Build the reducer
const reducer = React.useCallback(
(state, action) => {
// Detect invalid actions
if (!action.type) {
console.info({ action })
throw new Error('Unknown Action 👆')
}
// Reduce the state from all plugin reducers
return [
...getStateReducers(),
// Allow the user to add their own state reducer(s)
...(Array.isArray(getUserStateReducer())
? getUserStateReducer()
: [getUserStateReducer()]),
].reduce(
(s, handler) => handler(s, action, state, instanceRef) || s,
state
)
},
[getStateReducers, getUserStateReducer]
)
// Start the reducer
const [reducerState, dispatch] = React.useReducer(reducer, undefined, () =>
reducer(initialState, { type: actions.init })
)
// Allow the user to control the final state with hooks
const state = useControlledState(reducerState)
Object.assign(instanceRef.current, {
state, // The state dispatcher
dispatch, // The resolved table state
})
// Decorate All the columns
let columns = React.useMemo(
@ -124,30 +123,33 @@ export const useTable = (props, ...plugins) => {
[defaultColumn, userColumns]
)
// Snapshot hook and disallow more from being added
const getColumnsBeforeHeaderGroups = useConsumeHookGetter(
instanceRef.current.hooks,
'columnsBeforeHeaderGroups'
)
// Snapshot hook and disallow more from being added
const getColumnsBeforeHeaderGroupsDeps = useConsumeHookGetter(
instanceRef.current.hooks,
'columnsBeforeHeaderGroupsDeps'
)
// Get the flat list of all columns and allow hooks to decorate
// those columns (and trigger this memoization via deps)
let flatColumns = React.useMemo(() => {
if (process.env.NODE_ENV !== 'production' && debug)
console.time('hooks.columnsBeforeHeaderGroups')
let newColumns = applyHooks(
instanceRef.current.hooks.columnsBeforeHeaderGroups,
getColumnsBeforeHeaderGroups(),
flattenBy(columns, 'columns'),
instanceRef.current
)
if (process.env.NODE_ENV !== 'production' && debug)
console.timeEnd('hooks.columnsBeforeHeaderGroups')
return newColumns
}, [
columns,
debug,
getColumnsBeforeHeaderGroups,
// eslint-disable-next-line react-hooks/exhaustive-deps
...applyHooks(
instanceRef.current.hooks.columnsBeforeHeaderGroupsDeps,
[],
instanceRef.current
),
...getColumnsBeforeHeaderGroupsDeps(),
])
// Make the headerGroups
@ -170,9 +172,6 @@ export const useTable = (props, ...plugins) => {
// Access the row model
const [rows, flatRows] = React.useMemo(() => {
if (process.env.NODE_ENV !== 'production' && debug)
console.time('getAccessedRows')
let flatRows = []
// Access the row's data
@ -227,10 +226,9 @@ export const useTable = (props, ...plugins) => {
// Use the resolved data
const accessedData = data.map((d, i) => accessRow(d, i))
if (process.env.NODE_ENV !== 'production' && debug)
console.timeEnd('getAccessedRows')
return [accessedData, flatRows]
}, [debug, data, getRowId, getSubRows, flatColumns])
}, [data, getRowId, getSubRows, flatColumns])
instanceRef.current.rows = rows
instanceRef.current.flatRows = flatRows
@ -241,26 +239,39 @@ export const useTable = (props, ...plugins) => {
[]
)
if (process.env.NODE_ENV !== 'production' && debug)
console.time('hooks.useInstanceBeforeDimensions')
// Snapshot hook and disallow more from being added
const getUseInstanceBeforeDimensions = useConsumeHookGetter(
instanceRef.current.hooks,
'useInstanceBeforeDimensions'
)
instanceRef.current = applyHooks(
instanceRef.current.hooks.useInstanceBeforeDimensions,
getUseInstanceBeforeDimensions(),
instanceRef.current
)
if (process.env.NODE_ENV !== 'production' && debug)
console.timeEnd('hooks.useInstanceBeforeDimensions')
// Header Visibility is needed by this point
calculateDimensions(instanceRef.current)
if (process.env.NODE_ENV !== 'production' && debug)
console.time('hooks.useInstance')
instanceRef.current = applyHooks(
instanceRef.current.hooks.useInstance,
instanceRef.current
// Snapshot hook and disallow more from being added
const getUseInstance = useConsumeHookGetter(
instanceRef.current.hooks,
'useInstance'
)
instanceRef.current = applyHooks(getUseInstance(), instanceRef.current)
// Snapshot hook and disallow more from being added
const getHeaderPropsHooks = useConsumeHookGetter(
instanceRef.current.hooks,
'getHeaderProps'
)
// Snapshot hook and disallow more from being added
const getFooterPropsHooks = useConsumeHookGetter(
instanceRef.current.hooks,
'getFooterProps'
)
if (process.env.NODE_ENV !== 'production' && debug)
console.timeEnd('hooks.useInstance')
// Each materialized header needs to be assigned a render function and other
// prop getter properties here.
@ -287,11 +298,7 @@ export const useTable = (props, ...plugins) => {
key: ['header', column.id].join('_'),
colSpan: column.totalVisibleHeaderCount,
},
applyPropHooks(
instanceRef.current.hooks.getHeaderProps,
column,
instanceRef.current
),
applyPropHooks(getHeaderPropsHooks(), column, instanceRef.current),
props
)
@ -302,15 +309,23 @@ export const useTable = (props, ...plugins) => {
key: ['footer', column.id].join('_'),
colSpan: column.totalVisibleHeaderCount,
},
applyPropHooks(
instanceRef.current.hooks.getFooterProps,
column,
instanceRef.current
),
applyPropHooks(getFooterPropsHooks(), column, instanceRef.current),
props
)
})
// Snapshot hook and disallow more from being added
const getHeaderGroupPropsHooks = useConsumeHookGetter(
instanceRef.current.hooks,
'getHeaderGroupProps'
)
// Snapshot hook and disallow more from being added
const getFooterGroupsPropsHooks = useConsumeHookGetter(
instanceRef.current.hooks,
'getFooterGroupProps'
)
instanceRef.current.headerGroups = instanceRef.current.headerGroups.filter(
(headerGroup, i) => {
// Filter out any headers and headerGroups that don't have visible columns
@ -336,7 +351,7 @@ export const useTable = (props, ...plugins) => {
key: [`header${i}`].join('_'),
},
applyPropHooks(
instanceRef.current.hooks.getHeaderGroupProps,
getHeaderGroupPropsHooks(),
headerGroup,
instanceRef.current
),
@ -349,7 +364,7 @@ export const useTable = (props, ...plugins) => {
key: [`footer${i}`].join('_'),
},
applyPropHooks(
instanceRef.current.hooks.getFooterGroupProps,
getFooterGroupsPropsHooks(),
headerGroup,
instanceRef.current
),
@ -368,96 +383,118 @@ export const useTable = (props, ...plugins) => {
].reverse()
// Run the rows (this could be a dangerous hook with a ton of data)
if (process.env.NODE_ENV !== 'production' && debug)
console.time('hooks.useRows')
// Snapshot hook and disallow more from being added
const getUseRowsHooks = useConsumeHookGetter(
instanceRef.current.hooks,
'useRows'
)
instanceRef.current.rows = applyHooks(
instanceRef.current.hooks.useRows,
getUseRowsHooks(),
instanceRef.current.rows,
instanceRef.current
)
if (process.env.NODE_ENV !== 'production' && debug)
console.timeEnd('hooks.useRows')
// The prepareRow function is absolutely necessary and MUST be called on
// any rows the user wishes to be displayed.
instanceRef.current.prepareRow = React.useCallback(row => {
row.getRowProps = props =>
mergeProps(
{ key: ['row', ...row.path].join('_') },
applyPropHooks(
instanceRef.current.hooks.getRowProps,
row,
instanceRef.current
),
props
)
// Snapshot hook and disallow more from being added
const getPrepareRowHooks = useConsumeHookGetter(
instanceRef.current.hooks,
'prepareRow'
)
// Build the visible cells for each row
row.cells = instanceRef.current.flatColumns
.filter(d => d.isVisible)
.map(column => {
const cell = {
column,
row,
value: row.values[column.id],
}
// Snapshot hook and disallow more from being added
const getRowPropsHooks = useConsumeHookGetter(
instanceRef.current.hooks,
'getRowProps'
)
// Give each cell a getCellProps base
cell.getCellProps = props => {
const columnPathStr = [...row.path, column.id].join('_')
return mergeProps(
{
key: ['cell', columnPathStr].join('_'),
},
applyPropHooks(
instanceRef.current.hooks.getCellProps,
cell,
instanceRef.current
),
props
)
}
// Snapshot hook and disallow more from being added
const getCellPropsHooks = useConsumeHookGetter(
instanceRef.current.hooks,
'getCellProps'
)
// Give each cell a renderer function (supports multiple renderers)
cell.render = (type, userProps = {}) => {
const Comp = typeof type === 'string' ? column[type] : type
instanceRef.current.prepareRow = React.useCallback(
row => {
row.getRowProps = props =>
mergeProps(
{ key: ['row', ...row.path].join('_') },
applyPropHooks(getRowPropsHooks(), row, instanceRef.current),
props
)
if (typeof Comp === 'undefined') {
throw new Error(renderErr)
}
return flexRender(Comp, {
...instanceRef.current,
// Build the visible cells for each row
row.cells = instanceRef.current.flatColumns
.filter(d => d.isVisible)
.map(column => {
const cell = {
column,
row,
cell,
...userProps,
})
}
value: row.values[column.id],
}
return cell
})
// Give each cell a getCellProps base
cell.getCellProps = props => {
const columnPathStr = [...row.path, column.id].join('_')
return mergeProps(
{
key: ['cell', columnPathStr].join('_'),
},
applyPropHooks(getCellPropsHooks(), cell, instanceRef.current),
props
)
}
// need to apply any row specific hooks (useExpanded requires this)
applyHooks(instanceRef.current.hooks.prepareRow, row, instanceRef.current)
}, [])
// 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, {
...instanceRef.current,
column,
row,
cell,
...userProps,
})
}
return cell
})
// need to apply any row specific hooks (useExpanded requires this)
applyHooks(getPrepareRowHooks(), row, instanceRef.current)
},
[getCellPropsHooks, getPrepareRowHooks, getRowPropsHooks]
)
// Snapshot hook and disallow more from being added
const getTablePropsHooks = useConsumeHookGetter(
instanceRef.current.hooks,
'getTableProps'
)
instanceRef.current.getTableProps = userProps =>
mergeProps(
applyPropHooks(
instanceRef.current.hooks.getTableProps,
instanceRef.current
),
applyPropHooks(getTablePropsHooks(), instanceRef.current),
userProps
)
// Snapshot hook and disallow more from being added
const getTableBodyPropsHooks = useConsumeHookGetter(
instanceRef.current.hooks,
'getTableBodyProps'
)
instanceRef.current.getTableBodyProps = userProps =>
mergeProps(
applyPropHooks(
instanceRef.current.hooks.getTableBodyProps,
instanceRef.current
),
applyPropHooks(getTableBodyPropsHooks(), instanceRef.current),
userProps
)

2
src/index.js
View File

@ -1,4 +1,4 @@
export * from './utils'
export * from './publicUtils'
export { useTable } from './hooks/useTable'
export { useExpanded } from './plugin-hooks/useExpanded'
export { useFilters } from './plugin-hooks/useFilters'

28
src/plugin-hooks/useColumnOrder.js
View File

@ -1,15 +1,23 @@
import React from 'react'
import { reducerHandlers, functionalUpdate, actions } from '../utils'
const pluginName = 'useColumnOrder'
import { functionalUpdate, actions } from '../utils'
// Actions
actions.resetColumnOrder = 'resetColumnOrder'
actions.setColumnOrder = 'setColumnOrder'
// Reducer
reducerHandlers[pluginName] = (state, action) => {
export const useColumnOrder = hooks => {
hooks.stateReducers.push(reducer)
hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => {
return [...deps, instance.state.columnOrder]
})
hooks.columnsBeforeHeaderGroups.push(columnsBeforeHeaderGroups)
hooks.useInstance.push(useInstance)
}
useColumnOrder.pluginName = 'useColumnOrder'
function reducer(state, action) {
if (action.type === actions.init) {
return {
columnOrder: [],
@ -32,16 +40,6 @@ reducerHandlers[pluginName] = (state, action) => {
}
}
export const useColumnOrder = hooks => {
hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => {
return [...deps, instance.state.columnOrder]
})
hooks.columnsBeforeHeaderGroups.push(columnsBeforeHeaderGroups)
hooks.useInstance.push(useInstance)
}
useColumnOrder.pluginName = pluginName
function columnsBeforeHeaderGroups(columns, instance) {
const {
state: { columnOrder },

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

@ -2,21 +2,28 @@ import React from 'react'
import {
actions,
reducerHandlers,
mergeProps,
applyPropHooks,
expandRows,
safeUseLayoutEffect,
useMountedLayoutEffect,
useGetLatest,
} from '../utils'
const pluginName = 'useExpanded'
// Actions
actions.toggleExpandedByPath = 'toggleExpandedByPath'
actions.resetExpanded = 'resetExpanded'
export const useExpanded = hooks => {
hooks.getExpandedToggleProps = []
hooks.stateReducers.push(reducer)
hooks.useInstance.push(useInstance)
}
useExpanded.pluginName = 'useExpanded'
// Reducer
reducerHandlers[pluginName] = (state, action) => {
function reducer(state, action) {
if (action.type === actions.init) {
return {
expanded: [],
@ -53,39 +60,27 @@ reducerHandlers[pluginName] = (state, action) => {
}
}
export const useExpanded = hooks => {
hooks.getExpandedToggleProps = []
hooks.useInstance.push(useInstance)
}
useExpanded.pluginName = pluginName
const defaultGetResetExpandedDeps = ({ data }) => [data]
function useInstance(instance) {
const {
debug,
data,
rows,
manualExpandedKey = 'expanded',
paginateExpandedRows = true,
expandSubRows = true,
hooks,
autoResetExpanded = true,
state: { expanded },
dispatch,
getResetExpandedDeps = defaultGetResetExpandedDeps,
} = instance
const getAutoResetExpanded = useGetLatest(autoResetExpanded)
// Bypass any effects from firing when this changes
const isMountedRef = React.useRef()
safeUseLayoutEffect(() => {
if (isMountedRef.current) {
useMountedLayoutEffect(() => {
if (getAutoResetExpanded()) {
dispatch({ type: actions.resetExpanded })
}
isMountedRef.current = true
}, [
dispatch,
...(getResetExpandedDeps ? getResetExpandedDeps(instance) : []),
])
}, [dispatch, data])
const toggleExpandedByPath = (path, expanded) => {
dispatch({ type: actions.toggleExpandedByPath, path, expanded })
@ -121,22 +116,12 @@ function useInstance(instance) {
})
const expandedRows = React.useMemo(() => {
if (process.env.NODE_ENV !== 'production' && debug)
console.info('getExpandedRows')
if (paginateExpandedRows) {
return expandRows(rows, { manualExpandedKey, expanded, expandSubRows })
}
return rows
}, [
debug,
paginateExpandedRows,
rows,
manualExpandedKey,
expanded,
expandSubRows,
])
}, [paginateExpandedRows, rows, manualExpandedKey, expanded, expandSubRows])
const expandedDepth = findExpandedDepth(expanded)

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

@ -2,23 +2,27 @@ import React from 'react'
import {
actions,
reducerHandlers,
getFirstDefined,
isFunction,
safeUseLayoutEffect,
useMountedLayoutEffect,
functionalUpdate,
useGetLatest,
} from '../utils'
import * as filterTypes from '../filterTypes'
const pluginName = 'useFilters'
// Actions
actions.resetFilters = 'resetFilters'
actions.setFilter = 'setFilter'
actions.setAllFilters = 'setAllFilters'
// Reducer
reducerHandlers[pluginName] = (state, action) => {
export const useFilters = hooks => {
hooks.stateReducers.push(reducer)
hooks.useInstance.push(useInstance)
}
useFilters.pluginName = 'useFilters'
function reducer(state, action, previousState, instanceRef) {
if (action.type === actions.init) {
return {
filters: {},
@ -34,14 +38,8 @@ reducerHandlers[pluginName] = (state, action) => {
}
if (action.type === actions.setFilter) {
const {
columnId,
filterValue,
instanceRef: {
current: { flatColumns, userFilterTypes },
},
} = action
const { columnId, filterValue } = action
const { flatColumns, userFilterTypes } = instanceRef.current
const column = flatColumns.find(d => d.id === columnId)
if (!column) {
@ -78,13 +76,8 @@ reducerHandlers[pluginName] = (state, action) => {
}
if (action.type === actions.setAllFilters) {
const {
filters,
instanceRef: {
current: { flatColumns, filterTypes: userFilterTypes },
},
} = action
const { filters } = action
const { flatColumns, filterTypes: userFilterTypes } = instanceRef.current
const newFilters = functionalUpdate(filters, state.filters)
// Filter out undefined values
@ -109,15 +102,9 @@ reducerHandlers[pluginName] = (state, action) => {
}
}
export const useFilters = hooks => {
hooks.useInstance.push(useInstance)
}
useFilters.pluginName = pluginName
function useInstance(instance) {
const {
debug,
data,
rows,
flatRows,
flatColumns,
@ -127,7 +114,7 @@ function useInstance(instance) {
disableFilters,
state: { filters },
dispatch,
getResetFiltersDeps = false,
autoResetFilters = true,
} = instance
const preFilteredRows = rows
@ -184,9 +171,6 @@ function useInstance(instance) {
const filteredFlatRows = []
if (process.env.NODE_ENV !== 'production' && debug)
console.info('getFilteredRows')
// Filters top level and nested rows
const filterRows = (rows, depth = 0) => {
let filteredRows = rows
@ -256,15 +240,7 @@ function useInstance(instance) {
filteredRows: filterRows(rows),
filteredFlatRows,
}
}, [
manualFilters,
filters,
debug,
rows,
flatRows,
flatColumns,
userFilterTypes,
])
}, [manualFilters, filters, rows, flatRows, flatColumns, userFilterTypes])
React.useMemo(() => {
// Now that each filtered column has it's partially filtered rows,
@ -281,25 +257,13 @@ function useInstance(instance) {
})
}, [filteredRows, filters, flatColumns])
// Bypass any effects from firing when this changes
const isMountedRef = React.useRef()
safeUseLayoutEffect(() => {
if (isMountedRef.current) {
const getAutoResetFilters = useGetLatest(autoResetFilters)
useMountedLayoutEffect(() => {
if (getAutoResetFilters()) {
dispatch({ type: actions.resetFilters })
}
isMountedRef.current = true
}, [
dispatch,
...(getResetFiltersDeps
? getResetFiltersDeps({
...instance,
preFilteredRows,
preFilteredFlatRows,
rows: filteredRows,
flatRows: filteredFlatRows,
})
: []),
])
}, [dispatch, manualFilters ? null : data])
return {
...instance,

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

@ -3,22 +3,33 @@ import React from 'react'
import * as aggregations from '../aggregations'
import {
actions,
reducerHandlers,
mergeProps,
applyPropHooks,
defaultGroupByFn,
getFirstDefined,
ensurePluginOrder,
useMountedLayoutEffect,
useGetLatest,
} from '../utils'
const pluginName = 'useGroupBy'
// Actions
actions.resetGroupBy = 'resetGroupBy'
actions.toggleGroupBy = 'toggleGroupBy'
export const useGroupBy = hooks => {
hooks.stateReducers.push(reducer)
hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => [
...deps,
instance.state.groupBy,
])
hooks.columnsBeforeHeaderGroups.push(columnsBeforeHeaderGroups)
hooks.useInstance.push(useInstance)
}
useGroupBy.pluginName = 'useGroupBy'
// Reducer
reducerHandlers[pluginName] = (state, action) => {
function reducer(state, action) {
if (action.type === actions.init) {
return {
groupBy: [],
@ -53,17 +64,6 @@ reducerHandlers[pluginName] = (state, action) => {
}
}
export const useGroupBy = hooks => {
hooks.columnsBeforeHeaderGroups.push(columnsBeforeHeaderGroups)
hooks.columnsBeforeHeaderGroupsDeps.push((deps, instance) => {
deps.push(instance.state.groupBy)
return deps
})
hooks.useInstance.push(useInstance)
}
useGroupBy.pluginName = pluginName
function columnsBeforeHeaderGroups(flatColumns, { state: { groupBy } }) {
// Sort grouped columns to the start of the column list
// before the headers are built
@ -86,7 +86,7 @@ const defaultUserAggregations = {}
function useInstance(instance) {
const {
debug,
data,
rows,
flatRows,
flatColumns,
@ -100,6 +100,8 @@ function useInstance(instance) {
plugins,
state: { groupBy },
dispatch,
autoResetGroupBy = true,
manaulGroupBy,
} = instance
ensurePluginOrder(plugins, [], 'useGroupBy', ['useSortBy', 'useExpanded'])
@ -183,10 +185,7 @@ function useInstance(instance) {
return [rows, flatRows]
}
if (process.env.NODE_ENV !== 'production' && debug)
console.info('getGroupedRows')
// Find the columns that can or are aggregating
// Uses each column to aggregate rows into a single value
const aggregateRowsToValues = (rows, isAggregated) => {
const values = {}
@ -289,7 +288,6 @@ function useInstance(instance) {
}, [
manualGroupBy,
groupBy,
debug,
rows,
flatRows,
flatColumns,
@ -297,6 +295,14 @@ function useInstance(instance) {
groupByFn,
])
const getAutoResetGroupBy = useGetLatest(autoResetGroupBy)
useMountedLayoutEffect(() => {
if (getAutoResetGroupBy()) {
dispatch({ type: actions.resetGroupBy })
}
}, [dispatch, manaulGroupBy ? null : data])
return {
...instance,
toggleGroupBy,

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

@ -4,11 +4,11 @@ import React from 'react'
import {
actions,
reducerHandlers,
ensurePluginOrder,
safeUseLayoutEffect,
expandRows,
functionalUpdate,
useMountedLayoutEffect,
useGetLatest,
} from '../utils'
const pluginName = 'usePagination'
@ -18,8 +18,14 @@ actions.resetPage = 'resetPage'
actions.gotoPage = 'gotoPage'
actions.setPageSize = 'setPageSize'
// Reducer
reducerHandlers[pluginName] = (state, action) => {
export const usePagination = hooks => {
hooks.stateReducers.push(reducer)
hooks.useInstance.push(useInstance)
}
usePagination.pluginName = pluginName
function reducer(state, action, previousState, instanceRef) {
if (action.type === actions.init) {
return {
pageSize: 10,
@ -36,7 +42,7 @@ reducerHandlers[pluginName] = (state, action) => {
}
if (action.type === actions.gotoPage) {
const { pageCount } = action.instanceRef.current
const { pageCount } = instanceRef.current
const newPageIndex = functionalUpdate(action.pageIndex, state.pageIndex)
if (newPageIndex < 0 || newPageIndex > pageCount - 1) {
@ -61,31 +67,22 @@ reducerHandlers[pluginName] = (state, action) => {
}
}
export const usePagination = hooks => {
hooks.useInstance.push(useInstance)
}
usePagination.pluginName = pluginName
const defaultGetResetPageDeps = ({
data,
manualPagination,
state: { filters, groupBy, sortBy },
}) => [manualPagination ? null : data, filters, groupBy, sortBy]
function useInstance(instance) {
const {
rows,
manualPagination,
getResetPageDeps = defaultGetResetPageDeps,
autoResetPage = true,
manualExpandedKey = 'expanded',
debug,
plugins,
pageCount: userPageCount,
paginateExpandedRows = true,
expandSubRows = true,
state: { pageSize, pageIndex, expanded },
state: { pageSize, pageIndex, expanded, filters, groupBy, sortBy },
dispatch,
data,
manualPagination,
manualFilters,
manualGroupBy,
manualSortBy,
} = instance
ensurePluginOrder(
@ -95,14 +92,19 @@ function useInstance(instance) {
[]
)
// Bypass any effects from firing when this changes
const isMountedRef = React.useRef()
safeUseLayoutEffect(() => {
if (isMountedRef.current) {
const getAutoResetPage = useGetLatest(autoResetPage)
useMountedLayoutEffect(() => {
if (getAutoResetPage()) {
dispatch({ type: actions.resetPage })
}
isMountedRef.current = true
}, [dispatch, ...(getResetPageDeps ? getResetPageDeps(instance) : [])])
}, [
dispatch,
manualPagination ? null : data,
manualPagination || manualFilters ? null : filters,
manualPagination || manualGroupBy ? null : groupBy,
manualPagination || manualSortBy ? null : sortBy,
])
const pageCount = manualPagination
? userPageCount
@ -119,9 +121,6 @@ function useInstance(instance) {
if (manualPagination) {
page = rows
} else {
if (process.env.NODE_ENV !== 'production' && debug)
console.info('getPage')
const pageStart = pageSize * pageIndex
const pageEnd = pageStart + pageSize
@ -134,7 +133,6 @@ function useInstance(instance) {
return expandRows(page, { manualExpandedKey, expanded, expandSubRows })
}, [
debug,
expandSubRows,
expanded,
manualExpandedKey,

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

@ -1,16 +1,12 @@
import React from 'react'
import {
actions,
reducerHandlers,
defaultColumn,
getFirstDefined,
mergeProps,
applyPropHooks,
useGetLatest,
} from '../utils'
const pluginName = 'useResizeColumns'
// Default Column
defaultColumn.canResize = true
@ -19,8 +15,14 @@ actions.columnStartResizing = 'columnStartResizing'
actions.columnResizing = 'columnResizing'
actions.columnDoneResizing = 'columnDoneResizing'
// Reducer
reducerHandlers[pluginName] = (state, action) => {
export const useResizeColumns = hooks => {
hooks.stateReducers.push(reducer)
hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions)
}
useResizeColumns.pluginName = 'useResizeColumns'
function reducer(state, action) {
if (action.type === actions.init) {
return {
columnResizing: {
@ -85,12 +87,6 @@ reducerHandlers[pluginName] = (state, action) => {
}
}
export const useResizeColumns = hooks => {
hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions)
}
useResizeColumns.pluginName = pluginName
const useInstanceBeforeDimensions = instance => {
instance.hooks.getResizerProps = []
@ -142,8 +138,7 @@ const useInstanceBeforeDimensions = instance => {
}
// use reference to avoid memory leak in #1608
const instanceRef = React.useRef()
instanceRef.current = instance
const getInstance = useGetLatest(instance)
flatHeaders.forEach(header => {
const canResize = getFirstDefined(
@ -167,9 +162,9 @@ const useInstanceBeforeDimensions = instance => {
draggable: false,
},
applyPropHooks(
instanceRef.current.hooks.getResizerProps,
getInstance().hooks.getResizerProps,
header,
instanceRef.current
getInstance()
),
userProps
)

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

@ -2,11 +2,11 @@ import React from 'react'
import {
actions,
reducerHandlers,
mergeProps,
applyPropHooks,
ensurePluginOrder,
safeUseLayoutEffect,
useGetLatest,
useMountedLayoutEffect,
} from '../utils'
const pluginName = 'useRowSelect'
@ -16,8 +16,18 @@ actions.resetSelectedRows = 'resetSelectedRows'
actions.toggleRowSelectedAll = 'toggleRowSelectedAll'
actions.toggleRowSelected = 'toggleRowSelected'
// Reducer
reducerHandlers[pluginName] = (state, action) => {
export const useRowSelect = hooks => {
hooks.getToggleRowSelectedProps = []
hooks.getToggleAllRowsSelectedProps = []
hooks.stateReducers.push(reducer)
hooks.useRows.push(useRows)
hooks.useInstance.push(useInstance)
}
useRowSelect.pluginName = pluginName
function reducer(state, action, previousState, instanceRef) {
if (action.type === actions.init) {
return {
selectedRowPaths: new Set(),
@ -33,12 +43,8 @@ reducerHandlers[pluginName] = (state, action) => {
}
if (action.type === actions.toggleRowSelectedAll) {
const {
selected,
instanceRef: {
current: { isAllRowsSelected, flatRowPaths },
},
} = action
const { selected } = action
const { isAllRowsSelected, flatRowPaths } = instanceRef.current
const selectAll =
typeof selected !== 'undefined' ? selected : !isAllRowsSelected
@ -50,13 +56,8 @@ reducerHandlers[pluginName] = (state, action) => {
}
if (action.type === actions.toggleRowSelected) {
const {
path,
selected,
instanceRef: {
current: { flatRowPaths },
},
} = action
const { path, selected } = action
const { flatRowPaths } = instanceRef.current
const key = path.join('.')
const childRowPrefixKey = [key, '.'].join('')
@ -116,15 +117,6 @@ reducerHandlers[pluginName] = (state, action) => {
}
}
export const useRowSelect = hooks => {
hooks.getToggleRowSelectedProps = []
hooks.getToggleAllRowsSelectedProps = []
hooks.useRows.push(useRows)
hooks.useInstance.push(useInstance)
}
useRowSelect.pluginName = pluginName
function useRows(rows, instance) {
const {
state: { selectedRowPaths },
@ -147,15 +139,14 @@ function useRows(rows, instance) {
return rows
}
const defaultGetResetSelectedRowPathsDeps = ({ data }) => [data]
function useInstance(instance) {
const {
data,
hooks,
manualRowSelectedKey = 'isSelected',
plugins,
flatRows,
getResetSelectedRowPathsDeps = defaultGetResetSelectedRowPathsDeps,
autoResetSelectedRows = true,
state: { selectedRowPaths },
dispatch,
} = instance
@ -177,19 +168,13 @@ function useInstance(instance) {
}
}
// Bypass any effects from firing when this changes
const isMountedRef = React.useRef()
safeUseLayoutEffect(() => {
if (isMountedRef.current) {
const getAutoResetSelectedRows = useGetLatest(autoResetSelectedRows)
useMountedLayoutEffect(() => {
if (getAutoResetSelectedRows()) {
dispatch({ type: actions.resetSelectedRows })
}
isMountedRef.current = true
}, [
dispatch,
...(getResetSelectedRowPathsDeps
? getResetSelectedRowPathsDeps(instance)
: []),
])
}, [dispatch, data])
const toggleRowSelectedAll = selected =>
dispatch({ type: actions.toggleRowSelectedAll, selected })

41
src/plugin-hooks/useRowState.js
View File

@ -2,19 +2,23 @@ import React from 'react'
import {
actions,
reducerHandlers,
functionalUpdate,
safeUseLayoutEffect,
useMountedLayoutEffect,
useGetLatest,
} from '../utils'
const pluginName = 'useRowState'
// Actions
actions.setRowState = 'setRowState'
actions.resetRowState = 'resetRowState'
// Reducer
reducerHandlers[pluginName] = (state, action) => {
export const useRowState = hooks => {
hooks.stateReducers.push(reducer)
hooks.useInstance.push(useInstance)
}
useRowState.pluginName = 'useRowState'
function reducer(state, action) {
if (action.type === actions.init) {
return {
rowState: {},
@ -44,20 +48,13 @@ reducerHandlers[pluginName] = (state, action) => {
}
}
export const useRowState = hooks => {
hooks.useInstance.push(useInstance)
}
useRowState.pluginName = pluginName
const defaultGetResetRowStateDeps = ({ data }) => [data]
function useInstance(instance) {
const {
hooks,
initialRowStateAccessor,
getResetRowStateDeps = defaultGetResetRowStateDeps,
autoResetRowState = true,
state: { rowState },
data,
dispatch,
} = instance
@ -94,19 +91,13 @@ function useInstance(instance) {
[setRowState]
)
const rowsMountedRef = React.useRef()
const getAutoResetRowState = useGetLatest(autoResetRowState)
// When data changes, reset row and cell state
safeUseLayoutEffect(() => {
if (rowsMountedRef.current) {
useMountedLayoutEffect(() => {
if (getAutoResetRowState()) {
dispatch({ type: actions.resetRowState })
}
rowsMountedRef.current = true
}, [
dispatch,
...(getResetRowStateDeps ? getResetRowStateDeps(instance) : []),
])
}, [data])
hooks.prepareRow.push(row => {
const pathKey = row.path.join('.')

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

@ -2,28 +2,36 @@ import React from 'react'
import {
actions,
reducerHandlers,
ensurePluginOrder,
defaultColumn,
safeUseLayoutEffect,
mergeProps,
applyPropHooks,
getFirstDefined,
defaultOrderByFn,
isFunction,
useGetLatest,
useMountedLayoutEffect,
} from '../utils'
import * as sortTypes from '../sortTypes'
const pluginName = 'useSortBy'
// Actions
actions.resetSortBy = 'resetSortBy'
actions.toggleSortBy = 'toggleSortBy'
actions.clearSortBy = 'clearSortBy'
defaultColumn.sortType = 'alphanumeric'
defaultColumn.sortDescFirst = false
export const useSortBy = hooks => {
hooks.stateReducers.push(reducer)
hooks.useInstance.push(useInstance)
}
useSortBy.pluginName = 'useSortBy'
// Reducer
reducerHandlers[pluginName] = (state, action) => {
function reducer(state, action, previousState, instanceRef) {
if (action.type === actions.init) {
return {
sortBy: [],
@ -49,20 +57,16 @@ reducerHandlers[pluginName] = (state, action) => {
}
if (action.type === actions.toggleSortBy) {
const { columnId, desc, multi } = action
const {
columnId,
desc,
multi,
instanceRef: {
current: {
flatColumns,
disableMultiSort,
disableSortRemove,
disableMultiRemove,
maxMultiSortColCount = Number.MAX_SAFE_INTEGER,
},
},
} = action
flatColumns,
disableMultiSort,
disableSortRemove,
disableMultiRemove,
maxMultiSortColCount = Number.MAX_SAFE_INTEGER,
} = instanceRef.current
const { sortBy } = state
// Find the column for this columnId
@ -149,23 +153,14 @@ reducerHandlers[pluginName] = (state, action) => {
}
}
defaultColumn.sortType = 'alphanumeric'
defaultColumn.sortDescFirst = false
export const useSortBy = hooks => {
hooks.useInstance.push(useInstance)
}
useSortBy.pluginName = pluginName
function useInstance(instance) {
const {
debug,
data,
rows,
flatColumns,
orderByFn = defaultOrderByFn,
sortTypes: userSortTypes,
manualSorting,
manualSortBy,
defaultCanSort,
disableSortBy,
isMultiSortEvent = e => e.shiftKey,
@ -174,7 +169,7 @@ function useInstance(instance) {
state: { sortBy },
dispatch,
plugins,
getResetSortByDeps = false,
autoResetSortBy = true,
} = instance
ensurePluginOrder(plugins, ['useFilters'], 'useSortBy', [])
@ -187,8 +182,7 @@ function useInstance(instance) {
}
// use reference to avoid memory leak in #1608
const instanceRef = React.useRef()
instanceRef.current = instance
const getInstance = useGetLatest(instance)
// Add the getSortByToggleProps method to columns and headers
flatHeaders.forEach(column => {
@ -226,7 +220,7 @@ function useInstance(instance) {
e.persist()
column.toggleSortBy(
undefined,
!instanceRef.current.disableMultiSort && isMultiSortEvent(e)
!getInstance().disableMultiSort && isMultiSortEvent(e)
)
}
: undefined,
@ -236,9 +230,9 @@ function useInstance(instance) {
title: canSort ? 'Toggle SortBy' : undefined,
},
applyPropHooks(
instanceRef.current.hooks.getSortByToggleProps,
getInstance().hooks.getSortByToggleProps,
column,
instanceRef.current
getInstance()
),
props
)
@ -251,11 +245,9 @@ function useInstance(instance) {
})
const sortedRows = React.useMemo(() => {
if (manualSorting || !sortBy.length) {
if (manualSortBy || !sortBy.length) {
return rows
}
if (process.env.NODE_ENV !== 'production' && debug)
console.time('getSortedRows')
// Filter out sortBys that correspond to non existing columns
const availableSortBy = sortBy.filter(sort =>
@ -326,38 +318,16 @@ function useInstance(instance) {
return sortedData
}
if (process.env.NODE_ENV !== 'production' && debug)
console.timeEnd('getSortedRows')
return sortData(rows)
}, [
manualSorting,
sortBy,
debug,
rows,
flatColumns,
orderByFn,
userSortTypes,
])
}, [manualSortBy, sortBy, rows, flatColumns, orderByFn, userSortTypes])
// Bypass any effects from firing when this changes
const isMountedRef = React.useRef()
safeUseLayoutEffect(() => {
if (isMountedRef.current) {
const getAutoResetSortBy = useGetLatest(autoResetSortBy)
useMountedLayoutEffect(() => {
if (getAutoResetSortBy()) {
dispatch({ type: actions.resetSortBy })
}
isMountedRef.current = true
}, [
dispatch,
...(getResetSortByDeps
? getResetSortByDeps({
...instance,
toggleSortBy,
rows: sortedRows,
preSortedRows: rows,
})
: []),
])
}, [manualSortBy ? null : data])
return {
...instance,

179
src/publicUtils.js Normal file
View File

@ -0,0 +1,179 @@
import React from 'react'
export const actions = {
init: 'init',
}
export const defaultColumn = {
Cell: ({ cell: { value = '' } }) => String(value),
width: 150,
minWidth: 0,
maxWidth: Number.MAX_SAFE_INTEGER,
}
export function defaultOrderByFn(arr, funcs, dirs) {
return [...arr].sort((rowA, rowB) => {
for (let i = 0; i < funcs.length; i += 1) {
const sortFn = funcs[i]
const desc = dirs[i] === false || dirs[i] === 'desc'
const sortInt = sortFn(rowA, rowB)
if (sortInt !== 0) {
return desc ? -sortInt : sortInt
}
}
return dirs[0] ? rowA.index - rowB.index : rowB.index - rowA.index
})
}
export function defaultGroupByFn(rows, columnId) {
return rows.reduce((prev, row, i) => {
// TODO: Might want to implement a key serializer here so
// irregular column values can still be grouped if needed?
const resKey = `${row.values[columnId]}`
prev[resKey] = Array.isArray(prev[resKey]) ? prev[resKey] : []
prev[resKey].push(row)
return prev
}, {})
}
export const mergeProps = (...groups) => {
let props = {}
groups.forEach(({ style = {}, className, ...rest } = {}) => {
props = {
...props,
...rest,
style: {
...(props.style || {}),
...style,
},
className: [props.className, className].filter(Boolean).join(' '),
}
})
if (props.className === '') {
delete props.className
}
return props
}
export const applyHooks = (hooks, initial, ...args) =>
hooks.reduce((prev, next) => {
const nextValue = next(prev, ...args)
if (typeof nextValue === 'undefined') {
throw new Error(
'React Table: A hook just returned undefined! This is not allowed.'
)
}
return nextValue
}, initial)
export const applyPropHooks = (hooks, ...args) =>
hooks.reduce((prev, next) => mergeProps(prev, next(...args)), {})
export function ensurePluginOrder(plugins, befores, pluginName, afters) {
const pluginIndex = plugins.findIndex(
plugin => plugin.pluginName === pluginName
)
if (pluginIndex === -1) {
throw new Error(`The plugin ${pluginName} was not found in the plugin list!
This usually means you need to need to name your plugin hook by setting the 'pluginName' property of the hook function, eg:
${pluginName}.pluginName = '${pluginName}'
`)
}
befores.forEach(before => {
const beforeIndex = plugins.findIndex(
plugin => plugin.pluginName === before
)
if (beforeIndex > -1 && beforeIndex > pluginIndex) {
throw new Error(
`React Table: The ${pluginName} plugin hook must be placed after the ${before} plugin hook!`
)
}
})
afters.forEach(after => {
const afterIndex = plugins.findIndex(plugin => plugin.pluginName === after)
if (afterIndex > -1 && afterIndex < pluginIndex) {
throw new Error(
`React Table: The ${pluginName} plugin hook must be placed before the ${after} plugin hook!`
)
}
})
}
export function functionalUpdate(updater, old) {
return typeof updater === 'function' ? updater(old) : updater
}
export function useGetLatest(obj) {
const ref = React.useRef()
ref.current = obj
return React.useCallback(() => ref.current, [])
}
// SSR has issues with useLayoutEffect still, so use useEffect during SSR
export const safeUseLayoutEffect =
typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect
export function useMountedLayoutEffect(fn, deps) {
const mountedRef = React.useRef(false)
safeUseLayoutEffect(() => {
if (mountedRef.current) {
fn()
}
mountedRef.current = true
// eslint-disable-next-line
}, deps)
}
export default function useAsyncDebounce(defaultFn, defaultWait = 0) {
const debounceRef = React.useRef({})
debounceRef.current.defaultFn = defaultFn
debounceRef.current.defaultWait = defaultWait
const debounce = React.useCallback(
async (
fn = debounceRef.current.defaultFn,
wait = debounceRef.current.defaultWait
) => {
if (!debounceRef.current.promise) {
debounceRef.current.promise = new Promise(resolve => {
debounceRef.current.resolve = resolve
})
}
if (debounceRef.current.timeout) {
clearTimeout(debounceRef.current.timeout)
}
debounceRef.current.timeout = setTimeout(async () => {
delete debounceRef.current.timeout
try {
debounceRef.current.resolve(await fn())
} catch (err) {
debounceRef.current.reject(err)
} finally {
delete debounceRef.current.promise
}
}, wait)
return debounceRef.current.promise
},
[]
)
return debounce
}
export function useConsumeHookGetter(hooks, hookName) {
const getter = useGetLatest(hooks[hookName])
hooks[hookName] = undefined
return getter
}

155
src/utils.js
View File

@ -1,23 +1,7 @@
import React from 'react'
import { defaultColumn } from './publicUtils'
export const actions = {
init: 'init',
}
export const reducerHandlers = {}
export const defaultColumn = {
Cell: ({ cell: { value = '' } }) => String(value),
width: 150,
minWidth: 0,
maxWidth: Number.MAX_SAFE_INTEGER,
}
// SSR has issues with useLayoutEffect still, so use useEffect during SSR
export const safeUseLayoutEffect =
typeof window !== 'undefined' && process.env.NODE_ENV === 'production'
? React.useLayoutEffect
: React.useEffect
export * from './publicUtils'
// Find the depth of the columns
export function findMaxDepth(columns, depth = 0) {
@ -29,13 +13,7 @@ export function findMaxDepth(columns, depth = 0) {
}, 0)
}
export function decorateColumn(
column,
userDefaultColumn,
parent,
depth,
index
) {
function decorateColumn(column, userDefaultColumn, parent, depth, index) {
// Apply the userDefaultColumn
column = { ...defaultColumn, ...userDefaultColumn, ...column }
@ -182,12 +160,24 @@ export function makeHeaderGroups(flatColumns, defaultColumn) {
return headerGroups.reverse()
}
const pathObjCache = new Map()
export function getBy(obj, path, def) {
if (!path) {
return obj
}
const pathObj = makePathArray(path)
const cacheKey = typeof path === 'function' ? path : JSON.stringify(path)
const pathObj =
pathObjCache.get(cacheKey) ||
(() => {
const pathObj = makePathArray(path)
pathObjCache.set(cacheKey, pathObj)
return pathObj
})()
let val
try {
val = pathObj.reduce((cursor, pathPart) => cursor[pathPart], obj)
} catch (e) {
@ -196,20 +186,6 @@ export function getBy(obj, path, def) {
return typeof val !== 'undefined' ? val : def
}
export function defaultOrderByFn(arr, funcs, dirs) {
return [...arr].sort((rowA, rowB) => {
for (let i = 0; i < funcs.length; i += 1) {
const sortFn = funcs[i]
const desc = dirs[i] === false || dirs[i] === 'desc'
const sortInt = sortFn(rowA, rowB)
if (sortInt !== 0) {
return desc ? -sortInt : sortInt
}
}
return dirs[0] ? rowA.index - rowB.index : rowB.index - rowA.index
})
}
export function getFirstDefined(...args) {
for (let i = 0; i < args.length; i += 1) {
if (typeof args[i] !== 'undefined') {
@ -218,17 +194,6 @@ export function getFirstDefined(...args) {
}
}
export function defaultGroupByFn(rows, columnId) {
return rows.reduce((prev, row, i) => {
// TODO: Might want to implement a key serializer here so
// irregular column values can still be grouped if needed?
const resKey = `${row.values[columnId]}`
prev[resKey] = Array.isArray(prev[resKey]) ? prev[resKey] : []
prev[resKey].push(row)
return prev
}, {})
}
export function getElementDimensions(element) {
const rect = element.getBoundingClientRect()
const style = window.getComputedStyle(element)
@ -276,56 +241,6 @@ function isReactComponent(component) {
return isClassComponent(component) || isFunctionComponent(component)
}
export const mergeProps = (...groups) => {
let props = {}
groups.forEach(({ style = {}, className, ...rest } = {}) => {
props = {
...props,
...rest,
style: {
...(props.style || {}),
...style,
},
className: [props.className, className].filter(Boolean).join(' '),
}
})
if (props.className === '') {
delete props.className
}
return props
}
export const applyHooks = (hooks, initial, ...args) =>
hooks.reduce((prev, next) => {
const nextValue = next(prev, ...args)
if (typeof nextValue === 'undefined') {
throw new Error(
'React Table: A hook just returned undefined! This is not allowed.'
)
}
return nextValue
}, initial)
export const applyPropHooks = (hooks, ...args) =>
hooks.reduce((prev, next) => mergeProps(prev, next(...args)), {})
export const warnUnknownProps = props => {
if (Object.keys(props).length) {
throw new Error(
`Unknown options passed to useReactTable:
${JSON.stringify(props, null, 2)}`
)
}
}
export function sum(arr) {
return arr.reduce((prev, curr) => prev + curr, 0)
}
export function isFunction(a) {
if (typeof a === 'function') {
return a
@ -350,40 +265,6 @@ export function flattenBy(columns, childKey) {
return flatColumns
}
export function ensurePluginOrder(plugins, befores, pluginName, afters) {
const pluginIndex = plugins.findIndex(
plugin => plugin.pluginName === pluginName
)
if (pluginIndex === -1) {
throw new Error(`The plugin ${pluginName} was not found in the plugin list!
This usually means you need to need to name your plugin hook by setting the 'pluginName' property of the hook function, eg:
${pluginName}.pluginName = '${pluginName}'
`)
}
befores.forEach(before => {
const beforeIndex = plugins.findIndex(
plugin => plugin.pluginName === before
)
if (beforeIndex > -1 && beforeIndex > pluginIndex) {
throw new Error(
`React Table: The ${pluginName} plugin hook must be placed after the ${before} plugin hook!`
)
}
})
afters.forEach(after => {
const afterIndex = plugins.findIndex(plugin => plugin.pluginName === after)
if (afterIndex > -1 && afterIndex < pluginIndex) {
throw new Error(
`React Table: The ${pluginName} plugin hook must be placed before the ${after} plugin hook!`
)
}
})
}
export function expandRows(
rows,
{ manualExpandedKey, expanded, expandSubRows = true }
@ -411,10 +292,6 @@ export function expandRows(
return expandedRows
}
export function functionalUpdate(updater, old) {
return typeof updater === 'function' ? updater(old) : updater
}
//
const reOpenBracket = /\[/g