v7.0.0-alpha.22

The renderer function for headers, columns, cells, aggregates, filters, etc used to mix properties
from all of those contexts, including rows. Now thow contexts are located on their own reserved
properties, eg. `Cell: ({ cell: { value}, row, column, ...instance }) => value`

BREAKING CHANGE: The renderer function for headers, columns, cells, aggregates, filters, etc used

README.md

@@ -77,7 +77,7 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
         </a>
       </td>
       <td align="center" valign="middle">
-        <a href="https://zappi.com/web" target="_blank">
+        <a href="https://zappi.io/web/" target="_blank">
           <img width='230' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-zappi.png">
         </a>
       </td>
@@ -111,11 +111,9 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
         </a>
       </td>
       <td>
-        <ul>
-          <li>Nicholas Kaufmann</li>
-          <li>Pekka</li>
-          <li>Jon Eickmeier</li>
-        </ul>
+        <div>Nicholas Kaufmann</div>
+        <div><a href="https://www.metso.com/">Pekka</a></div>
+        <div>Jon Eickmeier</div>
       </td>
     </tr>
   </tbody>
@@ -130,14 +128,12 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
         </a>
       </td>
       <td>
-        <ul>
-          <li>Sortmy.games</li>
-          <li>Hugo Meissner</li>
-          <li>Benoit Leger-Derville</li>
-          <li>Thomas Funk</li>
-          <li>Dan Houle</li>
-          <li>David Pickut</li>
-        </ul>
+        <div>Sortmy.games</div>
+        <div>Hugo Meissner</div>
+        <div>Benoit Leger-Derville</div>
+        <div>Thomas Funk</div>
+        <div>Dan Houle</div>
+        <div>David Pickut</div>
       </td>
     </tr>
   </tbody>
@@ -191,7 +187,7 @@ import {
   - [Row Selection](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection)
   - [Expanding](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding)
   - [Sub Components](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sub-components)
-  - [Editable Data](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/editable-cells)
+  - [Editable Data](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/editable-data)
 - Controlled
   - [Pagination (Controlled)](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
 
@@ -226,6 +222,8 @@ React Table is essentially a compatible collection of **custom React hooks**:
 
 - The primary React Table hook
   - [`useTable`](#usetable)
+- Utility Hooks
+  - [`useTableState`](#useTableState)
 - Plugin Hooks
   - Core Plugin Hooks
     - [`useTableState`](#useTableState)
@@ -235,6 +233,8 @@ React Table is essentially a compatible collection of **custom React hooks**:
     - [`useExpanded`](#useExpanded)
     - [`usePagination`](#usePagination)
     - [`useTokenPagination`](#useTokenPagination)
+    - [`useRowSelect`](#useRowSelect)
+    - [`useRowState`](#useRowState)
   - Layout Plugin Hooks
     - [`useFlexLayout`](#useFlexLayout)
     - [`useAbsoluteLayout`](#useAbsoluteLayout) (coming soon!)
@@ -351,13 +351,13 @@ The following options are supported on any column object you can pass to `column
   - The data model for hidden columns is still calculated including sorting, filters, and grouping.
 - `Header: String | Function | React.Component => JSX`
   - Optional
-  - Defaults to `({ id }) => id`
+  - Defaults to `() => null`
   - Receives the table instance and column model as props
   - Must either be a **string or return valid JSX**
   - If a function/component is passed, it will be used for formatting the header value, eg. You can use a `Header` function to dynamically format the header using any table or column state.
 - `Cell: Function | React.Component => JSX`
   - Optional
-  - Defaults to `({ value }) => value`
+  - Defaults to `({ cell: { value } }) => value`
   - 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.
@@ -424,7 +424,8 @@ The following properties are available on every `Column` object returned by the
 - `visible: Boolean`
   - The resolved visible state for the column, derived from the column's `show` property
 - `render: Function(type: String | Function | Component, ?props)`
-  - This function is used to render content in context of a column.
+  - This function is used to render content with the added context of a column.
+  - The entire table `instance` will be passed to the renderer with the addition of a `column` property, containing a reference to the column
   - If `type` is a string, will render using the `column[type]` renderer. React Table ships with default `Header` renderers. Other renderers like `Filter` are available via hooks like `useFilters`.
   - If a function or component is passed instead of a string, it will be be passed the table instance and column model as props and is expected to return any valid JSX.
 - `getHeaderProps: Function(?props)`
@@ -479,7 +480,8 @@ The following additional properties are available on every `Cell` object returne
   - Custom props may be passed. **NOTE: Custom props will override built-in table props, so be careful!**
 - `render: Function(type: String | Function | Component, ?props)`
   - **Required**
-  - This function is used to render content in context of a cell.
+  - This function is used to render content with the added context of a cell.
+  - The entire table `instance` will be passed to the renderer with the addition of `column`, `row` and `cell` properties, containing a reference to each respective item.
   - If `type` is a string, will render using the `column[type]` renderer. React Table ships with a default `Cell` renderer. Other renderers like `Aggregated` are available via hooks like `useFilters`.
   - If a function or component is passed instead of a string, it will be be passed the table instance and cell model as props and is expected to return any valid JSX.
 
@@ -587,6 +589,11 @@ The following options are supported via the main options object passed to `useTa
   - Disables sorting for every column in the entire table.
 - `disableMultiSort: Bool`
   - Disables multi-sorting for the entire table.
+- `isMultiSortEvent: Function`
+  - Allows to override default multisort behaviour(i.e. multisort applies when shift key is presssed), if this function is provided then returned boolean value from this function will make decision whether newly applied sort action will be considered as multisort or not.
+  - Receives `event` as argument.
+- `maxMultiSortColCount: Number`
+  - Limit on max number of columns for multisort, e.g. if set to 3, and suppose table is sorted by `[A, B, C]` and then clicking `D` for sorting should result in table sorted by `[B, C , D]`
 - `disableSortRemove: Bool`
   - If true, the un-sorted state will not be available to columns once they have been sorted.
 - `disableMultiRemove: Bool`
@@ -792,7 +799,7 @@ The following properties are available on every `Column` object returned by the
   - An column-level function used to update the filter value for this column
 - `filterValue: any`
   - The current filter value for this column, resolved from the table state's `filters` object
-- `preFilteredRows: Array<row>`
+- `preFilteredColumnRows: Array<row>`
   - The array of rows that were originally passed to this columns filter **before** they were filtered.
   - This array of rows can be useful if building faceted filter options.
 
@@ -1059,7 +1066,7 @@ function App() {
             // then sum any of those counts if they are
             // aggregated further
             aggregate: ['sum', 'count'],
-            Aggregated: ({ value }) => `${value} Names`,
+            Aggregated: ({ cell: { value } }) => `${value} Names`,
           },
           {
             Header: 'Last Name',
@@ -1069,7 +1076,7 @@ function App() {
             // being aggregated, then sum those counts if
             // they are aggregated further
             aggregate: ['sum', 'uniqueCount'],
-            Aggregated: ({ value }) => `${value} Unique Names`,
+            Aggregated: ({ cell: { value } }) => `${value} Unique Names`,
           },
         ],
       },
@@ -1081,14 +1088,14 @@ function App() {
             accessor: 'age',
             // Aggregate the average age of visitors
             aggregate: 'average',
-            Aggregated: ({ value }) => `${value} (avg)`,
+            Aggregated: ({ cell: { value } }) => `${value} (avg)`,
           },
           {
             Header: 'Visits',
             accessor: 'visits',
             // Aggregate the sum of all visits
             aggregate: 'sum',
-            Aggregated: ({ value }) => `${value} (total)`,
+            Aggregated: ({ cell: { value } }) => `${value} (total)`,
           },
           {
             Header: 'Status',
@@ -1099,7 +1106,7 @@ function App() {
             accessor: 'progress',
             // Use our custom roundedMedian aggregator
             aggregate: roundedMedian,
-            Aggregated: ({ value }) => `${value} (med)`,
+            Aggregated: ({ cell: { value } }) => `${value} (med)`,
           },
         ],
       },

configs/tests/jest.common.js

@@ -13,4 +13,5 @@ module.exports = {
   rootDir: path.resolve(__dirname, '../../'),
   roots: ['<rootDir>/src', __dirname],
   transformIgnorePatterns: ['node_modules'],
+  snapshotSerializers: [require.resolve('snapshot-diff/serializer.js')],
 }

configs/tests/setup.common.js

@@ -1 +1,2 @@
+import '@testing-library/jest-dom/extend-expect'
 import 'snapshot-diff/extend-expect'

examples/editable-data/README.md

@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 You can:
 
-- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/editable-data)
 - `yarn` and `yarn start` to run and edit the example

examples/expanding/README.md

@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 You can:
 
-- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding)
 - `yarn` and `yarn start` to run and edit the example

examples/filtering/README.md

@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 You can:
 
-- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering)
 - `yarn` and `yarn start` to run and edit the example

examples/filtering/src/App.js

@@ -36,14 +36,16 @@ const Styles = styled.div`
 `
 
 // Define a default UI for filtering
-function DefaultColumnFilter({ filterValue, setFilter }) {
+function DefaultColumnFilter({ filterValue, preFilteredRows, setFilter }) {
+  const count = preFilteredRows.length
+
   return (
     <input
       value={filterValue || ''}
       onChange={e => {
         setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
       }}
-      placeholder="Search..."
+      placeholder={`Search ${count} records...`}
     />
   )
 }
@@ -88,6 +90,7 @@ function SelectColumnFilter({ filterValue, setFilter, preFilteredRows, id }) {
 function SliderColumnFilter({ filterValue, setFilter, preFilteredRows, id }) {
   // Calculate the min and max
   // using the preFilteredRows
+
   const [min, max] = React.useMemo(
     () => {
       let min = 0
@@ -120,7 +123,25 @@ function SliderColumnFilter({ filterValue, setFilter, preFilteredRows, id }) {
 // This is a custom UI for our 'between' or number range
 // filter. It uses two number boxes and filters rows to
 // ones that have values between the two
-function NumberRangeColumnFilter({ filterValue = [], setFilter }) {
+function NumberRangeColumnFilter({
+  filterValue = [],
+  preFilteredRows,
+  setFilter,
+  id,
+}) {
+  const [min, max] = React.useMemo(
+    () => {
+      let min = 0
+      let max = 0
+      preFilteredRows.forEach(row => {
+        min = Math.min(row.values[id], min)
+        max = Math.max(row.values[id], max)
+      })
+      return [min, max]
+    },
+    [id, preFilteredRows]
+  )
+
   return (
     <div
       style={{
@@ -134,7 +155,7 @@ function NumberRangeColumnFilter({ filterValue = [], setFilter }) {
           const val = e.target.value
           setFilter((old = []) => [val ? parseInt(val, 10) : undefined, old[1]])
         }}
-        placeholder="Min"
+        placeholder={`Min (${min})`}
         style={{
           width: '70px',
           marginRight: '0.5rem',
@@ -148,7 +169,7 @@ function NumberRangeColumnFilter({ filterValue = [], setFilter }) {
           const val = e.target.value
           setFilter((old = []) => [old[0], val ? parseInt(val, 10) : undefined])
         }}
-        placeholder="Max"
+        placeholder={`Max (${max})`}
         style={{
           width: '70px',
           marginLeft: '0.5rem',

examples/grouping/README.md

@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 You can:
 
-- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/grouping)
 - `yarn` and `yarn start` to run and edit the example

examples/pagination-controlled/README.md

@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 You can:
 
-- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
 - `yarn` and `yarn start` to run and edit the example

examples/pagination/README.md

@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 You can:
 
-- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination)
 - `yarn` and `yarn start` to run and edit the example

examples/pagination/src/App.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { useTable, usePagination } from 'react-table'
+import { useTable, usePagination, useTableState } from 'react-table'
 
 import makeData from './makeData'
 
@@ -38,6 +38,8 @@ const Styles = styled.div`
 `
 
 function Table({ columns, data }) {
+  const tableState = useTableState({ pageIndex: 2 })
+
   // Use the state and functions returned from useTable to build your UI
   const {
     getTableProps,
@@ -60,6 +62,7 @@ function Table({ columns, data }) {
     {
       columns,
       data,
+      state: tableState,
     },
     usePagination
   )

examples/row-selection/README.md

@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 You can:
 
-- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection)
 - `yarn` and `yarn start` to run and edit the example

examples/sorting/README.md

@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 You can:
 
-- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting)
 - `yarn` and `yarn start` to run and edit the example

examples/sub-components/README.md

@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 You can:
 
-- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sub-components)
 - `yarn` and `yarn start` to run and edit the example

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-alpha.21",
+  "version": "7.0.0-alpha.22",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -51,12 +51,12 @@
     "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^8.1.0",
     "@svgr/rollup": "^4.3.2",
-    "@testing-library/dom": "^5.6.0",
+    "@testing-library/dom": "^6.0.0",
     "@testing-library/jest-dom": "^4.0.0",
-    "@testing-library/react": "^8.0.7",
+    "@testing-library/react": "^9.1.1",
     "babel-eslint": "9.x",
     "commitizen": "^4.0.3",
-    "core-js": "3",
+    "core-js": "3.2.1",
     "cross-env": "^5.2.0",
     "eslint": "5.x",
     "eslint-config-prettier": "^4.3.0",
@@ -70,9 +70,9 @@
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "7.14.3",
-    "eslint-plugin-react-hooks": "1.6.1",
+    "eslint-plugin-react-hooks": "1.7.0",
     "eslint-plugin-standard": "^4.0.0",
-    "husky": "^3.0.2",
+    "husky": "^3.0.3",
     "is-ci-cli": "^1.1.1",
     "jest": "^24.8.0",
     "jest-cli": "^24.8.0",
@@ -81,8 +81,8 @@
     "jest-watch-typeahead": "^0.3.1",
     "lint-staged": "^9.2.1",
     "prop-types": "^15.5.0",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "rollup": "^0.68.0",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^9.1.3",

src/hooks/tests/useTable.test.js

@@ -1,6 +1,3 @@
-import '@testing-library/react/cleanup-after-each'
-import '@testing-library/jest-dom/extend-expect'
-
 import React from 'react'
 import { render } from '@testing-library/react'
 import { useTable } from '../useTable'

src/hooks/useTable.js

@@ -31,6 +31,8 @@ const propTypes = {
 const renderErr =
   'You must specify a valid render component. This could be "column.Cell", "column.Header", "column.Filter", "column.Aggregated" or any other custom renderer component.'
 
+const defaultColumnInstance = {}
+
 export const useTable = (props, ...plugins) => {
   // Validate props
   PropTypes.checkPropTypes(propTypes, props, 'property', 'useTable')
@@ -40,7 +42,7 @@ export const useTable = (props, ...plugins) => {
     data,
     state: userState,
     columns: userColumns,
-    defaultColumn = {},
+    defaultColumn = defaultColumnInstance,
     subRowsKey = 'subRows',
     debug,
   } = props
@@ -241,7 +243,7 @@ export const useTable = (props, ...plugins) => {
 
         return flexRender(Comp, {
           ...instanceRef.current,
-          ...column,
+          column,
           ...userProps,
         })
       }
@@ -251,7 +253,9 @@ export const useTable = (props, ...plugins) => {
         mergeProps(
           {
             key: ['header', column.id].join('_'),
-            colSpan: column.columns ? column.columns.length : 1,
+            colSpan: column.columns
+              ? column.columns.filter(column => column.visible).length
+              : 1,
           },
           applyPropHooks(
             instanceRef.current.hooks.getHeaderProps,
@@ -363,7 +367,9 @@ export const useTable = (props, ...plugins) => {
 
         return flexRender(Comp, {
           ...instanceRef.current,
-          ...cell,
+          column,
+          row,
+          cell,
           ...userProps,
         })
       }

src/hooks/useTableState.js

@@ -16,20 +16,17 @@ export const useTableState = (
     ...initialState,
   })
 
-  const overriddenState = React.useMemo(
-    () => {
-      const newState = {
-        ...state,
-      }
-      if (overrides) {
-        Object.keys(overrides).forEach(key => {
-          newState[key] = overrides[key]
-        })
-      }
-      return newState
-    },
-    [overrides, state]
-  )
+  const overriddenState = React.useMemo(() => {
+    const newState = {
+      ...state,
+    }
+    if (overrides) {
+      Object.keys(overrides).forEach(key => {
+        newState[key] = overrides[key]
+      })
+    }
+    return newState
+  }, [overrides, state])
 
   const overriddenStateRef = React.useRef()
   overriddenStateRef.current = overriddenState

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders an expandable table 1`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
@@ -10,64 +10,64 @@ exports[`renders an expandable table 1`] = `
     <pre>
       <code>
         {
--   \\"expanded\\": {}
-+   \\"expanded\\": {
-+     \\"0\\": true
+-   "expanded": {}
++   "expanded": {
++     "0": true
 +   }
   }
       </code>
     </pre>
     <table
-      class=\\"\\"
+      class=""
 @@ -82,10 +84,53 @@
           <td
-            class=\\"\\"
+            class=""
           >
             <span
-              style=\\"cursor: pointer; padding-left: 0rem;\\"
+              style="cursor: pointer; padding-left: 0rem;"
 +           >
 +             👇
 +           </span>
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           tanner
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           linsley
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           29
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           100
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           In Relationship
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           50
 +         </td>
 +       </tr>
 +       <tr
-+         class=\\"\\"
++         class=""
 +       >
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           <span
-+             style=\\"cursor: pointer; padding-left: 2rem;\\"
++             style="cursor: pointer; padding-left: 2rem;"
             >
               👉
             </span>
@@ -76,147 +76,147 @@ exports[`renders an expandable table 1`] = `
 @@ -115,10 +160,139 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             50
 +         </td>
 +       </tr>
 +       <tr
-+         class=\\"\\"
++         class=""
 +       >
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           <span
-+             style=\\"cursor: pointer; padding-left: 2rem;\\"
++             style="cursor: pointer; padding-left: 2rem;"
 +           >
 +             👉
 +           </span>
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           derek
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           perkins
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           40
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           40
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           Single
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           80
 +         </td>
 +       </tr>
 +       <tr
-+         class=\\"\\"
++         class=""
 +       >
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           <span
-+             style=\\"cursor: pointer; padding-left: 2rem;\\"
++             style="cursor: pointer; padding-left: 2rem;"
 +           >
 +             👉
 +           </span>
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           joe
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           bergevin
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           45
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           20
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           Complicated
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           10
 +         </td>
 +       </tr>
 +       <tr
-+         class=\\"\\"
++         class=""
 +       >
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           <span
-+             style=\\"cursor: pointer; padding-left: 2rem;\\"
++             style="cursor: pointer; padding-left: 2rem;"
 +           >
 +             👉
 +           </span>
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           jaylen
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           linsley
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           26
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           99
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           In Relationship
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           70
           </td>
         </tr>
         <tr
-          class=\\"\\"
-        >"
+          class=""
+        >
 `;
 
 exports[`renders an expandable table 2`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
@@ -225,10 +225,10 @@ exports[`renders an expandable table 2`] = `
     <pre>
       <code>
         {
-    \\"expanded\\": {
--     \\"0\\": true
-+     \\"0\\": {
-+       \\"0\\": true
+    "expanded": {
+-     "0": true
++     "0": {
++       "0": true
 +     }
     }
   }
@@ -237,53 +237,53 @@ exports[`renders an expandable table 2`] = `
     <table
 @@ -127,10 +129,53 @@
           <td
-            class=\\"\\"
+            class=""
           >
             <span
-              style=\\"cursor: pointer; padding-left: 2rem;\\"
+              style="cursor: pointer; padding-left: 2rem;"
 +           >
 +             👇
 +           </span>
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           tanner
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           linsley
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           29
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           100
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           In Relationship
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           50
 +         </td>
 +       </tr>
 +       <tr
-+         class=\\"\\"
++         class=""
 +       >
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           <span
-+             style=\\"cursor: pointer; padding-left: 4rem;\\"
++             style="cursor: pointer; padding-left: 4rem;"
             >
               👉
             </span>
@@ -292,147 +292,147 @@ exports[`renders an expandable table 2`] = `
 @@ -160,10 +205,139 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             50
 +         </td>
 +       </tr>
 +       <tr
-+         class=\\"\\"
++         class=""
 +       >
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           <span
-+             style=\\"cursor: pointer; padding-left: 4rem;\\"
++             style="cursor: pointer; padding-left: 4rem;"
 +           >
 +             👉
 +           </span>
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           derek
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           perkins
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           40
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           40
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           Single
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           80
 +         </td>
 +       </tr>
 +       <tr
-+         class=\\"\\"
++         class=""
 +       >
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           <span
-+             style=\\"cursor: pointer; padding-left: 4rem;\\"
++             style="cursor: pointer; padding-left: 4rem;"
 +           >
 +             👉
 +           </span>
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           joe
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           bergevin
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           45
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           20
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           Complicated
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           10
 +         </td>
 +       </tr>
 +       <tr
-+         class=\\"\\"
++         class=""
 +       >
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           <span
-+             style=\\"cursor: pointer; padding-left: 4rem;\\"
++             style="cursor: pointer; padding-left: 4rem;"
 +           >
 +             👉
 +           </span>
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           jaylen
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           linsley
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           26
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           99
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           In Relationship
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           70
           </td>
         </tr>
         <tr
-          class=\\"\\"
-        >"
+          class=""
+        >
 `;
 
 exports[`renders an expandable table 3`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
@@ -440,11 +440,11 @@ exports[`renders an expandable table 3`] = `
     <pre>
       <code>
         {
-    \\"expanded\\": {
-      \\"0\\": {
--       \\"0\\": true
-+       \\"0\\": {
-+         \\"0\\": true
+    "expanded": {
+      "0": {
+-       "0": true
++       "0": {
++         "0": true
 +       }
       }
     }
@@ -453,53 +453,53 @@ exports[`renders an expandable table 3`] = `
     </pre>
 @@ -172,10 +174,53 @@
           <td
-            class=\\"\\"
+            class=""
           >
             <span
-              style=\\"cursor: pointer; padding-left: 4rem;\\"
+              style="cursor: pointer; padding-left: 4rem;"
 +           >
 +             👇
 +           </span>
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           tanner
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           linsley
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           29
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           100
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           In Relationship
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           50
 +         </td>
 +       </tr>
 +       <tr
-+         class=\\"\\"
++         class=""
 +       >
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           <span
-+             style=\\"cursor: pointer; padding-left: 6rem;\\"
++             style="cursor: pointer; padding-left: 6rem;"
             >
               👉
             </span>
@@ -508,159 +508,159 @@ exports[`renders an expandable table 3`] = `
 @@ -205,10 +250,139 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             50
 +         </td>
 +       </tr>
 +       <tr
-+         class=\\"\\"
++         class=""
 +       >
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           <span
-+             style=\\"cursor: pointer; padding-left: 6rem;\\"
++             style="cursor: pointer; padding-left: 6rem;"
 +           >
 +             👉
 +           </span>
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           derek
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           perkins
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           40
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           40
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           Single
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           80
 +         </td>
 +       </tr>
 +       <tr
-+         class=\\"\\"
++         class=""
 +       >
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           <span
-+             style=\\"cursor: pointer; padding-left: 6rem;\\"
++             style="cursor: pointer; padding-left: 6rem;"
 +           >
 +             👉
 +           </span>
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           joe
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           bergevin
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           45
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           20
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           Complicated
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           10
 +         </td>
 +       </tr>
 +       <tr
-+         class=\\"\\"
++         class=""
 +       >
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           <span
-+             style=\\"cursor: pointer; padding-left: 6rem;\\"
++             style="cursor: pointer; padding-left: 6rem;"
 +           >
 +             👉
 +           </span>
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           jaylen
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           linsley
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           26
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           99
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           In Relationship
 +         </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         >
 +           70
           </td>
         </tr>
         <tr
-          class=\\"\\"
-        >"
+          class=""
+        >
 `;
 
 exports[`renders an expandable table 4`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
 @@ -3,11 +3,13 @@
       <code>
         {
-    \\"expanded\\": {
-      \\"0\\": {
-        \\"0\\": {
--         \\"0\\": true
-+         \\"0\\": {
-+           \\"0\\": true
+    "expanded": {
+      "0": {
+        "0": {
+-         "0": true
++         "0": {
++           "0": true
 +         }
         }
       }
@@ -668,40 +668,40 @@ exports[`renders an expandable table 4`] = `
   }
       </code>
 @@ -218,11 +220,11 @@
-            class=\\"\\"
+            class=""
           >
             <span
-              style=\\"cursor: pointer; padding-left: 6rem;\\"
+              style="cursor: pointer; padding-left: 6rem;"
             >
 -             👉
 +             👇
             </span>
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 @@ -250,10 +252,30 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             50
 +         </td>
 +       </tr>
 +       <tr>
 +         <td
-+           colspan=\\"7\\"
++           colspan="7"
 +         >
 +           <pre>
 +             <code>
 +               {
-+   \\"values\\": {
-+     \\"firstName\\": \\"tanner\\",
-+     \\"lastName\\": \\"linsley\\",
-+     \\"age\\": 29,
-+     \\"visits\\": 100,
-+     \\"status\\": \\"In Relationship\\",
-+     \\"progress\\": 50
++   "values": {
++     "firstName": "tanner",
++     "lastName": "linsley",
++     "age": 29,
++     "visits": 100,
++     "status": "In Relationship",
++     "progress": 50
 +   }
 + }
 +             </code>
@@ -709,6 +709,6 @@ exports[`renders an expandable table 4`] = `
           </td>
         </tr>
         <tr
-          class=\\"\\"
-        >"
+          class=""
+        >
 `;

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

@@ -1,197 +1,197 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a filterable table 1`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
 @@ -37,11 +37,11 @@
-            colspan=\\"1\\"
+            colspan="1"
           >
             Last Name
             <input
-              placeholder=\\"Search...\\"
--             value=\\"\\"
-+             value=\\"l\\"
+              placeholder="Search..."
+-             value=""
++             value="l"
             />
           </th>
           <th
-            class=\\"\\"
-            colspan=\\"1\\"
+            class=""
+            colspan="1"
 @@ -115,78 +115,10 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             progress: 50
 -         </td>
 -       </tr>
 -       <tr
--         class=\\"\\"
+-         class=""
 -       >
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           firstName: derek
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           lastName: perkins
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           age: 40
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           visits: 40
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           status: Single
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           progress: 80
 -         </td>
 -       </tr>
 -       <tr
--         class=\\"\\"
+-         class=""
 -       >
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           firstName: joe
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           lastName: bergevin
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           age: 45
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           visits: 20
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           status: Complicated
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           progress: 10
           </td>
         </tr>
         <tr
-          class=\\"\\"
-        >"
+          class=""
+        >
 `;
 
 exports[`renders a filterable table 2`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
 @@ -37,11 +37,11 @@
-            colspan=\\"1\\"
+            colspan="1"
           >
             Last Name
             <input
-              placeholder=\\"Search...\\"
--             value=\\"l\\"
-+             value=\\"er\\"
+              placeholder="Search..."
+-             value="l"
++             value="er"
             />
           </th>
           <th
-            class=\\"\\"
-            colspan=\\"1\\"
+            class=""
+            colspan="1"
 @@ -89,70 +89,70 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
 -           firstName: tanner
 +           firstName: derek
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           lastName: linsley
 +           lastName: perkins
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           age: 29
 +           age: 40
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           visits: 100
 +           visits: 40
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           status: In Relationship
 +           status: Single
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           progress: 50
 +           progress: 80
           </td>
         </tr>
         <tr
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
 -           firstName: jaylen
 +           firstName: joe
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           lastName: linsley
 +           lastName: bergevin
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           age: 26
 +           age: 45
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           visits: 99
 +           visits: 20
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           status: In Relationship
 +           status: Complicated
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           progress: 70
 +           progress: 10
@@ -199,5 +199,5 @@ exports[`renders a filterable table 2`] = `
         </tr>
       </tbody>
     </table>
-  </DocumentFragment>"
+  </DocumentFragment>
 `;

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

@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a groupable table 1`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
 @@ -29,13 +29,13 @@
             <span
-              class=\\"\\"
-              style=\\"cursor: pointer;\\"
-              title=\\"Toggle GroupBy\\"
+              class=""
+              style="cursor: pointer;"
+              title="Toggle GroupBy"
             >
 -             👊
 +             🛑
@@ -18,12 +18,12 @@ exports[`renders a groupable table 1`] = `
 +           Last Name
           </th>
           <th
-            class=\\"\\"
-            colspan=\\"1\\"
+            class=""
+            colspan="1"
           >
 @@ -44,11 +44,11 @@
-              style=\\"cursor: pointer;\\"
-              title=\\"Toggle GroupBy\\"
+              style="cursor: pointer;"
+              title="Toggle GroupBy"
             >
               👊
             </span>
@@ -31,36 +31,36 @@ exports[`renders a groupable table 1`] = `
 +           First Name
           </th>
           <th
-            class=\\"\\"
-            colspan=\\"1\\"
+            class=""
+            colspan="1"
           >
 @@ -107,138 +107,119 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
 -           firstName: tanner
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 +           <span
-+             style=\\"cursor: pointer;\\"
++             style="cursor: pointer;"
             >
 -           lastName: linsley
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           age: 29
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           visits: 100
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           status: In Relationship
 +             👉
@@ -68,135 +68,135 @@ exports[`renders a groupable table 1`] = `
 +           lastName: linsley (2)
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           progress: 50
 -         </td>
 -       </tr>
 -       <tr
--         class=\\"\\"
+-         class=""
 -       >
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           firstName: derek
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
 -           lastName: perkins
 +           2 Names
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           age: 40
 +           27.5 (avg)
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           visits: 40
 +           199 (total)
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           status: Single
 +           status: null
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           progress: 80
 +           60 (med)
           </td>
         </tr>
         <tr
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
 -           firstName: joe
 +           <span
-+             style=\\"cursor: pointer;\\"
++             style="cursor: pointer;"
 +           >
 +             👉
 +           </span>
 +           lastName: perkins (1)
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           lastName: bergevin
 +           1 Names
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           age: 45
 +           40 (avg)
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           visits: 20
 +           40 (total)
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           status: Complicated
 +           status: null
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           progress: 10
 +           80 (med)
           </td>
         </tr>
         <tr
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
 -           firstName: jaylen
 +           <span
-+             style=\\"cursor: pointer;\\"
++             style="cursor: pointer;"
 +           >
 +             👉
 +           </span>
 +           lastName: bergevin (1)
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           lastName: linsley
 +           1 Names
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           age: 26
 +           45 (avg)
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           visits: 99
 +           20 (total)
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           status: In Relationship
 +           status: null
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           progress: 70
 +           10 (med)
@@ -204,41 +204,41 @@ exports[`renders a groupable table 1`] = `
         </tr>
       </tbody>
     </table>
-  </DocumentFragment>"
+  </DocumentFragment>
 `;
 
 exports[`renders a groupable table 2`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
 @@ -6,17 +6,29 @@
         <tr
-          class=\\"\\"
+          class=""
         >
           <th
-            class=\\"\\"
--           colspan=\\"2\\"
-+           colspan=\\"1\\"
+            class=""
+-           colspan="2"
++           colspan="1"
           >
             Name
           </th>
           <th
-            class=\\"\\"
--           colspan=\\"4\\"
-+           colspan=\\"1\\"
+            class=""
+-           colspan="4"
++           colspan="1"
 +         >
 +           Info
 +         </th>
 +         <th
-+           class=\\"\\"
-+           colspan=\\"1\\"
++           class=""
++           colspan="1"
 +         >
 +           Name
 +         </th>
 +         <th
-+           class=\\"\\"
-+           colspan=\\"3\\"
++           class=""
++           colspan="3"
           >
             Info
           </th>
@@ -246,9 +246,9 @@ exports[`renders a groupable table 2`] = `
         <tr
 @@ -42,13 +54,13 @@
             <span
-              class=\\"\\"
-              style=\\"cursor: pointer;\\"
-              title=\\"Toggle GroupBy\\"
+              class=""
+              style="cursor: pointer;"
+              title="Toggle GroupBy"
             >
 -             👊
 +             🛑
@@ -257,12 +257,12 @@ exports[`renders a groupable table 2`] = `
 +           Visits
           </th>
           <th
-            class=\\"\\"
-            colspan=\\"1\\"
+            class=""
+            colspan="1"
           >
 @@ -57,11 +69,11 @@
-              style=\\"cursor: pointer;\\"
-              title=\\"Toggle GroupBy\\"
+              style="cursor: pointer;"
+              title="Toggle GroupBy"
             >
               👊
             </span>
@@ -270,12 +270,12 @@ exports[`renders a groupable table 2`] = `
 +           First Name
           </th>
           <th
-            class=\\"\\"
-            colspan=\\"1\\"
+            class=""
+            colspan="1"
           >
 @@ -70,11 +82,11 @@
-              style=\\"cursor: pointer;\\"
-              title=\\"Toggle GroupBy\\"
+              style="cursor: pointer;"
+              title="Toggle GroupBy"
             >
               👊
             </span>
@@ -283,8 +283,8 @@ exports[`renders a groupable table 2`] = `
 +           Age
           </th>
           <th
-            class=\\"\\"
-            colspan=\\"1\\"
+            class=""
+            colspan="1"
           >
 @@ -114,10 +126,13 @@
             >
@@ -293,10 +293,10 @@ exports[`renders a groupable table 2`] = `
             lastName: linsley (2)
           </td>
 +         <td
-+           class=\\"\\"
++           class=""
 +         />
           <td
-            class=\\"\\"
+            class=""
           >
             2 Names
           </td>
@@ -304,42 +304,42 @@ exports[`renders a groupable table 2`] = `
             27.5 (avg)
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           199 (total)
 -         </td>
 -         <td
--           class=\\"\\"
+-           class=""
 -         >
             status: null
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 @@ -155,22 +165,20 @@
             </span>
             lastName: perkins (1)
           </td>
           <td
-            class=\\"\\"
+            class=""
 -         >
 -           1 Names
 -         </td>
 +         />
           <td
-            class=\\"\\"
+            class=""
           >
 -           40 (avg)
 +           1 Names
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           40 (total)
 +           40 (avg)
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             status: null
 @@ -194,22 +202,20 @@
@@ -347,25 +347,25 @@ exports[`renders a groupable table 2`] = `
             lastName: bergevin (1)
           </td>
           <td
-            class=\\"\\"
+            class=""
 -         >
 -           1 Names
 -         </td>
 +         />
           <td
-            class=\\"\\"
+            class=""
           >
 -           45 (avg)
 +           1 Names
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           20 (total)
 +           45 (avg)
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
-            status: null"
+            status: null
 `;

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

@@ -1,320 +1,138 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a paginated table 1`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
 @@ -65,11 +65,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 1
-+           tanner 11
+-           tanner 21
++           tanner 31
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -99,11 +99,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 2
-+           tanner 12
+-           tanner 22
++           tanner 32
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -133,11 +133,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 3
-+           tanner 13
+-           tanner 23
++           tanner 33
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -167,11 +167,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 4
-+           tanner 14
+-           tanner 24
++           tanner 34
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -201,11 +201,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 5
-+           tanner 15
+-           tanner 25
++           tanner 35
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -235,11 +235,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 6
-+           tanner 16
+-           tanner 26
++           tanner 36
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -269,11 +269,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 7
-+           tanner 17
+-           tanner 27
++           tanner 37
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -303,11 +303,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 8
-+           tanner 18
+-           tanner 28
++           tanner 38
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -337,11 +337,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 9
-+           tanner 19
+-           tanner 29
++           tanner 39
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -371,11 +371,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 10
-+           tanner 20
+-           tanner 30
++           tanner 40
           </td>
           <td
-            class=\\"\\"
-          >
-            linsley
-@@ -404,19 +404,15 @@
-      </tbody>
-    </table>
-    <div
-      class=\\"pagination\\"
-    >
--     <button
--       disabled=\\"\\"
--     >
-+     <button>
-        &lt;&lt;
-      </button>
-       
--     <button
--       disabled=\\"\\"
--     >
-+     <button>
-        &lt;
-      </button>
-       
-      <button>
-        &gt;
-@@ -427,20 +423,20 @@
-      </button>
-       
-      <span>
-        Page 
-        <strong>
--         1 of 10
-+         2 of 10
-        </strong>
-         
-      </span>
-      <span>
-        | Go to page: 
-        <input
-          style=\\"width: 100px;\\"
-          type=\\"number\\"
--         value=\\"1\\"
-+         value=\\"2\\"
-        />
-      </span>
-       
-      <select>
-        <option"
-`;
-
-exports[`renders a paginated table 2`] = `
-"Snapshot Diff:
-- First value
-+ Second value
-
-@@ -65,11 +65,11 @@
-          class=\\"\\"
-        >
-          <td
-            class=\\"\\"
-          >
--           tanner 11
-+           tanner 21
-          </td>
-          <td
-            class=\\"\\"
-          >
-            linsley
-@@ -99,11 +99,11 @@
-          class=\\"\\"
-        >
-          <td
-            class=\\"\\"
-          >
--           tanner 12
-+           tanner 22
-          </td>
-          <td
-            class=\\"\\"
-          >
-            linsley
-@@ -133,11 +133,11 @@
-          class=\\"\\"
-        >
-          <td
-            class=\\"\\"
-          >
--           tanner 13
-+           tanner 23
-          </td>
-          <td
-            class=\\"\\"
-          >
-            linsley
-@@ -167,11 +167,11 @@
-          class=\\"\\"
-        >
-          <td
-            class=\\"\\"
-          >
--           tanner 14
-+           tanner 24
-          </td>
-          <td
-            class=\\"\\"
-          >
-            linsley
-@@ -201,11 +201,11 @@
-          class=\\"\\"
-        >
-          <td
-            class=\\"\\"
-          >
--           tanner 15
-+           tanner 25
-          </td>
-          <td
-            class=\\"\\"
-          >
-            linsley
-@@ -235,11 +235,11 @@
-          class=\\"\\"
-        >
-          <td
-            class=\\"\\"
-          >
--           tanner 16
-+           tanner 26
-          </td>
-          <td
-            class=\\"\\"
-          >
-            linsley
-@@ -269,11 +269,11 @@
-          class=\\"\\"
-        >
-          <td
-            class=\\"\\"
-          >
--           tanner 17
-+           tanner 27
-          </td>
-          <td
-            class=\\"\\"
-          >
-            linsley
-@@ -303,11 +303,11 @@
-          class=\\"\\"
-        >
-          <td
-            class=\\"\\"
-          >
--           tanner 18
-+           tanner 28
-          </td>
-          <td
-            class=\\"\\"
-          >
-            linsley
-@@ -337,11 +337,11 @@
-          class=\\"\\"
-        >
-          <td
-            class=\\"\\"
-          >
--           tanner 19
-+           tanner 29
-          </td>
-          <td
-            class=\\"\\"
-          >
-            linsley
-@@ -371,11 +371,11 @@
-          class=\\"\\"
-        >
-          <td
-            class=\\"\\"
-          >
--           tanner 20
-+           tanner 30
-          </td>
-          <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -423,20 +423,20 @@
@@ -323,158 +141,318 @@ exports[`renders a paginated table 2`] = `
       <span>
         Page 
         <strong>
--         2 of 10
-+         3 of 10
+-         3 of 10
++         4 of 10
         </strong>
          
       </span>
       <span>
         | Go to page: 
         <input
-          style=\\"width: 100px;\\"
-          type=\\"number\\"
--         value=\\"2\\"
-+         value=\\"3\\"
+          style="width: 100px;"
+          type="number"
+-         value="3"
++         value="4"
         />
       </span>
        
       <select>
-        <option"
+        <option
 `;
 
-exports[`renders a paginated table 3`] = `
-"Snapshot Diff:
+exports[`renders a paginated table 2`] = `
+Snapshot Diff:
 - First value
 + Second value
 
 @@ -65,11 +65,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 21
-+           tanner 91
+-           tanner 31
++           tanner 41
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -99,11 +99,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 22
-+           tanner 92
+-           tanner 32
++           tanner 42
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -133,11 +133,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 23
-+           tanner 93
+-           tanner 33
++           tanner 43
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -167,11 +167,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 24
-+           tanner 94
+-           tanner 34
++           tanner 44
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -201,11 +201,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 25
-+           tanner 95
+-           tanner 35
++           tanner 45
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -235,11 +235,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 26
-+           tanner 96
+-           tanner 36
++           tanner 46
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -269,11 +269,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 27
-+           tanner 97
+-           tanner 37
++           tanner 47
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -303,11 +303,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 28
-+           tanner 98
+-           tanner 38
++           tanner 48
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -337,11 +337,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 29
-+           tanner 99
+-           tanner 39
++           tanner 49
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -371,11 +371,11 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
--           tanner 30
+-           tanner 40
++           tanner 50
+          </td>
+          <td
+            class=""
+          >
+            linsley
+@@ -423,20 +423,20 @@
+      </button>
+       
+      <span>
+        Page 
+        <strong>
+-         4 of 10
++         5 of 10
+        </strong>
+         
+      </span>
+      <span>
+        | Go to page: 
+        <input
+          style="width: 100px;"
+          type="number"
+-         value="4"
++         value="5"
+        />
+      </span>
+       
+      <select>
+        <option
+`;
+
+exports[`renders a paginated table 3`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -65,11 +65,11 @@
+          class=""
+        >
+          <td
+            class=""
+          >
+-           tanner 41
++           tanner 91
+          </td>
+          <td
+            class=""
+          >
+            linsley
+@@ -99,11 +99,11 @@
+          class=""
+        >
+          <td
+            class=""
+          >
+-           tanner 42
++           tanner 92
+          </td>
+          <td
+            class=""
+          >
+            linsley
+@@ -133,11 +133,11 @@
+          class=""
+        >
+          <td
+            class=""
+          >
+-           tanner 43
++           tanner 93
+          </td>
+          <td
+            class=""
+          >
+            linsley
+@@ -167,11 +167,11 @@
+          class=""
+        >
+          <td
+            class=""
+          >
+-           tanner 44
++           tanner 94
+          </td>
+          <td
+            class=""
+          >
+            linsley
+@@ -201,11 +201,11 @@
+          class=""
+        >
+          <td
+            class=""
+          >
+-           tanner 45
++           tanner 95
+          </td>
+          <td
+            class=""
+          >
+            linsley
+@@ -235,11 +235,11 @@
+          class=""
+        >
+          <td
+            class=""
+          >
+-           tanner 46
++           tanner 96
+          </td>
+          <td
+            class=""
+          >
+            linsley
+@@ -269,11 +269,11 @@
+          class=""
+        >
+          <td
+            class=""
+          >
+-           tanner 47
++           tanner 97
+          </td>
+          <td
+            class=""
+          >
+            linsley
+@@ -303,11 +303,11 @@
+          class=""
+        >
+          <td
+            class=""
+          >
+-           tanner 48
++           tanner 98
+          </td>
+          <td
+            class=""
+          >
+            linsley
+@@ -337,11 +337,11 @@
+          class=""
+        >
+          <td
+            class=""
+          >
+-           tanner 49
++           tanner 99
+          </td>
+          <td
+            class=""
+          >
+            linsley
+@@ -371,11 +371,11 @@
+          class=""
+        >
+          <td
+            class=""
+          >
+-           tanner 50
 +           tanner 100
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             linsley
 @@ -412,31 +412,35 @@
@@ -485,14 +463,14 @@ exports[`renders a paginated table 3`] = `
        
 -     <button>
 +     <button
-+       disabled=\\"\\"
++       disabled=""
 +     >
         &gt;
       </button>
        
 -     <button>
 +     <button
-+       disabled=\\"\\"
++       disabled=""
 +     >
         &gt;&gt;
       </button>
@@ -500,7 +478,7 @@ exports[`renders a paginated table 3`] = `
       <span>
         Page 
         <strong>
--         3 of 10
+-         5 of 10
 +         10 of 10
         </strong>
          
@@ -508,13 +486,13 @@ exports[`renders a paginated table 3`] = `
       <span>
         | Go to page: 
         <input
-          style=\\"width: 100px;\\"
-          type=\\"number\\"
--         value=\\"3\\"
-+         value=\\"10\\"
+          style="width: 100px;"
+          type="number"
+-         value="5"
++         value="10"
         />
       </span>
        
       <select>
-        <option"
+        <option
 `;

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

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a table with seletable rows 1`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
 @@ -109,11 +109,11 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             <div>
 -             Not Selected
@@ -16,12 +16,12 @@ exports[`renders a table with seletable rows 1`] = `
             </div>
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 @@ -165,11 +165,11 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             <div>
 -             Not Selected
@@ -29,12 +29,12 @@ exports[`renders a table with seletable rows 1`] = `
             </div>
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 @@ -221,11 +221,11 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             <div>
 -             Not Selected
@@ -42,12 +42,12 @@ exports[`renders a table with seletable rows 1`] = `
             </div>
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 @@ -277,11 +277,11 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             <div>
 -             Not Selected
@@ -55,7 +55,7 @@ exports[`renders a table with seletable rows 1`] = `
             </div>
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 @@ -314,15 +314,20 @@
           </td>
@@ -69,28 +69,28 @@ exports[`renders a table with seletable rows 1`] = `
     <pre>
       <code>
         {
--   \\"selectedRows\\": []
-+   \\"selectedRows\\": [
-+     \\"0\\",
-+     \\"1\\",
-+     \\"2\\",
-+     \\"3\\"
+-   "selectedRows": []
++   "selectedRows": [
++     "0",
++     "1",
++     "2",
++     "3"
 +   ]
   }
       </code>
     </pre>
-  </DocumentFragment>"
+  </DocumentFragment>
 `;
 
 exports[`renders a table with seletable rows 2`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
 @@ -109,11 +109,11 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             <div>
 -             Selected
@@ -98,12 +98,12 @@ exports[`renders a table with seletable rows 2`] = `
             </div>
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 @@ -165,11 +165,11 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             <div>
 -             Selected
@@ -111,12 +111,12 @@ exports[`renders a table with seletable rows 2`] = `
             </div>
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 @@ -221,11 +221,11 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             <div>
 -             Selected
@@ -124,12 +124,12 @@ exports[`renders a table with seletable rows 2`] = `
             </div>
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 @@ -277,11 +277,11 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             <div>
 -             Selected
@@ -137,7 +137,7 @@ exports[`renders a table with seletable rows 2`] = `
             </div>
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 @@ -314,20 +314,15 @@
           </td>
@@ -151,28 +151,28 @@ exports[`renders a table with seletable rows 2`] = `
     <pre>
       <code>
         {
--   \\"selectedRows\\": [
--     \\"0\\",
--     \\"1\\",
--     \\"2\\",
--     \\"3\\"
+-   "selectedRows": [
+-     "0",
+-     "1",
+-     "2",
+-     "3"
 -   ]
-+   \\"selectedRows\\": []
++   "selectedRows": []
   }
       </code>
     </pre>
-  </DocumentFragment>"
+  </DocumentFragment>
 `;
 
 exports[`renders a table with seletable rows 3`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
 @@ -109,11 +109,11 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             <div>
 -             Not Selected
@@ -180,12 +180,12 @@ exports[`renders a table with seletable rows 3`] = `
             </div>
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 @@ -221,11 +221,11 @@
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
             <div>
 -             Not Selected
@@ -193,7 +193,7 @@ exports[`renders a table with seletable rows 3`] = `
             </div>
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 @@ -314,15 +314,18 @@
           </td>
@@ -207,13 +207,13 @@ exports[`renders a table with seletable rows 3`] = `
     <pre>
       <code>
         {
--   \\"selectedRows\\": []
-+   \\"selectedRows\\": [
-+     \\"0\\",
-+     \\"2\\"
+-   "selectedRows": []
++   "selectedRows": [
++     "0",
++     "2"
 +   ]
   }
       </code>
     </pre>
-  </DocumentFragment>"
+  </DocumentFragment>
 `;

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

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders a sortable table 1`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
 @@ -31,11 +31,13 @@
-            colspan=\\"1\\"
-            style=\\"cursor: pointer;\\"
-            title=\\"Toggle SortBy\\"
+            colspan="1"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
           >
             First Name
 -           <span />
@@ -17,124 +17,124 @@ exports[`renders a sortable table 1`] = `
 +           </span>
           </th>
           <th
-            class=\\"\\"
-            colspan=\\"1\\"
-            style=\\"cursor: pointer;\\"
+            class=""
+            colspan="1"
+            style="cursor: pointer;"
 @@ -87,104 +89,104 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
 -           firstName: tanner
 +           firstName: derek
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           lastName: linsley
 +           lastName: perkins
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           age: 29
 +           age: 40
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           visits: 100
 +           visits: 40
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           status: In Relationship
 +           status: Single
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           progress: 50
 +           progress: 80
           </td>
         </tr>
         <tr
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
 -           firstName: derek
 +           firstName: joe
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           lastName: perkins
 +           lastName: bergevin
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           age: 40
 +           age: 45
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           visits: 40
 +           visits: 20
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           status: Single
 +           status: Complicated
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           progress: 80
 +           progress: 10
           </td>
         </tr>
         <tr
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
 -           firstName: joe
 +           firstName: tanner
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           lastName: bergevin
 +           lastName: linsley
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           age: 45
 +           age: 29
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           visits: 20
 +           visits: 100
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           status: Complicated
 +           status: In Relationship
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           progress: 10
 +           progress: 50
@@ -142,17 +142,17 @@ exports[`renders a sortable table 1`] = `
         </tr>
       </tbody>
     </table>
-  </DocumentFragment>"
+  </DocumentFragment>
 `;
 
 exports[`renders a sortable table 2`] = `
-"Snapshot Diff:
+Snapshot Diff:
 - First value
 + Second value
 
 @@ -32,11 +32,11 @@
-            style=\\"cursor: pointer;\\"
-            title=\\"Toggle SortBy\\"
+            style="cursor: pointer;"
+            title="Toggle SortBy"
           >
             First Name
             <span>
@@ -161,86 +161,86 @@ exports[`renders a sortable table 2`] = `
             </span>
           </th>
           <th
-            class=\\"\\"
-            colspan=\\"1\\"
+            class=""
+            colspan="1"
 @@ -89,36 +89,36 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
 -           firstName: derek
 +           firstName: tanner
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           lastName: perkins
 +           lastName: linsley
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           age: 40
 +           age: 29
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           visits: 40
 +           visits: 100
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           status: Single
 +           status: In Relationship
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           progress: 80
 +           progress: 50
           </td>
         </tr>
         <tr
-          class=\\"\\"
+          class=""
         >
 @@ -157,36 +157,36 @@
-          class=\\"\\"
+          class=""
         >
           <td
-            class=\\"\\"
+            class=""
           >
 -           firstName: tanner
 +           firstName: derek
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           lastName: linsley
 +           lastName: perkins
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           age: 29
 +           age: 40
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           visits: 100
 +           visits: 40
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           status: In Relationship
 +           status: Single
           </td>
           <td
-            class=\\"\\"
+            class=""
           >
 -           progress: 50
 +           progress: 80
@@ -248,5 +248,5 @@ exports[`renders a sortable table 2`] = `
         </tr>
       </tbody>
     </table>
-  </DocumentFragment>"
+  </DocumentFragment>
 `;

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

@@ -1,6 +1,3 @@
-import '@testing-library/react/cleanup-after-each'
-import '@testing-library/jest-dom/extend-expect'
-
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { useTable } from '../../hooks/useTable'

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

@@ -1,6 +1,3 @@
-import '@testing-library/react/cleanup-after-each'
-import '@testing-library/jest-dom/extend-expect'
-
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { useTable } from '../../hooks/useTable'
@@ -42,8 +39,8 @@ const data = [
 ]
 
 const defaultColumn = {
-  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
-  Filter: ({ filterValue, setFilter }) => (
+  Cell: ({ cell: { value }, column: { id } }) => `${id}: ${value}`,
+  Filter: ({ column: { filterValue, setFilter } }) => (
     <input
       value={filterValue || ''}
       onChange={e => {

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

@@ -1,6 +1,3 @@
-import '@testing-library/react/cleanup-after-each'
-import '@testing-library/jest-dom/extend-expect'
-
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { useTable } from '../../hooks/useTable'
@@ -43,7 +40,7 @@ const data = [
 ]
 
 const defaultColumn = {
-  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
+  Cell: ({ cell: { value }, column: { id } }) => `${id}: ${value}`,
   Filter: ({ filterValue, setFilter }) => (
     <input
       value={filterValue || ''}
@@ -143,13 +140,13 @@ function App() {
             Header: 'First Name',
             accessor: 'firstName',
             aggregate: ['sum', 'count'],
-            Aggregated: ({ value }) => `${value} Names`,
+            Aggregated: ({ cell: { value } }) => `${value} Names`,
           },
           {
             Header: 'Last Name',
             accessor: 'lastName',
             aggregate: ['sum', 'uniqueCount'],
-            Aggregated: ({ value }) => `${value} Unique Names`,
+            Aggregated: ({ cell: { value } }) => `${value} Unique Names`,
           },
         ],
       },
@@ -160,13 +157,13 @@ function App() {
             Header: 'Age',
             accessor: 'age',
             aggregate: 'average',
-            Aggregated: ({ value }) => `${value} (avg)`,
+            Aggregated: ({ cell: { value } }) => `${value} (avg)`,
           },
           {
             Header: 'Visits',
             accessor: 'visits',
             aggregate: 'sum',
-            Aggregated: ({ value }) => `${value} (total)`,
+            Aggregated: ({ cell: { value } }) => `${value} (total)`,
           },
           {
             Header: 'Status',
@@ -176,7 +173,7 @@ function App() {
             Header: 'Profile Progress',
             accessor: 'progress',
             aggregate: roundedMedian,
-            Aggregated: ({ value }) => `${value} (med)`,
+            Aggregated: ({ cell: { value } }) => `${value} (med)`,
           },
         ],
       },

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

@@ -1,9 +1,7 @@
-import '@testing-library/react/cleanup-after-each'
-import '@testing-library/jest-dom/extend-expect'
-
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { useTable } from '../../hooks/useTable'
+import { useTableState } from '../../hooks/useTableState'
 import { usePagination } from '../usePagination'
 
 const data = [...new Array(100)].map((d, i) => ({
@@ -16,6 +14,8 @@ const data = [...new Array(100)].map((d, i) => ({
 }))
 
 function Table({ columns, data }) {
+  const tableState = useTableState({ pageIndex: 2 })
+
   const {
     getTableProps,
     headerGroups,
@@ -34,6 +34,7 @@ function Table({ columns, data }) {
     {
       columns,
       data,
+      state: tableState,
     },
     usePagination
   )
@@ -160,21 +161,21 @@ function App() {
 test('renders a paginated table', () => {
   const { getByText, asFragment } = render(<App />)
 
-  const beforeSort = asFragment()
+  const fragment1 = asFragment()
 
   fireEvent.click(getByText('>'))
 
-  const afterSort1 = asFragment()
+  const fragment2 = asFragment()
 
   fireEvent.click(getByText('>'))
 
-  const afterSort2 = asFragment()
+  const fragment3 = asFragment()
 
   fireEvent.click(getByText('>>'))
 
-  const afterSort3 = asFragment()
+  const fragment4 = asFragment()
 
-  expect(beforeSort).toMatchDiffSnapshot(afterSort1)
-  expect(afterSort1).toMatchDiffSnapshot(afterSort2)
-  expect(afterSort2).toMatchDiffSnapshot(afterSort3)
+  expect(fragment1).toMatchDiffSnapshot(fragment2)
+  expect(fragment2).toMatchDiffSnapshot(fragment3)
+  expect(fragment3).toMatchDiffSnapshot(fragment4)
 })

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

@@ -1,6 +1,3 @@
-import '@testing-library/react/cleanup-after-each'
-import '@testing-library/jest-dom/extend-expect'
-
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { useTable } from '../../hooks/useTable'

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

@@ -1,6 +1,3 @@
-import '@testing-library/react/cleanup-after-each'
-import '@testing-library/jest-dom/extend-expect'
-
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { useTable } from '../../hooks/useTable'
@@ -34,7 +31,7 @@ const data = [
 ]
 
 const defaultColumn = {
-  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
+  Cell: ({ cell: { value }, column: { id } }) => `${id}: ${value}`,
 }
 
 function Table({ columns, data }) {

src/plugin-hooks/useExpanded.js

@@ -72,39 +72,36 @@ function useMain(instance) {
     return row
   })
 
-  const expandedRows = useMemo(
-    () => {
-      if (process.env.NODE_ENV === 'development' && debug)
-        console.info('getExpandedRows')
+  const expandedRows = useMemo(() => {
+    if (process.env.NODE_ENV === 'development' && debug)
+      console.info('getExpandedRows')
 
-      const expandedRows = []
+    const expandedRows = []
 
-      // Here we do some mutation, but it's the last stage in the
-      // immutable process so this is safe
-      const handleRow = row => {
-        row.isExpanded =
-          (row.original && row.original[manualExpandedKey]) ||
-          getBy(expanded, row.path)
+    // Here we do some mutation, but it's the last stage in the
+    // immutable process so this is safe
+    const handleRow = row => {
+      row.isExpanded =
+        (row.original && row.original[manualExpandedKey]) ||
+        getBy(expanded, row.path)
 
-        if (!nestExpandedRows || (nestExpandedRows && row.depth === 0)) {
-          expandedRows.push(row)
-        }
-
-        row.canExpand = row.subRows && !!row.subRows.length
-
-        if (row.isExpanded && row.subRows && row.subRows.length) {
-          row.subRows.forEach(handleRow)
-        }
-
-        return row
+      if (!nestExpandedRows || (nestExpandedRows && row.depth === 0)) {
+        expandedRows.push(row)
       }
 
-      rows.forEach(handleRow)
+      row.canExpand = row.subRows && !!row.subRows.length
 
-      return expandedRows
-    },
-    [debug, rows, manualExpandedKey, expanded, nestExpandedRows]
-  )
+      if (row.isExpanded && row.subRows && row.subRows.length) {
+        row.subRows.forEach(handleRow)
+      }
+
+      return row
+    }
+
+    rows.forEach(handleRow)
+
+    return expandedRows
+  }, [debug, rows, manualExpandedKey, expanded, nestExpandedRows])
 
   const expandedDepth = findExpandedDepth(expanded)
 

src/plugin-hooks/useFilters.js

@@ -11,7 +11,6 @@ defaultState.filters = {}
 addActions('setFilter', 'setAllFilters')
 
 const propTypes = {
-  // General
   columns: PropTypes.arrayOf(
     PropTypes.shape({
       disableFilters: PropTypes.bool,
@@ -41,9 +40,15 @@ function useMain(instance) {
     state: [{ filters }, setState],
   } = instance
 
+  const preFilteredRows = rows
+
   const setFilter = (id, updater) => {
     const column = columns.find(d => d.id === id)
 
+    if (!column) {
+      throw new Error(`React-Table: Could not find a column with id: ${id}`)
+    }
+
     const filterMethod = getFilterMethod(
       column.filter,
       userFilterTypes || {},
@@ -134,7 +139,7 @@ function useMain(instance) {
         console.info('getFilteredRows')
 
       // Filters top level and nested rows
-      const filterRows = rows => {
+      const filterRows = (rows, depth = 0) => {
         let filteredRows = rows
 
         filteredRows = Object.entries(filters).reduce(
@@ -142,12 +147,14 @@ function useMain(instance) {
             // Find the filters column
             const column = columns.find(d => d.id === columnID)
 
+            if (depth === 0) {
+              column.preFilteredRows = filteredSoFar
+            }
+
             if (!column) {
               return filteredSoFar
             }
 
-            column.preFilteredRows = filteredSoFar
-
             const filterMethod = getFilterMethod(
               column.filter,
               userFilterTypes || {},
@@ -180,14 +187,31 @@ function useMain(instance) {
           }
           return {
             ...row,
-            subRows: filterRows(row.subRows),
+            subRows:
+              row.subRows && row.subRows.length > 0
+                ? filterRows(row.subRows, depth + 1)
+                : row.subRows,
           }
         })
 
         return filteredRows
       }
 
-      return filterRows(rows)
+      const filteredRows = filterRows(rows)
+
+      // 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 = columns.filter(
+        column => !Object.keys(filters).includes(column.id)
+      )
+
+      // This essentially enables faceted filter options to be built easily
+      // using every column's preFilteredRows value
+      nonFilteredColumns.forEach(column => {
+        column.preFilteredRows = filteredRows
+      })
+
+      return filteredRows
     },
     [manualFilters, filters, debug, rows, columns, userFilterTypes]
   )
@@ -196,7 +220,7 @@ function useMain(instance) {
     ...instance,
     setFilter,
     setAllFilters,
-    preFilteredRows: rows,
+    preFilteredRows,
     rows: filteredRows,
   }
 }

src/plugin-hooks/useFlexLayout.js

@@ -8,8 +8,12 @@ const propTypes = {
   defaultFlex: PropTypes.number,
 }
 
-export const useFlexLayout = props => {
-  PropTypes.checkPropTypes(propTypes, props, 'property', 'useFlexLayout')
+export const useFlexLayout = hooks => {
+  hooks.useMain.push(useMain)
+}
+
+function useMain(instance) {
+  PropTypes.checkPropTypes(propTypes, instance, 'property', 'useFlexLayout')
 
   const {
     defaultFlex = 1,
@@ -20,7 +24,7 @@ export const useFlexLayout = props => {
       getHeaderProps,
       getCellProps,
     },
-  } = props
+  } = instance
 
   columnsHooks.push((columns, api) => {
     const visibleColumns = columns.filter(column => column.visible)
@@ -80,7 +84,7 @@ export const useFlexLayout = props => {
     return columns
   })
 
-  return props
+  return instance
 }
 
 // Utils

src/plugin-hooks/useGroupBy.js

@@ -146,110 +146,115 @@ function useMain(instance) {
     return row
   })
 
-  const groupedRows = useMemo(
-    () => {
-      if (manualGroupBy || !groupBy.length) {
+  const groupedRows = useMemo(() => {
+    if (manualGroupBy || !groupBy.length) {
+      return rows
+    }
+
+    if (process.env.NODE_ENV === 'development' && debug)
+      console.info('getGroupedRows')
+    // Find the columns that can or are aggregating
+
+    // Uses each column to aggregate rows into a single value
+    const aggregateRowsToValues = (rows, isSourceRows) => {
+      const values = {}
+
+      columns.forEach(column => {
+        // Don't aggregate columns that are in the groupBy
+        if (groupBy.includes(column.id)) {
+          values[column.id] = rows[0] ? rows[0].values[column.id] : null
+          return
+        }
+
+        const columnValues = rows.map(d => d.values[column.id])
+
+        let aggregator = column.aggregate
+
+        if (Array.isArray(aggregator)) {
+          if (aggregator.length !== 2) {
+            console.info({ column })
+            throw new Error(
+              `React Table: Complex aggregators must have 2 values, eg. aggregate: ['sum', 'count']. More info above...`
+            )
+          }
+          if (isSourceRows) {
+            aggregator = aggregator[1]
+          } else {
+            aggregator = aggregator[0]
+          }
+        }
+
+        let aggregateFn =
+          typeof aggregator === 'function'
+            ? aggregator
+            : userAggregations[aggregator] || aggregations[aggregator]
+
+        if (aggregateFn) {
+          values[column.id] = aggregateFn(columnValues, rows)
+        } else if (aggregator) {
+          console.info({ column })
+          throw new Error(
+            `React Table: Invalid aggregate option for column listed above`
+          )
+        } else {
+          values[column.id] = null
+        }
+      })
+      return values
+    }
+
+    // Recursively group the data
+    const groupRecursively = (rows, depth = 0, parentPath = []) => {
+      // This is the last level, just return the rows
+      if (depth >= groupBy.length) {
         return rows
       }
 
-      if (process.env.NODE_ENV === 'development' && debug)
-        console.info('getGroupedRows')
-      // Find the columns that can or are aggregating
+      const columnID = groupBy[depth]
 
-      // Uses each column to aggregate rows into a single value
-      const aggregateRowsToValues = (rows, isSourceRows) => {
-        const values = {}
+      // Group the rows together for this level
+      let groupedRows = groupByFn(rows, columnID)
 
-        columns.forEach(column => {
-          // Don't aggregate columns that are in the groupBy
-          if (groupBy.includes(column.id)) {
-            values[column.id] = rows[0] ? rows[0].values[column.id] : null
-            return
+      // Recurse to sub rows before aggregation
+      groupedRows = Object.entries(groupedRows).map(
+        ([groupByVal, subRows], index) => {
+          const path = [...parentPath, groupByVal]
+
+          subRows = groupRecursively(subRows, depth + 1, path)
+
+          const values = aggregateRowsToValues(
+            subRows,
+            depth + 1 >= groupBy.length
+          )
+
+          const row = {
+            groupByID: columnID,
+            groupByVal,
+            values,
+            subRows,
+            depth,
+            index,
+            path,
           }
 
-          const columnValues = rows.map(d => d.values[column.id])
-
-          let aggregator = column.aggregate
-
-          if (Array.isArray(aggregator)) {
-            if (aggregator.length !== 2) {
-              console.info({ column })
-              throw new Error(
-                `React Table: Complex aggregators must have 2 values, eg. aggregate: ['sum', 'count']. More info above...`
-              )
-            }
-            if (isSourceRows) {
-              aggregator = aggregator[1]
-            } else {
-              aggregator = aggregator[0]
-            }
-          }
-
-          let aggregateFn =
-            typeof aggregator === 'function'
-              ? aggregator
-              : userAggregations[aggregator] || aggregations[aggregator]
-
-          if (aggregateFn) {
-            values[column.id] = aggregateFn(columnValues, rows)
-          } else if (aggregator) {
-            console.info({ column })
-            throw new Error(
-              `React Table: Invalid aggregate option for column listed above`
-            )
-          } else {
-            values[column.id] = null
-          }
-        })
-        return values
-      }
-
-      // Recursively group the data
-      const groupRecursively = (rows, depth = 0, parentPath = []) => {
-        // This is the last level, just return the rows
-        if (depth >= groupBy.length) {
-          return rows
+          return row
         }
+      )
 
-        const columnID = groupBy[depth]
+      return groupedRows
+    }
 
-        // Group the rows together for this level
-        let groupedRows = groupByFn(rows, columnID)
-
-        // Recurse to sub rows before aggregation
-        groupedRows = Object.entries(groupedRows).map(
-          ([groupByVal, subRows], index) => {
-            const path = [...parentPath, groupByVal]
-
-            subRows = groupRecursively(subRows, depth + 1, path)
-
-            const values = aggregateRowsToValues(
-              subRows,
-              depth + 1 >= groupBy.length
-            )
-
-            const row = {
-              groupByID: columnID,
-              groupByVal,
-              values,
-              subRows,
-              depth,
-              index,
-              path,
-            }
-
-            return row
-          }
-        )
-
-        return groupedRows
-      }
-
-      // Assign the new data
-      return groupRecursively(rows)
-    },
-    [manualGroupBy, groupBy, debug, rows, columns, userAggregations, groupByFn]
-  )
+    // Assign the new data
+    return groupRecursively(rows)
+  }, [
+    manualGroupBy,
+    groupBy,
+    debug,
+    rows,
+    columns,
+    userAggregations,
+    groupByFn,
+  ])
 
   return {
     ...instance,

src/plugin-hooks/usePagination.js

@@ -50,15 +50,20 @@ function useMain(instance) {
 
   const rowDep = manualPagination || disablePageResetOnDataChange ? null : rows
 
+  const isPageIndexMountedRef = React.useRef()
+
   useLayoutEffect(
     () => {
-      setState(
-        old => ({
-          ...old,
-          pageIndex: 0,
-        }),
-        actions.pageChange
-      )
+      if (isPageIndexMountedRef.current) {
+        setState(
+          old => ({
+            ...old,
+            pageIndex: 0,
+          }),
+          actions.pageChange
+        )
+      }
+      isPageIndexMountedRef.current = true
     },
     [setState, rowDep, filters, groupBy, sortBy]
   )

src/plugin-hooks/useRowState.js

@@ -69,15 +69,21 @@ function useMain(instance) {
     [setRowState]
   )
 
+  const rowsMountedRef = React.useRef()
+
   // When data changes, reset row and cell state
   React.useEffect(
     () => {
-      setState(old => {
-        return {
-          ...old,
-          rowState: {},
-        }
-      }, actions.setRowState)
+      if (rowsMountedRef.current) {
+        setState(old => {
+          return {
+            ...old,
+            rowState: {},
+          }
+        }, actions.setRowState)
+      }
+
+      rowsMountedRef.current = true
     },
     [rows, setState]
   )

src/plugin-hooks/useSortBy.js

@@ -31,6 +31,8 @@ const propTypes = {
   manualSorting: PropTypes.bool,
   disableSorting: PropTypes.bool,
   disableMultiSort: PropTypes.bool,
+  isMultiSortEvent: PropTypes.func,
+  maxMultiSortColCount: PropTypes.number,
   disableSortRemove: PropTypes.bool,
   disableMultiRemove: PropTypes.bool,
 }
@@ -55,6 +57,8 @@ function useMain(instance) {
     disableSortRemove,
     disableMultiRemove,
     disableMultiSort,
+    isMultiSortEvent = e => e.shiftKey,
+    maxMultiSortColCount = Number.MAX_SAFE_INTEGER,
     hooks,
     state: [{ sortBy }, setState],
     plugins,
@@ -128,6 +132,8 @@ function useMain(instance) {
             desc: hasDescDefined ? desc : sortDescFirst,
           },
         ]
+        // Take latest n columns
+        newSortBy.splice(0, newSortBy.length - maxMultiSortColCount)
       } else if (action === 'toggle') {
         // This flips (or sets) the
         newSortBy = sortBy.map(d => {
@@ -177,7 +183,7 @@ function useMain(instance) {
                 e.persist()
                 column.toggleSortBy(
                   undefined,
-                  !instance.disableMultiSort && e.shiftKey
+                  !instance.disableMultiSort && isMultiSortEvent(e)
                 )
               }
             : undefined,
@@ -246,7 +252,7 @@ function useMain(instance) {
 
         // If there are sub-rows, sort them
         sortedData.forEach(row => {
-          if (!row.subRows) {
+          if (!row.subRows || row.subRows.length <= 1) {
             return
           }
           row.subRows = sortData(row.subRows)

src/utils.js

@@ -39,7 +39,7 @@ export function decorateColumn(column, defaultColumn, parent, depth, index) {
 
   column = {
     Header: () => null,
-    Cell: ({ value = '' }) => value,
+    Cell: ({ cell: { value = '' } }) => value,
     show: true,
     ...column,
     id,

yarn.lock

@@ -691,7 +691,7 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
-"@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5":
+"@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
   integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
@@ -1160,16 +1160,16 @@
     "@svgr/plugin-svgo" "^4.3.1"
     rollup-pluginutils "^2.8.1"
 
-"@testing-library/dom@^5.5.4", "@testing-library/dom@^5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-5.6.0.tgz#18a7c162a6a79964e731ad7b810022a28218047c"
-  integrity sha512-nAsRvQLr/b6TGNjuHMEbWXCNPLrQYnzqa/KKQZL7wBOtfptUxsa4Ah9aqkHW0ZmCSFmUDj4nFUxWPVTeMu0iCw==
+"@testing-library/dom@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.0.0.tgz#34e28e69e49bd6347fc64a5dde4c4f9aabbd17d3"
+  integrity sha512-B5XTz3uMsbqbdR9CZlnwpZjTE3fCWuqRkz/zvDc2Ej/vuHmTM0Ur2v0XPwr7usWfGIBsahEK5HL1E91+4IFiBg==
   dependencies:
-    "@babel/runtime" "^7.4.5"
+    "@babel/runtime" "^7.5.5"
     "@sheerun/mutationobserver-shim" "^0.3.2"
     aria-query "3.0.0"
     pretty-format "^24.8.0"
-    wait-for-expect "^1.2.0"
+    wait-for-expect "^1.3.0"
 
 "@testing-library/jest-dom@^4.0.0":
   version "4.0.0"
@@ -1186,13 +1186,14 @@
     pretty-format "^24.0.0"
     redent "^3.0.0"
 
-"@testing-library/react@^8.0.7":
-  version "8.0.7"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-8.0.7.tgz#b5992c9156e926850a0e3a7c882ae1aed83b1c77"
-  integrity sha512-6XoeWSr3UCdxMswbkW0BmuXYw8a6w+stt+5gg4D4zAcljfhXETQ5o28bjJFwNab4OPg8gBNK8KIVot86L4Q8Vg==
+"@testing-library/react@^9.1.1":
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.1.1.tgz#ee5b15c02b64cfbd14cdcad87fee2ed5f28fc2d1"
+  integrity sha512-mjX9l/onA5eVe8/4/obe7ZAw05U8s+kinXVglySVOMJo/oCSam9D9Dcg+aYVGsuBEuYV2W9m2LTP4KbNZh8BOw==
   dependencies:
-    "@babel/runtime" "^7.5.4"
-    "@testing-library/dom" "^5.5.4"
+    "@babel/runtime" "^7.5.5"
+    "@testing-library/dom" "^6.0.0"
+    "@types/react-dom" "^16.8.5"
 
 "@types/babel__core@^7.1.0":
   version "7.1.2"
@@ -1281,11 +1282,31 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
+"@types/prop-types@*":
+  version "15.7.1"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
+  integrity sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==
+
 "@types/q@^1.5.1":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
+"@types/react-dom@^16.8.5":
+  version "16.8.5"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.5.tgz#3e3f4d99199391a7fb40aa3a155c8dd99b899cbd"
+  integrity sha512-idCEjROZ2cqh29+trmTmZhsBAUNQuYrF92JHKzZ5+aiFM1mlSk3bb23CK7HhYuOY75Apgap5y2jTyHzaM2AJGA==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "16.9.1"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.1.tgz#862c83b4c9d5cd116e42fd9a4f3694843cd2c051"
+  integrity sha512-jGM2x8F7m7/r+81N/BOaUKVwbC5Cdw6ExlWEUpr77XPwVeNvAppnPEnMMLMfxRDYL8FPEX8MHjwtD2NQMJ0yyQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -2291,10 +2312,10 @@ core-js-pure@3.1.4:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.1.4.tgz#5fa17dc77002a169a3566cc48dc774d2e13e3769"
   integrity sha512-uJ4Z7iPNwiu1foygbcZYJsJs1jiXrTTCvxfLDXNhI/I+NHbSIEyr548y4fcsCEyWY0XgfAG/qqaunJ1SThHenA==
 
-core-js@3:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07"
-  integrity sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==
+core-js@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.2.1.tgz#cd41f38534da6cc59f7db050fe67307de9868b09"
+  integrity sha512-Qa5XSVefSVPRxy2XfUC13WbvqkxhkwB3ve+pgCQveNgYzbM/UxZeu1dcOX/xr4UmfUd+muuvsaxilQzCyUurMw==
 
 core-js@^2.4.0, core-js@^2.5.0:
   version "2.6.9"
@@ -2423,6 +2444,11 @@ cssstyle@^1.0.0:
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.2.0:
+  version "2.6.6"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
+  integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -2880,10 +2906,10 @@ eslint-plugin-promise@^4.2.1:
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz#845fd8b2260ad8f82564c1222fce44ad71d9418a"
   integrity sha512-VoM09vT7bfA7D+upt+FjeBO5eHIJQBUWki1aPvB+vbNiHS3+oGIJGIeyBtKQTME6UPXXy3vV07OL1tHd3ANuDw==
 
-eslint-plugin-react-hooks@1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.1.tgz#3c66a5515ea3e0a221ffc5d4e75c971c217b1a4c"
-  integrity sha512-wHhmGJyVuijnYIJXZJHDUF2WM+rJYTjulUTqF9k61d3BTk8etydz+M4dXUVH7M76ZRS85rqBTCx0Es/lLsrjnA==
+eslint-plugin-react-hooks@1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
+  integrity sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==
 
 eslint-plugin-react@7.14.3:
   version "7.14.3"
@@ -3802,10 +3828,10 @@ http-signature@~1.2.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-husky@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-3.0.2.tgz#e78fd2ae16edca59fc88e56aeb8d70acdcc1c082"
-  integrity sha512-WXCtaME2x0o4PJlKY4ap8BzLA+D0zlvefqAvLCPriOOu+x0dpO5uc5tlB7CY6/0SE2EESmoZsj4jW5D09KrJoA==
+husky@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-3.0.3.tgz#6f3fb99f60ef72cdf34e5d78445c2f798c441b1d"
+  integrity sha512-DBBMPSiBYEMx7EVUTRE/ymXJa/lOL+WplcsV/lZu+/HHGt0gzD+5BIz9EJnCrWyUa7hkMuBh7/9OZ04qDkM+Nw==
   dependencies:
     chalk "^2.4.2"
     cosmiconfig "^5.2.1"
@@ -3814,7 +3840,7 @@ husky@^3.0.2:
     is-ci "^2.0.0"
     opencollective-postinstall "^2.0.2"
     pkg-dir "^4.2.0"
-    please-upgrade-node "^3.1.1"
+    please-upgrade-node "^3.2.0"
     read-pkg "^5.1.1"
     run-node "^1.0.0"
     slash "^3.0.0"
@@ -6255,6 +6281,13 @@ please-upgrade-node@^3.1.1:
   dependencies:
     semver-compare "^1.0.0"
 
+please-upgrade-node@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
+  integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==
+  dependencies:
+    semver-compare "^1.0.0"
+
 pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
@@ -6407,30 +6440,29 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^16.8.3:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
-  integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
+react-dom@^16.9.0:
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
+  integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.6"
+    scheduler "^0.15.0"
 
 react-is@^16.8.1, react-is@^16.8.4:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
-react@^16.8.3:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
-  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
+react@^16.9.0:
+  version "16.9.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
+  integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.6"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -6949,10 +6981,10 @@ sax@^1.2.4, sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.13.6:
-  version "0.13.6"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
-  integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
+scheduler@^0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"
+  integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -7759,10 +7791,10 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
-wait-for-expect@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-1.2.0.tgz#fdab6a26e87d2039101db88bff3d8158e5c3e13f"
-  integrity sha512-EJhKpA+5UHixduMBEGhTFuLuVgQBKWxkFbefOdj2bbk2/OpA5Opsc4aUTGmF+qJ+v3kTGxDRNYwKaT4j6g5n8Q==
+wait-for-expect@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-1.3.0.tgz#65241ce355425f907f5d127bdb5e72c412ff830c"
+  integrity sha512-8fJU7jiA96HfGPt+P/UilelSAZfhMBJ52YhKzlmZQvKEZU2EcD1GQ0yqGB6liLdHjYtYAoGVigYwdxr5rktvzA==
 
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"