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

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 (
+      <>
+        <input type="checkbox" ref={resolvedRef} {...rest} />
+      </>
+    )
+  }
+)
+
 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 }) {
           })}
         </tbody>
       </table>
-      <p>Selected Rows: {selectedRowPaths.size}</p>
+      <p>Selected Rows: {selectedRowIds.size}</p>
       <pre>
         <code>
           {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 }) => (
           <div>
-            <input type="checkbox" {...getToggleAllRowsSelectedProps()} />
+            <IndeterminateCheckbox {...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()} />
+            <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
           </div>
         ),
       },
@@ -155,7 +172,7 @@ function App() {
     []
   )
 
-  const data = React.useMemo(() => makeData(10), [])
+  const data = React.useMemo(() => makeData(10, 3), [])
 
   return (
     <Styles>