v7.0.0-rc.15

.babelrc

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

.size-snapshot.json

@@ -1,39 +1,39 @@
 {
   "dist/index.js": {
-    "bundled": 107809,
-    "minified": 51216,
-    "gzipped": 13492
+    "bundled": 112754,
+    "minified": 52324,
+    "gzipped": 13765
   },
   "dist/index.es.js": {
-    "bundled": 106966,
-    "minified": 50466,
-    "gzipped": 13339,
+    "bundled": 111817,
+    "minified": 51488,
+    "gzipped": 13599,
     "treeshaked": {
       "rollup": {
         "code": 80,
         "import_statements": 21
       },
       "webpack": {
-        "code": 8902
+        "code": 8484
       }
     }
   },
   "dist\\index.js": {
-    "bundled": 105386,
-    "minified": 49565,
-    "gzipped": 13008
+    "bundled": 104977,
+    "minified": 48560,
+    "gzipped": 13057
   },
   "dist\\index.es.js": {
-    "bundled": 104543,
-    "minified": 48815,
-    "gzipped": 12856,
+    "bundled": 104090,
+    "minified": 47770,
+    "gzipped": 12900,
     "treeshaked": {
       "rollup": {
         "code": 80,
         "import_statements": 21
       },
       "webpack": {
-        "code": 8444
+        "code": 8227
       }
     }
   }

CHANGELOG.md

@@ -1,3 +1,52 @@
+## 7.0.0-rc.15
+
+- Added `useGlobalFilter` hook for performing table-wide filtering
+- Filter function signature has changed to supply an array of column IDs (to support both the tranditional single column style and the new multi-column search style introduced with `useGlobalFilter`).
+- Removed the `column` parameter from the filter function signature as it was unused and no longer made sense with the array of IDs change above.
+- Updated the `filtering` example to use a global filter in addition to the column filters
+
+## 7.0.0-rc.14
+
+- Changed the function signature for all propGetter hooks to accept a single object of named meta properties instead of a variable length of meta arguments. The user props object has also been added as a property to all prop getters. For example, `hooks.getRowProps.push((props, instance, row) => [...])` is now written `hooks.getRowProps.push((props, { instance, row, userProps }) => [...])`
+- Changed the function signature for all reduceHooks accept a single object of named meta properties instead of a variable length of meta arguments. For example, `hooks.flatColumns.push((flatColumns, instance) => flatColumns)` is now written `hooks.flatColumns.push((flatColumns, { instance }) => flatColumns)`
+- Changed the function signature for all loopHooks accept a single object of named meta properties instead of a variable length of meta arguments. For example, `hooks.prepareRow.push((row, instance) => void)` is now written `hooks.prepareRow.push((row { instance }) => void)`
+
+## 7.0.0-rc.13
+
+- Added the `useControlledState` hook for plugins to manipulate the final state of the table similar to how users can
+- Fixed an issue where column hiding wasn't working properly.
+
+## 7.0.0-rc.12
+
+- Fixed an issue where removing a grouped column would result in a crash
+
+## 7.0.0-rc.11
+
+- Fixed an issue where plugins using the `columns` hook were not getting decorated properly
+- Added back a new rendition of the `useFlexLayout` plugin and accompanying example.
+- Fixed all reset actions to use the initial state passed into the table, then fall back to the default initial state for the hook
+
+## 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

README.md

@@ -182,6 +182,8 @@ This library is being built and maintained by me, @tannerlinsley and I am always
         <li>Robert Tajnšek</li>
         <li>Pekka Tapani</li>
         <li>Eric Lanehart (@pushred)</li>
+        <li>Anish P Patel (@anishpatelyaadada)</li>
+        <li>Alin Porumb (@alinporumb)</li>
         </ul>
       </td>
       <td>

docs/api/README.md

@@ -20,6 +20,7 @@ React Table is essentially a compatible collection of **custom React hooks**:
   - Layout Hooks
     - [`useBlockLayout`](./useBlockLayout.md)
     - [`useAbsoluteLayout`](./useAbsoluteLayout.md)
+    - [`useFlexLayout`](./useFlexLayout.md)
     - [`useResizeColumns`](./useResizeColumns.md)
 - 3rd Party Plugin Hooks
   - Want your custom plugin hook listed here? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)

docs/api/useAbsoluteLayout.md

@@ -25,6 +25,12 @@
   - **Usage Required**
   - This core prop getter is required to to enable absolute layout for rows cells
 
+### HeaderGroup Properties
+
+- `getHeaderGroupProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for headers
+
 ### Header Properties
 
 - `getHeaderProps`

docs/api/useBlockLayout.md

@@ -19,6 +19,12 @@
   - **Usage Required**
   - This core prop getter is required to to enable absolute layout for rows cells
 
+### HeaderGroup Properties
+
+- `getHeaderGroupProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for headers
+
 ### Header Properties
 
 - `getHeaderProps`

docs/api/useColumnOrder.md

@@ -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
 

docs/api/useExpanded.md

@@ -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
 

docs/api/useFilters.md

@@ -3,17 +3,15 @@
 - Plugin Hook
 - Optional
 
-`useFilters` is the hook that implements **row filtering**.
+`useFilters` is the hook that implements **row filtering** and can even be used in conjunction with `useGlobalFilter`. It's also important to note that this hook can be used either **before or after** `useGlobalFilter`, depending on the performance characteristics you want to code for.
 
 ### Table Options
 
 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)

docs/api/useFlexLayout.md

@@ -0,0 +1,43 @@
+# `useFlexLayout`
+
+- Plugin Hook
+- Optional
+
+`useFlexLayout` is a plugin hook that adds support for headers and cells to be rendered as `inline-block` `div`s (or other non-table elements) with `width` being used as the flex-basis and flex-grow. This hook becomes useful when implementing both virtualized and resizable tables that must also be able to stretch to fill all available space.
+
+**NOTE:** Although no additional options are needed for this plugin to work, the core column options `width`, `minWidth` and `maxWidth` are used to calculate column and cell widths and must be set:
+
+- `minWidth` is only used to limit column resizing. It does not define the minimum width for a column.
+- `width` is used as both the `flex-basis` and `flex-grow`. This means that it essentially acts as both the minimum width and flex-ratio of the column.
+- `maxWidth` is only used to limit column resizing. It does not define the maximum width for a column.
+
+[See Column Options](#column-options) for more information on these options.
+
+### Row Properties
+
+- `getRowProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for rows
+
+### Cell Properties
+
+- `getCellProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for rows cells
+
+### HeaderGroup Properties
+
+- `getHeaderGroupProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for headers
+
+### Header Properties
+
+- `getHeaderProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for headers
+
+### Example (Full Width Resizable Table)
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table)

docs/api/useGlobalFilter.md

@@ -0,0 +1,52 @@
+# `useGlobalFilter`
+
+- Plugin Hook
+- Optional
+
+`useGlobalFilter` is the hook that implements **global row filtering** and can even be used in conjunction with `useFilters`. It's also important to note that this hook can be used either **before or after** `useFilters`, depending on the performance characteristics you want to code for.
+
+### Table Options
+
+The following options are supported via the main options object passed to `useTable(options)`
+
+- `initialState.globalFilter: any`
+  - Must be **memoized**
+  - 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.
+- `globalFilter: String | Function`
+  - Optional
+  - Defaults to `text`
+  - The resolved function from the this string/function will be used to filter the table'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**
+- `manualGlobalFilter: 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)
+- `filterTypes: Object<filterKey: filterType>`
+  - Must be **memoized**
+  - Allows overriding or adding additional filter types for the table to use. If the globalFilter 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
+- `autoResetGlobalFilter: Boolean`
+  - Defaults to `true`
+  - When `true`, the `globalFilter` 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)
+
+### Instance Properties
+
+The following values are provided to the table `instance`:
+
+- `rows: Array<Row>`
+  - An array of **filtered** rows.
+- `preGlobalFilteredRows: 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.
+- `setGlobalFilter: Function(columnId, filterValue) => void`
+  - An instance-level function used to update the filter value for a specific column.
+
+### 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)

docs/api/useGroupBy.md

@@ -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)

docs/api/usePagination.md

@@ -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
 

docs/api/useRowSelect.md

@@ -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)

docs/api/useRowState.md

@@ -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.

docs/api/useSortBy.md

@@ -14,12 +14,10 @@
 
 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`
+- `manualSortBy: 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`
   - Disables sorting for every column in the entire table.

docs/api/useTable.md

@@ -25,7 +25,7 @@ The following options are supported via the main options object passed to `useTa
   - Optional
   - The initial state object for hidden columns
   - If a column's ID is contained in this array, it will be hidden
-- `reducer: Function(newState, action, prevState) => newState`
+- `stateReducer: Function(newState, action, prevState) => newState`
   - Optional
   - With every action that is dispatched to the table's internal `React.useReducer` instance, this reducer is called and is allowed to modify the final state object for updating.
   - It is passed the `newState`, `action`, and `prevState` and is expected to either return the `newState` or a modified version of the `newState`
@@ -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' }`

docs/examples.md

@@ -16,6 +16,9 @@
   - Grouping
     - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/grouping)
     - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/grouping)
+  - Grouping (Single Column)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/grouping-column)
+    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/grouping-column)
   - Pagination
     - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination)
     - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination)
@@ -46,6 +49,12 @@
   - Row DnD
     - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-dnd)
     - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-dnd)
+  - Full Width Table (Table Elements with collapsible content)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/full-width-table)
+    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-table)
+  - Full Width Resizable Table (via `useFlexLayout`)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table)
+    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table)
 - **Complex**
   - The "Kitchen Sink"
     - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/kitchen-sink)

examples/column-hiding/src/App.js

@@ -71,8 +71,10 @@ function Table({ columns, data }) {
         </div>
         {flatColumns.map(column => (
           <div key={column.id}>
-            <input type="checkbox" {...column.getToggleHiddenProps()} />{' '}
-            {column.id}
+            <label>
+              <input type="checkbox" {...column.getToggleHiddenProps()} />{' '}
+              {column.id}
+            </label>
           </div>
         ))}
         <br />

examples/expanding/src/App.js

@@ -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>
     </>
   )

examples/filtering/src/App.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { useTable, useFilters } from 'react-table'
+import { useTable, useFilters, useGlobalFilter } from 'react-table'
 // A great library for fuzzy filtering/sorting items
 import matchSorter from 'match-sorter'
 
@@ -35,6 +35,32 @@ const Styles = styled.div`
   }
 `
 
+// Define a default UI for filtering
+function GlobalFilter({
+  preGlobalFilteredRows,
+  globalFilter,
+  setGlobalFilter,
+}) {
+  const count = preGlobalFilteredRows.length
+
+  return (
+    <span>
+      Search:{' '}
+      <input
+        value={globalFilter || ''}
+        onChange={e => {
+          setGlobalFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
+        }}
+        placeholder={`${count} records...`}
+        style={{
+          fontSize: '1.1rem',
+          border: '0',
+        }}
+      />
+    </span>
+  )
+}
+
 // Define a default UI for filtering
 function DefaultColumnFilter({
   column: { filterValue, preFilteredRows, setFilter },
@@ -217,6 +243,9 @@ function Table({ columns, data }) {
     rows,
     prepareRow,
     state,
+    flatColumns,
+    preGlobalFilteredRows,
+    setGlobalFilter,
   } = useTable(
     {
       columns,
@@ -224,7 +253,8 @@ function Table({ columns, data }) {
       defaultColumn, // Be sure to pass the defaultColumn option
       filterTypes,
     },
-    useFilters // useFilters!
+    useFilters, // useFilters!
+    useGlobalFilter // useGlobalFilter!
   )
 
   // We don't want to render all of the rows for this example, so cap
@@ -233,11 +263,6 @@ function Table({ columns, data }) {
 
   return (
     <>
-      <div>
-        <pre>
-          <code>{JSON.stringify(state.filters, null, 2)}</code>
-        </pre>
-      </div>
       <table {...getTableProps()}>
         <thead>
           {headerGroups.map(headerGroup => (
@@ -251,25 +276,41 @@ function Table({ columns, data }) {
               ))}
             </tr>
           ))}
+          <tr>
+            <th
+              colSpan={flatColumns.length}
+              style={{
+                textAlign: 'left',
+              }}
+            >
+              <GlobalFilter
+                preGlobalFilteredRows={preGlobalFilteredRows}
+                globalFilter={state.globalFilter}
+                setGlobalFilter={setGlobalFilter}
+              />
+            </th>
+          </tr>
         </thead>
         <tbody {...getTableBodyProps()}>
-          {firstPageRows.map(
-            (row, i) => {
-              prepareRow(row);
-              return (
-                <tr {...row.getRowProps()}>
-                  {row.cells.map(cell => {
-                    return (
-                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
-                    )
-                  })}
-                </tr>
-              )}
-          )}
+          {firstPageRows.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>
+      <div>
+        <pre>
+          <code>{JSON.stringify(state.filters, null, 2)}</code>
+        </pre>
+      </div>
     </>
   )
 }

examples/filtering/yarn.lock

@@ -8094,10 +8094,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.14"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-rc.14.tgz#bb4171fbdd56d78dd5f6b9e18694a36c00bd6261"
+  integrity sha512-9NyzAE0kLH8HA+DK86ynxVDxniO5ZdggAqI7nDKauWXQGVYNFId8+JJSescJ2vwP9nR2JKyCEDG9c+CjIaLNkA==
 
 react@^16.8.6:
   version "16.8.6"

examples/full-width-resizable-table/.babelrc

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

examples/full-width-resizable-table/.env

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

examples/full-width-resizable-table/.eslintrc

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

examples/full-width-resizable-table/.gitignore

@@ -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*

examples/full-width-resizable-table/.rescriptsrc.js

@@ -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,
+]

examples/full-width-resizable-table/README.md

@@ -0,0 +1,4 @@
+# Full Width Resizable Table (via useFlexLayout)
+
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table)
+- `yarn` and `yarn start` to run and edit the example

examples/full-width-resizable-table/package.json

@@ -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"
+    ]
+  }
+}

examples/full-width-resizable-table/public/index.html

@@ -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>

examples/full-width-resizable-table/public/manifest.json

@@ -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"
+}

examples/full-width-resizable-table/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "infiniteLoopProtection": false
+}

examples/full-width-resizable-table/src/App.js

@@ -0,0 +1,193 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useResizeColumns, useFlexLayout } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  .table {
+    ${'' /* These styles are suggested for the table fill all available space in its containing element */}
+    display: block;
+    ${'' /* These styles are required for a horizontaly scrollable table overflow */}
+    overflow: auto;
+
+    border-spacing: 0;
+    border: 1px solid black;
+
+    .thead {
+      ${'' /* These styles are required for a scrollable body to align with the header properly */}
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    .tbody {
+      ${'' /* These styles are required for a scrollable table body */}
+      overflow-y: scroll;
+      overflow-x: hidden;
+      height: 250px;
+    }
+
+    .tr {
+      :last-child {
+        .td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    .th,
+    .td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+
+      ${'' /* In this example we use an absolutely position resizer,
+       so this is required. */}
+      position: relative;
+
+      :last-child {
+        border-right: 0;
+      }
+
+      .resizer {
+        display: inline-block;
+        background: blue;
+        width: 10px;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 1;
+        ${'' /* prevents from scrolling while dragging on touch devices */}
+        touch-action:none;
+
+        &.isResizing {
+          background: red;
+        }
+      }
+    }
+  }
+`
+
+function Table({ columns, data }) {
+  const defaultColumn = React.useMemo(
+    () => ({
+      // When using the useFlexLayout:
+      minWidth: 30, // minWidth is only used as a limit for resizing
+      width: 150, // width is used for both the flex-basis and flex-grow
+      maxWidth: 200, // maxWidth is only used as a limit for resizing
+    }),
+    []
+  )
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+    },
+    useResizeColumns,
+    useFlexLayout
+  )
+
+  return (
+    <div {...getTableProps()} className="table">
+      <div>
+        {headerGroups.map(headerGroup => (
+          <div {...headerGroup.getHeaderGroupProps()} className="tr">
+            {headerGroup.headers.map(column => (
+              <div {...column.getHeaderProps()} className="th">
+                {column.render('Header')}
+                {/* Use column.getResizerProps to hook up the events correctly */}
+                <div
+                  {...column.getResizerProps()}
+                  className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
+                />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      <div {...getTableBodyProps()} className="tbody">
+        {rows.map((row, i) => {
+          prepareRow(row)
+          return (
+            <div {...row.getRowProps()} className="tr">
+              {row.cells.map(cell => {
+                return (
+                  <div {...cell.getCellProps()} className="td">
+                    {cell.render('Cell')}
+                  </div>
+                )
+              })}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+            width: 50,
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+            width: 50,
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(20), [])
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
+
+export default App

examples/full-width-resizable-table/src/App.test.js

@@ -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)
+})

examples/full-width-resizable-table/src/index.css

@@ -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;
+}

examples/full-width-resizable-table/src/index.js

@@ -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'))

examples/full-width-resizable-table/src/makeData.js

@@ -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()
+}

examples/grouping-column/.babelrc

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

examples/grouping-column/.env

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

examples/grouping-column/.eslintrc

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

examples/grouping-column/.gitignore

@@ -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*

examples/grouping-column/.rescriptsrc.js

@@ -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,
+]

examples/grouping-column/README.md

@@ -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

examples/grouping-column/package.json

@@ -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"
+    ]
+  }
+}

examples/grouping-column/public/index.html

@@ -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>

examples/grouping-column/public/manifest.json

@@ -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"
+}

examples/grouping-column/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "infiniteLoopProtection": false
+}

examples/grouping-column/src/App.js

@@ -0,0 +1,320 @@
+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 useControlledState(state, { instance }) {
+  return React.useMemo(() => {
+    if (state.groupBy.length) {
+      return {
+        ...state,
+        hiddenColumns: [...state.hiddenColumns, ...state.groupBy].filter(
+          (d, i, all) => all.indexOf(d) === i
+        ),
+      }
+    }
+    return state
+  }, [state])
+}
+
+function Table({ columns, data }) {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state,
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    useGroupBy,
+    useExpanded,
+    // Our custom plugin to add the expander column
+    hooks => {
+      hooks.useControlledState.push(useControlledState)
+      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,
+        ]
+      })
+    }
+  )
+
+  // 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({ state }, 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

examples/grouping-column/src/App.test.js

@@ -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)
+})

examples/grouping-column/src/index.css

@@ -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;
+}

examples/grouping-column/src/index.js

@@ -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'))

examples/grouping-column/src/makeData.js

@@ -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()
+}

examples/kitchen-sink-controlled/src/App.js

@@ -306,7 +306,32 @@ function Table({ columns, data, updateMyData, skipPageReset }) {
     useSortBy,
     useExpanded,
     usePagination,
-    useRowSelect
+    useRowSelect,
+    hooks => {
+      hooks.flatColumns.push(columns => [
+        {
+          id: 'selection',
+          // Make this column a groupByBoundary. This ensures that groupBy columns
+          // are placed after it
+          groupByBoundary: true,
+          // The header can use the table's getToggleAllRowsSelectedProps method
+          // to render a checkbox
+          Header: ({ getToggleAllRowsSelectedProps }) => (
+            <div>
+              <input type="checkbox" {...getToggleAllRowsSelectedProps()} />
+            </div>
+          ),
+          // The cell can use the individual row's getToggleRowSelectedProps method
+          // to the render a checkbox
+          Cell: ({ row }) => (
+            <div>
+              <input type="checkbox" {...row.getToggleRowSelectedProps()} />
+            </div>
+          ),
+        },
+        ...columns,
+      ])
+    }
   )
 
   // Render the UI for your table
@@ -433,9 +458,9 @@ function Table({ columns, data, updateMyData, skipPageReset }) {
               canNextPage,
               canPreviousPage,
               groupBy,
-              expanded,
+              expanded: expanded,
               filters,
-              selectedRowIds: [...selectedRowIds.values()],
+              selectedRowIds: selectedRowIds,
             },
             null,
             2
@@ -478,26 +503,6 @@ function roundedMedian(values) {
 function App() {
   const columns = React.useMemo(
     () => [
-      {
-        id: 'selection',
-        // Make this column a groupByBoundary. This ensures that groupBy columns
-        // are placed after it
-        groupByBoundary: true,
-        // The header can use the table's getToggleAllRowsSelectedProps method
-        // to render a checkbox
-        Header: ({ getToggleAllRowsSelectedProps }) => (
-          <div>
-            <input type="checkbox" {...getToggleAllRowsSelectedProps()} />
-          </div>
-        ),
-        // The cell can use the individual row's getToggleRowSelectedProps method
-        // to the render a checkbox
-        Cell: ({ row }) => (
-          <div>
-            <input type="checkbox" {...row.getToggleRowSelectedProps()} />
-          </div>
-        ),
-      },
       {
         Header: 'Name',
         columns: [

examples/kitchen-sink/src/App.js

@@ -305,7 +305,35 @@ function Table({ columns, data, updateMyData, skipReset }) {
     useSortBy,
     useExpanded,
     usePagination,
-    useRowSelect
+    useRowSelect,
+    // Here we will use a plugin to add our selection column
+    hooks => {
+      hooks.flatColumns.push(columns => {
+        return [
+          {
+            id: 'selection',
+            // Make this column a groupByBoundary. This ensures that groupBy columns
+            // are placed after it
+            groupByBoundary: true,
+            // The header can use the table's getToggleAllRowsSelectedProps method
+            // to render a checkbox
+            Header: ({ getToggleAllRowsSelectedProps }) => (
+              <div>
+                <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
+              </div>
+            ),
+            // The cell can use the individual row's getToggleRowSelectedProps method
+            // to the render a checkbox
+            Cell: ({ row }) => (
+              <div>
+                <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
+              </div>
+            ),
+          },
+          ...columns,
+        ]
+      })
+    }
   )
 
   // Render the UI for your table
@@ -432,9 +460,9 @@ function Table({ columns, data, updateMyData, skipReset }) {
               canNextPage,
               canPreviousPage,
               groupBy,
-              expanded,
+              expanded: expanded,
               filters,
-              selectedRowIds: [...selectedRowIds.values()],
+              selectedRowIds: selectedRowIds,
             },
             null,
             2
@@ -494,26 +522,6 @@ const IndeterminateCheckbox = React.forwardRef(
 function App() {
   const columns = React.useMemo(
     () => [
-      {
-        id: 'selection',
-        // Make this column a groupByBoundary. This ensures that groupBy columns
-        // are placed after it
-        groupByBoundary: true,
-        // The header can use the table's getToggleAllRowsSelectedProps method
-        // to render a checkbox
-        Header: ({ getToggleAllRowsSelectedProps }) => (
-          <div>
-            <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
-          </div>
-        ),
-        // The cell can use the individual row's getToggleRowSelectedProps method
-        // to the render a checkbox
-        Cell: ({ row }) => (
-          <div>
-            <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
-          </div>
-        ),
-      },
       {
         Header: 'Name',
         columns: [

examples/row-selection/src/App.js

@@ -65,7 +65,30 @@ function Table({ columns, data }) {
       columns,
       data,
     },
-    useRowSelect
+    useRowSelect,
+    hooks => {
+      hooks.flatColumns.push(columns => [
+        // Let's make a column for selection
+        {
+          id: 'selection',
+          // The header can use the table's getToggleAllRowsSelectedProps method
+          // to render a checkbox
+          Header: ({ getToggleAllRowsSelectedProps }) => (
+            <div>
+              <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
+            </div>
+          ),
+          // The cell can use the individual row's getToggleRowSelectedProps method
+          // to the render a checkbox
+          Cell: ({ row }) => (
+            <div>
+              <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
+            </div>
+          ),
+        },
+        ...columns,
+      ])
+    }
   )
 
   // Render the UI for your table
@@ -94,12 +117,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
               ),
@@ -116,24 +139,6 @@ function Table({ columns, data }) {
 function App() {
   const columns = React.useMemo(
     () => [
-      // Let's make a column for selection
-      {
-        id: 'selection',
-        // The header can use the table's getToggleAllRowsSelectedProps method
-        // to render a checkbox
-        Header: ({ getToggleAllRowsSelectedProps }) => (
-          <div>
-            <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
-          </div>
-        ),
-        // The cell can use the individual row's getToggleRowSelectedProps method
-        // to the render a checkbox
-        Cell: ({ row }) => (
-          <div>
-            <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
-          </div>
-        ),
-      },
       {
         Header: 'Name',
         columns: [

examples/streaming-rows/.babelrc

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

examples/streaming-rows/.env

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

examples/streaming-rows/.eslintrc

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

examples/streaming-rows/.gitignore

@@ -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*

examples/streaming-rows/.rescriptsrc.js

@@ -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,
+]

examples/streaming-rows/README.md

@@ -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/streaming-rows)
+- `yarn` and `yarn start` to run and edit the example

examples/streaming-rows/package.json

@@ -0,0 +1,36 @@
+{
+  "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",
+    "react-window": "^1.8.5",
+    "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"
+    ]
+  }
+}

examples/streaming-rows/public/index.html

@@ -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>

examples/streaming-rows/public/manifest.json

@@ -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"
+}

examples/streaming-rows/sandbox.config.json

@@ -0,0 +1,5 @@
+{
+  "infiniteLoopProtection": false,
+  "hardReloadOnChange": false,
+  "view": "browser"
+}

examples/streaming-rows/src/App.js

@@ -0,0 +1,217 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useBlockLayout, useRowSelect } from 'react-table'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  .table {
+    display: inline-block;
+    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;
+      }
+    }
+  }
+`
+
+let sourceGridData = []
+const updateRateMS = 16
+
+function Table({ columns }) {
+  // Use the state and functions returned from useTable to build your UI
+
+  const [data, setData] = React.useState([])
+  const timerRunning = React.useRef()
+
+  if (!timerRunning.current) {
+    timerRunning.current = true
+    setInterval(() => {
+      sourceGridData.push(makeRow(sourceGridData.length))
+      let newData = [...sourceGridData]
+
+      setData(newData)
+    }, updateRateMS)
+  }
+
+  const defaultColumn = React.useMemo(
+    () => ({
+      width: 150,
+    }),
+    []
+  )
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    toggleAllRowsSelected,
+    prepareRow,
+    state,
+  } = useTable(
+    {
+      autoResetSelectedRows: false,
+      columns,
+      data,
+      defaultColumn,
+    },
+    useBlockLayout,
+    useRowSelect
+  )
+
+  // Render the UI for your table
+  return (
+    <>
+      <div {...getTableProps()} className="table">
+        <div className="thead">
+          {headerGroups.map(headerGroup => (
+            <div {...headerGroup.getHeaderGroupProps()} className="tr">
+              {headerGroup.headers.map(column => (
+                <div {...column.getHeaderProps()} className="th">
+                  {column.render('Header')}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+
+        <div {...getTableBodyProps()}>
+          {rows.slice(0, 10).map(row => {
+            prepareRow(row)
+            return (
+              <div
+                {...row.getRowProps({
+                  style: {
+                    backgroundColor: row.isSelected ? 'green' : '',
+                  },
+                  onClick: e => {
+                    toggleAllRowsSelected(false)
+                    row.toggleRowSelected()
+                  },
+                })}
+                className="tr"
+              >
+                {row.cells.map(cell => {
+                  return (
+                    <div {...cell.getCellProps()} className="td">
+                      {cell.render('Cell')}
+                    </div>
+                  )
+                })}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+      <pre>
+        <code>{JSON.stringify(state, null, 2)}</code>
+      </pre>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'ID',
+        accessor: 'id',
+      },
+      {
+        Header: 'Name',
+        accessor: 'name',
+      },
+      {
+        Header: 'age',
+        accessor: 'age',
+      },
+      {
+        Header: 'gender',
+        accessor: 'gender',
+      },
+      {
+        Header: 'height',
+        accessor: 'height',
+      },
+      {
+        Header: 'color',
+        accessor: 'col',
+      },
+      {
+        Header: 'dob',
+        accessor: 'dob',
+      },
+    ],
+    []
+  )
+
+  return (
+    <Styles>
+      <Table columns={columns} />
+    </Styles>
+  )
+}
+
+function makeRow(id) {
+  let r = Math.floor(Math.random() * 3) + 1
+  if (r === 0) {
+    return {
+      Id: id,
+      name: 'Billy Bob',
+      age: 12,
+      gender: 'male',
+      height: 95,
+      col: 'red',
+      dob: '14/05/2010',
+    }
+  } else if (r === 1) {
+    return {
+      Id: id,
+      name: 'Jenny Jane',
+      age: 42,
+      gender: 'female',
+      height: 142,
+      col: 'blue',
+      dob: '30/07/1954',
+    }
+  } else if (r === 2) {
+    return {
+      Id: id,
+      name: 'Steve McAlistaire',
+      age: 35,
+      gender: 'male',
+      height: 176,
+      col: 'green',
+      dob: '04/11/1982',
+    }
+  } else if (r === 3) {
+    return {
+      Id: id,
+      name: 'Jeff Joe',
+      age: 35,
+      gender: 'male',
+      height: 176,
+      col: 'green',
+      dob: '04/11/1982',
+    }
+  }
+}
+export default App

examples/streaming-rows/src/App.test.js

@@ -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)
+})

examples/streaming-rows/src/index.css

@@ -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;
+}

examples/streaming-rows/src/index.js

@@ -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'))

examples/streaming-rows/src/makeData.js

@@ -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()
+}

examples/sub-components/src/App.js

@@ -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>
@@ -74,8 +74,8 @@ function Table({ columns: userColumns, data, renderRowSubComponent }) {
             prepareRow(row)
             return (
               // Use a React.Fragment here so the table markup is still valid
-              <>
-                <tr {...row.getRowProps()}>
+              <React.Fragment {...row.getRowProps()}>
+                <tr>
                   {row.cells.map(cell => {
                     return (
                       <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
@@ -100,7 +100,7 @@ function Table({ columns: userColumns, data, renderRowSubComponent }) {
                     </td>
                   </tr>
                 ) : null}
-              </>
+              </React.Fragment>
             )
           })}
         </tbody>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-rc.9",
+  "version": "7.0.0-rc.15",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

sizes-cjs.json

@@ -1,181 +1,11 @@
 [
   {
-    "timestamp": 1576007021431,
+    "timestamp": 1576690899177,
     "files": [
       {
         "filename": "index.js",
-        "size": 22643,
-        "delta": -7
-      }
-    ]
-  },
-  {
-    "timestamp": 1576004320856,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 22650,
-        "delta": 30
-      }
-    ]
-  },
-  {
-    "timestamp": 1576003432935,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 22620,
-        "delta": 652
-      }
-    ]
-  },
-  {
-    "timestamp": 1575985310396,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21968,
-        "delta": 323
-      }
-    ]
-  },
-  {
-    "timestamp": 1575910923566,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21645,
-        "delta": 56
-      }
-    ]
-  },
-  {
-    "timestamp": 1575859193604,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21589,
-        "delta": 563
-      }
-    ]
-  },
-  {
-    "timestamp": 1575690248030,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21026,
-        "delta": 1
-      }
-    ]
-  },
-  {
-    "timestamp": 1575675308812,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21025,
-        "delta": -421
-      }
-    ]
-  },
-  {
-    "timestamp": 1575620433902,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21446,
-        "delta": -1
-      }
-    ]
-  },
-  {
-    "timestamp": 1575607054721,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21447,
-        "delta": 26
-      }
-    ]
-  },
-  {
-    "timestamp": 1575605755429,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21421,
-        "delta": 170
-      }
-    ]
-  },
-  {
-    "timestamp": 1575579354616,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21251,
-        "delta": 6
-      }
-    ]
-  },
-  {
-    "timestamp": 1575578830463,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21245,
-        "delta": 652
-      }
-    ]
-  },
-  {
-    "timestamp": 1575555421868,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 20593,
-        "delta": 24
-      }
-    ]
-  },
-  {
-    "timestamp": 1575517726476,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 20569,
-        "delta": 58
-      }
-    ]
-  },
-  {
-    "timestamp": 1575391465436,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 20511,
-        "delta": 1
-      }
-    ]
-  },
-  {
-    "timestamp": 1575345020328,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 20510,
-        "delta": 5
-      }
-    ]
-  },
-  {
-    "timestamp": 1575331661254,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 20505,
-        "delta": 20505
+        "size": 22438,
+        "delta": 35
       }
     ]
   }

sizes-es.json

@@ -1,171 +1,11 @@
 [
   {
-    "timestamp": 1576007027792,
+    "timestamp": 1576690906689,
     "files": [
       {
         "filename": "index.es.js",
-        "size": 22461,
-        "delta": -7
-      }
-    ]
-  },
-  {
-    "timestamp": 1576004327554,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 22468,
-        "delta": 30
-      }
-    ]
-  },
-  {
-    "timestamp": 1576003439933,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 22438,
-        "delta": 656
-      }
-    ]
-  },
-  {
-    "timestamp": 1575985317929,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21782,
-        "delta": 324
-      }
-    ]
-  },
-  {
-    "timestamp": 1575910931774,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21458,
-        "delta": 55
-      }
-    ]
-  },
-  {
-    "timestamp": 1575859200604,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21403,
-        "delta": 561
-      }
-    ]
-  },
-  {
-    "timestamp": 1575675317538,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 20842,
-        "delta": -383
-      }
-    ]
-  },
-  {
-    "timestamp": 1575620442742,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21225,
-        "delta": -1
-      }
-    ]
-  },
-  {
-    "timestamp": 1575607059725,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21226,
-        "delta": 26
-      }
-    ]
-  },
-  {
-    "timestamp": 1575605764195,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21200,
-        "delta": 170
-      }
-    ]
-  },
-  {
-    "timestamp": 1575579366180,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21030,
-        "delta": 7
-      }
-    ]
-  },
-  {
-    "timestamp": 1575578837727,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21023,
-        "delta": 575
-      }
-    ]
-  },
-  {
-    "timestamp": 1575555429414,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 20448,
-        "delta": 21
-      }
-    ]
-  },
-  {
-    "timestamp": 1575517715056,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 20427,
-        "delta": 59
-      }
-    ]
-  },
-  {
-    "timestamp": 1575391457318,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 20368,
-        "delta": -1
-      }
-    ]
-  },
-  {
-    "timestamp": 1575345027852,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 20369,
-        "delta": 4
-      }
-    ]
-  },
-  {
-    "timestamp": 1575331668355,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 20365,
-        "delta": 20365
+        "size": 22235,
+        "delta": 33
       }
     ]
   }

src/filterTypes.js

@@ -1,79 +1,93 @@
-export const text = (rows, id, filterValue) => {
+export const text = (rows, ids, filterValue) => {
   rows = rows.filter(row => {
-    const rowValue = row.values[id]
-    return String(rowValue)
-      .toLowerCase()
-      .includes(String(filterValue).toLowerCase())
+    return ids.some(id => {
+      const rowValue = row.values[id]
+      return String(rowValue)
+        .toLowerCase()
+        .includes(String(filterValue).toLowerCase())
+    })
   })
   return rows
 }
 
 text.autoRemove = val => !val
 
-export const exactText = (rows, id, filterValue) => {
+export const exactText = (rows, ids, filterValue) => {
   return rows.filter(row => {
-    const rowValue = row.values[id]
-    return rowValue !== undefined
-      ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase()
-      : true
+    return ids.some(id => {
+      const rowValue = row.values[id]
+      return rowValue !== undefined
+        ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase()
+        : true
+    })
   })
 }
 
 exactText.autoRemove = val => !val
 
-export const exactTextCase = (rows, id, filterValue) => {
+export const exactTextCase = (rows, ids, filterValue) => {
   return rows.filter(row => {
-    const rowValue = row.values[id]
-    return rowValue !== undefined
-      ? String(rowValue) === String(filterValue)
-      : true
+    return ids.some(id => {
+      const rowValue = row.values[id]
+      return rowValue !== undefined
+        ? String(rowValue) === String(filterValue)
+        : true
+    })
   })
 }
 
 exactTextCase.autoRemove = val => !val
 
-export const includes = (rows, id, filterValue) => {
+export const includes = (rows, ids, filterValue) => {
   return rows.filter(row => {
-    const rowValue = row.values[id]
-    return filterValue.includes(rowValue)
+    return ids.some(id => {
+      const rowValue = row.values[id]
+      return filterValue.includes(rowValue)
+    })
   })
 }
 
 includes.autoRemove = val => !val || !val.length
 
-export const includesAll = (rows, id, filterValue) => {
+export const includesAll = (rows, ids, filterValue) => {
   return rows.filter(row => {
-    const rowValue = row.values[id]
-    return (
-      rowValue &&
-      rowValue.length &&
-      filterValue.every(val => rowValue.includes(val))
-    )
+    return ids.some(id => {
+      const rowValue = row.values[id]
+      return (
+        rowValue &&
+        rowValue.length &&
+        filterValue.every(val => rowValue.includes(val))
+      )
+    })
   })
 }
 
 includesAll.autoRemove = val => !val || !val.length
 
-export const exact = (rows, id, filterValue) => {
+export const exact = (rows, ids, filterValue) => {
   return rows.filter(row => {
-    const rowValue = row.values[id]
-    return rowValue === filterValue
+    return ids.some(id => {
+      const rowValue = row.values[id]
+      return rowValue === filterValue
+    })
   })
 }
 
 exact.autoRemove = val => typeof val === 'undefined'
 
-export const equals = (rows, id, filterValue) => {
+export const equals = (rows, ids, filterValue) => {
   return rows.filter(row => {
-    const rowValue = row.values[id]
-    // eslint-disable-next-line eqeqeq
-    return rowValue == filterValue
+    return ids.some(id => {
+      const rowValue = row.values[id]
+      // eslint-disable-next-line eqeqeq
+      return rowValue == filterValue
+    })
   })
 }
 
 equals.autoRemove = val => val == null
 
-export const between = (rows, id, filterValue) => {
+export const between = (rows, ids, filterValue) => {
   let [min, max] = filterValue || []
 
   min = typeof min === 'number' ? min : -Infinity
@@ -86,8 +100,10 @@ export const between = (rows, id, filterValue) => {
   }
 
   return rows.filter(row => {
-    const rowValue = row.values[id]
-    return rowValue >= min && rowValue <= max
+    return ids.some(id => {
+      const rowValue = row.values[id]
+      return rowValue >= min && rowValue <= max
+    })
   })
 }
 

src/hooks/useColumnVisibility.js

@@ -19,7 +19,7 @@ export const useColumnVisibility = hooks => {
 
   hooks.stateReducers.push(reducer)
   hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions)
-  hooks.headerGroupsDeps.push((deps, instance) => [
+  hooks.headerGroupsDeps.push((deps, { instance }) => [
     ...deps,
     instance.state.hiddenColumns,
   ])
@@ -28,7 +28,7 @@ export const useColumnVisibility = hooks => {
 
 useColumnVisibility.pluginName = 'useColumnVisibility'
 
-const defaultGetToggleHiddenProps = (props, instance, column) => [
+const defaultGetToggleHiddenProps = (props, { column }) => [
   props,
   {
     onChange: e => {
@@ -42,7 +42,7 @@ const defaultGetToggleHiddenProps = (props, instance, column) => [
   },
 ]
 
-const defaultGetToggleHideAllColumnsProps = (props, instance) => [
+const defaultGetToggleHideAllColumnsProps = (props, { instance }) => [
   props,
   {
     onChange: e => {
@@ -58,7 +58,7 @@ const defaultGetToggleHideAllColumnsProps = (props, instance) => [
   },
 ]
 
-function reducer(state, action, previousState, instanceRef) {
+function reducer(state, action, previousState, instance) {
   if (action.type === actions.init) {
     return {
       hiddenColumns: [],
@@ -69,7 +69,7 @@ function reducer(state, action, previousState, instanceRef) {
   if (action.type === actions.resetHiddenColumns) {
     return {
       ...state,
-      hiddenColumns: [],
+      hiddenColumns: instance.initialState.hiddenColumns || [],
     }
   }
 
@@ -104,9 +104,7 @@ function reducer(state, action, previousState, instanceRef) {
 
     return {
       ...state,
-      hiddenColumns: shouldAll
-        ? instanceRef.current.flatColumns.map(d => d.id)
-        : [],
+      hiddenColumns: shouldAll ? instance.flatColumns.map(d => d.id) : [],
     }
   }
 }
@@ -117,6 +115,11 @@ 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)
 
@@ -179,7 +182,7 @@ function useInstance(instance) {
 
   const getToggleHideAllColumnsProps = makePropGetter(
     getToggleHideAllColumnsPropsHooks(),
-    getInstance()
+    { instance: getInstance() }
   )
 
   // Snapshot hook and disallow more from being added
@@ -197,11 +200,10 @@ function useInstance(instance) {
       })
     }
 
-    column.getToggleHiddenProps = makePropGetter(
-      getToggleHiddenPropsHooks(),
-      getInstance(),
-      column
-    )
+    column.getToggleHiddenProps = makePropGetter(getToggleHiddenPropsHooks(), {
+      instance: getInstance(),
+      column,
+    })
   })
 
   Object.assign(instance, {

src/hooks/useTable.js

@@ -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
@@ -135,8 +133,18 @@ export const useTable = (props, ...plugins) => {
     reducer(initialState, { type: actions.init })
   )
 
+  // Snapshot hook and disallow more from being added
+  const getUseControlledStateHooks = useConsumeHookGetter(
+    getInstance().hooks,
+    'useControlledState'
+  )
+
   // Allow the user to control the final state with hooks
-  const state = useControlledState(reducerState)
+  const state = reduceHooks(
+    [...getUseControlledStateHooks(), useControlledState],
+    reducerState,
+    { instance: getInstance() }
+  )
 
   Object.assign(getInstance(), {
     state,
@@ -155,10 +163,11 @@ export const useTable = (props, ...plugins) => {
   // Decorate All the columns
   let columns = React.useMemo(
     () =>
-      reduceHooks(
-        getColumnsHooks(),
-        decorateColumnTree(userColumns, defaultColumn),
-        getInstance()
+      decorateColumnTree(
+        reduceHooks(getColumnsHooks(), userColumns, {
+          instance: getInstance(),
+        }),
+        defaultColumn
       ),
     [
       defaultColumn,
@@ -166,83 +175,20 @@ export const useTable = (props, ...plugins) => {
       getInstance,
       userColumns,
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...reduceHooks(getColumnsDepsHooks(), [], getInstance()),
+      ...reduceHooks(getColumnsDepsHooks(), [], { instance: getInstance() }),
     ]
   )
 
   getInstance().columns = columns
 
-  // Snapshot hook and disallow more from being added
-  const getFlatColumns = useConsumeHookGetter(
-    getInstance().hooks,
-    'flatColumns'
-  )
-
-  // Snapshot hook and disallow more from being added
-  const getFlatColumnsDeps = useConsumeHookGetter(
-    getInstance().hooks,
-    'flatColumnsDeps'
-  )
-
   // Get the flat list of all columns and allow hooks to decorate
   // those columns (and trigger this memoization via deps)
-  let flatColumns = React.useMemo(
-    () =>
-      reduceHooks(
-        getFlatColumns(),
-        flattenBy(columns, 'columns'),
-        getInstance()
-      ),
-    [
-      columns,
-      getFlatColumns,
-      getInstance,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...reduceHooks(getFlatColumnsDeps(), [], getInstance()),
-    ]
-  )
+  let flatColumns = React.useMemo(() => flattenBy(columns, 'columns'), [
+    columns,
+  ])
 
   getInstance().flatColumns = flatColumns
 
-  // Snapshot hook and disallow more from being added
-  const getHeaderGroups = useConsumeHookGetter(
-    getInstance().hooks,
-    'headerGroups'
-  )
-
-  // Snapshot hook and disallow more from being added
-  const getHeaderGroupsDeps = useConsumeHookGetter(
-    getInstance().hooks,
-    'headerGroupsDeps'
-  )
-
-  // Make the headerGroups
-  const headerGroups = React.useMemo(
-    () =>
-      reduceHooks(
-        getHeaderGroups(),
-        makeHeaderGroups(flatColumns, defaultColumn),
-        getInstance()
-      ),
-    [
-      defaultColumn,
-      flatColumns,
-      getHeaderGroups,
-      getInstance,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...reduceHooks(getHeaderGroupsDeps(), [], getInstance()),
-    ]
-  )
-
-  getInstance().headerGroups = headerGroups
-
-  const headers = React.useMemo(
-    () => (headerGroups.length ? headerGroups[0].headers : []),
-    [headerGroups]
-  )
-
-  getInstance().headers = headers
-
   // Access the row model
   const [rows, flatRows] = React.useMemo(() => {
     let flatRows = []
@@ -285,9 +231,9 @@ export const useTable = (props, ...plugins) => {
 
       // Create the cells and values
       row.values = {}
-      flatColumns.forEach(column => {
-        row.values[column.id] = column.accessor
-          ? column.accessor(originalRow, i, { subRows, depth, data })
+      flatColumns.forEach(({ id, accessor }) => {
+        row.values[id] = accessor
+          ? accessor(originalRow, i, { subRows, depth, data })
           : undefined
       })
 
@@ -303,6 +249,74 @@ export const useTable = (props, ...plugins) => {
   getInstance().rows = rows
   getInstance().flatRows = flatRows
 
+  // Snapshot hook and disallow more from being added
+  const flatColumnsHooks = useConsumeHookGetter(
+    getInstance().hooks,
+    'flatColumns'
+  )
+
+  // Snapshot hook and disallow more from being added
+  const flatColumnsDepsHooks = useConsumeHookGetter(
+    getInstance().hooks,
+    'flatColumnsDeps'
+  )
+
+  // 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)
+  flatColumns = React.useMemo(
+    () =>
+      reduceHooks(flatColumnsHooks(), flatColumns, { instance: getInstance() }),
+    [
+      flatColumns,
+      flatColumnsHooks,
+      getInstance,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...reduceHooks(flatColumnsDepsHooks(), [], { instance: getInstance() }),
+    ]
+  )
+
+  getInstance().flatColumns = flatColumns
+
+  // Snapshot hook and disallow more from being added
+  const getHeaderGroups = useConsumeHookGetter(
+    getInstance().hooks,
+    'headerGroups'
+  )
+
+  // Snapshot hook and disallow more from being added
+  const getHeaderGroupsDeps = useConsumeHookGetter(
+    getInstance().hooks,
+    'headerGroupsDeps'
+  )
+
+  // Make the headerGroups
+  const headerGroups = React.useMemo(
+    () =>
+      reduceHooks(
+        getHeaderGroups(),
+        makeHeaderGroups(flatColumns, defaultColumn),
+        getInstance()
+      ),
+    [
+      defaultColumn,
+      flatColumns,
+      getHeaderGroups,
+      getInstance,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...reduceHooks(getHeaderGroupsDeps(), [], { instance: getInstance() }),
+    ]
+  )
+
+  getInstance().headerGroups = headerGroups
+
+  const headers = React.useMemo(
+    () => (headerGroups.length ? headerGroups[0].headers : []),
+    [headerGroups]
+  )
+
+  getInstance().headers = headers
+
   // Provide a flat header list for utilities
   getInstance().flatHeaders = headerGroups.reduce(
     (all, headerGroup) => [...all, ...headerGroup.headers],
@@ -318,7 +332,15 @@ export const useTable = (props, ...plugins) => {
   loopHooks(getUseInstanceBeforeDimensions(), getInstance())
 
   // Header Visibility is needed by this point
-  getInstance().totalColumnsWidth = calculateHeaderWidths(headers)
+  const [
+    totalColumnsMinWidth,
+    totalColumnsWidth,
+    totalColumnsMaxWidth,
+  ] = calculateHeaderWidths(headers)
+
+  getInstance().totalColumnsMinWidth = totalColumnsMinWidth
+  getInstance().totalColumnsWidth = totalColumnsWidth
+  getInstance().totalColumnsMaxWidth = totalColumnsMaxWidth
 
   // Snapshot hook and disallow more from being added
   const getUseInstance = useConsumeHookGetter(
@@ -342,36 +364,24 @@ 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(), {
+        instance: getInstance(),
+        column,
+      })
 
-      return flexRender(Comp, {
-        ...getInstance(),
+      // Give columns/headers a default getFooterProps
+      column.getFooterProps = makePropGetter(getFooterPropsHooks(), {
+        instance: getInstance(),
         column,
-        ...userProps,
       })
     }
-
-    // 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(
@@ -406,16 +416,12 @@ export const useTable = (props, ...plugins) => {
       if (headerGroup.headers.length) {
         headerGroup.getHeaderGroupProps = makePropGetter(
           getHeaderGroupPropsHooks(),
-          getInstance(),
-          headerGroup,
-          i
+          { instance: getInstance(), headerGroup, index: i }
         )
 
         headerGroup.getFooterGroupProps = makePropGetter(
           getFooterGroupPropsHooks(),
-          getInstance(),
-          headerGroup,
-          i
+          { instance: getInstance(), headerGroup, index: i }
         )
 
         return true
@@ -432,11 +438,9 @@ export const useTable = (props, ...plugins) => {
   // Snapshot hook and disallow more from being added
   const getUseRowsHooks = useConsumeHookGetter(getInstance().hooks, 'useRows')
 
-  getInstance().rows = reduceHooks(
-    getUseRowsHooks(),
-    getInstance().rows,
-    getInstance()
-  )
+  getInstance().rows = reduceHooks(getUseRowsHooks(), getInstance().rows, {
+    instance: getInstance(),
+  })
 
   // The prepareRow function is absolutely necessary and MUST be called on
   // any rows the user wishes to be displayed.
@@ -459,51 +463,54 @@ 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)
+      row.getRowProps = makePropGetter(getRowPropsHooks(), {
+        instance: 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 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 getCellProps base
+        cell.getCellProps = makePropGetter(getCellPropsHooks(), {
+          instance: getInstance(),
+          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, {
+        instance: getInstance(),
+      })
+
       // need to apply any row specific hooks (useExpanded requires this)
-      loopHooks(getPrepareRowHooks(), row, getInstance())
+      loopHooks(getPrepareRowHooks(), row, { instance: getInstance() })
     },
-    [getCellPropsHooks, getInstance, getPrepareRowHooks, getRowPropsHooks]
+    [
+      getRowPropsHooks,
+      getInstance,
+      flatColumns,
+      cellsHooks,
+      getPrepareRowHooks,
+      getCellPropsHooks,
+    ]
   )
 
   // Snapshot hook and disallow more from being added
@@ -512,10 +519,9 @@ export const useTable = (props, ...plugins) => {
     'getTableProps'
   )
 
-  getInstance().getTableProps = makePropGetter(
-    getTablePropsHooks(),
-    getInstance()
-  )
+  getInstance().getTableProps = makePropGetter(getTablePropsHooks(), {
+    instance: getInstance(),
+  })
 
   // Snapshot hook and disallow more from being added
   const getTableBodyPropsHooks = useConsumeHookGetter(
@@ -523,10 +529,9 @@ export const useTable = (props, ...plugins) => {
     'getTableBodyProps'
   )
 
-  getInstance().getTableBodyProps = makePropGetter(
-    getTableBodyPropsHooks(),
-    getInstance()
-  )
+  getInstance().getTableBodyProps = makePropGetter(getTableBodyPropsHooks(), {
+    instance: getInstance(),
+  })
 
   // Snapshot hook and disallow more from being added
   const getUseFinalInstanceHooks = useConsumeHookGetter(
@@ -534,13 +539,15 @@ export const useTable = (props, ...plugins) => {
     'useFinalInstance'
   )
 
-  loopHooks(getUseFinalInstanceHooks(), [], getInstance())
+  loopHooks(getUseFinalInstanceHooks(), getInstance())
 
   return getInstance()
 }
 
 function calculateHeaderWidths(headers, left = 0) {
+  let sumTotalMinWidth = 0
   let sumTotalWidth = 0
+  let sumTotalMaxWidth = 0
 
   headers.forEach(header => {
     let { headers: subHeaders } = header
@@ -548,18 +555,28 @@ function calculateHeaderWidths(headers, left = 0) {
     header.totalLeft = left
 
     if (subHeaders && subHeaders.length) {
-      header.totalWidth = calculateHeaderWidths(subHeaders, left)
+      const [totalMinWidth, totalWidth, totalMaxWidth] = calculateHeaderWidths(
+        subHeaders,
+        left
+      )
+      header.totalMinWidth = totalMinWidth
+      header.totalWidth = totalWidth
+      header.totalMaxWidth = totalMaxWidth
     } else {
+      header.totalMinWidth = header.minWidth
       header.totalWidth = Math.min(
         Math.max(header.minWidth, header.width),
         header.maxWidth
       )
+      header.totalMaxWidth = header.maxWidth
     }
     if (header.isVisible) {
       left += header.totalWidth
+      sumTotalMinWidth += header.totalMinWidth
       sumTotalWidth += header.totalWidth
+      sumTotalMaxWidth += header.totalMaxWidth
     }
   })
 
-  return sumTotalWidth
+  return [sumTotalMinWidth, sumTotalWidth, sumTotalMaxWidth]
 }

src/index.js

@@ -2,6 +2,7 @@ export * from './publicUtils'
 export { useTable } from './hooks/useTable'
 export { useExpanded } from './plugin-hooks/useExpanded'
 export { useFilters } from './plugin-hooks/useFilters'
+export { useGlobalFilter } from './plugin-hooks/useGlobalFilter'
 export { useGroupBy } from './plugin-hooks/useGroupBy'
 export { useSortBy } from './plugin-hooks/useSortBy'
 export { usePagination } from './plugin-hooks/usePagination'
@@ -11,3 +12,4 @@ export { useColumnOrder } from './plugin-hooks/useColumnOrder'
 export { useResizeColumns } from './plugin-hooks/useResizeColumns'
 export { useAbsoluteLayout } from './plugin-hooks/useAbsoluteLayout'
 export { useBlockLayout } from './plugin-hooks/useBlockLayout'
+export { useFlexLayout } from './plugin-hooks/useFlexLayout'

src/makeDefaultPluginHooks.js

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

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

@@ -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>

src/plugin-hooks/tests/__snapshots__/useFilters.test.js.snap

@@ -1,151 +1,766 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a filterable table 1`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -27,11 +27,11 @@
-            colspan="1"
-          >
-            Last Name
+<DocumentFragment>
+  <table>
+    <thead>
+      <tr>
+        <th
+          colspan="2"
+        >
+          Name
+        </th>
+        <th
+          colspan="4"
+        >
+          Info
+        </th>
+      </tr>
+      <tr>
+        <th
+          colspan="1"
+        >
+          First Name
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Last Name
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Age
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Visits
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Status
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Profile Progress
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+      </tr>
+      <tr>
+        <th
+          colspan="6"
+          style="text-align: left;"
+        >
+          <span>
             <input
-              placeholder="Search..."
--             value=""
-+             value="l"
+              placeholder="Global search..."
+              style="font-size: 1.1rem; border: 0px;"
+              value=""
             />
-          </th>
-          <th
-            colspan="1"
-          >
-@@ -87,50 +87,10 @@
-          <td>
-            status: In Relationship
-          </td>
-          <td>
-            progress: 50
--         </td>
--       </tr>
--       <tr>
--         <td>
--           firstName: derek
--         </td>
--         <td>
--           lastName: perkins
--         </td>
--         <td>
--           age: 40
--         </td>
--         <td>
--           visits: 40
--         </td>
--         <td>
--           status: Single
--         </td>
--         <td>
--           progress: 80
--         </td>
--       </tr>
--       <tr>
--         <td>
--           firstName: joe
--         </td>
--         <td>
--           lastName: bergevin
--         </td>
--         <td>
--           age: 45
--         </td>
--         <td>
--           visits: 20
--         </td>
--         <td>
--           status: Complicated
--         </td>
--         <td>
--           progress: 10
-          </td>
-        </tr>
-        <tr>
-          <td>
-            firstName: jaylen
+          </span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          firstName: tanner
+        </td>
+        <td>
+          lastName: linsley
+        </td>
+        <td>
+          age: 29
+        </td>
+        <td>
+          visits: 100
+        </td>
+        <td>
+          status: In Relationship
+        </td>
+        <td>
+          progress: 50
+        </td>
+      </tr>
+      <tr>
+        <td>
+          firstName: derek
+        </td>
+        <td>
+          lastName: perkins
+        </td>
+        <td>
+          age: 40
+        </td>
+        <td>
+          visits: 40
+        </td>
+        <td>
+          status: Single
+        </td>
+        <td>
+          progress: 80
+        </td>
+      </tr>
+      <tr>
+        <td>
+          firstName: joe
+        </td>
+        <td>
+          lastName: bergevin
+        </td>
+        <td>
+          age: 45
+        </td>
+        <td>
+          visits: 20
+        </td>
+        <td>
+          status: Complicated
+        </td>
+        <td>
+          progress: 10
+        </td>
+      </tr>
+      <tr>
+        <td>
+          firstName: jaylen
+        </td>
+        <td>
+          lastName: linsley
+        </td>
+        <td>
+          age: 26
+        </td>
+        <td>
+          visits: 99
+        </td>
+        <td>
+          status: In Relationship
+        </td>
+        <td>
+          progress: 70
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
 `;
 
 exports[`renders a filterable table 2`] = `
-Snapshot Diff:
-- First value
-+ Second value
-
-@@ -27,11 +27,11 @@
-            colspan="1"
-          >
-            Last Name
+<DocumentFragment>
+  <table>
+    <thead>
+      <tr>
+        <th
+          colspan="2"
+        >
+          Name
+        </th>
+        <th
+          colspan="4"
+        >
+          Info
+        </th>
+      </tr>
+      <tr>
+        <th
+          colspan="1"
+        >
+          First Name
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Last Name
+          <input
+            placeholder="Search..."
+            value="l"
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Age
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Visits
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Status
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Profile Progress
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+      </tr>
+      <tr>
+        <th
+          colspan="6"
+          style="text-align: left;"
+        >
+          <span>
             <input
-              placeholder="Search..."
--             value="l"
-+             value="er"
+              placeholder="Global search..."
+              style="font-size: 1.1rem; border: 0px;"
+              value=""
             />
-          </th>
-          <th
-            colspan="1"
-          >
-@@ -71,46 +71,46 @@
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
--           firstName: tanner
-+           firstName: derek
-          </td>
-          <td>
--           lastName: linsley
-+           lastName: perkins
-          </td>
-          <td>
--           age: 29
-+           age: 40
-          </td>
-          <td>
--           visits: 100
-+           visits: 40
-          </td>
-          <td>
--           status: In Relationship
-+           status: Single
-          </td>
-          <td>
--           progress: 50
-+           progress: 80
-          </td>
-        </tr>
-        <tr>
-          <td>
--           firstName: jaylen
-+           firstName: joe
-          </td>
-          <td>
--           lastName: linsley
-+           lastName: bergevin
-          </td>
-          <td>
--           age: 26
-+           age: 45
-          </td>
-          <td>
--           visits: 99
-+           visits: 20
-          </td>
-          <td>
--           status: In Relationship
-+           status: Complicated
-          </td>
-          <td>
--           progress: 70
-+           progress: 10
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </DocumentFragment>
+          </span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          firstName: tanner
+        </td>
+        <td>
+          lastName: linsley
+        </td>
+        <td>
+          age: 29
+        </td>
+        <td>
+          visits: 100
+        </td>
+        <td>
+          status: In Relationship
+        </td>
+        <td>
+          progress: 50
+        </td>
+      </tr>
+      <tr>
+        <td>
+          firstName: jaylen
+        </td>
+        <td>
+          lastName: linsley
+        </td>
+        <td>
+          age: 26
+        </td>
+        <td>
+          visits: 99
+        </td>
+        <td>
+          status: In Relationship
+        </td>
+        <td>
+          progress: 70
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
+`;
+
+exports[`renders a filterable table 3`] = `
+<DocumentFragment>
+  <table>
+    <thead>
+      <tr>
+        <th
+          colspan="2"
+        >
+          Name
+        </th>
+        <th
+          colspan="4"
+        >
+          Info
+        </th>
+      </tr>
+      <tr>
+        <th
+          colspan="1"
+        >
+          First Name
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Last Name
+          <input
+            placeholder="Search..."
+            value="er"
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Age
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Visits
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Status
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Profile Progress
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+      </tr>
+      <tr>
+        <th
+          colspan="6"
+          style="text-align: left;"
+        >
+          <span>
+            <input
+              placeholder="Global search..."
+              style="font-size: 1.1rem; border: 0px;"
+              value=""
+            />
+          </span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          firstName: derek
+        </td>
+        <td>
+          lastName: perkins
+        </td>
+        <td>
+          age: 40
+        </td>
+        <td>
+          visits: 40
+        </td>
+        <td>
+          status: Single
+        </td>
+        <td>
+          progress: 80
+        </td>
+      </tr>
+      <tr>
+        <td>
+          firstName: joe
+        </td>
+        <td>
+          lastName: bergevin
+        </td>
+        <td>
+          age: 45
+        </td>
+        <td>
+          visits: 20
+        </td>
+        <td>
+          status: Complicated
+        </td>
+        <td>
+          progress: 10
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
+`;
+
+exports[`renders a filterable table 4`] = `
+<DocumentFragment>
+  <table>
+    <thead>
+      <tr>
+        <th
+          colspan="2"
+        >
+          Name
+        </th>
+        <th
+          colspan="4"
+        >
+          Info
+        </th>
+      </tr>
+      <tr>
+        <th
+          colspan="1"
+        >
+          First Name
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Last Name
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Age
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Visits
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Status
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Profile Progress
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+      </tr>
+      <tr>
+        <th
+          colspan="6"
+          style="text-align: left;"
+        >
+          <span>
+            <input
+              placeholder="Global search..."
+              style="font-size: 1.1rem; border: 0px;"
+              value=""
+            />
+          </span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          firstName: tanner
+        </td>
+        <td>
+          lastName: linsley
+        </td>
+        <td>
+          age: 29
+        </td>
+        <td>
+          visits: 100
+        </td>
+        <td>
+          status: In Relationship
+        </td>
+        <td>
+          progress: 50
+        </td>
+      </tr>
+      <tr>
+        <td>
+          firstName: derek
+        </td>
+        <td>
+          lastName: perkins
+        </td>
+        <td>
+          age: 40
+        </td>
+        <td>
+          visits: 40
+        </td>
+        <td>
+          status: Single
+        </td>
+        <td>
+          progress: 80
+        </td>
+      </tr>
+      <tr>
+        <td>
+          firstName: joe
+        </td>
+        <td>
+          lastName: bergevin
+        </td>
+        <td>
+          age: 45
+        </td>
+        <td>
+          visits: 20
+        </td>
+        <td>
+          status: Complicated
+        </td>
+        <td>
+          progress: 10
+        </td>
+      </tr>
+      <tr>
+        <td>
+          firstName: jaylen
+        </td>
+        <td>
+          lastName: linsley
+        </td>
+        <td>
+          age: 26
+        </td>
+        <td>
+          visits: 99
+        </td>
+        <td>
+          status: In Relationship
+        </td>
+        <td>
+          progress: 70
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
+`;
+
+exports[`renders a filterable table 5`] = `
+<DocumentFragment>
+  <table>
+    <thead>
+      <tr>
+        <th
+          colspan="2"
+        >
+          Name
+        </th>
+        <th
+          colspan="4"
+        >
+          Info
+        </th>
+      </tr>
+      <tr>
+        <th
+          colspan="1"
+        >
+          First Name
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Last Name
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Age
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Visits
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Status
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+        <th
+          colspan="1"
+        >
+          Profile Progress
+          <input
+            placeholder="Search..."
+            value=""
+          />
+        </th>
+      </tr>
+      <tr>
+        <th
+          colspan="6"
+          style="text-align: left;"
+        >
+          <span>
+            <input
+              placeholder="Global search..."
+              style="font-size: 1.1rem; border: 0px;"
+              value="li"
+            />
+          </span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          firstName: tanner
+        </td>
+        <td>
+          lastName: linsley
+        </td>
+        <td>
+          age: 29
+        </td>
+        <td>
+          visits: 100
+        </td>
+        <td>
+          status: In Relationship
+        </td>
+        <td>
+          progress: 50
+        </td>
+      </tr>
+      <tr>
+        <td>
+          firstName: joe
+        </td>
+        <td>
+          lastName: bergevin
+        </td>
+        <td>
+          age: 45
+        </td>
+        <td>
+          visits: 20
+        </td>
+        <td>
+          status: Complicated
+        </td>
+        <td>
+          progress: 10
+        </td>
+      </tr>
+      <tr>
+        <td>
+          firstName: jaylen
+        </td>
+        <td>
+          lastName: linsley
+        </td>
+        <td>
+          age: 26
+        </td>
+        <td>
+          visits: 99
+        </td>
+        <td>
+          status: In Relationship
+        </td>
+        <td>
+          progress: 70
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
 `;

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

@@ -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>

src/plugin-hooks/tests/useExpanded.test.js

@@ -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>

src/plugin-hooks/tests/useFilters.test.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { useTable } from '../../hooks/useTable'
 import { useFilters } from '../useFilters'
+import { useGlobalFilter } from '../useGlobalFilter'
 
 const data = [
   {
@@ -58,13 +59,17 @@ function Table({ columns, data }) {
     headerGroups,
     rows,
     prepareRow,
+    flatColumns,
+    state,
+    setGlobalFilter,
   } = useTable(
     {
       columns,
       data,
       defaultColumn,
     },
-    useFilters
+    useFilters,
+    useGlobalFilter
   )
 
   return (
@@ -80,6 +85,28 @@ function Table({ columns, data }) {
             ))}
           </tr>
         ))}
+        <tr>
+          <th
+            colSpan={flatColumns.length}
+            style={{
+              textAlign: 'left',
+            }}
+          >
+            <span>
+              <input
+                value={state.globalFilter || ''}
+                onChange={e => {
+                  setGlobalFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
+                }}
+                placeholder={`Global search...`}
+                style={{
+                  fontSize: '1.1rem',
+                  border: '0',
+                }}
+              />
+            </span>
+          </th>
+        </tr>
       </thead>
       <tbody {...getTableBodyProps()}>
         {rows.map(
@@ -142,8 +169,11 @@ function App() {
 }
 
 test('renders a filterable table', () => {
-  const { getAllByPlaceholderText, asFragment } = render(<App />)
+  const { getAllByPlaceholderText, getByPlaceholderText, asFragment } = render(
+    <App />
+  )
 
+  const globalFilterInput = getByPlaceholderText('Global search...')
   const filterInputs = getAllByPlaceholderText('Search...')
 
   const beforeFilter = asFragment()
@@ -156,6 +186,17 @@ test('renders a filterable table', () => {
 
   const afterFilter2 = asFragment()
 
-  expect(beforeFilter).toMatchDiffSnapshot(afterFilter1)
-  expect(afterFilter1).toMatchDiffSnapshot(afterFilter2)
+  fireEvent.change(filterInputs[1], { target: { value: '' } })
+
+  const afterFilter3 = asFragment()
+
+  fireEvent.change(globalFilterInput, { target: { value: 'li' } })
+
+  const afterFilter4 = asFragment()
+
+  expect(beforeFilter).toMatchSnapshot()
+  expect(afterFilter1).toMatchSnapshot()
+  expect(afterFilter2).toMatchSnapshot()
+  expect(afterFilter3).toMatchSnapshot()
+  expect(afterFilter4).toMatchSnapshot()
 })

src/plugin-hooks/tests/useGroupBy.test.js

@@ -64,6 +64,9 @@ function Table({ columns, data }) {
       columns,
       data,
       defaultColumn,
+      initialState: {
+        groupBy: ["Column Doesn't Exist"],
+      },
     },
     useGroupBy,
     useExpanded

src/plugin-hooks/tests/useRowSelect.test.js

@@ -82,7 +82,36 @@ function Table({ columns, data }) {
       data,
     },
     useRowSelect,
-    useExpanded
+    useExpanded,
+    hooks => {
+      hooks.flatColumns.push(columns => [
+        // Let's make a column for selection
+        {
+          id: 'selection',
+          // The header can use the table's getToggleAllRowsSelectedProps method
+          // to render a checkbox
+          Header: ({ getToggleAllRowsSelectedProps }) => (
+            <div>
+              <label>
+                <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />{' '}
+                Select All
+              </label>
+            </div>
+          ),
+          // The cell can use the individual row's getToggleRowSelectedProps method
+          // to the render a checkbox
+          Cell: ({ row }) => (
+            <div>
+              <label>
+                <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />{' '}
+                Select Row
+              </label>
+            </div>
+          ),
+        },
+        ...columns,
+      ])
+    }
   )
 
   // Render the UI for your table
@@ -113,14 +142,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>
     </>
@@ -143,30 +168,6 @@ const IndeterminateCheckbox = React.forwardRef(
 function App() {
   const columns = React.useMemo(
     () => [
-      // Let's make a column for selection
-      {
-        id: 'selection',
-        // The header can use the table's getToggleAllRowsSelectedProps method
-        // to render a checkbox
-        Header: ({ getToggleAllRowsSelectedProps }) => (
-          <div>
-            <label>
-              <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />{' '}
-              Select All
-            </label>
-          </div>
-        ),
-        // The cell can use the individual row's getToggleRowSelectedProps method
-        // to the render a checkbox
-        Cell: ({ row }) => (
-          <div>
-            <label>
-              <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />{' '}
-              Select Row
-            </label>
-          </div>
-        ),
-      },
       {
         id: 'selectedStatus',
         Cell: ({ row }) => (

src/plugin-hooks/useAbsoluteLayout.js

@@ -1,4 +1,5 @@
-// Calculating column/cells widths
+import { ensurePluginOrder } from '../utils'
+
 const cellStyles = {
   position: 'absolute',
   top: 0,
@@ -8,19 +9,20 @@ 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) => [
+  hooks.getHeaderProps.push((props, { column }) => [
     props,
     {
       style: {
         ...cellStyles,
-        left: `${header.totalLeft}px`,
-        width: `${header.totalWidth}px`,
+        left: `${column.totalLeft}px`,
+        width: `${column.totalWidth}px`,
       },
     },
   ])
 
-  hooks.getCellProps.push((props, instance, cell) => [
+  hooks.getCellProps.push((props, { cell }) => [
     props,
     {
       style: {
@@ -34,7 +36,7 @@ export const useAbsoluteLayout = hooks => {
 
 useAbsoluteLayout.pluginName = 'useAbsoluteLayout'
 
-const getRowStyles = (props, instance) => [
+const getRowStyles = (props, { instance }) => [
   props,
   {
     style: {
@@ -43,3 +45,9 @@ const getRowStyles = (props, instance) => [
     },
   },
 ]
+
+function useInstance({ plugins }) {
+  ensurePluginOrder(plugins, [], useAbsoluteLayout.pluginName, [
+    'useResizeColumns',
+  ])
+}

src/plugin-hooks/useBlockLayout.js

@@ -3,7 +3,7 @@ const cellStyles = {
   boxSizing: 'border-box',
 }
 
-const getRowStyles = (props, instance) => [
+const getRowStyles = (props, { instance }) => [
   props,
   {
     style: {
@@ -17,17 +17,17 @@ export const useBlockLayout = hooks => {
   hooks.getRowProps.push(getRowStyles)
   hooks.getHeaderGroupProps.push(getRowStyles)
 
-  hooks.getHeaderProps.push((props, instance, header) => [
+  hooks.getHeaderProps.push((props, { column }) => [
     props,
     {
       style: {
         ...cellStyles,
-        width: `${header.totalWidth}px`,
+        width: `${column.totalWidth}px`,
       },
     },
   ])
 
-  hooks.getCellProps.push((props, instance, cell) => [
+  hooks.getCellProps.push((props, { cell }) => [
     props,
     {
       style: {

src/plugin-hooks/useColumnOrder.js

@@ -8,7 +8,7 @@ actions.setColumnOrder = 'setColumnOrder'
 
 export const useColumnOrder = hooks => {
   hooks.stateReducers.push(reducer)
-  hooks.flatColumnsDeps.push((deps, instance) => {
+  hooks.flatColumnsDeps.push((deps, { instance }) => {
     return [...deps, instance.state.columnOrder]
   })
   hooks.flatColumns.push(flatColumns)
@@ -17,7 +17,7 @@ export const useColumnOrder = hooks => {
 
 useColumnOrder.pluginName = 'useColumnOrder'
 
-function reducer(state, action) {
+function reducer(state, action, previousState, instance) {
   if (action.type === actions.init) {
     return {
       columnOrder: [],
@@ -28,7 +28,7 @@ function reducer(state, action) {
   if (action.type === actions.resetColumnOrder) {
     return {
       ...state,
-      columnOrder: [],
+      columnOrder: instance.initialState.columnOrder || [],
     }
   }
 
@@ -40,11 +40,14 @@ function reducer(state, action) {
   }
 }
 
-function flatColumns(columns, instance) {
-  const {
-    state: { columnOrder },
-  } = instance
-
+function flatColumns(
+  columns,
+  {
+    instance: {
+      state: { columnOrder },
+    },
+  }
+) {
   // If there is no order, return the normal columns
   if (!columnOrder || !columnOrder.length) {
     return columns

src/plugin-hooks/useExpanded.js

@@ -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 => {
@@ -21,7 +23,7 @@ export const useExpanded = hooks => {
 
 useExpanded.pluginName = 'useExpanded'
 
-const defaultGetExpandedToggleProps = (props, instance, row) => [
+const defaultGetExpandedToggleProps = (props, { row }) => [
   props,
   {
     onClick: e => {
@@ -36,10 +38,10 @@ const defaultGetExpandedToggleProps = (props, instance, row) => [
 ]
 
 // Reducer
-function reducer(state, action) {
+function reducer(state, action, previousState, instance) {
   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: instance.initialState.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,13 +122,12 @@ 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(),
-      getInstance(),
-      row
-    )
+    row.getExpandedToggleProps = makePropGetter(getExpandedTogglePropsHooks(), {
+      instance: getInstance(),
+      row,
+    })
   })
 
   const expandedRows = React.useMemo(() => {
@@ -124,13 +138,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 +154,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)
   })

src/plugin-hooks/useFilters.js

@@ -3,10 +3,11 @@ import React from 'react'
 import {
   actions,
   getFirstDefined,
-  isFunction,
+  getFilterMethod,
   useMountedLayoutEffect,
   functionalUpdate,
   useGetLatest,
+  shouldAutoRemoveFilter,
 } from '../utils'
 import * as filterTypes from '../filterTypes'
 
@@ -22,10 +23,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 +34,14 @@ function reducer(state, action, previousState, instanceRef) {
   if (action.type === actions.resetFilters) {
     return {
       ...state,
-      filters: {},
+      filters: instance.initialState.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 +56,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
-
+    if (shouldAutoRemoveFilter(filterMethod.autoRemove, newFilter)) {
       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 (shouldAutoRemoveFilter(filterMethod.autoRemove, filter.value)) {
+          return false
+        }
+        return true
+      }),
     }
   }
 }
@@ -150,20 +161,13 @@ 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
-  // This gets pretty complicated pretty fast, since you have to maintain a
-  // cache for each row group (top-level rows, and each row's recursive subrows)
-  // This would make multi-filtering a lot faster though. Too far?
-
-  const { filteredRows, filteredFlatRows } = React.useMemo(() => {
-    if (manualFilters || !Object.keys(filters).length) {
-      return {
-        filteredRows: rows,
-        filteredFlatRows: flatRows,
-      }
+  const [filteredRows, filteredFlatRows] = React.useMemo(() => {
+    if (manualFilters || !filters.length) {
+      return [rows, flatRows]
     }
 
     const filteredFlatRows = []
@@ -172,8 +176,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)
 
@@ -202,9 +206,8 @@ function useInstance(instance) {
           // to get the filtered rows back
           column.filteredRows = filterMethod(
             filteredSoFar,
-            columnId,
-            filterValue,
-            column
+            [columnId],
+            filterValue
           )
 
           return column.filteredRows
@@ -233,17 +236,14 @@ function useInstance(instance) {
       return filteredRows
     }
 
-    return {
-      filteredRows: filterRows(rows),
-      filteredFlatRows,
-    }
+    return [filterRows(rows), filteredFlatRows]
   }, [manualFilters, filters, rows, flatRows, flatColumns, userFilterTypes])
 
   React.useMemo(() => {
     // Now that each filtered column has it's partially filtered rows,
     // lets assign the final filtered rows to all of the other columns
     const nonFilteredColumns = flatColumns.filter(
-      column => !Object.keys(filters).includes(column.id)
+      column => !filters.find(d => d.id === column.id)
     )
 
     // This essentially enables faceted filter options to be built easily
@@ -263,26 +263,13 @@ function useInstance(instance) {
   }, [dispatch, manualFilters ? null : data])
 
   Object.assign(instance, {
-    setFilter,
-    setAllFilters,
     preFilteredRows: rows,
     preFilteredFlatRows: flatRows,
     filteredRows,
     filteredFlatRows,
     rows: filteredRows,
     flatRows: filteredFlatRows,
+    setFilter,
+    setAllFilters,
   })
 }
-
-function shouldAutoRemove(autoRemove, value) {
-  return autoRemove ? autoRemove(value) : typeof value === 'undefined'
-}
-
-function getFilterMethod(filter, userFilterTypes, filterTypes) {
-  return (
-    isFunction(filter) ||
-    userFilterTypes[filter] ||
-    filterTypes[filter] ||
-    filterTypes.text
-  )
-}

src/plugin-hooks/useFlexLayout.js

@@ -0,0 +1,53 @@
+export function useFlexLayout(hooks) {
+  hooks.getTableBodyProps.push(getTableBodyProps)
+  hooks.getRowProps.push(getRowStyles)
+  hooks.getHeaderGroupProps.push(getRowStyles)
+  hooks.getHeaderProps.push(getHeaderProps)
+  hooks.getCellProps.push(getCellProps)
+}
+
+useFlexLayout.pluginName = 'useFlexLayout'
+
+const getTableBodyProps = (props, { instance }) => [
+  props,
+  {
+    style: {
+      minWidth: `${instance.totalColumnsWidth}px`,
+    },
+  },
+]
+
+const getRowStyles = (props, { instance }) => [
+  props,
+  {
+    style: {
+      display: 'flex',
+      flex: '1 0 auto',
+      minWidth: `${instance.totalColumnsMinWidth}px`,
+    },
+  },
+]
+
+const getHeaderProps = (props, { column }) => [
+  props,
+  {
+    style: {
+      boxSizing: 'border-box',
+      flex: `${column.totalWidth} 0 auto`,
+      minWidth: `${column.totalMinWidth}px`,
+      width: `${column.totalWidth}px`,
+    },
+  },
+]
+
+const getCellProps = (props, { cell }) => [
+  props,
+  {
+    style: {
+      boxSizing: 'border-box',
+      flex: `${cell.column.totalWidth} 0 auto`,
+      minWidth: `${cell.column.totalMinWidth}px`,
+      width: `${cell.column.totalWidth}px`,
+    },
+  },
+]

src/plugin-hooks/useGlobalFilter.js

@@ -0,0 +1,152 @@
+import React from 'react'
+
+import {
+  actions,
+  getFilterMethod,
+  useMountedLayoutEffect,
+  functionalUpdate,
+  useGetLatest,
+  shouldAutoRemoveFilter,
+  ensurePluginOrder,
+} from '../utils'
+import * as filterTypes from '../filterTypes'
+
+// Actions
+actions.resetGlobalFilter = 'resetGlobalFilter'
+actions.setGlobalFilter = 'setGlobalFilter'
+
+export const useGlobalFilter = hooks => {
+  hooks.stateReducers.push(reducer)
+  hooks.useInstance.push(useInstance)
+}
+
+useGlobalFilter.pluginName = 'useGlobalFilter'
+
+function reducer(state, action, previousState, instance) {
+  if (action.type === actions.resetGlobalFilter) {
+    return {
+      ...state,
+      globalFilter: instance.initialState.globalFilter || undefined,
+    }
+  }
+
+  if (action.type === actions.setGlobalFilter) {
+    const { filterValue } = action
+    const { userFilterTypes } = instance
+
+    const filterMethod = getFilterMethod(
+      instance.globalFilter,
+      userFilterTypes || {},
+      filterTypes
+    )
+
+    const newFilter = functionalUpdate(filterValue, state.globalFilter)
+
+    //
+    if (shouldAutoRemoveFilter(filterMethod.autoRemove, newFilter)) {
+      const { globalFilter, ...stateWithoutGlobalFilter } = state
+      return stateWithoutGlobalFilter
+    }
+
+    return {
+      ...state,
+      globalFilter: newFilter,
+    }
+  }
+}
+
+function useInstance(instance) {
+  const {
+    data,
+    rows,
+    flatRows,
+    flatColumns,
+    filterTypes: userFilterTypes,
+    globalFilter,
+    manualGlobalFilter,
+    state: { globalFilter: globalFilterValue },
+    dispatch,
+    autoResetGlobalFilters = true,
+    plugins,
+  } = instance
+
+  ensurePluginOrder(plugins, [], 'useGlobalFilter', [
+    'useSortBy',
+    'useExpanded',
+  ])
+
+  const setGlobalFilter = filterValue => {
+    dispatch({ type: actions.setGlobalFilter, filterValue })
+  }
+
+  // TODO: Create a filter cache for incremental high speed multi-filtering
+  // This gets pretty complicated pretty fast, since you have to maintain a
+  // cache for each row group (top-level rows, and each row's recursive subrows)
+  // This would make multi-filtering a lot faster though. Too far?
+
+  const [globalFilteredRows, globalFilteredFlatRows] = React.useMemo(() => {
+    if (manualGlobalFilter || typeof globalFilterValue === 'undefined') {
+      return [rows, flatRows]
+    }
+
+    const filteredFlatRows = []
+
+    const filterMethod = getFilterMethod(
+      globalFilter,
+      userFilterTypes || {},
+      filterTypes
+    )
+
+    if (!filterMethod) {
+      console.warn(`Could not find a valid 'globalFilter' option.`)
+      return rows
+    }
+
+    // Filters top level and nested rows
+    const filterRows = filteredRows => {
+      return filterMethod(
+        filteredRows,
+        flatColumns.map(d => d.id),
+        globalFilterValue
+      ).map(row => {
+        filteredFlatRows.push(row)
+
+        return {
+          ...row,
+          subRows:
+            row.subRows && row.subRows.length
+              ? filterRows(row.subRows)
+              : row.subRows,
+        }
+      })
+    }
+
+    return [filterRows(rows), filteredFlatRows]
+  }, [
+    manualGlobalFilter,
+    globalFilter,
+    userFilterTypes,
+    rows,
+    flatRows,
+    flatColumns,
+    globalFilterValue,
+  ])
+
+  const getAutoResetGlobalFilters = useGetLatest(autoResetGlobalFilters)
+
+  useMountedLayoutEffect(() => {
+    if (getAutoResetGlobalFilters()) {
+      dispatch({ type: actions.resetGlobalFilter })
+    }
+  }, [dispatch, manualGlobalFilter ? null : data])
+
+  Object.assign(instance, {
+    preGlobalFilteredRows: rows,
+    preGlobalFilteredFlatRows: flatRows,
+    globalFilteredRows,
+    globalFilteredFlatRows,
+    rows: globalFilteredRows,
+    flatRows: globalFilteredFlatRows,
+    setGlobalFilter,
+  })
+}