diff --git a/README.md b/README.md index 8d75e6c..77fc8e2 100644 --- a/README.md +++ b/README.md @@ -260,47 +260,51 @@ React Table relies on memoization to determine when state and side effects shoul `useTable` is the root hook for React Table. To use it, pass it with an options object with at least a `columns` and `rows` value, followed by any React Table compatible hooks you want to use. -### Options +### Table Options The following options are supported via the main options object passed to `useTable(options)` -- `options: Object` - - `columns: Array` - - Required - - Must be **memoized** - - The core columns configuration object for the entire table. - - `data: Array` - - Required - - Must be **memoized** - - The data array that you want to display on the table. - - `state: TableStateTuple[stateObject, stateUpdater]` - - Optional - - Must be **memoized** table state tuple. See [`useTableState`](#usetablestate) for more information. - - The state/updater pair for the table instance. You would want to override this if you plan on controlling or hoisting table state into your own code. - - Defaults to using an internal `useTableState()` instance if not defined. - - See [Controlling and Hoisting Table State](#controlling-and-hoisting-table-state) - - `useColumns: Function` - - Optional - - This hook overrides the internal `useColumns` hooks used by `useTable`. You probably never want to override this unless you are testing or developing new features for React Table - - `useRows: Function` - - Optional - - This hook overrides the internal `useRows` hooks used by `useTable`. You probably never want to override this unless you are testing or developing new features for React Table - - `debug: Bool` - - Optional - - A flag to turn on debug mode. - - Defaults to `false` +- `columns: Array` + - Required + - Must be **memoized** + - The core columns configuration object for the entire table. + - Supports nested `columns` arrays via the `column.children` key +- `data: Array` + - Required + - Must be **memoized** + - The data array that you want to display on the table. +- `state: TableStateTuple[stateObject, stateUpdater]` + - Optional + - Must be **memoized** table state tuple. See [`useTableState`](#usetablestate) for more information. + - The state/updater pair for the table instance. You would want to override this if you plan on controlling or hoisting table state into your own code. + - Defaults to using an internal `useTableState()` instance if not defined. + - See [Controlling and Hoisting Table State](#controlling-and-hoisting-table-state) +- `useColumns: Function` + - Optional + - This hook overrides the internal `useColumns` hooks used by `useTable`. You probably never want to override this unless you are testing or developing new features for React Table +- `useRows: Function` + - Optional + - This hook overrides the internal `useRows` hooks used by `useTable`. You probably never want to override this unless you are testing or developing new features for React Table +- `debug: Bool` + - Optional + - A flag to turn on debug mode. + - Defaults to `false` -### Output +### `column` Options -- `instance` - The instance object for the React Table - - `columns: Array` - - A flat array of all final column objects computed from the original columns configuration option. - - `headerGroups: Array>` - - An array of normalized header groups, each containing a flattened array of final column objects for that row. - - `headers[] Array` - - An array of nested final column objects, similar in structure to the original columns configuration option. - - `rows: Array` - - An array of rows **materialized** from the original `data` array and `columns` passed into the table options +The following options are supported on any column object you can pass to `columns`. + +### Table Output + +- `columns: Array` + - A flat array of all final column objects computed from the original columns configuration option. +- `columns[].` +- `headerGroups: Array>` + - An array of normalized header groups, each containing a flattened array of final column objects for that row. +- `headers[] Array` + - An array of nested final column objects, similar in structure to the original columns configuration option. +- `rows: Array` + - An array of rows **materialized** from the original `data` array and `columns` passed into the table options ### Example diff --git a/examples/sorting-with-useSortBy/src/App.js b/examples/sorting-with-useSortBy/src/App.js index 96ff1ed..9e18dc3 100644 --- a/examples/sorting-with-useSortBy/src/App.js +++ b/examples/sorting-with-useSortBy/src/App.js @@ -118,7 +118,7 @@ function App() { [] ) - const data = React.useMemo(() => makeData(20), []) + const data = React.useMemo(() => makeData(100), []) return ( diff --git a/src/hooks/useTableState.js b/src/hooks/useTableState.js index 52ac612..2cc90a0 100755 --- a/src/hooks/useTableState.js +++ b/src/hooks/useTableState.js @@ -26,24 +26,24 @@ export const useTableState = ( }) } return newState - // eslint-disable-next-line react-hooks/exhaustive-deps }, [overrides, state]) const reducedSetState = React.useCallback( (updater, type) => { + if (!types[type]) { + console.info({ + stateUpdaterFn: updater, + actionType: type, + currentState: overriddenState, + }) + throw new Error('Detected an unknown table action! (Details Above)') + } return setState(old => { - if (!types[type]) { - console.info({ - stateUpdaterFn: updater, - actionType: type, - currentState: old, - }) - throw new Error('Detected an unknown table action! (Details Above)') - } const newState = updater(old) return reducer(old, newState, type) }) }, + // eslint-disable-next-line react-hooks/exhaustive-deps [reducer, setState] ) diff --git a/src/plugin-hooks/useFilters.js b/src/plugin-hooks/useFilters.js index 7bd492c..54a8590 100755 --- a/src/plugin-hooks/useFilters.js +++ b/src/plugin-hooks/useFilters.js @@ -7,6 +7,7 @@ import { addActions, actions } from '../actions' import { defaultState } from '../hooks/useTableState' defaultState.filters = {} + addActions('setFilter', 'setAllFilters') const propTypes = {