From ddfa0fa2274fd9ed011cd91d474a8296d8cc9eec Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Tue, 10 Dec 2019 23:04:34 -0700 Subject: [PATCH] Death of the path, fix some hooks, fix selectedRows - Fixed an issue where dependency hooks were not being reduced properly, thus the table would rerender unnecessarily - Renamed `toggleRowSelectedAll` to `toggleAllRowsSelected`. Duh... - Added an `indeterminate` boolean prop to the default props for row selection toggle prop getters - Renamed `selectedRowPaths` to `selectedRowIds`, which also no longer contains paths, but row IDs - Grouped or nested row selection actions and state are now derived, instead of tracked in state. - Rows now have a new property called `id`, which existed before and was derived from the `getRowId` option - Rows now also have an `isSomeSelected` prop when using the `useRowSelect` hook, which denotes that at least one subRow is selected (if applicable) - Rows' `path` property has been deprecated in favor of `id` - Expanded state is now tracked with row IDs instead of paths - RowState is now tracked with row IDs instead of paths - `toggleExpandedByPath` has been renamed to `toggleExpandedById`, and thus accepts a row ID now, instead of a row path --- .size-snapshot.json | 14 +- CHANGELOG.md | 16 +- docs/api/useExpanded.md | 8 +- docs/api/useGroupBy.md | 8 +- docs/api/useRowSelect.md | 10 +- docs/api/useRowState.md | 6 +- docs/api/useTable.md | 11 +- examples/kitchen-sink-controlled/src/App.js | 11 +- examples/kitchen-sink/src/App.js | 32 ++-- examples/row-selection/src/App.js | 29 +++- src/hooks/useTable.js | 22 ++- src/makeDefaultPluginHooks.js | 4 +- .../__snapshots__/useRowSelect.test.js.snap | 46 +++-- src/plugin-hooks/tests/useRowSelect.test.js | 26 ++- src/plugin-hooks/useExpanded.js | 27 ++- src/plugin-hooks/useGroupBy.js | 11 +- src/plugin-hooks/useRowSelect.js | 161 ++++++++++-------- src/plugin-hooks/useRowState.js | 20 +-- src/utils.js | 4 +- 19 files changed, 269 insertions(+), 197 deletions(-) diff --git a/.size-snapshot.json b/.size-snapshot.json index 1235e43..75ead16 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,20 +1,20 @@ { "dist/index.js": { - "bundled": 108184, - "minified": 51333, - "gzipped": 13486 + "bundled": 107809, + "minified": 51216, + "gzipped": 13492 }, "dist/index.es.js": { - "bundled": 107341, - "minified": 50583, - "gzipped": 13333, + "bundled": 106966, + "minified": 50466, + "gzipped": 13339, "treeshaked": { "rollup": { "code": 80, "import_statements": 21 }, "webpack": { - "code": 8904 + "code": 8902 } } }, diff --git a/CHANGELOG.md b/CHANGELOG.md index 469622b..086bffe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,17 @@ +## 7.0.0-rc.9 + +- Fixed an issue where dependency hooks were not being reduced properly, thus the table would rerender unnecessarily +- Renamed `toggleRowSelectedAll` to `toggleAllRowsSelected`. Duh... +- Added an `indeterminate` boolean prop to the default props for row selection toggle prop getters +- Renamed `selectedRowPaths` to `selectedRowIds`, which also no longer contains paths, but row IDs +- Grouped or nested row selection actions and state are now derived, instead of tracked in state. +- Rows now have a new property called `id`, which existed before and was derived from the `getRowId` option +- Rows now also have an `isSomeSelected` prop when using the `useRowSelect` hook, which denotes that at least one subRow is selected (if applicable) +- Rows' `path` property has been deprecated in favor of `id` +- Expanded state is now tracked with row IDs instead of paths +- RowState is now tracked with row IDs instead of paths +- `toggleExpandedByPath` has been renamed to `toggleExpandedById`, and thus accepts a row ID now, instead of a row path + ## 7.0.0-rc.8 - Fix an issue where `useResizeColumns` would crash when using the resizer prop getter @@ -101,7 +115,7 @@ Modified: ## 7.0.0-beta.24 -- Changed `selectedRowPaths` to use a `Set()` instead of an array for performance. +- Changed `selectedRowIds` to use a `Set()` instead of an array for performance. - Removed types and related files from the repo. The community will now maintain types externally on Definitely Typed ## 7.0.0-beta.23 diff --git a/docs/api/useExpanded.md b/docs/api/useExpanded.md index f8e5a54..f0bd1ab 100644 --- a/docs/api/useExpanded.md +++ b/docs/api/useExpanded.md @@ -9,12 +9,12 @@ The following options are supported via the main options object passed to `useTable(options)` -- `state.expanded: Array` +- `state.expanded: Array` - Optional - Must be **memoized** - - An array of expanded path keys. - - If a row's path key (`row.path.join('.')`) is present in this array, that row will have an expanded state. For example, if `['3']` was passed as the `expanded` state, the **4th row in the original data array** would be expanded. - - For nested expansion, you may **join the row path with a `.`** to expand sub rows. For example, if `['3', '3.5']` was passed as the `expanded` state, then the **6th subRow of the 4th row and also the 4th row of the original data array** would be expanded. + - 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**. - 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 diff --git a/docs/api/useGroupBy.md b/docs/api/useGroupBy.md index 6f0ba13..c38f229 100644 --- a/docs/api/useGroupBy.md +++ b/docs/api/useGroupBy.md @@ -96,9 +96,11 @@ The following properties are available on every `Row` object returned by the tab - If the row is a materialized group row, this property is the array of materialized subRows that were grouped inside of this row. - `depth: Int` - If the row is a materialized group row, this is the grouping depth at which this row was created. -- `path: Array` - - Similar to normal `Row` objects, materialized grouping rows also have a path array. The keys inside it though are not integers like nested normal rows though. Since they are not rows that can be traced back to an original data row, they are given a unique path based on their `groupByVal` - - If a row is a grouping row, it will have a path like `['Single']` or `['Complicated', 'Anderson']`, where `Single`, `Complicated`, and `Anderson` would all be derived from their row's `groupByVal`. +- `id: String` + - The unique ID for this row. + - This ID is unique across all rows, including sub rows + - Derived from the `getRowId` function, which defaults to chaining parent IDs and joining with a `.` + - If a row is a materialized grouping row, it will have an ID in the format of `columnId:groupByVal`. - `isAggregated: Bool` - Will be `true` if the row is an aggregated row diff --git a/docs/api/useRowSelect.md b/docs/api/useRowSelect.md index fafbcf9..43671e6 100644 --- a/docs/api/useRowSelect.md +++ b/docs/api/useRowSelect.md @@ -9,12 +9,10 @@ The following options are supported via the main options object passed to `useTable(options)` -- `state.selectedRowPaths: Set` +- `initialState.selectedRowIds: Set` - Optional - Defaults to `new Set()` - - If a row's path key (eg. a row path of `[1, 3, 2]` would have a path key of `1.3.2`) is found in this array, it will have a selected state. -- `initialState.selectedRowPaths` - - Identical to the `state.selectedRowPaths` option above + - If a row's ID is found in this array, it will have a selected state. - `manualRowSelectedKey: String` - Optional - Defaults to `isSelected` @@ -33,7 +31,7 @@ The following values are provided to the table `instance`: - `toggleRowSelected: Function(rowPath: String, ?set: Bool) => void` - Use this function to toggle a row's selected state. - Optionally pass `true` or `false` to set it to that state -- `toggleRowSelectedAll: Function(?set: Bool) => void` +- `toggleAllRowsSelected: Function(?set: Bool) => void` - Use this function to toggle all rows as select or not - Optionally pass `true` or `false` to set all rows to that state - `getToggleAllRowsSelectedProps: Function(props) => props` @@ -55,6 +53,8 @@ The following additional properties are available on every **prepared** `row` ob - `isSelected: Bool` - Will be `true` if the row is currently selected +- `isSomeSelected: Bool` + - Will be `true` if the row has subRows and at least one of them is currently selected - `toggleRowSelected: Function(?set)` - Use this function to toggle this row's selected state. - Optionally pass `true` or `false` to set it to that state diff --git a/docs/api/useRowState.md b/docs/api/useRowState.md index ee89136..f415eb3 100644 --- a/docs/api/useRowState.md +++ b/docs/api/useRowState.md @@ -12,7 +12,7 @@ The following options are supported via the main options object passed to `useTa - `state.rowState: Object>` - Optional - Defaults to `{}` - - If a row's path key (eg. a row path of `[1, 3, 2]` would have a path key of `1.3.2`) is found in this array, it will have the state of the value corresponding to that key. + - 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` @@ -44,7 +44,7 @@ The following values are provided to the table `instance`: The following additional properties are available on every **prepared** `row` object returned by the table instance. - `state: Object` - - This is the state object for each row, pre-mapped to the row from the table state's `rowState` object via `rowState[row.path.join('.')]` + - This is the state object for each row, pre-mapped to the row from the table state's `rowState` object via `rowState[row.id]` - May also contain a `cellState` key/value pair, which is used to provide individual cell states to this row's cells - `setState: Function(updater: Function | any)` - Use this function to programmatically update the state of a row. @@ -55,7 +55,7 @@ The following additional properties are available on every **prepared** `row` ob The following additional properties are available on every `Cell` object returned in an array of `cells` on every row object. - `state: Object` - - This is the state object for each cell, pre-mapped to the cell from the table state's `rowState` object via `rowState[row.path.join('.')].cellState[columnId]` + - This is the state object for each cell, pre-mapped to the cell from the table state's `rowState` object via `rowState[row.id].cellState[columnId]` - `setState: Function(updater: Function | any)` - Use this function to programmatically update the state of a cell. - `updater` can be a function or value. If a `function` is passed, it will receive the current value and expect a new one to be returned. diff --git a/docs/api/useTable.md b/docs/api/useTable.md index 14561f3..bcd7fd7 100644 --- a/docs/api/useTable.md +++ b/docs/api/useTable.md @@ -53,13 +53,11 @@ The following options are supported via the main options object passed to `useTa - Defaults to `(row) => row.subRows || []` - Use this function to change how React Table detects subrows. You could even use this function to generate sub rows if you want. - By default, it will attempt to return the `subRows` property on the row, or an empty array if that is not found. -- `getRowId: Function(row, relativeIndex) => string` - - Use this function to change how React Table detects unique rows and also how it constructs each row's underlying `path` property. +- `getRowId: Function(row, relativeIndex, ?parent) => string` + - Use this function to change how React Table detects unique rows and also how it constructs each row's underlying `id` property. - Optional - Must be **memoized** - - Defaults to `(row, relativeIndex) => relativeIndex` - - You may want to change this function if - - By default, it will use the `index` of the row within it's original array. + - Defaults to `(row, relativeIndex, parent) => parent ? [parent.id, relativeIndex].join('.') : relativeIndex` - `debug: Bool` - Optional - A flag to turn on debug mode. @@ -255,9 +253,6 @@ The following additional properties are available on every `row` object returned - The index of the original row in the `data` array that was passed to `useTable`. If this row is a subRow, it is the original index within the parent row's subRows array - `original: Object` - The original row object from the `data` array that was used to materialize this row. -- `path: Array` - - This array is the sequential path of indices one could use to navigate to it, eg. a row path of `[3, 1, 0]` would mean that it is the **first** subRow of a parent that is the **second** subRow of a parent that is the **fourth** row in the original `data` array. - - This array is used with plugin hooks like `useExpanded` and `useGroupBy` to compute expanded states for individual rows. - `subRows: Array` - If subRows were detect on the original data object, this will be an array of those materialized row objects. - `state: Object` diff --git a/examples/kitchen-sink-controlled/src/App.js b/examples/kitchen-sink-controlled/src/App.js index 1409642..f654c2b 100644 --- a/examples/kitchen-sink-controlled/src/App.js +++ b/examples/kitchen-sink-controlled/src/App.js @@ -282,14 +282,7 @@ function Table({ columns, data, updateMyData, skipPageReset }) { nextPage, previousPage, setPageSize, - state: { - pageIndex, - pageSize, - groupBy, - expanded, - filters, - selectedRowPaths, - }, + state: { pageIndex, pageSize, groupBy, expanded, filters, selectedRowIds }, } = useTable( { columns, @@ -442,7 +435,7 @@ function Table({ columns, data, updateMyData, skipPageReset }) { groupBy, expanded, filters, - selectedRowPaths: [...selectedRowPaths.values()], + selectedRowIds: [...selectedRowIds.values()], }, null, 2 diff --git a/examples/kitchen-sink/src/App.js b/examples/kitchen-sink/src/App.js index f19052b..90ea6e1 100644 --- a/examples/kitchen-sink/src/App.js +++ b/examples/kitchen-sink/src/App.js @@ -282,14 +282,7 @@ function Table({ columns, data, updateMyData, skipReset }) { nextPage, previousPage, setPageSize, - state: { - pageIndex, - pageSize, - groupBy, - expanded, - filters, - selectedRowPaths, - }, + state: { pageIndex, pageSize, groupBy, expanded, filters, selectedRowIds }, } = useTable( { columns, @@ -441,7 +434,7 @@ function Table({ columns, data, updateMyData, skipReset }) { groupBy, expanded, filters, - selectedRowPaths: [...selectedRowPaths.values()], + selectedRowIds: [...selectedRowIds.values()], }, null, 2 @@ -481,6 +474,23 @@ function roundedMedian(values) { return Math.round((min + max) / 2) } +const IndeterminateCheckbox = React.forwardRef( + ({ indeterminate, ...rest }, ref) => { + const defaultRef = React.useRef() + const resolvedRef = ref || defaultRef + + React.useEffect(() => { + resolvedRef.current.indeterminate = indeterminate + }, [resolvedRef, indeterminate]) + + return ( + <> + + + ) + } +) + function App() { const columns = React.useMemo( () => [ @@ -493,14 +503,14 @@ function App() { // to render a checkbox Header: ({ getToggleAllRowsSelectedProps }) => (
- +
), // The cell can use the individual row's getToggleRowSelectedProps method // to the render a checkbox Cell: ({ row }) => (
- +
), }, diff --git a/examples/row-selection/src/App.js b/examples/row-selection/src/App.js index ebfe1c9..8fb4e07 100644 --- a/examples/row-selection/src/App.js +++ b/examples/row-selection/src/App.js @@ -33,6 +33,23 @@ const Styles = styled.div` } ` +const IndeterminateCheckbox = React.forwardRef( + ({ indeterminate, ...rest }, ref) => { + const defaultRef = React.useRef() + const resolvedRef = ref || defaultRef + + React.useEffect(() => { + resolvedRef.current.indeterminate = indeterminate + }, [resolvedRef, indeterminate]) + + return ( + <> + + + ) + } +) + function Table({ columns, data }) { // Use the state and functions returned from useTable to build your UI const { @@ -42,7 +59,7 @@ function Table({ columns, data }) { rows, prepareRow, selectedFlatRows, - state: { selectedRowPaths }, + state: { selectedRowIds }, } = useTable( { columns, @@ -77,12 +94,12 @@ function Table({ columns, data }) { })} -

Selected Rows: {selectedRowPaths.size}

+

Selected Rows: {selectedRowIds.size}

         
           {JSON.stringify(
             {
-              selectedRowPaths: [...selectedRowPaths.values()],
+              selectedRowIds: [...selectedRowIds.values()],
               'selectedFlatRows[].original': selectedFlatRows.map(
                 d => d.original
               ),
@@ -106,14 +123,14 @@ function App() {
         // to render a checkbox
         Header: ({ getToggleAllRowsSelectedProps }) => (
           

-            
+            
           

         ),
         // The cell can use the individual row's getToggleRowSelectedProps method
         // to the render a checkbox
         Cell: ({ row }) => (
           

-            
+            
           

         ),
       },
@@ -155,7 +172,7 @@ function App() {
     []
   )
 
-  const data = React.useMemo(() => makeData(10), [])
+  const data = React.useMemo(() => makeData(10, 3), [])
 
   return (
     
diff --git a/src/hooks/useTable.js b/src/hooks/useTable.js
index aa5f838..fc5325c 100755
--- a/src/hooks/useTable.js
+++ b/src/hooks/useTable.js
@@ -24,7 +24,8 @@ const defaultInitialState = {}
 const defaultColumnInstance = {}
 const defaultReducer = (state, action, prevState) => state
 const defaultGetSubRows = (row, index) => row.subRows || []
-const defaultGetRowId = (row, index) => index
+const defaultGetRowId = (row, index, parent) =>
+  `${parent ? [parent.id, index].join('.') : index}`
 const defaultUseControlledState = d => d
 
 function applyDefaults(props) {
@@ -165,7 +166,7 @@ export const useTable = (props, ...plugins) => {
       getInstance,
       userColumns,
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...getColumnsDepsHooks(getInstance()),
+      ...reduceHooks(getColumnsDepsHooks(), [], getInstance()),
     ]
   )
 
@@ -197,7 +198,7 @@ export const useTable = (props, ...plugins) => {
       getFlatColumns,
       getInstance,
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      getFlatColumnsDeps(getInstance()),
+      ...reduceHooks(getFlatColumnsDeps(), [], getInstance()),
     ]
   )
 
@@ -229,7 +230,7 @@ export const useTable = (props, ...plugins) => {
       getHeaderGroups,
       getInstance,
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...getHeaderGroupsDeps(getInstance()),
+      ...reduceHooks(getHeaderGroupsDeps(), [], getInstance()),
     ]
   )
 
@@ -247,19 +248,16 @@ export const useTable = (props, ...plugins) => {
     let flatRows = []
 
     // Access the row's data
-    const accessRow = (originalRow, i, depth = 0, parentPath = []) => {
+    const accessRow = (originalRow, i, depth = 0, parent) => {
       // Keep the original reference around
       const original = originalRow
 
-      const rowId = getRowId(originalRow, i)
-
-      // Make the new path for the row
-      const path = [...parentPath, rowId]
+      const id = getRowId(originalRow, i, parent)
 
       const row = {
+        id,
         original,
         index: i,
-        path, // used to create a key for each row even if not nested
         depth,
         cells: [{}], // This is a dummy cell
       }
@@ -270,7 +268,7 @@ export const useTable = (props, ...plugins) => {
       let subRows = getSubRows(originalRow, i)
 
       if (subRows) {
-        row.subRows = subRows.map((d, i) => accessRow(d, i, depth + 1, path))
+        row.subRows = subRows.map((d, i) => accessRow(d, i, depth + 1, row))
       }
 
       // Override common array functions (and the dummy cell's getCellProps function)
@@ -536,7 +534,7 @@ export const useTable = (props, ...plugins) => {
     'useFinalInstance'
   )
 
-  loopHooks(getUseFinalInstanceHooks(), getInstance())
+  loopHooks(getUseFinalInstanceHooks(), [], getInstance())
 
   return getInstance()
 }
diff --git a/src/makeDefaultPluginHooks.js b/src/makeDefaultPluginHooks.js
index 8dadb55..8bfe7ef 100644
--- a/src/makeDefaultPluginHooks.js
+++ b/src/makeDefaultPluginHooks.js
@@ -21,13 +21,13 @@ const defaultGetFooterGroupProps = (props, instance, headerGroup, index) => ({
 })
 
 const defaultGetRowProps = (props, instance, row) => ({
-  key: ['row', ...row.path].join('_'),
+  key: ['row', row.id].join('_'),
   ...props,
 })
 
 const defaultGetCellProps = (props, instance, cell) => ({
   ...props,
-  key: ['cell', ...cell.row.path, cell.column.id].join('_'),
+  key: ['cell', cell.row.id, cell.column.id].join('_'),
 })
 
 export default function makeDefaultPluginHooks() {
diff --git a/src/plugin-hooks/tests/__snapshots__/useRowSelect.test.js.snap b/src/plugin-hooks/tests/__snapshots__/useRowSelect.test.js.snap
index 17be7b6..b38fa81 100644
--- a/src/plugin-hooks/tests/__snapshots__/useRowSelect.test.js.snap
+++ b/src/plugin-hooks/tests/__snapshots__/useRowSelect.test.js.snap
@@ -485,8 +485,8 @@ Snapshot Diff:
     
       
         {
--   "selectedRowPaths": []
-+   "selectedRowPaths": [
+-   "selectedRowIds": []
++   "selectedRowIds": [
 +     "0",
 +     "1",
 +     "2",
@@ -1015,7 +1015,7 @@ Snapshot Diff:
     
       
         {
--   "selectedRowPaths": [
+-   "selectedRowIds": [
 -     "0",
 -     "1",
 -     "2",
@@ -1053,7 +1053,7 @@ Snapshot Diff:
 -     "22.1",
 -     "23"
 -   ]
-+   "selectedRowPaths": []
++   "selectedRowIds": []
   }
       
     

@@ -1129,8 +1129,8 @@ Snapshot Diff:
     
       
         {
--   "selectedRowPaths": []
-+   "selectedRowPaths": [
+-   "selectedRowIds": []
++   "selectedRowIds": [
 +     "0",
 +     "2",
 +     "2.0",
@@ -1198,7 +1198,7 @@ Snapshot Diff:
     
       
         {
-    "selectedRowPaths": [
+    "selectedRowIds": [
 -     "0",
 -     "2",
 -     "2.0",
@@ -1241,7 +1241,7 @@ Snapshot Diff:
     
       
         {
-    "selectedRowPaths": [
+    "selectedRowIds": [
 -     "0"
 +     "0",
 +     "2.0"
@@ -1257,6 +1257,19 @@ Snapshot Diff:
 - First value
 + Second value
 
+@@ -163,11 +163,11 @@
+              
+            
+          
+          
+            

+-             Row 2 Not Selected
++             Row 2 Selected
+            

+          
+          
+            joe
+          
 @@ -237,11 +237,11 @@
               
             
@@ -1282,7 +1295,7 @@ Snapshot Diff:
     
       
         {
-    "selectedRowPaths": [
+    "selectedRowIds": [
       "0",
 -     "2.0"
 +     "2.0",
@@ -1299,6 +1312,19 @@ Snapshot Diff:
 - First value
 + Second value
 
+@@ -163,11 +163,11 @@
+              
+            
+          
+          
+            

+-             Row 2 Selected
++             Row 2 Not Selected
+            

+          
+          
+            joe
+          
 @@ -237,11 +237,11 @@
               
             
@@ -1324,7 +1350,7 @@ Snapshot Diff:
     
       
         {
-    "selectedRowPaths": [
+    "selectedRowIds": [
       "0",
 -     "2.0",
 -     "2.1"
diff --git a/src/plugin-hooks/tests/useRowSelect.test.js b/src/plugin-hooks/tests/useRowSelect.test.js
index 037bd38..8b1c0a9 100644
--- a/src/plugin-hooks/tests/useRowSelect.test.js
+++ b/src/plugin-hooks/tests/useRowSelect.test.js
@@ -75,7 +75,7 @@ function Table({ columns, data }) {
     headerGroups,
     rows,
     prepareRow,
-    state: { selectedRowPaths },
+    state: { selectedRowIds },
   } = useTable(
     {
       columns,
@@ -113,11 +113,11 @@ function Table({ columns, data }) {
           )}
         
       
-      
Selected Rows: {selectedRowPaths.size}

+      
Selected Rows: {selectedRowIds.size}

       
         
           {JSON.stringify(
-            { selectedRowPaths: [...selectedRowPaths.values()] },
+            { selectedRowIds: [...selectedRowIds.values()] },
             null,
             2
           )}
@@ -127,6 +127,19 @@ function Table({ columns, data }) {
   )
 }
 
+const IndeterminateCheckbox = React.forwardRef(
+  ({ indeterminate, ...rest }, ref) => {
+    const defaultRef = React.useRef()
+    const resolvedRef = ref || defaultRef
+
+    React.useEffect(() => {
+      resolvedRef.current.indeterminate = indeterminate
+    }, [resolvedRef, indeterminate])
+
+    return 
+  }
+)
+
 function App() {
   const columns = React.useMemo(
     () => [
@@ -138,7 +151,7 @@ function App() {
         Header: ({ getToggleAllRowsSelectedProps }) => (
           

             
           

@@ -148,7 +161,7 @@ function App() {
         Cell: ({ row }) => (
           

             
           

@@ -158,8 +171,7 @@ function App() {
         id: 'selectedStatus',
         Cell: ({ row }) => (
           

-            Row {row.path.join('.')}{' '}
-            {row.isSelected ? 'Selected' : 'Not Selected'}
+            Row {row.id} {row.isSelected ? 'Selected' : 'Not Selected'}
           

         ),
       },
diff --git a/src/plugin-hooks/useExpanded.js b/src/plugin-hooks/useExpanded.js
index d541ba0..671ec43 100755
--- a/src/plugin-hooks/useExpanded.js
+++ b/src/plugin-hooks/useExpanded.js
@@ -10,7 +10,7 @@ import {
 import { useConsumeHookGetter } from '../publicUtils'
 
 // Actions
-actions.toggleExpandedByPath = 'toggleExpandedByPath'
+actions.toggleExpandedById = 'toggleExpandedById'
 actions.resetExpanded = 'resetExpanded'
 
 export const useExpanded = hooks => {
@@ -51,17 +51,16 @@ function reducer(state, action) {
     }
   }
 
-  if (action.type === actions.toggleExpandedByPath) {
-    const { path, expanded } = action
-    const key = path.join('.')
-    const exists = state.expanded.includes(key)
+  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(key)
+      newExpanded.add(id)
     } else if (exists && !shouldExist) {
-      newExpanded.delete(key)
+      newExpanded.delete(id)
     } else {
       return state
     }
@@ -95,8 +94,8 @@ function useInstance(instance) {
     }
   }, [dispatch, data])
 
-  const toggleExpandedByPath = (path, expanded) => {
-    dispatch({ type: actions.toggleExpandedByPath, path, expanded })
+  const toggleExpandedById = (id, expanded) => {
+    dispatch({ type: actions.toggleExpandedById, id, expanded })
   }
 
   // use reference to avoid memory leak in #1608
@@ -108,7 +107,7 @@ function useInstance(instance) {
   )
 
   hooks.prepareRow.push(row => {
-    row.toggleExpanded = set => instance.toggleExpandedByPath(row.path, set)
+    row.toggleExpanded = set => instance.toggleExpandedById(row.id, set)
 
     row.getExpandedToggleProps = makePropGetter(
       getExpandedTogglePropsHooks(),
@@ -128,7 +127,7 @@ function useInstance(instance) {
   const expandedDepth = findExpandedDepth(expanded)
 
   Object.assign(instance, {
-    toggleExpandedByPath,
+    toggleExpandedById,
     preExpandedRows: rows,
     expandedRows,
     rows: expandedRows,
@@ -139,9 +138,9 @@ function useInstance(instance) {
 function findExpandedDepth(expanded) {
   let maxDepth = 0
 
-  expanded.forEach(key => {
-    const path = key.split('.')
-    maxDepth = Math.max(maxDepth, path.length)
+  expanded.forEach(id => {
+    const splitId = id.split('.')
+    maxDepth = Math.max(maxDepth, splitId.length)
   })
 
   return maxDepth
diff --git a/src/plugin-hooks/useGroupBy.js b/src/plugin-hooks/useGroupBy.js
index 0ddcf7a..eec0daf 100755
--- a/src/plugin-hooks/useGroupBy.js
+++ b/src/plugin-hooks/useGroupBy.js
@@ -236,12 +236,9 @@ function useInstance(instance) {
     let groupedFlatRows = []
 
     // Recursively group the data
-    const groupRecursively = (rows, depth = 0, parentPath = []) => {
+    const groupRecursively = (rows, depth = 0) => {
       // This is the last level, just return the rows
       if (depth >= groupBy.length) {
-        rows.forEach(row => {
-          row.path = [...parentPath, ...row.path]
-        })
         groupedFlatRows = groupedFlatRows.concat(rows)
         return rows
       }
@@ -254,13 +251,14 @@ function useInstance(instance) {
       // Recurse to sub rows before aggregation
       groupedRows = Object.entries(groupedRows).map(
         ([groupByVal, subRows], index) => {
-          const path = [...parentPath, `${columnId}:${groupByVal}`]
+          const id = `${columnId}:${groupByVal}`
 
-          subRows = groupRecursively(subRows, depth + 1, path)
+          subRows = groupRecursively(subRows, depth + 1)
 
           const values = aggregateRowsToValues(subRows, depth < groupBy.length)
 
           const row = {
+            id,
             isAggregated: true,
             groupByID: columnId,
             groupByVal,
@@ -268,7 +266,6 @@ function useInstance(instance) {
             subRows,
             depth,
             index,
-            path,
           }
 
           groupedFlatRows.push(row)
diff --git a/src/plugin-hooks/useRowSelect.js b/src/plugin-hooks/useRowSelect.js
index 416bfff..657e2c9 100644
--- a/src/plugin-hooks/useRowSelect.js
+++ b/src/plugin-hooks/useRowSelect.js
@@ -13,7 +13,7 @@ const pluginName = 'useRowSelect'
 
 // Actions
 actions.resetSelectedRows = 'resetSelectedRows'
-actions.toggleRowSelectedAll = 'toggleRowSelectedAll'
+actions.toggleAllRowsSelected = 'toggleAllRowsSelected'
 actions.toggleRowSelected = 'toggleRowSelected'
 
 export const useRowSelect = hooks => {
@@ -47,6 +47,7 @@ const defaultGetToggleRowSelectedProps = (props, instance, row) => {
       },
       checked,
       title: 'Toggle Row Selected',
+      indeterminate: row.isSomeSelected,
     },
   ]
 }
@@ -55,20 +56,23 @@ const defaultGetToggleAllRowsSelectedProps = (props, instance) => [
   props,
   {
     onChange: e => {
-      instance.toggleRowSelectedAll(e.target.checked)
+      instance.toggleAllRowsSelected(e.target.checked)
     },
     style: {
       cursor: 'pointer',
     },
     checked: instance.isAllRowsSelected,
     title: 'Toggle All Rows Selected',
+    indeterminate: Boolean(
+      !instance.isAllRowsSelected && instance.state.selectedRowIds.size
+    ),
   },
 ]
 
 function reducer(state, action, previousState, instanceRef) {
   if (action.type === actions.init) {
     return {
-      selectedRowPaths: new Set(),
+      selectedRowIds: new Set(),
       ...state,
     }
   }
@@ -76,103 +80,85 @@ function reducer(state, action, previousState, instanceRef) {
   if (action.type === actions.resetSelectedRows) {
     return {
       ...state,
-      selectedRowPaths: new Set(),
+      selectedRowIds: new Set(),
     }
   }
 
-  if (action.type === actions.toggleRowSelectedAll) {
+  if (action.type === actions.toggleAllRowsSelected) {
     const { selected } = action
-    const { isAllRowsSelected, flatRowPaths } = instanceRef.current
+    const { isAllRowsSelected, flatRowsById } = instanceRef.current
 
     const selectAll =
       typeof selected !== 'undefined' ? selected : !isAllRowsSelected
 
     return {
       ...state,
-      selectedRowPaths: selectAll ? new Set(flatRowPaths) : new Set(),
+      selectedRowIds: selectAll ? new Set(flatRowsById.keys()) : new Set(),
     }
   }
 
   if (action.type === actions.toggleRowSelected) {
-    const { path, selected } = action
-    const { flatRowPaths } = instanceRef.current
+    const { id, selected } = action
+    const { flatGroupedRowsById } = instanceRef.current
 
-    const key = path.join('.')
-    const childRowPrefixKey = [key, '.'].join('')
-
-    // Join the paths of deep rows
+    // Join the ids of deep rows
     // to make a key, then manage all of the keys
     // in a flat object
-    const exists = state.selectedRowPaths.has(key)
-    const shouldExist = typeof set !== 'undefined' ? selected : !exists
+    const row = flatGroupedRowsById.get(id)
+    const isSelected = row.isSelected
+    const shouldExist = typeof set !== 'undefined' ? selected : !isSelected
 
-    let newSelectedRowPaths = new Set(state.selectedRowPaths)
-
-    if (!exists && shouldExist) {
-      flatRowPaths.forEach(rowPath => {
-        if (rowPath === key || rowPath.startsWith(childRowPrefixKey)) {
-          newSelectedRowPaths.add(rowPath)
-        }
-      })
-    } else if (exists && !shouldExist) {
-      flatRowPaths.forEach(rowPath => {
-        if (rowPath === key || rowPath.startsWith(childRowPrefixKey)) {
-          newSelectedRowPaths.delete(rowPath)
-        }
-      })
-    } else {
+    if (isSelected === shouldExist) {
       return state
     }
 
-    const updateParentRow = (selectedRowPaths, path) => {
-      const parentPath = path.slice(0, path.length - 1)
-      const parentKey = parentPath.join('.')
-      const selected =
-        flatRowPaths.filter(rowPath => {
-          const path = rowPath
-          return (
-            path !== parentKey &&
-            path.startsWith(parentKey) &&
-            !selectedRowPaths.has(path)
-          )
-        }).length === 0
-      if (selected) {
-        selectedRowPaths.add(parentKey)
-      } else {
-        selectedRowPaths.delete(parentKey)
+    let newSelectedRowPaths = new Set(state.selectedRowIds)
+
+    const handleRowById = id => {
+      const row = flatGroupedRowsById.get(id)
+
+      if (!row.isAggregated) {
+        if (!isSelected && shouldExist) {
+          newSelectedRowPaths.add(id)
+        } else if (isSelected && !shouldExist) {
+          newSelectedRowPaths.delete(id)
+        }
+      }
+
+      if (row.subRows) {
+        return row.subRows.forEach(row => handleRowById(row.id))
       }
-      if (parentPath.length > 1) updateParentRow(selectedRowPaths, parentPath)
     }
 
-    // If the row is a subRow update
-    // its parent row to reflect changes
-    if (path.length > 1) updateParentRow(newSelectedRowPaths, path)
+    handleRowById(id)
 
     return {
       ...state,
-      selectedRowPaths: newSelectedRowPaths,
+      selectedRowIds: newSelectedRowPaths,
     }
   }
 }
 
 function useRows(rows, instance) {
   const {
-    state: { selectedRowPaths },
+    state: { selectedRowIds },
   } = instance
 
   instance.selectedFlatRows = React.useMemo(() => {
     const selectedFlatRows = []
 
     rows.forEach(row => {
-      row.isSelected = getRowIsSelected(row, selectedRowPaths)
+      const isSelected = getRowIsSelected(row, selectedRowIds)
+      row.isSelected = !!isSelected
+      row.isSomeSelected = isSelected === null
 
-      if (row.isSelected) {
+      if (isSelected) {
         selectedFlatRows.push(row)
       }
     })
 
     return selectedFlatRows
-  }, [rows, selectedRowPaths])
+  }, [rows, selectedRowIds])
 
   return rows
 }
@@ -184,7 +170,7 @@ function useInstance(instance) {
     plugins,
     flatRows,
     autoResetSelectedRows = true,
-    state: { selectedRowPaths },
+    state: { selectedRowIds },
     dispatch,
   } = instance
 
@@ -195,12 +181,24 @@ function useInstance(instance) {
     []
   )
 
-  const flatRowPaths = flatRows.map(d => d.path.join('.'))
+  const [flatRowsById, flatGroupedRowsById] = React.useMemo(() => {
+    const map = new Map()
+    const groupedMap = new Map()
 
-  let isAllRowsSelected = !!flatRowPaths.length && !!selectedRowPaths.size
+    flatRows.forEach(row => {
+      if (!row.isAggregated) {
+        map.set(row.id, row)
+      }
+      groupedMap.set(row.id, row)
+    })
+
+    return [map, groupedMap]
+  }, [flatRows])
+
+  let isAllRowsSelected = Boolean(flatRowsById.size && selectedRowIds.size)
 
   if (isAllRowsSelected) {
-    if (flatRowPaths.some(d => !selectedRowPaths.has(d))) {
+    if ([...flatRowsById.keys()].some(d => !selectedRowIds.has(d))) {
       isAllRowsSelected = false
     }
   }
@@ -213,13 +211,12 @@ function useInstance(instance) {
     }
   }, [dispatch, data])
 
-  const toggleRowSelectedAll = selected =>
-    dispatch({ type: actions.toggleRowSelectedAll, selected })
+  const toggleAllRowsSelected = selected =>
+    dispatch({ type: actions.toggleAllRowsSelected, selected })
 
-  const toggleRowSelected = (path, selected) =>
-    dispatch({ type: actions.toggleRowSelected, path, selected })
+  const toggleRowSelected = (id, selected) =>
+    dispatch({ type: actions.toggleRowSelected, id, selected })
 
-  // use reference to avoid memory leak in #1608
   const getInstance = useGetLatest(instance)
 
   const getToggleAllRowsSelectedPropsHooks = useConsumeHookGetter(
@@ -238,7 +235,7 @@ function useInstance(instance) {
   )
 
   hooks.prepareRow.push(row => {
-    row.toggleRowSelected = set => toggleRowSelected(row.path, set)
+    row.toggleRowSelected = set => toggleRowSelected(row.id, set)
 
     row.getToggleRowSelectedProps = makePropGetter(
       getToggleRowSelectedPropsHooks(),
@@ -248,20 +245,38 @@ function useInstance(instance) {
   })
 
   Object.assign(instance, {
-    flatRowPaths,
+    flatRowsById,
+    flatGroupedRowsById,
     toggleRowSelected,
-    toggleRowSelectedAll,
+    toggleAllRowsSelected,
     getToggleAllRowsSelectedProps,
     isAllRowsSelected,
   })
 }
 
-function getRowIsSelected(row, selectedRowPaths) {
-  if (row.isAggregated) {
-    return row.subRows.every(subRow =>
-      getRowIsSelected(subRow, selectedRowPaths)
-    )
+function getRowIsSelected(row, selectedRowIds) {
+  if (selectedRowIds.has(row.id)) {
+    return true
   }
 
-  return selectedRowPaths.has(row.path.join('.'))
+  if (row.isAggregated || (row.subRows && row.subRows.length)) {
+    let allChildrenSelected = true
+    let someSelected = false
+
+    row.subRows.forEach(subRow => {
+      // Bail out early if we know both of these
+      if (someSelected && !allChildrenSelected) {
+        return
+      }
+
+      if (getRowIsSelected(subRow, selectedRowIds)) {
+        someSelected = true
+      } else {
+        allChildrenSelected = false
+      }
+    })
+    return allChildrenSelected ? true : someSelected ? null : false
+  }
+
+  return false
 }
diff --git a/src/plugin-hooks/useRowState.js b/src/plugin-hooks/useRowState.js
index 18f34ae..a3941df 100644
--- a/src/plugin-hooks/useRowState.js
+++ b/src/plugin-hooks/useRowState.js
@@ -34,15 +34,13 @@ function reducer(state, action) {
   }
 
   if (action.type === actions.setRowState) {
-    const { path, value } = action
-
-    const pathKey = path.join('.')
+    const { id, value } = action
 
     return {
       ...state,
       rowState: {
         ...state.rowState,
-        [pathKey]: functionalUpdate(value, state.rowState[pathKey] || {}),
+        [id]: functionalUpdate(value, state.rowState[id] || {}),
       },
     }
   }
@@ -59,10 +57,10 @@ function useInstance(instance) {
   } = instance
 
   const setRowState = React.useCallback(
-    (path, value, columnId) =>
+    (id, value, columnId) =>
       dispatch({
         type: actions.setRowState,
-        path,
+        id,
         value,
         columnId,
       }),
@@ -92,23 +90,21 @@ function useInstance(instance) {
   )
 
   hooks.prepareRow.push(row => {
-    const pathKey = row.path.join('.')
-
     if (row.original) {
       row.state =
-        (typeof rowState[pathKey] !== 'undefined'
-          ? rowState[pathKey]
+        (typeof rowState[row.id] !== 'undefined'
+          ? rowState[row.id]
           : initialRowStateAccessor && initialRowStateAccessor(row)) || {}
 
       row.setState = updater => {
-        return setRowState(row.path, updater)
+        return setRowState(row.id, updater)
       }
 
       row.cells.forEach(cell => {
         cell.state = row.state.cellState || {}
 
         cell.setState = updater => {
-          return setCellState(row.path, cell.column.id, updater)
+          return setCellState(row.id, cell.column.id, updater)
         }
       })
     }
diff --git a/src/utils.js b/src/utils.js
index 888b96b..58d29ff 100755
--- a/src/utils.js
+++ b/src/utils.js
@@ -272,11 +272,9 @@ export function expandRows(
   const expandedRows = []
 
   const handleRow = row => {
-    const key = row.path.join('.')
-
     row.isExpanded =
       (row.original && row.original[manualExpandedKey]) ||
-      expanded.includes(key)
+      expanded.includes(row.id)
 
     row.canExpand = row.subRows && !!row.subRows.length