v7.0.0-alpha.18

Fixes #1423

.huskyrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   hooks: {
-    'pre-commit': 'lint-staged',
+    'pre-commit': 'lint-staged && yarn test:ci',
     'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
   },
 }

README.md

@@ -23,26 +23,20 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
 
 ## Features
 
-- Lightweight
+- Lightweight (4kb - 10kb depending on features and tree-shaking)
 - Headless (100% customizable, Bring-your-own-UI)
 - Client-side & Server-side pagination support
 - Sorting (Multi and Stable)
 - Filters
 - Pivoting & Aggregation
+- Row Selection
+- Row Expansion
 - Fully controllable
-- Extensible via hooks
+- Extensible via hook-based plugin system
 - <a href="https://medium.com/@tannerlinsley/why-i-wrote-react-table-and-the-problems-it-has-solved-for-nozzle-others-445c4e93d4a8#.axza4ixba" target="\_parent">"Why I wrote React Table and the problems it has solved for Nozzle.io"</a> by Tanner Linsley
 
 ## [See Examples](#examples)
 
-## Versions
-
-- This documentation is for version 7.
-- [View the Changelog](https://github.com/tannerlinsley/react-table/blob/master/CHANGELOG.md)
-- Previous versions:
-  - [6.x.x Readme](https://github.com/tannerlinsley/react-table/tree/v6/)
-  - [5.x.x Readme](https://github.com/tannerlinsley/react-table/blob/ad7d31cd3978eb45da7c6194dbab93c1e9a8594d/README.md)
-
 ## Sponsors
 
 **React Table v7** is being built and maintained by me, @tannerlinsley and I am always in need of more Patreon support to keep this project afloat. If you would like to contribute to my Patreon goal for v7 and beyond, [visit my Patreon and help me out!](https://patreon.com/tannerlinsley).
@@ -163,10 +157,14 @@ import {
 
 # Examples
 
-- [Basic](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
+- [Basic - Client Side](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic-client-side)
 - [Sorting - Client Side](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting-client-side)
 - [Filtering - Client Side](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering-client-side)
 - [Grouping - Client Side](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/grouping-client-side)
+- [Pagination - Client Side](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-client-side)
+- [Row Selection - Client Side](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection-client-side)
+- [Expanding - Client Side](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding-client-side)
+- [Sub Components](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sub-components)
 
 # Concepts
 
@@ -271,7 +269,7 @@ The following options are supported via the main options object passed to `useTa
   - Required
   - Must be **memoized**
   - The core columns configuration object for the entire table.
-  - Supports nested `columns` arrays via the `column.children` key
+  - Supports nested `columns` arrays via the column's `columns` key, eg. `[{ Header: 'My Group', columns: [...] }]`
 - `data: Array<any>`
   - Required
   - Must be **memoized**
@@ -330,7 +328,7 @@ The following options are supported on any column object you can pass to `column
   - 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.
 
-### `Instance` Properties
+### Instance Properties
 
 The following properties are available on the table instance returned from `useTable`
 
@@ -354,6 +352,13 @@ The following properties are available on the table instance returned from `useT
   - **Required**
   - This function is responsible for lazily preparing a row for rendering. Any row that you intend to render in your table needs to be passed to this function **before every render**.
   - **Why?** Since table data could potentially be very large, it can become very expensive to compute all of the necessary state for every row to be rendered regardless if it actually is rendered or not (for example if you are paginating or virtualizing the rows, you may only have a few rows visible at any given moment). This function allows only the rows you intend to display to be computed and prepped with the correct state.
+- `rowPaths: Array<string>`
+  - An array containing the stringified `path` of every original row in the table. eg. If a row has a path of `[0, 3, 2]`, its stringified path would be `0.3.2`.
+  - This array is used by many plugin hooks including `useRowSelect` to manage row selection state
+  - Only rows that exist on the original `data` array will have a path in this array. Rows created by `useGroupBy`'s aggregations and grouping are not included in this array, since they do not reference an original data row.
+- `flatRows: Array<Row>`
+  - An array of all rows, including subRows which have been flattened into the order in which they were detected (depth first)
+  - This can be helpful in calculating total row counts that must include subRows
 
 ### `HeaderGroup` Properties
 
@@ -368,7 +373,7 @@ The following additional properties are available on every `headerGroup` object
   - You can use the `getHeaderGroupProps` hook to extend its functionality.
   - Custom props may be passed. **NOTE: Custom props will override built-in table props, so be careful!**
 
-### `Column` Properties
+### Column Properties
 
 The following properties are available on every `Column` object returned by the table instance.
 
@@ -386,7 +391,7 @@ The following properties are available on every `Column` object returned by the
   - You can use the `getHeaderProps` hook to extend its functionality.
   - Custom props may be passed. **NOTE: Custom props will override built-in table props, so be careful!**
 
-### `Row` Properties
+### Row Properties
 
 The following additional properties are available on every `row` object returned by the table instance.
 
@@ -400,8 +405,17 @@ The following additional properties are available on every `row` object returned
   - This function is used to resolve any props needed for this row.
   - You can use the `getRowProps` hook to extend its functionality.
   - Custom props may be passed. **NOTE: Custom props will override built-in table props, so be careful!**
+- `index: Int`
+  - The index of the original row in the `data` array that was passed to `useTable`. If this row is a subRow, it is the original index within the parent row's subRows array
+- `original: Object`
+  - The original row object from the `data` array that was used to materialize this row.
+- `path: Array<string>`
+  - This array is the sequential path of indices one could use to navigate to it, eg. a row path of `[3, 1, 0]` would mean that it is the **first** subRow of a parent that is the **second** subRow of a parent that is the **fourth** row in the original `data` array.
+  - This array is used with plugin hooks like `useExpanded` and `useGroupBy` to compute expanded states for individual rows.
+- `subRows: Array<Row>`
+  - If subRows were detect on the original data object, this will be an array of those materialized row objects.
 
-### `Cell` Properties
+### Cell Properties
 
 The following additional properties are available on every `Cell` object returned in an array of `cells` on every row object.
 
@@ -418,6 +432,7 @@ The following additional properties are available on every `Cell` object returne
   - You can use the `getCellProps` hook to extend its functionality.
   - 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.
   - 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.
@@ -539,7 +554,7 @@ The following options are supported via the main options object passed to `useTa
   - Allows overriding or adding additional sort types for columns to use. If a column's sort type isn't found on this object, it will default to using the [built-in sort types](TODO).
   - For mor information on sort types, see [Sorting](TODO)
 
-### `Column` Options
+### Column Options
 
 The following options are supported on any `Column` object passed to the `columns` options in `useTable()`
 
@@ -564,7 +579,7 @@ The following options are supported on any `Column` object passed to the `column
     - If a `function` is passed, it will be used.
   - For mor information on sort types, see [Sorting](TODO)
 
-### `Instance` Properties
+### Instance Properties
 
 The following values are provided to the table `instance`:
 
@@ -575,7 +590,7 @@ The following values are provided to the table `instance`:
 - `toggleSortBy: Function(ColumnID: String, descending: Bool, isMulti: Bool) => void`
   - This function can be used to programmatically toggle the sorting for any specific column
 
-### `Column` Properties
+### Column Properties
 
 The following properties are available on every `Column` object returned by the table instance.
 
@@ -686,7 +701,7 @@ The following options are supported via the main options object passed to `useTa
   - Allows overriding or adding additional filter types for columns to use. If a column's filter type isn't found on this object, it will default to using the [built-in filter types](TODO).
   - For mor information on filter types, see [Filtering](TODO)
 
-### `Column` Options
+### Column Options
 
 The following options are supported on any `Column` object passed to the `columns` options in `useTable()`
 
@@ -707,7 +722,7 @@ The following options are supported on any `Column` object passed to the `column
   - For mor information on filter types, see [Filtering](TODO)
   - If a **function** is passed, it must be **memoized**
 
-### `Instance` Properties
+### Instance Properties
 
 The following values are provided to the table `instance`:
 
@@ -721,7 +736,7 @@ The following values are provided to the table `instance`:
 - `setAllFilters: Function(filtersObject) => void`
   - An instance-level function used to update the values for **all** filters on the table, all at once.
 
-### `Column` Properties
+### Column Properties
 
 The following properties are available on every `Column` object returned by the table instance.
 
@@ -798,10 +813,6 @@ The following options are supported via the main options object passed to `useTa
 - `state[0].groupBy: Array<String>`
   - Must be **memoized**
   - An array of groupBy ID strings, controlling which columns are used to calculate row grouping and aggregation. This information is stored in state since the table is allowed to manipulate the groupBy through user interaction.
-- `groupByFn: Function`
-  - Must be **memoized**
-  - Defaults to [`defaultGroupByFn`](TODO)
-  - This function is responsible for grouping rows based on the `state.groupBy` keys provided. It's very rare you would need to customize this function.
 - `manualGroupBy: Bool`
   - Enables groupBy detection and functionality, but does not automatically perform row grouping.
   - Turn this on if you wish to implement your own row grouping outside of the table (eg. server-side or manual row grouping/nesting)
@@ -810,8 +821,12 @@ The following options are supported via the main options object passed to `useTa
 - `aggregations: Object<aggregationKey: aggregationFn>`
   - Must be **memoized**
   - Allows overriding or adding additional aggregation functions for use when grouping/aggregating row values. If an aggregation key isn't found on this object, it will default to using the [built-in aggregation functions](TODO)
+- `groupByFn: Function`
+  - Must be **memoized**
+  - Defaults to [`defaultGroupByFn`](TODO)
+  - This function is responsible for grouping rows based on the `state.groupBy` keys provided. It's very rare you would need to customize this function.
 
-### `Column` Options
+### Column Options
 
 The following options are supported on any `Column` object passed to the `columns` options in `useTable()`
 
@@ -825,7 +840,7 @@ The following options are supported on any `Column` object passed to the `column
   - Defaults to `true`
   - If `true`, this column is able to be grouped.
 
-### `Instance` Properties
+### Instance Properties
 
 The following values are provided to the table `instance`:
 
@@ -836,7 +851,7 @@ The following values are provided to the table `instance`:
 - `toggleGroupBy: Function(columnID: String, ?set: Bool) => void`
   - This function can be used to programmatically set or toggle the groupBy state for a specific column.
 
-### `Column` Properties
+### Column Properties
 
 The following properties are available on every `Column` object returned by the table instance.
 
@@ -855,24 +870,201 @@ The following properties are available on every `Column` object returned by the
   - You can use the `getGroupByToggleProps` hook to extend its functionality.
   - Custom props may be passed. **NOTE: Custom props may override built-in sortBy props, so be careful!**
 
+### Row Properties
+
+The following properties are available on every `Row` object returned by the table instance.
+
+- `groupByID: String`
+  - The column ID for which this row is being grouped.
+  - Will be `undefined` if the row is an original row from `data` and not a materialized one from the grouping.
+- `groupByVal: any`
+  - If the row is a materialized group row, this will be the grouping value that was used to create it.
+- `values: Object`
+  - Similar to a regular row, a materialized grouping row also has a `values` object
+  - This object contains the **aggregated** values for this row's sub rows
+- `subRows: Array<Row>`
+  - If the row is a materialized group row, this property is the array of materialized subRows that were grouped inside of this row.
+- `depth: Int`
+  - If the row is a materialized group row, this is the grouping depth at which this row was created.
+- `path: Array<String|Int>`
+  - Similar to normal `Row` objects, materialized grouping rows also have a path array. The keys inside it though are not integers like nested normal rows though. Since they are not rows that can be traced back to an original data row, they are given a unique path based on their `groupByVal`
+  - If a row is a grouping row, it will have a path like `['Single']` or `['Complicated', 'Anderson']`, where `Single`, `Complicated`, and `Anderson` would all be derived from their row's `groupByVal`.
+
+### Cell Properties
+
+The following additional properties are available on every `Cell` object returned in an array of `cells` on every row object.
+
+- `grouped: Bool`
+  - If `true`, this cell is a grouped cell, meaning it contains a grouping value and should usually display and expander.
+- `repeatedValue: Bool`
+  - If `true`, this cell is a repeated value cell, meaning it contains a value that is already being displayed elsewhere (usually by a parent row's cell).
+  - Most of the time, this cell is not required to be displayed and can safely be hidden during rendering
+- `aggregated: Bool`
+  - If `true`, this cell's value has been aggregated and should probably be rendered with the `Aggregated` cell renderer.
+
 ### Example
 
 ```js
-const state = useTableState({ groupBy: ['firstName'] })
+function Table({ columns, data }) {
+  const {
+    getTableProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state: [{ groupBy, expanded }],
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    useGroupBy,
+    useExpanded // useGroupBy would be pretty useless without useExpanded ;)
+  )
 
-const aggregations = React.useMemo(() => ({
-  customSum: (values, rows) => values.reduce((sum, next) => sum + next, 0),
-}))
+  // We don't want to render all 2000 rows for this example, so cap
+  // it at 20 for this use case
+  const firstPageRows = rows.slice()
 
-const { rows } = useTable(
-  {
-    state, // state[0].groupBy === ['firstName']
-    manualGroupBy: false,
-    disableGrouping: false,
-    aggregations,
-  },
-  useGroupBy
-)
+  return (
+    <table {...getTableProps()}>
+      <thead>
+        {headerGroups.map(headerGroup => (
+          <tr {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map(column => (
+              <th {...column.getHeaderProps()}>
+                {column.canGroupBy ? (
+                  // If the column can be grouped, let's add a toggle
+                  <span {...column.getGroupByToggleProps()}>
+                    {column.grouped ? '🛑' : '👊'}
+                  </span>
+                ) : null}
+                {column.render('Header')}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody>
+        {firstPageRows.map(
+          (row, i) =>
+            prepareRow(row) || (
+              <tr {...row.getRowProps()}>
+                {row.cells.map(cell => {
+                  return (
+                    <td {...cell.getCellProps()}>
+                      {cell.grouped ? (
+                        // If it's a grouped cell, add an expander and row count
+                        <>
+                          <span
+                            style={{
+                              cursor: 'pointer',
+                            }}
+                            onClick={() => row.toggleExpanded()}
+                          >
+                            {row.isExpanded ? '👇' : '👉'}
+                          </span>
+                          {cell.render('Cell')} ({row.subRows.length})
+                        </>
+                      ) : cell.aggregated ? (
+                        // If the cell is aggregated, use the Aggregated
+                        // renderer for cell
+                        cell.render('Aggregated')
+                      ) : cell.repeatedValue ? null : ( // For cells with repeated values, render null
+                        // Otherwise, just render the regular cell
+                        cell.render('Cell')
+                      )}
+                    </td>
+                  )
+                })}
+              </tr>
+            )
+        )}
+      </tbody>
+    </table>
+  )
+}
+
+// This is a custom aggregator that
+// takes in an array of values and
+// returns the rounded median
+function roundedMedian(values) {
+  let min = values[0] || ''
+  let max = values[0] || ''
+
+  values.forEach(value => {
+    min = Math.min(min, value)
+    max = Math.max(max, value)
+  })
+
+  return Math.round((min + max) / 2)
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+            // Use a two-stage aggregator here to first
+            // count the total rows being aggregated,
+            // then sum any of those counts if they are
+            // aggregated further
+            aggregate: ['sum', 'count'],
+            Aggregated: ({ value }) => `${value} Names`,
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+            // Use another two-stage aggregator here to
+            // first count the UNIQUE values from the rows
+            // being aggregated, then sum those counts if
+            // they are aggregated further
+            aggregate: ['sum', 'uniqueCount'],
+            Aggregated: ({ value }) => `${value} Unique Names`,
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+            // Aggregate the average age of visitors
+            aggregate: 'average',
+            Aggregated: ({ value }) => `${value} (avg)`,
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+            // Aggregate the sum of all visits
+            aggregate: 'sum',
+            Aggregated: ({ value }) => `${value} (total)`,
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+            // Use our custom roundedMedian aggregator
+            aggregate: roundedMedian,
+            Aggregated: ({ value }) => `${value} (med)`,
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(10000), [])
+
+  return <Table columns={columns} data={data} />
+}
 ```
 
 ## `useExpanded`
@@ -880,49 +1072,169 @@ const { rows } = useTable(
 - Plugin Hook
 - Optional
 
-`useExpanded` is the hook that implements **row expanding**. It is most often used with `useGroupBy` to expand grouped rows, but is not limited to that use-case. It supports expanding rows both via internal table state and also via a hard-coded key on the raw row model.
+`useExpanded` is the hook that implements **row expanding**. It is most often used with `useGroupBy` to expand grouped rows or on its own with nested `subRows` in tree-li,ke `data` sets, but is not limited to these use-cases. It supports expanding rows both via internal table state and also via a hard-coded key on the raw row model.
 
 ### Table Options
 
 The following options are supported via the main options object passed to `useTable(options)`
 
 - `state[0].expanded: Object<[pathIndex]: Boolean | ExpandedStateObject>`
+  - Optional
   - Must be **memoized**
   - An nested object of expanded paths.
   - A `pathIndex` can be set as the key and its value set to `true` to expand that row's subRows into view. For example, if `{ '3': true }` was passed as the `expanded` state, the **4th row in the original data array** would be expanded.
   - For nested expansion, you may **use another object** instead of a Boolean to expand sub rows. For example, if `{ '3': { '5' : true }}` was passed as the `expanded` state, then the **6th subRow of the 4th row and the 4th row of the original data array** would be expanded.
   - This information is stored in state since the table is allowed to manipulate the filter through user interaction.
 - `subRowsKey: String`
-  - Required
-  - Defaults to `subRows`
-  - React Table will use this key when materializing the final row object. It also uses this key to infer sub-rows from the raw data.
-  - See [Grouping and Aggregation](#grouping-and-aggregation) for more information
-- `paginateSubRows: Bool`
-  - Defaults to `true`
+  - Optional
+  - See the [useTable hook](#table-options) for more details
+- `nestExpandedRows: Bool`
+  - Optional
+  - Defaults to `false`
   - If set to `false`, expanded rows will not be paginated. Thus, any expanded subrows would potentially increase the size of any given page by the amount of total expanded subrows on the page.
 - `manualExpandedKey: String`
+  - Optional
   - Defaults to `expanded`
-  - This string is used as the key to detect manual expanded state on any given row. For example, if a raw data row like `{ name: 'Tanner Linsley', friends: [...], expanded: true}` was detected, it would be forcibly expanded, regardless of state.
+  - This string is used as the key to detect manual expanded state on any given row. For example, if a raw data row like `{ name: 'Tanner Linsley', friends: [...], expanded: true}` was detected, it would always be expanded, regardless of state.
 
-### Instance Variables
+### Instance Properties
 
-The following values are provided to the table `instance`:
+The following properties are available on the table instance returned from `useTable`
 
 - `rows: Array<Row>`
   - An array of **sorted** rows.
 
+### Row Properties
+
+The following additional properties are available on every `row` object returned by the table instance.
+
+- `isExpanded: Bool`
+  - If `true`, this row is in an expanded state.
+- `toggleExpanded: Function(?isExpanded: Bool) => void`
+  - This function will toggle the expanded state of a row between `true` and `false` or, if an `isExpanded` boolean is passed to the function, it will be set as the new `isExpanded` value.
+  - Rows with a hard-coded `manualExpandedKey` (defaults to `expanded`) set to `true` are not affected by this function or the internal expanded state.
+
 ### Example
 
 ```js
-const state = useTableState({ expanded: { '3': true, '5': { '2': true } } })
+function Table({ columns: userColumns, data }) {
+  const {
+    getTableProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state: [{ expanded }],
+  } = useTable(
+    {
+      columns: userColumns,
+      data,
+    },
+    useExpanded // Use the useExpanded plugin hook
+  )
 
-const { rows } = useTable(
-  {
-    // state[0].sortBy === { '3': true, '5': { '2': true } }
-    state,
-  },
-  useExpanded
-)
+  return (
+    <>
+      <pre>
+        <code>{JSON.stringify({ expanded }, null, 2)}</code>
+      </pre>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {rows.map(
+            (row, i) =>
+              prepareRow(row) || (
+                <tr {...row.getRowProps()}>
+                  {row.cells.map(cell => {
+                    return (
+                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                    )
+                  })}
+                </tr>
+              )
+          )}
+        </tbody>
+      </table>
+      <br />
+      <div>Showing the first 20 results of {rows.length} rows</div>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        // Build our expander column
+        Header: () => null, // No header, please
+        id: 'expander', // Make sure it has an ID
+        Cell: ({ row }) =>
+          // Use the row.canExpand and row.getExpandedToggleProps prop getter
+          // to build the toggle for expanding a row
+          row.canExpand ? (
+            <span
+              {...row.getExpandedToggleProps({
+                style: {
+                  // We can even use the row.depth property
+                  // and paddingLeft to indicate the depth
+                  // of the row
+                  paddingLeft: `${row.depth * 2}rem`,
+                },
+              })}
+            >
+              {row.isExpanded ? '👇' : '👉'}
+            </span>
+          ) : null,
+      },
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(5, 5, 5), [])
+
+  return <Table columns={columns} data={data} />
+}
 ```
 
 ## `usePagination`
@@ -995,18 +1307,179 @@ The following values are provided to the table `instance`:
 ### Example
 
 ```js
-const state = useTableState({ pageSize: 20, pageIndex: 1 })
+function Table({ columns, data }) {
+  // Use the state and functions returned from useTable to build your UI
+  const {
+    getTableProps,
+    headerGroups,
+    prepareRow,
+    page, // Instead of using 'rows', we'll use page,
+    // which has only the rows for the active page
 
-const { rows } = useTable(
-  {
-    // state[0] === { pageSize: 20, pageIndex: 1 }
-    state,
-  },
-  usePagination
-)
+    // The rest of these things are super handy, too ;)
+    canPreviousPage,
+    canNextPage,
+    pageOptions,
+    pageCount,
+    gotoPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    state: [{ pageIndex, pageSize }],
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    usePagination
+  )
+
+  // Render the UI for your table
+  return (
+    <>
+      <pre>
+        <code>
+          {JSON.stringify(
+            {
+              pageIndex,
+              pageSize,
+              pageCount,
+              canNextPage,
+              canPreviousPage,
+            },
+            null,
+            2
+          )}
+        </code>
+      </pre>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {page.map(
+            (row, i) =>
+              prepareRow(row) || (
+                <tr {...row.getRowProps()}>
+                  {row.cells.map(cell => {
+                    return (
+                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                    )
+                  })}
+                </tr>
+              )
+          )}
+        </tbody>
+      </table>
+      {/* 
+        Pagination can be built however you'd like. 
+        This is just a very basic UI implementation:
+      */}
+      <div className="pagination">
+        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
+          {'<<'}
+        </button>{' '}
+        <button onClick={() => previousPage()} disabled={!canPreviousPage}>
+          {'<'}
+        </button>{' '}
+        <button onClick={() => nextPage()} disabled={!canNextPage}>
+          {'>'}
+        </button>{' '}
+        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
+          {'>>'}
+        </button>{' '}
+        <span>
+          Page{' '}
+          <strong>
+            {pageIndex + 1} of {pageOptions.length}
+          </strong>{' '}
+        </span>
+        <span>
+          | Go to page:{' '}
+          <input
+            type="number"
+            defaultValue={pageIndex + 1}
+            onChange={e => {
+              const page = e.target.value ? Number(e.target.value) - 1 : 0
+              gotoPage(page)
+            }}
+            style={{ width: '100px' }}
+          />
+        </span> <select
+          value={pageSize}
+          onChange={e => {
+            setPageSize(Number(e.target.value))
+          }}
+        >
+          {[10, 20, 30, 40, 50].map(pageSize => (
+            <option key={pageSize} value={pageSize}>
+              Show {pageSize}
+            </option>
+          ))}
+        </select>
+      </div>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(100000), [])
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
 ```
 
-## `useTokenPagination`
+## `useTokenPagination (Coming Soon)`
 
 - Plugin Hook
 - Optional
@@ -1031,7 +1504,7 @@ Some common use cases for this hook are:
 - Disallowing specific states via a custom state reducer
 - Enabling parent/unrelated components to manipulate the table state
 
-### Table Options
+### Hook Options
 
 The following options are supported via the main options object passed to `useTable(options)`
 
@@ -1054,14 +1527,16 @@ The following options are supported via the main options object passed to `useTa
     - Defaults to `React.useState`
     - This function, if defined will be used as the state hook internally instead of the default `React.useState`. This can be useful for implementing custom state storage hooks like useLocalStorage, etc.
 
-### Instance Variables
+### Output
 
 - `tableStateTuple: [tableState, setTableState]`
   - Similar in structure to the result of `React.useState`
-  - **Memoized**. This tuple array will not change between renders unless state or `useTableState` options change.
+  - **Memoized** - This tuple array will not change between renders unless the state or `useTableState` options change.
   - `tableState: Object`
+    - **Memoized** - This object reference will not change unless the state changes.
     - This is the final state object of the table, which is the product of the `initialState`, `overrides` and the `reducer` options (if applicable)
   - `setTableState: Function(updater, type) => void`
+    - **Memoized** - This function reference will not change unless the internal state `reducer` is changed
     - This function is used both internally by React Table, and optionally by you (the developer) to update the table state programmatically.
     - `updater: Function`
       - This function signature is **almost** (see next point) identical to the functional API exposed by `React.setState`. It is passed the previous state and is expected to return a new version of the state.

examples/expanding-client-side/.babelrc

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

examples/expanding-client-side/.env

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

examples/expanding-client-side/.eslintrc

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

examples/expanding-client-side/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/expanding-client-side/.rescriptsrc.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const resolveFrom = require('resolve-from')
+
+const fixLinkedDependencies = config => {
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      react$: resolveFrom(path.resolve('node_modules'), 'react'),
+      'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+    },
+  }
+  return config
+}
+
+const includeSrcDirectory = config => {
+  config.resolve = {
+    ...config.resolve,
+    modules: [path.resolve('src'), ...config.resolve.modules],
+  }
+  return config
+}
+
+module.exports = [
+  ['use-babel-config', '.babelrc'],
+  ['use-eslint-config', '.eslintrc'],
+  fixLinkedDependencies,
+  // includeSrcDirectory,
+]

examples/expanding-client-side/README.md

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

examples/expanding-client-side/package.json

@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "eject": "rescripts eject"
+  },
+  "dependencies": {
+    "namor": "^1.1.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1",
+    "react-table": "next",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "@rescripts/cli": "^0.0.11",
+    "@rescripts/rescript-use-babel-config": "^0.0.8",
+    "@rescripts/rescript-use-eslint-config": "^0.0.9",
+    "babel-eslint": "10.0.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/expanding-client-side/public/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/expanding-client-side/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/expanding-client-side/src/App.js

@@ -0,0 +1,159 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useExpanded } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`
+
+function Table({ columns: userColumns, data }) {
+  const {
+    getTableProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state: [{ expanded }],
+  } = useTable(
+    {
+      columns: userColumns,
+      data,
+    },
+    useExpanded // Use the useExpanded plugin hook
+  )
+
+  return (
+    <>
+      <pre>
+        <code>{JSON.stringify({ expanded }, null, 2)}</code>
+      </pre>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {rows.map(
+            (row, i) =>
+              prepareRow(row) || (
+                <tr {...row.getRowProps()}>
+                  {row.cells.map(cell => {
+                    return (
+                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                    )
+                  })}
+                </tr>
+              )
+          )}
+        </tbody>
+      </table>
+      <br />
+      <div>Showing the first 20 results of {rows.length} rows</div>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        // Build our expander column
+        Header: () => null, // No header, please
+        id: 'expander', // Make sure it has an ID
+        Cell: ({ row }) =>
+          // Use the row.canExpand and row.getExpandedToggleProps prop getter
+          // to build the toggle for expanding a row
+          row.canExpand ? (
+            <span
+              {...row.getExpandedToggleProps({
+                style: {
+                  // We can even use the row.depth property
+                  // and paddingLeft to indicate the depth
+                  // of the row
+                  paddingLeft: `${row.depth * 2}rem`,
+                },
+              })}
+            >
+              {row.isExpanded ? '👇' : '👉'}
+            </span>
+          ) : null,
+      },
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(5, 5, 5), [])
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
+
+export default App

examples/expanding-client-side/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})

examples/expanding-client-side/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

examples/expanding-client-side/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
+
+ReactDOM.render(<App />, document.getElementById('root'))
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister()

examples/expanding-client-side/src/makeData.js

@@ -0,0 +1,40 @@
+import namor from 'namor'
+
+const range = len => {
+  const arr = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = () => {
+  const statusChance = Math.random()
+  return {
+    firstName: namor.generate({ words: 1, numbers: 0 }),
+    lastName: namor.generate({ words: 1, numbers: 0 }),
+    age: Math.floor(Math.random() * 30),
+    visits: Math.floor(Math.random() * 100),
+    progress: Math.floor(Math.random() * 100),
+    status:
+      statusChance > 0.66
+        ? 'relationship'
+        : statusChance > 0.33
+        ? 'complicated'
+        : 'single',
+  }
+}
+
+export default function makeData(...lens) {
+  const makeDataLevel = (depth = 0) => {
+    const len = lens[depth]
+    return range(len).map(d => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}

examples/expanding-client-side/src/serviceWorker.js

@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+)
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config)
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          )
+        })
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config)
+      }
+    })
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing
+        if (installingWorker == null) {
+          return
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              )
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration)
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.')
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration)
+              }
+            }
+          }
+        }
+      }
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error)
+    })
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type')
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload()
+          })
+        })
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config)
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      )
+    })
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister()
+    })
+  }
+}

examples/filtering-client-side/src/App.js

@@ -123,9 +123,9 @@ function SliderColumnFilter({ filterValue, setFilter, preFilteredRows, id }) {
 function NumberRangeColumnFilter({ filterValue = [], setFilter }) {
   return (
     <div
-      css={`
-        display: flex;
-      `}
+      style={{
+        display: 'flex',
+      }}
     >
       <input
         value={filterValue[0] || ''}
@@ -135,10 +135,10 @@ function NumberRangeColumnFilter({ filterValue = [], setFilter }) {
           setFilter((old = []) => [val ? parseInt(val, 10) : undefined, old[1]])
         }}
         placeholder="Min"
-        css={`
-          width: 70px;
-          margin-right: 0.5rem;
-        `}
+        style={{
+          width: '70px',
+          marginRight: '0.5rem',
+        }}
       />
       to
       <input
@@ -149,10 +149,10 @@ function NumberRangeColumnFilter({ filterValue = [], setFilter }) {
           setFilter((old = []) => [old[0], val ? parseInt(val, 10) : undefined])
         }}
         placeholder="Max"
-        css={`
-          width: 70px;
-          margin-left: 0.5rem;
-        `}
+        style={{
+          width: '70px',
+          marginLeft: '0.5rem',
+        }}
       />
     </div>
   )

examples/grouping-client-side/src/App.js

@@ -46,12 +46,12 @@ function Table({ columns, data }) {
       data,
     },
     useGroupBy,
-    useExpanded
+    useExpanded // useGroupBy would be pretty useless without useExpanded ;)
   )
 
-  // We don't want to render all 2000 rows for this example, so cap
+  // We don't want to render all of the rows for this example, so cap
   // it at 20 for this use case
-  const firstPageRows = rows.slice()
+  const firstPageRows = rows.slice(0, 100)
 
   return (
     <>
@@ -64,19 +64,14 @@ function Table({ columns, data }) {
           {headerGroups.map(headerGroup => (
             <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map(column => (
-                // Add the sorting props to control sorting. For this example
-                // we can add them into the header props
                 <th {...column.getHeaderProps()}>
                   {column.canGroupBy ? (
+                    // If the column can be grouped, let's add a toggle
                     <span {...column.getGroupByToggleProps()}>
-                      {column.grouped ? '🛑' : '👊'}
+                      {column.grouped ? '🛑 ' : '👊 '}
                     </span>
                   ) : null}
                   {column.render('Header')}
-                  {/* Add a sort direction indicator */}
-                  <span>
-                    {column.sorted ? (column.sortedDesc ? ' 🔽' : ' 🔼') : ''}
-                  </span>
                 </th>
               ))}
             </tr>
@@ -90,6 +85,9 @@ function Table({ columns, data }) {
                   {row.cells.map(cell => {
                     return (
                       <td
+                        // For educational purposes, let's color the
+                        // cell depending on what type it is given
+                        // from the useGroupBy hook
                         {...cell.getCellProps()}
                         style={{
                           background: cell.grouped
@@ -102,21 +100,16 @@ function Table({ columns, data }) {
                         }}
                       >
                         {cell.grouped ? (
-                          // Add an expander and row count to the grouped cell
+                          // If it's a grouped cell, add an expander and row count
                           <>
-                            <span
-                              style={{
-                                cursor: 'pointer',
-                              }}
-                              onClick={() => row.toggleExpanded()}
-                            >
+                            <span {...row.getExpandedToggleProps()}>
                               {row.isExpanded ? '👇' : '👉'}
-                            </span>
+                            </span>{' '}
                             {cell.render('Cell')} ({row.subRows.length})
                           </>
                         ) : cell.aggregated ? (
-                          // Use the Aggregated renderer for cells that have
-                          // aggregated values
+                          // If the cell is aggregated, use the Aggregated
+                          // renderer for cell
                           cell.render('Aggregated')
                         ) : cell.repeatedValue ? null : ( // For cells with repeated values, render null
                           // Otherwise, just render the regular cell
@@ -131,7 +124,7 @@ function Table({ columns, data }) {
         </tbody>
       </table>
       <br />
-      <div>Showing the first 20 results of {rows.length} rows</div>
+      <div>Showing the first 100 results of {rows.length} rows</div>
     </>
   )
 }
@@ -139,34 +132,34 @@ function Table({ columns, data }) {
 function Legend() {
   return (
     <div
-      css={`
-        padding: 0.5rem 0;
-      `}
+      style={{
+        padding: '0.5rem 0',
+      }}
     >
       <span
-        css={`
-          display: inline-block;
-          background: #0aff0082;
-          padding: 0.5rem;
-        `}
+        style={{
+          display: 'inline-block',
+          background: '#0aff0082',
+          padding: '0.5rem',
+        }}
       >
         Grouped
       </span>{' '}
       <span
-        css={`
-          display: inline-block;
-          background: #ffa50078;
-          padding: 0.5rem;
-        `}
+        style={{
+          display: 'inline-block',
+          background: '#ffa50078',
+          padding: '0.5rem',
+        }}
       >
         Aggregated
       </span>{' '}
       <span
-        css={`
-          display: inline-block;
-          background: #ff000042;
-          padding: 0.5rem;
-        `}
+        style={{
+          display: 'inline-block',
+          background: '#ff000042',
+          padding: '0.5rem',
+        }}
       >
         Repeated Value
       </span>
@@ -174,6 +167,9 @@ function Legend() {
   )
 }
 
+// This is a custom aggregator that
+// takes in an array of values and
+// returns the rounded median
 function roundedMedian(values) {
   let min = values[0] || ''
   let max = values[0] || ''
@@ -248,7 +244,7 @@ function App() {
     []
   )
 
-  const data = React.useMemo(() => makeData(100), [])
+  const data = React.useMemo(() => makeData(10000), [])
 
   return (
     <Styles>

examples/pagination-client-side/.babelrc

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

examples/pagination-client-side/.env

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

examples/pagination-client-side/.eslintrc

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

examples/pagination-client-side/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/pagination-client-side/.rescriptsrc.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const resolveFrom = require('resolve-from')
+
+const fixLinkedDependencies = config => {
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      react$: resolveFrom(path.resolve('node_modules'), 'react'),
+      'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+    },
+  }
+  return config
+}
+
+const includeSrcDirectory = config => {
+  config.resolve = {
+    ...config.resolve,
+    modules: [path.resolve('src'), ...config.resolve.modules],
+  }
+  return config
+}
+
+module.exports = [
+  ['use-babel-config', '.babelrc'],
+  ['use-eslint-config', '.eslintrc'],
+  fixLinkedDependencies,
+  // includeSrcDirectory,
+]

examples/pagination-client-side/README.md

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

examples/pagination-client-side/package.json

@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "eject": "rescripts eject"
+  },
+  "dependencies": {
+    "namor": "^1.1.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1",
+    "react-table": "next",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "@rescripts/cli": "^0.0.11",
+    "@rescripts/rescript-use-babel-config": "^0.0.8",
+    "@rescripts/rescript-use-eslint-config": "^0.0.9",
+    "babel-eslint": "10.0.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/pagination-client-side/public/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/pagination-client-side/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/pagination-client-side/sandbox.config.json

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

examples/pagination-client-side/src/App.js

@@ -0,0 +1,212 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, usePagination } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+
+  .pagination {
+    padding: 0.5rem;
+  }
+`
+
+function Table({ columns, data }) {
+  // Use the state and functions returned from useTable to build your UI
+  const {
+    getTableProps,
+    headerGroups,
+    prepareRow,
+    page, // Instead of using 'rows', we'll use page,
+    // which has only the rows for the active page
+
+    // The rest of these things are super handy, too ;)
+    canPreviousPage,
+    canNextPage,
+    pageOptions,
+    pageCount,
+    gotoPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    state: [{ pageIndex, pageSize }],
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    usePagination
+  )
+
+  // Render the UI for your table
+  return (
+    <>
+      <pre>
+        <code>
+          {JSON.stringify(
+            {
+              pageIndex,
+              pageSize,
+              pageCount,
+              canNextPage,
+              canPreviousPage,
+            },
+            null,
+            2
+          )}
+        </code>
+      </pre>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {page.map(
+            (row, i) =>
+              prepareRow(row) || (
+                <tr {...row.getRowProps()}>
+                  {row.cells.map(cell => {
+                    return (
+                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                    )
+                  })}
+                </tr>
+              )
+          )}
+        </tbody>
+      </table>
+      {/* 
+        Pagination can be built however you'd like. 
+        This is just a very basic UI implementation:
+      */}
+      <div className="pagination">
+        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
+          {'<<'}
+        </button>{' '}
+        <button onClick={() => previousPage()} disabled={!canPreviousPage}>
+          {'<'}
+        </button>{' '}
+        <button onClick={() => nextPage()} disabled={!canNextPage}>
+          {'>'}
+        </button>{' '}
+        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
+          {'>>'}
+        </button>{' '}
+        <span>
+          Page{' '}
+          <strong>
+            {pageIndex + 1} of {pageOptions.length}
+          </strong>{' '}
+        </span>
+        <span>
+          | Go to page:{' '}
+          <input
+            type="number"
+            defaultValue={pageIndex + 1}
+            onChange={e => {
+              const page = e.target.value ? Number(e.target.value) - 1 : 0
+              gotoPage(page)
+            }}
+            style={{ width: '100px' }}
+          />
+        </span>{' '}
+        <select
+          value={pageSize}
+          onChange={e => {
+            setPageSize(Number(e.target.value))
+          }}
+        >
+          {[10, 20, 30, 40, 50].map(pageSize => (
+            <option key={pageSize} value={pageSize}>
+              Show {pageSize}
+            </option>
+          ))}
+        </select>
+      </div>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(100000), [])
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
+
+export default App

examples/pagination-client-side/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})

examples/pagination-client-side/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

examples/pagination-client-side/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
+
+ReactDOM.render(<App />, document.getElementById('root'))
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister()

examples/pagination-client-side/src/makeData.js

@@ -0,0 +1,40 @@
+import namor from 'namor'
+
+const range = len => {
+  const arr = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = () => {
+  const statusChance = Math.random()
+  return {
+    firstName: namor.generate({ words: 1, numbers: 0 }),
+    lastName: namor.generate({ words: 1, numbers: 0 }),
+    age: Math.floor(Math.random() * 30),
+    visits: Math.floor(Math.random() * 100),
+    progress: Math.floor(Math.random() * 100),
+    status:
+      statusChance > 0.66
+        ? 'relationship'
+        : statusChance > 0.33
+        ? 'complicated'
+        : 'single',
+  }
+}
+
+export default function makeData(...lens) {
+  const makeDataLevel = (depth = 0) => {
+    const len = lens[depth]
+    return range(len).map(d => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}

examples/pagination-client-side/src/serviceWorker.js

@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+)
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config)
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          )
+        })
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config)
+      }
+    })
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing
+        if (installingWorker == null) {
+          return
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              )
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration)
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.')
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration)
+              }
+            }
+          }
+        }
+      }
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error)
+    })
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type')
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload()
+          })
+        })
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config)
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      )
+    })
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister()
+    })
+  }
+}

examples/row-selection-client-side/.babelrc

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

examples/row-selection-client-side/.env

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

examples/row-selection-client-side/.eslintrc

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

examples/row-selection-client-side/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/row-selection-client-side/.rescriptsrc.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const resolveFrom = require('resolve-from')
+
+const fixLinkedDependencies = config => {
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      react$: resolveFrom(path.resolve('node_modules'), 'react'),
+      'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+    },
+  }
+  return config
+}
+
+const includeSrcDirectory = config => {
+  config.resolve = {
+    ...config.resolve,
+    modules: [path.resolve('src'), ...config.resolve.modules],
+  }
+  return config
+}
+
+module.exports = [
+  ['use-babel-config', '.babelrc'],
+  ['use-eslint-config', '.eslintrc'],
+  fixLinkedDependencies,
+  // includeSrcDirectory,
+]

examples/row-selection-client-side/README.md

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

examples/row-selection-client-side/package.json

@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "eject": "rescripts eject"
+  },
+  "dependencies": {
+    "namor": "^1.1.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1",
+    "react-table": "next",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "@rescripts/cli": "^0.0.11",
+    "@rescripts/rescript-use-babel-config": "^0.0.8",
+    "@rescripts/rescript-use-eslint-config": "^0.0.9",
+    "babel-eslint": "10.0.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/row-selection-client-side/public/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/row-selection-client-side/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/row-selection-client-side/src/App.js

@@ -0,0 +1,156 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useRowSelect } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`
+
+function Table({ columns, data }) {
+  // Use the state and functions returned from useTable to build your UI
+  const {
+    getTableProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state: [{ selectedRows }],
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    useRowSelect
+  )
+
+  // Render the UI for your table
+  return (
+    <>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {rows.map(
+            (row, i) =>
+              prepareRow(row) || (
+                <tr {...row.getRowProps()}>
+                  {row.cells.map(cell => {
+                    return (
+                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                    )
+                  })}
+                </tr>
+              )
+          )}
+        </tbody>
+      </table>
+      <p>Selected Rows: {selectedRows.length}</p>
+      <pre>
+        <code>{JSON.stringify({ selectedRows }, null, 2)}</code>
+      </pre>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      // Let's make a column for selection
+      {
+        id: 'selection',
+        // The header can use the table's getToggleAllRowsSelectedProps method
+        // to render a checkbox
+        Header: ({ getToggleAllRowsSelectedProps }) => (
+          <div>
+            <input type="checkbox" {...getToggleAllRowsSelectedProps()} />
+          </div>
+        ),
+        // The cell can use the individual row's getToggleRowSelectedProps method
+        // to the render a checkbox
+        Cell: ({ row }) => (
+          <div>
+            <input type="checkbox" {...row.getToggleRowSelectedProps()} />
+          </div>
+        ),
+      },
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(10), [])
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
+
+export default App

examples/row-selection-client-side/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})

examples/row-selection-client-side/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

examples/row-selection-client-side/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
+
+ReactDOM.render(<App />, document.getElementById('root'))
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister()

examples/row-selection-client-side/src/makeData.js

@@ -0,0 +1,40 @@
+import namor from 'namor'
+
+const range = len => {
+  const arr = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = () => {
+  const statusChance = Math.random()
+  return {
+    firstName: namor.generate({ words: 1, numbers: 0 }),
+    lastName: namor.generate({ words: 1, numbers: 0 }),
+    age: Math.floor(Math.random() * 30),
+    visits: Math.floor(Math.random() * 100),
+    progress: Math.floor(Math.random() * 100),
+    status:
+      statusChance > 0.66
+        ? 'relationship'
+        : statusChance > 0.33
+        ? 'complicated'
+        : 'single',
+  }
+}
+
+export default function makeData(...lens) {
+  const makeDataLevel = (depth = 0) => {
+    const len = lens[depth]
+    return range(len).map(d => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}

examples/row-selection-client-side/src/serviceWorker.js

@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+)
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config)
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          )
+        })
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config)
+      }
+    })
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing
+        if (installingWorker == null) {
+          return
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              )
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration)
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.')
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration)
+              }
+            }
+          }
+        }
+      }
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error)
+    })
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type')
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload()
+          })
+        })
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config)
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      )
+    })
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister()
+    })
+  }
+}

examples/sorting-client-side/src/App.js

@@ -58,26 +58,17 @@ function Table({ columns, data }) {
         <thead>
           {headerGroups.map(headerGroup => (
             <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(
-                column =>
-                  console.log(column) || (
-                    // Add the sorting props to control sorting. For this example
-                    // we can add them into the header props
-                    <th
-                      {...column.getHeaderProps(column.getSortByToggleProps())}
-                    >
-                      {column.render('Header')}
-                      {/* Add a sort direction indicator */}
-                      <span>
-                        {column.sorted
-                          ? column.sortedDesc
-                            ? ' 🔽'
-                            : ' 🔼'
-                          : ''}
-                      </span>
-                    </th>
-                  )
-              )}
+              {headerGroup.headers.map(column => (
+                // Add the sorting props to control sorting. For this example
+                // we can add them into the header props
+                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
+                  {column.render('Header')}
+                  {/* Add a sort direction indicator */}
+                  <span>
+                    {column.sorted ? (column.sortedDesc ? ' 🔽' : ' 🔼') : ''}
+                  </span>
+                </th>
+              ))}
             </tr>
           ))}
         </thead>

examples/sub-components/.babelrc

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

examples/sub-components/.env

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

examples/sub-components/.eslintrc

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

examples/sub-components/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/sub-components/.rescriptsrc.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const resolveFrom = require('resolve-from')
+
+const fixLinkedDependencies = config => {
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      react$: resolveFrom(path.resolve('node_modules'), 'react'),
+      'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+    },
+  }
+  return config
+}
+
+const includeSrcDirectory = config => {
+  config.resolve = {
+    ...config.resolve,
+    modules: [path.resolve('src'), ...config.resolve.modules],
+  }
+  return config
+}
+
+module.exports = [
+  ['use-babel-config', '.babelrc'],
+  ['use-eslint-config', '.eslintrc'],
+  fixLinkedDependencies,
+  // includeSrcDirectory,
+]

examples/sub-components/README.md

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

examples/sub-components/package.json

@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "eject": "rescripts eject"
+  },
+  "dependencies": {
+    "namor": "^1.1.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1",
+    "react-table": "next",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "@rescripts/cli": "^0.0.11",
+    "@rescripts/rescript-use-babel-config": "^0.0.8",
+    "@rescripts/rescript-use-eslint-config": "^0.0.9",
+    "babel-eslint": "10.0.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/sub-components/public/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/sub-components/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/sub-components/src/App.js

@@ -0,0 +1,198 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useExpanded } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`
+
+// A simple way to support a renderRowSubComponent is to make a render prop
+// This is NOT part of the React Table API, it's merely a rendering
+// option we are creating for ourselves in our table renderer
+function Table({ columns: userColumns, data, renderRowSubComponent }) {
+  const {
+    getTableProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    columns,
+    state: [{ expanded }],
+  } = useTable(
+    {
+      columns: userColumns,
+      data,
+    },
+    useExpanded // We can useExpanded to track the expanded state
+    // for sub components too!
+  )
+
+  return (
+    <>
+      <pre>
+        <code>{JSON.stringify({ expanded }, null, 2)}</code>
+      </pre>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {rows.map(
+            (row, i) =>
+              prepareRow(row) || (
+                // Use a React.Fragment here so the table markup is still valid
+                <>
+                  <tr {...row.getRowProps()}>
+                    {row.cells.map(cell => {
+                      return (
+                        <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                      )
+                    })}
+                  </tr>
+                  {/*
+                    If the row is in an expanded state, render a row with a
+                    column that spands the entire length of the table.
+                  */}
+                  {row.isExpanded ? (
+                    <tr>
+                      <td colSpan={columns.length}>
+                        {/*
+                          Inside it, call our renderRowSubComponent function. In reality,
+                          you coul pass whatever you want as props to
+                          a component like this, including the entire
+                          table instance. But for this example, we'll just
+                          pass the row
+                        */}
+                        {renderRowSubComponent({ row })}
+                      </td>
+                    </tr>
+                  ) : null}
+                </>
+              )
+          )}
+        </tbody>
+      </table>
+      <br />
+      <div>Showing the first 20 results of {rows.length} rows</div>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        // Make an expander cell
+        Header: () => null, // No header
+        id: 'expander', // It needs an ID
+        Cell: ({ row }) => (
+          // Use Cell to render an expander for each row.
+          // We can use the getExpandedToggleProps prop-getter
+          // to build the expander.
+          <span {...row.getExpandedToggleProps()}>
+            {row.isExpanded ? '👇' : '👉'}
+          </span>
+        ),
+      },
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(10), [])
+
+  // Create a function that will render our row sub components
+  const renderRowSubComponent = React.useCallback(
+    ({ row }) => (
+      <pre
+        style={{
+          fontSize: '10px',
+        }}
+      >
+        <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
+      </pre>
+    ),
+    []
+  )
+
+  return (
+    <Styles>
+      <Table
+        columns={columns}
+        data={data}
+        // We added this as a prop for our table component
+        // Remember, this is not part of the React Table API,
+        // it's merely a rendering option we created for
+        // ourselves
+        renderRowSubComponent={renderRowSubComponent}
+      />
+    </Styles>
+  )
+}
+
+export default App

examples/sub-components/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})

examples/sub-components/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

examples/sub-components/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
+
+ReactDOM.render(<App />, document.getElementById('root'))
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister()

examples/sub-components/src/makeData.js

@@ -0,0 +1,40 @@
+import namor from 'namor'
+
+const range = len => {
+  const arr = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = () => {
+  const statusChance = Math.random()
+  return {
+    firstName: namor.generate({ words: 1, numbers: 0 }),
+    lastName: namor.generate({ words: 1, numbers: 0 }),
+    age: Math.floor(Math.random() * 30),
+    visits: Math.floor(Math.random() * 100),
+    progress: Math.floor(Math.random() * 100),
+    status:
+      statusChance > 0.66
+        ? 'relationship'
+        : statusChance > 0.33
+        ? 'complicated'
+        : 'single',
+  }
+}
+
+export default function makeData(...lens) {
+  const makeDataLevel = (depth = 0) => {
+    const len = lens[depth]
+    return range(len).map(d => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}

examples/sub-components/src/serviceWorker.js

@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+)
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config)
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          )
+        })
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config)
+      }
+    })
+  }
+}
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing
+        if (installingWorker == null) {
+          return
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              )
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration)
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.')
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration)
+              }
+            }
+          }
+        }
+      }
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error)
+    })
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type')
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload()
+          })
+        })
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config)
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      )
+    })
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister()
+    })
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-alpha.13",
+  "version": "7.0.0-alpha.18",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -30,13 +30,12 @@
     "format": "prettier ./**{md,js,jsx,tsx} --write"
   },
   "files": [
-    "src/",
-    "es/",
-    "lib/",
-    "react-table.js",
-    "react-table.min.js",
-    "react-table.css",
-    "media/*.png"
+    "CHANGELOG.md",
+    "src/**/*.js",
+    "dist",
+    "LICENCE",
+    "package.json",
+    "README.md"
   ],
   "peerDependencies": {
     "prop-types": "^15.5.0",

src/filterTypes.js

@@ -1,12 +1,11 @@
 export const text = (rows, id, filterValue) => {
-  return rows.filter(row => {
+  rows = rows.filter(row => {
     const rowValue = row.values[id]
-    return rowValue !== undefined
-      ? String(rowValue)
-          .toLowerCase()
-          .includes(String(filterValue).toLowerCase())
-      : true
+    return String(rowValue)
+      .toLowerCase()
+      .includes(String(filterValue).toLowerCase())
   })
+  return rows
 }
 
 text.autoRemove = val => !val

src/hooks/tests/useTable.test.js

@@ -1,6 +1,5 @@
 import '@testing-library/react/cleanup-after-each'
 import '@testing-library/jest-dom/extend-expect'
-// NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required
 
 import React from 'react'
 import { render } from '@testing-library/react'

src/hooks/useTable.js

@@ -63,6 +63,7 @@ export const useTable = (props, ...plugins) => {
     plugins,
     hooks: {
       columnsBeforeHeaderGroups: [],
+      columnsBeforeHeaderGroupsDeps: [],
       useMain: [],
       useColumns: [],
       useHeaders: [],
@@ -78,70 +79,99 @@ export const useTable = (props, ...plugins) => {
   })
 
   // Allow plugins to register hooks
-  if (debug) console.time('plugins')
+  if (process.env.NODE_ENV === 'development' && debug) console.time('plugins')
   plugins.filter(Boolean).forEach(plugin => {
     plugin(instanceRef.current.hooks)
   })
-  if (debug) console.timeEnd('plugins')
+  if (process.env.NODE_ENV === 'development' && debug)
+    console.timeEnd('plugins')
 
-  // Compute columns, headerGroups and headers
-  const columnInfo = React.useMemo(
+  if (process.env.NODE_ENV === 'development' && debug)
+    console.info('buildColumns/headerGroup/headers')
+  // Decorate All the columns
+  let columnTree = React.useMemo(
+    () => decorateColumnTree(userColumns, defaultColumn),
+    [defaultColumn, userColumns]
+  )
+
+  // Get the flat list of all columns
+  let columns = React.useMemo(() => flattenBy(columnTree, 'columns'), [
+    columnTree,
+  ])
+
+  // Allow hooks to decorate columns (and trigger this memoization via deps)
+  columns = React.useMemo(
     () => {
-      if (debug) console.info('buildColumns/headerGroup/headers')
-      // Decorate All the columns
-      let columnTree = decorateColumnTree(userColumns, defaultColumn)
-
-      // Get the flat list of all columns
-      let columns = flattenBy(columnTree, 'columns')
-
-      // Allow hooks to decorate columns
-      if (debug) console.time('hooks.columnsBeforeHeaderGroups')
-      columns = applyHooks(
+      if (process.env.NODE_ENV === 'development' && debug)
+        console.time('hooks.columnsBeforeHeaderGroups')
+      const newColumns = applyHooks(
         instanceRef.current.hooks.columnsBeforeHeaderGroups,
         columns,
         instanceRef.current
       )
-      if (debug) console.timeEnd('hooks.columnsBeforeHeaderGroups')
-
-      // Make the headerGroups
-      const headerGroups = makeHeaderGroups(
-        columns,
-        findMaxDepth(columnTree),
-        defaultColumn
-      )
-
-      const headers = flattenBy(headerGroups, 'headers')
-
-      return {
-        columns,
-        headerGroups,
-        headers,
-      }
+      if (process.env.NODE_ENV === 'development' && debug)
+        console.timeEnd('hooks.columnsBeforeHeaderGroups')
+      return newColumns
     },
-    [debug, defaultColumn, userColumns]
+    [
+      columns,
+      debug,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...applyHooks(
+        instanceRef.current.hooks.columnsBeforeHeaderGroupsDeps,
+        [],
+        instanceRef.current
+      ),
+    ]
   )
 
-  // Place the columns, headerGroups and headers on the api
-  Object.assign(instanceRef.current, columnInfo)
+  // Make the headerGroups
+  const headerGroups = React.useMemo(
+    () => makeHeaderGroups(columns, findMaxDepth(columnTree), defaultColumn),
+    [columnTree, columns, defaultColumn]
+  )
+
+  const headers = React.useMemo(() => flattenBy(headerGroups, 'headers'), [
+    headerGroups,
+  ])
+
+  Object.assign(instanceRef.current, {
+    columns,
+    headerGroups,
+    headers,
+  })
 
   // Access the row model
-  instanceRef.current.rows = React.useMemo(
+  const [rows, rowPaths, flatRows] = React.useMemo(
     () => {
-      if (debug) console.time('getAccessedRows')
+      if (process.env.NODE_ENV === 'development' && debug)
+        console.time('getAccessedRows')
+
+      let flatRows = 0
+      const rowPaths = []
+
       // Access the row's data
-      const accessRow = (originalRow, i, depth = 0) => {
+      const accessRow = (originalRow, i, depth = 0, parentPath = []) => {
         // Keep the original reference around
         const original = originalRow
 
+        // Make the new path for the row
+        const path = [...parentPath, i]
+
+        flatRows++
+        rowPaths.push(path.join('.'))
+
         // Process any subRows
         const subRows = originalRow[subRowsKey]
-          ? originalRow[subRowsKey].map((d, i) => accessRow(d, i, depth + 1))
+          ? originalRow[subRowsKey].map((d, i) =>
+              accessRow(d, i, depth + 1, path)
+            )
           : []
 
         const row = {
           original,
           index: i,
-          path: [i], // used to create a key for each row even if not nested
+          path, // used to create a key for each row even if not nested
           subRows,
           depth,
           cells: [{}], // This is a dummy cell
@@ -172,12 +202,17 @@ export const useTable = (props, ...plugins) => {
 
       // Use the resolved data
       const accessedData = data.map((d, i) => accessRow(d, i))
-      if (debug) console.timeEnd('getAccessedRows')
-      return accessedData
+      if (process.env.NODE_ENV === 'development' && debug)
+        console.timeEnd('getAccessedRows')
+      return [accessedData, rowPaths, flatRows]
     },
     [debug, data, subRowsKey]
   )
 
+  instanceRef.current.rows = rows
+  instanceRef.current.rowPaths = rowPaths
+  instanceRef.current.flatRows = flatRows
+
   // Determine column visibility
   instanceRef.current.columns.forEach(column => {
     column.visible =
@@ -186,31 +221,14 @@ export const useTable = (props, ...plugins) => {
         : !!column.show
   })
 
-  if (debug) console.time('hooks.useMain')
+  if (process.env.NODE_ENV === 'development' && debug)
+    console.time('hooks.useMain')
   instanceRef.current = applyHooks(
     instanceRef.current.hooks.useMain,
     instanceRef.current
   )
-  if (debug)
+  if (process.env.NODE_ENV === 'development' && debug)
     console.timeEnd('hooks.useMain')
-
-    // // Allow hooks to decorate columns
-    // if (debug) console.time('hooks.useColumns')
-    // instanceRef.current.columns = applyHooks(
-    //   instanceRef.current.hooks.useColumns,
-    //   instanceRef.current.columns,
-    //   instanceRef.current
-    // )
-    // if (debug) console.timeEnd('hooks.useColumns')
-
-    // // Allow hooks to decorate headers
-    // if (debug) console.time('hooks.useHeaders')
-    // instanceRef.current.headers = applyHooks(
-    //   instanceRef.current.hooks.useHeaders,
-    //   instanceRef.current.headers,
-    //   instanceRef.current
-    // )
-    // if (debug) console.timeEnd('hooks.useHeaders')
   ;[...instanceRef.current.columns, ...instanceRef.current.headers].forEach(
     column => {
       // Give columns/headers rendering power
@@ -245,14 +263,6 @@ export const useTable = (props, ...plugins) => {
     }
   )
 
-  // // Allow hooks to decorate headerGroups
-  // if (debug) console.time('hooks.useHeaderGroups')
-  // instanceRef.current.headerGroups = applyHooks(
-  //   instanceRef.current.hooks.useHeaderGroups,
-  //   instanceRef.current.headerGroups,
-  //   instanceRef.current
-  // )
-
   instanceRef.current.headerGroups.filter((headerGroup, i) => {
     // Filter out any headers and headerGroups that don't have visible columns
     headerGroup.headers = headerGroup.headers.filter(header => {
@@ -288,25 +298,25 @@ export const useTable = (props, ...plugins) => {
 
     return false
   })
-  // if (debug) console.timeEnd('hooks.useHeaderGroups')
 
   // Run the rows (this could be a dangerous hook with a ton of data)
-  if (debug) console.time('hooks.useRows')
+  if (process.env.NODE_ENV === 'development' && debug)
+    console.time('hooks.useRows')
   instanceRef.current.rows = applyHooks(
     instanceRef.current.hooks.useRows,
     instanceRef.current.rows,
     instanceRef.current
   )
-  if (debug) console.timeEnd('hooks.useRows')
+  if (process.env.NODE_ENV === 'development' && debug)
+    console.timeEnd('hooks.useRows')
 
   // The prepareRow function is absolutely necessary and MUST be called on
   // any rows the user wishes to be displayed.
 
   instanceRef.current.prepareRow = row => {
-    const { path } = row
     row.getRowProps = props =>
       mergeProps(
-        { key: ['row', ...path].join('_') },
+        { key: ['row', ...row.path].join('_') },
         applyPropHooks(
           instanceRef.current.hooks.getRowProps,
           row,
@@ -329,7 +339,7 @@ export const useTable = (props, ...plugins) => {
 
       // Give each cell a getCellProps base
       cell.getCellProps = props => {
-        const columnPathStr = [...path, column.id].join('_')
+        const columnPathStr = [...row.path, column.id].join('_')
         return mergeProps(
           {
             key: ['cell', columnPathStr].join('_'),

src/index.js

@@ -7,6 +7,7 @@ export { useFilters } from './plugin-hooks/useFilters'
 export { useGroupBy } from './plugin-hooks/useGroupBy'
 export { useSortBy } from './plugin-hooks/useSortBy'
 export { usePagination } from './plugin-hooks/usePagination'
+export { useRowSelect } from './plugin-hooks/useRowSelect'
 export { useFlexLayout } from './plugin-hooks/useFlexLayout'
-export { useTokenPagination } from './plugin-hooks/useTokenPagination'
+export { useTokenPagination } from './utility-hooks/useTokenPagination'
 export { actions, addActions } from './actions'

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

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

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

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

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

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

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

@@ -0,0 +1,520 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a paginated table 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+@@ -65,11 +65,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 1
++           tanner 11
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -99,11 +99,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 2
++           tanner 12
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -133,11 +133,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 3
++           tanner 13
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -167,11 +167,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 4
++           tanner 14
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -201,11 +201,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 5
++           tanner 15
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -235,11 +235,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 6
++           tanner 16
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -269,11 +269,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 7
++           tanner 17
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -303,11 +303,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 8
++           tanner 18
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -337,11 +337,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 9
++           tanner 19
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -371,11 +371,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 10
++           tanner 20
+          </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=\\"\\"
+          >
+            linsley
+@@ -423,20 +423,20 @@
+      </button>
+       
+      <span>
+        Page 
+        <strong>
+-         2 of 10
++         3 of 10
+        </strong>
+         
+      </span>
+      <span>
+        | Go to page: 
+        <input
+          style=\\"width: 100px;\\"
+          type=\\"number\\"
+-         value=\\"2\\"
++         value=\\"3\\"
+        />
+      </span>
+       
+      <select>
+        <option"
+`;
+
+exports[`renders a paginated table 3`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+@@ -65,11 +65,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 21
++           tanner 91
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -99,11 +99,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 22
++           tanner 92
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -133,11 +133,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 23
++           tanner 93
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -167,11 +167,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 24
++           tanner 94
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -201,11 +201,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 25
++           tanner 95
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -235,11 +235,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 26
++           tanner 96
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -269,11 +269,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 27
++           tanner 97
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -303,11 +303,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 28
++           tanner 98
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -337,11 +337,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 29
++           tanner 99
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -371,11 +371,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 30
++           tanner 100
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -412,31 +412,35 @@
+       
+      <button>
+        &lt;
+      </button>
+       
+-     <button>
++     <button
++       disabled=\\"\\"
++     >
+        &gt;
+      </button>
+       
+-     <button>
++     <button
++       disabled=\\"\\"
++     >
+        &gt;&gt;
+      </button>
+       
+      <span>
+        Page 
+        <strong>
+-         3 of 10
++         10 of 10
+        </strong>
+         
+      </span>
+      <span>
+        | Go to page: 
+        <input
+          style=\\"width: 100px;\\"
+          type=\\"number\\"
+-         value=\\"3\\"
++         value=\\"10\\"
+        />
+      </span>
+       
+      <select>
+        <option"
+`;