v7.0.0-alpha.15

test(usefilters): added useFilters test placeholder
fix(global): fix npm dist, update docs
2026-08-19 08:20:30 +00:00 · 2019-07-30 14:10:19 -06:00 · 2019-07-30 14:09:48 -06:00 · 2019-07-30 14:07:31 -06:00 · 2019-07-30 12:54:19 -06:00 · 2019-07-30 12:51:14 -06:00
104 changed files with 40607 additions and 4082 deletions
@@ -1,11 +1,16 @@
 {
  "presets": [
    [
-      "@babel/env",
+      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    "@babel/react"
-  ]
+  ],
+  "env": {
+    "test": {
+      "presets": ["@babel/preset-env", "@babel/react"]
+    }
+  }
 }
@@ -1,22 +1,3 @@
 {
-    "parser": "babel-eslint",
-    "extends": ["react-app", "prettier"],
-    "plugins": [
-      "react-hooks"
-    ],
-    "env": {
-        "es6": true
-    },
-    "parserOptions": {
-        "sourceType": "module"
-    },
-    "rules": {
-        "space-before-function-paren": 0,
-        "react/jsx-boolean-value": 0
-    },
-    "settings": {
-        "react": {
-            "version": "latest"
-        }
-    }
+  "extends": ["react-app", "prettier"]
 }
@@ -1,5 +1,6 @@
 module.exports = {
  hooks: {
-    'pre-commit': 'lint-staged',
+    'pre-commit': 'lint-staged && yarn test:ci',
+    'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
  },
 }
@@ -2,58 +2,58 @@

 #### Fixes & Optimizations

-* Since `resolveData` is now capable of materializing data on it's own, the `data` prop is no longer required as a prop-type.
+- Since `resolveData` is now capable of materializing data on it's own, the `data` prop is no longer required as a prop-type.

 ## 6.8.4

 #### Fixes & Optimizations

-* Only run `resolveData` prop when `data` prop has changed, not any others.
+- Only run `resolveData` prop when `data` prop has changed, not any others.

 ## 6.8.3

 #### Fixes & Optimizations

-* Allow the `resolveData` prop to alter or materialize new data when the `data` prop changes.
+- Allow the `resolveData` prop to alter or materialize new data when the `data` prop changes.

 ## 6.8.1

 #### Fixes & Optimizations

-* Updated eslint and code formatting
+- Updated eslint and code formatting

 ## 6.7.5

 #### Fixes & Optimizations

-* Now passes `column` to `getResizerProps` (#667)
-* NOTE: `getResizerProps` is now only called if the column is resizable
-* Fixes the `className` ordering in defaultProps for ThComponent (#673)
-* NOTE: user supplied classNames now come at the end so they can extend the defaults
+- Now passes `column` to `getResizerProps` (#667)
+- NOTE: `getResizerProps` is now only called if the column is resizable
+- Fixes the `className` ordering in defaultProps for ThComponent (#673)
+- NOTE: user supplied classNames now come at the end so they can extend the defaults

 ## 6.7.4

 #### Fixes & Optimizations

-* Fix Prop types for columns
+- Fix Prop types for columns

 ## 6.7.3

 #### Fixes & Optimizations

-* Fix the rest of the proptypes
+- Fix the rest of the proptypes

 ## 6.7.2

 #### Fixes & Optimizations

-* `getPropTypes` proptype check
+- `getPropTypes` proptype check

 ## 6.7.1

 #### Fixes & Optimizations

-* `eslint-config` moved to dev deps
+- `eslint-config` moved to dev deps

 ## 6.7.0

@@ -61,113 +61,113 @@

 #### New Features

-* Expose page/pageSize to rows/cells
-* Supply sort direction to custom sort methods
+- Expose page/pageSize to rows/cells
+- Supply sort direction to custom sort methods

 #### Fixes & Optimizations

-* README updates
-* Linter cleanup
-* Added PropTypes node module
-* Deps, linting and style upgrades
+- README updates
+- Linter cleanup
+- Added PropTypes node module
+- Deps, linting and style upgrades

 ## 6.6.0

 #### Fixes & Optimizations

-* moved repo to react-tools
-* Doc examples moved to codesandbox.io
-* README updates
-* CSS refacting for rt-tfoot to match rt-thead
-* CSS more specific for input and select
+- moved repo to react-tools
+- Doc examples moved to codesandbox.io
+- README updates
+- CSS refacting for rt-tfoot to match rt-thead
+- CSS more specific for input and select

 ## 6.5.3

 #### Fixes & Optimizations

-* `onClick` proxying and eslint
+- `onClick` proxying and eslint

 ## 6.5.2

 #### New Features

-* Provide onClick handleOriginal function - #406
+- Provide onClick handleOriginal function - #406

 #### Fixes & Optimizations

-* README updates
-* `makePathArray` in utils - #326
-* Various fixes: #294, #376, #398, #415,
+- README updates
+- `makePathArray` in utils - #326
+- Various fixes: #294, #376, #398, #415,

 ## 6.5.1

 #### Fixes & Optimizations

-* `defaultExpanded` now works correctly - #372
-* `column.getProps().rest` props are now applied correctly
-* `makeTemplateComponent` now supports `displayName` - #289
+- `defaultExpanded` now works correctly - #372
+- `column.getProps().rest` props are now applied correctly
+- `makeTemplateComponent` now supports `displayName` - #289

 ## 6.5.0

 ##### New Features

-* `column.filterAll` - defaults to `false`, but when set to `true` will provide the entire array of rows to `filterMethod` as opposed to one row at a time. This allows for more fine-grained filtering using any method you can dream up. See the [Custom Filtering example](https://react-table.js.org/#/story/custom-filtering) for more info.
+- `column.filterAll` - defaults to `false`, but when set to `true` will provide the entire array of rows to `filterMethod` as opposed to one row at a time. This allows for more fine-grained filtering using any method you can dream up. See the [Custom Filtering example](https://react-table.js.org/#/story/custom-filtering) for more info.

 ## 6.4.0

 ##### New Features

-* `PadRowComponent` - the content rendered inside of a padding row. Defaults to a react component that renders `&nbsp;`
+- `PadRowComponent` - the content rendered inside of a padding row. Defaults to a react component that renders `&nbsp;`

 ## 6.3.0

 ##### New Features

-* `defaultSortDesc` - allows you to set the default sorting direction for all columns to descending.
-* `column.defaultSortDesc` - allows you to set the default sorting direction for a specific column. Falls back to the global `defaultSortDesc` when not set at all.
+- `defaultSortDesc` - allows you to set the default sorting direction for all columns to descending.
+- `column.defaultSortDesc` - allows you to set the default sorting direction for a specific column. Falls back to the global `defaultSortDesc` when not set at all.

 ## 6.0.0

 ##### New Features

-* New Renderers:
-  * `Aggregated` - Custom renderer for aggregated cells
-  * `Pivot` - Custom renderer for Pivoted Cells (utilizes `Expander` and `PivotValue`)
-  * `PivotValue` - Custom renderer for Pivot cell values (deprecates the undocumented `pivotRender` option)
-  * `Expander` - Custom renderer for Pivot cell Expander
-* Added custom sorting methods per table via `defaultSortMethod` and per column via `column.sortMethod`
-* Pivot columns are now visibly separate and sorted/filtered independently.
-* Added `column.resizable` to override global table `resizable` option for specific columns.
-* Added `column.sortable` to override global table `sortable` option for specific columns.
-* Added `column.filterable` to override global table `filterable` option for specific columns.
-* Added `defaultExpanded` table option.
-* All callbacks can now be utilized without needing to hoist and manage the piece of state they export. That is what their prop counterparts are for, so now the corresponding prop is used instead of the callback to detect a "fully controlled" state.
-* Prevent transitions while column resizing for a smoother resize effect.
-* Disable text selection while resizing columns.
+- New Renderers:
+  - `Aggregated` - Custom renderer for aggregated cells
+  - `Pivot` - Custom renderer for Pivoted Cells (utilizes `Expander` and `PivotValue`)
+  - `PivotValue` - Custom renderer for Pivot cell values (deprecates the undocumented `pivotRender` option)
+  - `Expander` - Custom renderer for Pivot cell Expander
+- Added custom sorting methods per table via `defaultSortMethod` and per column via `column.sortMethod`
+- Pivot columns are now visibly separate and sorted/filtered independently.
+- Added `column.resizable` to override global table `resizable` option for specific columns.
+- Added `column.sortable` to override global table `sortable` option for specific columns.
+- Added `column.filterable` to override global table `filterable` option for specific columns.
+- Added `defaultExpanded` table option.
+- All callbacks can now be utilized without needing to hoist and manage the piece of state they export. That is what their prop counterparts are for, so now the corresponding prop is used instead of the callback to detect a "fully controlled" state.
+- Prevent transitions while column resizing for a smoother resize effect.
+- Disable text selection while resizing columns.

 ##### Breaking API Changes

-* New Renderers:
-  * `Cell` - deprecates and replaces `render`
-  * `Header` - deprecates and replaces `header`
-  * `Footer` - deprecates and replaces `footer`
-  * `Filter`- deprecates and replaces `filterRender`
-* Callbacks now provide the destination state as the primary parameter(s). This makes hoisting and controlling the state in redux or component state much easier. eg.
-  * `onSorting` no longer requires you to build your own toggle logic
-  * `onResize` no longer requires you to build your own resize logic
-* Renamed `onChange` callback -> `onFetchData` which will always fire when a new data model needs to be fetched (or if not using `manual`, when new data is materialized internally).
-* Renamed `filtering` -> `filtered`
-* Renamed `sorting` -> `sorted`
-* Renamed `expandedRows` -> `expanded`
-* Renamed `resizing` -> `resized`
-* Renamed `defaultResizing` -> `defaultResized`
-* Renamed `defaultFiltering` -> `defaultFiltered`
-* Renamed `defaultSorting` -> `defaultSorted`
-* Renamed `onSortingChange` -> `onSortedChange`
-* Renamed `onFilteringChange` -> `onFilteredChange`
-* Renamed `onResize` -> `onResizedChange`
-* Renamed `onExpandRow` -> `onExpandedChange`
-* Renamed `showFilters` -> `filterable`
-* Renamed `hideFilter` -> `filterable` (Column option. Note the true/false value is now flipped.)
-* `cellInfo.row` and `rowInfo.row` now reference the materialize data for the table. To reference the original row, use `cellInfo.original` and `rowInfo.original`
-* Removed `pivotRender` column option. You can now control how the value is displayed by overriding the `PivotValueComponent` or the individual column's `PivotValue` renderer. See [Pivoting Options Story](https://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Pivoting%20Options&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for a reference on how to customize pivot column rendering.
+- New Renderers:
+  - `Cell` - deprecates and replaces `render`
+  - `Header` - deprecates and replaces `header`
+  - `Footer` - deprecates and replaces `footer`
+  - `Filter`- deprecates and replaces `filterRender`
+- Callbacks now provide the destination state as the primary parameter(s). This makes hoisting and controlling the state in redux or component state much easier. eg.
+  - `onSorting` no longer requires you to build your own toggle logic
+  - `onResize` no longer requires you to build your own resize logic
+- Renamed `onChange` callback -> `onFetchData` which will always fire when a new data model needs to be fetched (or if not using `manual`, when new data is materialized internally).
+- Renamed `filtering` -> `filtered`
+- Renamed `sorting` -> `sorted`
+- Renamed `expandedRows` -> `expanded`
+- Renamed `resizing` -> `resized`
+- Renamed `defaultResizing` -> `defaultResized`
+- Renamed `defaultFiltering` -> `defaultFiltered`
+- Renamed `defaultSorting` -> `defaultSorted`
+- Renamed `onSortingChange` -> `onSortedChange`
+- Renamed `onFilteringChange` -> `onFilteredChange`
+- Renamed `onResize` -> `onResizedChange`
+- Renamed `onExpandRow` -> `onExpandedChange`
+- Renamed `showFilters` -> `filterable`
+- Renamed `hideFilter` -> `filterable` (Column option. Note the true/false value is now flipped.)
+- `cellInfo.row` and `rowInfo.row` now reference the materialize data for the table. To reference the original row, use `cellInfo.original` and `rowInfo.original`
+- Removed `pivotRender` column option. You can now control how the value is displayed by overriding the `PivotValueComponent` or the individual column's `PivotValue` renderer. See [Pivoting Options Story](https://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Pivoting%20Options&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for a reference on how to customize pivot column rendering.
@@ -33,9 +33,7 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
 - Extensible via hooks
 - <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

-## Demos
-
-[React Table v7 Sandbox](https://codesandbox.io/s/m5lxzzpz69)
+## [See Examples](#examples)

 ## Versions

@@ -166,11 +164,14 @@ import {
 # Examples

 - [Basic](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
- [Sorting with `useSortBy`](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting-with-useSortBy)
+- [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)

 # Concepts

-## React Table is a "headless" library
+## React Table is a "headless" UI library

 React Table is a headless utility, which means out of the box, it doesn't render or supply any actual UI elements. You are in charge of utilizing the state and callbacks of the hooks provided by this library to render your own table markup. [Read this article to understand why React Table is built this way.](https://medium.com/merrickchristensen/headless-user-interface-components-565b0c0f2e18). If you don't want to, then here's a quick rundown anyway:

@@ -236,12 +237,15 @@ const instance = useTable(

 1. `useTable` is called. A table instance is created.
 1. The `instance.state` is resolved from either a custom user state or an automatically generated one.
-1. A collection of plugin points is created at `instance.hooks`. These plugin points don't run until after all of the plugins have run.
-1. The instance is reduced through each plugin hook in the order they were called. Each hook receives the result of the previous hook, is able to manipulate the `instance`, use plugin points, use their own React hooks internally and eventually return a new `instance`. This happens until the last instance object is returned from the last hook.
-1. Lastly, the plugin points that were registered and populated during hook reduction are run to produce the final instance object that is returned from `useTable`
+1. A collection of plugin points is created at `instance.hooks`.
+1. Each plugin is given the opportunity to add hooks to `instance.hook`.
+1. As the `useTable` logic proceeds to run, each plugin hook type is used at a specific point in time with each individual hook function being executed the order it was registered.
+1. The final instance object is returned from `useTable`, which the developer then uses to construct their table.

 This multi-stage process is the secret sauce that allows React Table plugin hooks to work together and compose nicely, while not stepping on each others toes.

+To dive deeper into plugins, see [Plugins](TODO) and the [Plugin Guide](TODO)
+
 ### Plugin Hook Order & Consistency

 The order and usage of plugin hooks must follow [The Laws of Hooks](TODO), just like any other custom hook. They must always be unconditionally called in the same order.
@@ -285,12 +289,6 @@ The following options are supported via the main options object passed to `useTa
  - The default column object for every column passed to React Table.
  - Column-specific properties will override the properties in this object, eg. `{ ...defaultColumn, ...userColumn }`
  - This is particularly useful for adding global column properties. For instance, when using the `useFilters` plugin hook, add a default `Filter` renderer for every column, eg.`{ Filter: MyDefaultFilterComponent }`
- `useColumns: Function`
-  - Optional
-  - This hook overrides the internal `useColumns` hooks used by `useTable`. You probably never want to override this unless you are testing or developing new features for React Table
- `useRows: Function`
-  - Optional
-  - This hook overrides the internal `useRows` hooks used by `useTable`. You probably never want to override this unless you are testing or developing new features for React Table
 - `debug: Bool`
  - Optional
  - A flag to turn on debug mode.
@@ -333,13 +331,13 @@ 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.

-### Table Output
+### Instance Properties

 The following properties are available on the table instance returned from `useTable`

 - `headerGroups: Array<HeaderGroup>`
  - An array of normalized header groups, each containing a flattened array of final column objects for that row.
-  - See [Header Group Properties](#header-group-properties) for more information
+  - See [Header Group Properties](#headergroup-properties) for more information
 - `columns: Array<Column>`
  - A **flat** array of all final column objects computed from the original columns configuration option.
  - See [Column Properties](#column-properties) for more information
@@ -347,7 +345,7 @@ The following properties are available on the table instance returned from `useT
  - A **nested** array of final column objects, similar in structure to the original columns configuration option.
  - See [Column Properties](#column-properties) for more information
 - `rows: Array<Row>`
-  - An array of **materialized row objects** from theriginal `dat oa` array and `columns` passed into the table options
+  - An array of **materialized row objects** from the original `data` array and `columns` passed into the table options
  - See [Row Properties](#row-properties) for more information
 - `getTableProps: Function(?props)`
  - **Required**
@@ -360,7 +358,7 @@ The following properties are available on the table instance returned from `useT

 ### `HeaderGroup` Properties

-Header Groups are The following additional properties are available on every `headerGroup` object returned by the table instance.
+The following additional properties are available on every `headerGroup` object returned by the table instance.

 - `headers: Array<Column>`
  - **Required**
@@ -371,7 +369,7 @@ Header Groups are The following additional properties are available on every `he
  - 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.

@@ -389,7 +387,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.

@@ -404,7 +402,7 @@ The following additional properties are available on every `row` object returned
  - 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!**

-### `Cell` Properties
+### Cell Properties

 The following additional properties are available on every `Cell` object returned in an array of `cells` on every row object.

@@ -480,7 +478,7 @@ function MyTable({ columns, data }) {
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
-          <tr {...headerGroup.getRowProps()}>
+          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
@@ -504,58 +502,158 @@ function MyTable({ columns, data }) {
 }
 ```

-## `useGroupBy`
+## `useSortBy`

 - Plugin Hook
 - Optional

-`useGroupBy` is the hook that implements **row grouping and aggregation**.
+`useSortBy` is the hook that implements **row sorting**. It also support multi-sort (keyboard required).
+
+- Multi-sort is enabled by default
+- To sort the table via UI, attach the props generated from each column's `getSortByToggleProps()`, then click any of those elements.
+- To multi-sort the table via UI, hold `shift` while clicking on any of those same elements that have the props from `getSortByToggleProps()` attached.
+- To programmatically sort (or multi-sort) any column, use the `toggleSortBy` method located on the instance or each individual column.

 ### Table Options

 The following options are supported via the main options object passed to `useTable(options)`

- `state[0].groupBy: Array<String>`
+- `state[0].sortBy: Array<Object<id: columnID, desc: Bool>>`
  - 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`
+  - An array of sorting objects. If there is more than one object in the array, multi-sorting will be enabled. Each sorting object should contain an `id` key with the corresponding column ID to sort by. An optional `desc` key may be set to true or false to indicated ascending or descending sorting for that column. This information is stored in state since the table is allowed to manipulate the filter through user interaction.
+- `manualSorting: Bool`
+  - Enables sorting detection functionality, but does not automatically perform row sorting. Turn this on if you wish to implement your own sorting outside of the table (eg. server-side or manual row grouping/nesting)
+- `disableSorting: Bool`
+  - Disables sorting for every column in the entire table.
+- `disableMultiSort: Bool`
+  - Disables multi-sorting for the entire table.
+- `disableSortRemove: Bool`
+  - If true, the un-sorted state will not be available to columns once they have been sorted.
+- `disableMultiRemove: Bool`
+  - If true, the un-sorted state will not be available to multi-sorted columns.
+- `orderByFn: Function`
+  - Must be **memoizd**
+  - Defaults to the built-in [default orderBy function](TODO)
+  - This function is responsible for composing multiple sorting functions together for multi-sorting, and also handles both the directional sorting and stable-sorting tie breaking. Rarely would you want to override this function unless you have a very advanced use-case that requires it.
+- `sortTypes: Object<sortKey: sortType>`
  - 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)
- `disableGrouping: Bool`
-  - Disables groupBy for the entire table.
- `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)
+  - 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)

-### Instance Variables
+### Column Options
+
+The following options are supported on any `Column` object passed to the `columns` options in `useTable()`
+
+- `disableSorting: Bool`
+  - Optional
+  - Defualts to `false`
+  - If set to `true`, the sorting for this column will be disabled
+- `sortDescFirst: Bool`
+  - Optional
+  - Defaults to `false`
+  - If set to `true`, the first sort direction for this column will be descending instead of ascending
+- `sortInverted: Bool`
+  - Optional
+  - Defaults to `false`
+  - If set to `true`, the underlying sorting direction will be inverted, but the UI will not.
+  - This may be useful in situations where positive and negative connotation is inverted, eg. a Golfing score where a lower score is considered more positive than a higher one.
+- `sortType: String | Function`
+  - If a **function** is passed, it must be **memoized**
+  - Defaults to [`alphanumeric`](TODO)
+  - The resolved function from the this string/function will be used to sort the this column's data.
+    - If a `string` is passed, the function with that name located on either the custom `sortTypes` option or the built-in sorting types object will be used. If
+    - If a `function` is passed, it will be used.
+  - For mor information on sort types, see [Sorting](TODO)
+
+### Instance Properties

 The following values are provided to the table `instance`:

 - `rows: Array<Row>`
-  - An array of **grouped and aggregated** rows.
+  - An array of **sorted** rows.
+- `preSortedRows: Array<Row>`
+  - The array of rows that were originally sorted.
+- `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
+
+The following properties are available on every `Column` object returned by the table instance.
+
+- `canSort: Bool`
+  - Denotes whether a column is sortable or not depending on if it has a valid accessor/data model or is manually disabled via an option.
+- `toggleSortBy: Function(descending, multi) => void`
+  - This function can be used to programmatically toggle the sorting for this column.
+  - This function is similar to the `instance`-level `toggleSortBy`, however, passing a columnID is not required since it is located on a `Column` object already.
+- `getSortByToggleProps: Function(props) => props`
+  - **Required**
+  - This function is used to resolve any props needed for this column's UI that is responsible for toggling the sort direction when the user clicks it.
+  - You can use the `getSortByToggleProps` hook to extend its functionality.
+  - Custom props may be passed. **NOTE: Custom props may override built-in sortBy props, so be careful!**
+- `sorted: Boolean`
+  - Denotes whether this column is currently being sorted
+- `sortedIndex: Int`
+  - If the column is currently sorted, this integer will be the index in the `sortBy` array from state that corresponds to this column.
+  - If this column is not sorted, the index will always be `-1`
+- `sortedDesc: Bool`
+  - If the column is currently sorted, this denotes whether the column's sort direction is descending or not.
+  - If `true`, the column is sorted `descending`
+  - If `false`, the column is sorted `ascending`
+  - If `undefined`, the column is not currently being sorted.

 ### Example

 ```js
-const state = useTableState({ groupBy: ['firstName'] })
+function Table({ columns, data }) {
+  // Set some default sorting state
+  const state = useTableState({ sortBy: [{ id: 'firstName', desc: true }] })

-const aggregations = React.useMemo(() => ({
-  customSum: (values, rows) => values.reduce((sum, next) => sum + next, 0),
-}))
+  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
+    {
+      columns,
+      data,
+    },
+    useSortBy // Use the sortBy hook
+  )

-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 => (
+              // 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')}
+                <span>
+                  {/* Add a sort direction indicator */}
+                  <span>
+                    {column.sorted ? (column.sortedDesc ? ' 🔽' : ' 🔼') : ''}
+                  </span>
+                  {/* Add a sort index indicator */}
+                  <span>({column.sorted ? column.sortedIndex + 1 : ''})</span>
+                </span>
+              </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>
+  )
+}
 ```

 ## `useFilters`
@@ -589,17 +687,55 @@ 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)

-### Instance Variables
+### Column Options
+
+The following options are supported on any `Column` object passed to the `columns` options in `useTable()`
+
+- `Filter: Function | React.Component => JSX`
+  - **Required**
+  - Receives the table instance and column model as props
+  - Must return valid JSX
+  - This function (or component) is used to render this column's filter UI, eg.
+- `disableFilters: Bool`
+  - Optional
+  - If set to `true`, will disable filtering for this column
+- `filter: String | Function`
+  - Optional
+  - Defaults to [`text`](TODO)
+  - The resolved function from the this string/function will be used to filter the this column's data.
+    - If a `string` is passed, the function with that name located on either the custom `filterTypes` option or the built-in filtering types object will be used. If
+    - If a `function` is passed, it will be used directly.
+  - For mor information on filter types, see [Filtering](TODO)
+  - If a **function** is passed, it must be **memoized**
+
+### Instance Properties

 The following values are provided to the table `instance`:

 - `rows: Array<Row>`
  - An array of **filtered** rows.
+- `preFilteredRows: Array<Row>`
+  - The array of rows **used right before filtering**.
+  - Among many other use-cases, these rows are directly useful for building option lists in filters, since the resulting filtered `rows` do not contain every possible option.
 - `setFilter: Function(columnID, filterValue) => void`
  - An instance-level function used to update the filter value for a specific column.
 - `setAllFilters: Function(filtersObject) => void`
  - An instance-level function used to update the values for **all** filters on the table, all at once.

+### Column Properties
+
+The following properties are available on every `Column` object returned by the table instance.
+
+- `canFilter: Bool`
+  - Denotes whether a column is filterable or not depending on if it has a valid accessor/data model or is manually disabled via an option.
+- `setFilter: Function(filterValue) => void`
+  - An column-level function used to update the filter value for this column
+- `filterValue: any`
+  - The current filter value for this column, resolved from the table state's `filters` object
+- `preFilteredRows: Array<row>`
+  - The array of rows that were originally passed to this columns filter **before** they were filtered.
+  - This array of rows can be useful if building faceted filter options.
+
 ### Example

 ```js
@@ -627,82 +763,294 @@ const filterTypes = React.useMemo(() => ({
  }
 }), [matchSorter])

+// Override the default column filter to be our new `fuzzyText` filter type
+const defaultColumn = React.useMemo(() => ({
+  filter: 'fuzzyText'
+}))
+
 const { rows } = useTable(
  {
    // state[0].groupBy === ['firstName']
    state,
-    // Override the default filter to be our new `fuzzyText` filter type
-    defaultFilter: 'fuzzyText',
    manualFilters: false,
    disableFilters: false,
    // Pass our custom filter types
    filterTypes,
+    defaultColumn
  },
  useFilters
 )
 ```

-## `useSortBy`
+## `useGroupBy`

 - Plugin Hook
 - Optional

-`useSortBy` is the hook that implements **row sorting**. It also support multi-sort (keyboard required).
+`useGroupBy` is the hook that implements **row grouping and aggregation**.
+
+- Each column's `getGroupByToggleProps()` function can be used to generate the props needed to make a clickable UI element that will toggle the grouping on or off for a specific column.
+- Instance and column-level `toggleGroupBy` functions are also made available for programmatic grouping.

 ### Table Options

 The following options are supported via the main options object passed to `useTable(options)`

- `state[0].sortBy: Array<Object<id: columnID, desc: Bool>>`
+- `state[0].groupBy: Array<String>`
  - Must be **memoized**
-  - An array of sorting objects. If there is more than one object in the array, multi-sorting will be enabled. Each sorting object should contain an `id` key with the corresponding column ID to sort by. An optional `desc` key may be set to true or false to indicated ascending or descending sorting for that column. This information is stored in state since the table is allowed to manipulate the filter through user interaction.
- `defaultSortType: String | Function`
-  - If a **function** is passed, it must be **memoized**
-  - Defaults to [`alphanumeric`](TODO)
-  - The function (or resolved function from the string) will be used as the default/fallback sort method for every column that has sorting enabled.
-    - If a `string` is passed, the function with that name located on the `sortTypes` option object will be used.
-    - If a `function` is passed, it will be used.
-  - For mor information on sort types, see [Sorting](TODO)
- `manualSorting: Bool`
-  - Enables sorting detection functionality, but does not automatically perform row sorting. Turn this on if you wish to implement your own sorting outside of the table (eg. server-side or manual row grouping/nesting)
- `disableSorting: Bool`
-  - Disables sorting for every column in the entire table.
- `disableMultiSort: Bool`
-  - Disables multi-sorting for the entire table.
- `defaultSortDesc: Bool`
-  - If true, the first default direction for sorting will be descending. This may also be overridden at the column level.
- `disableSortRemove: Bool`
-  - If true, the un-sorted state will not be available to columns once they have been sorted.
- `disableMultiRemove: Bool`
-  - If true, the un-sorted state will not be available to multi-sorted columns.
- `orderByFn: Function`
-  - Must be **memoizd**
-  - Defaults to the built-in [default orderBy function](TODO)
-  - This function is responsible for composing multiple sorting functions together for multi-sorting, and also handles both the directional sorting and stable-sorting tie breaking. Rarely would you want to override this function unless you have a very advanced use-case that requires it.
- `sortTypes: Object<sortKey: sortType>`
+  - 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.
+- `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)
+- `disableGrouping: Bool`
+  - Disables groupBy for the entire table.
+- `aggregations: Object<aggregationKey: aggregationFn>`
  - Must be **memoized**
-  - 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)
+  - 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.

-### Instance Variables
+### Column Options
+
+The following options are supported on any `Column` object passed to the `columns` options in `useTable()`
+
+- `Aggregated: Function | React.Component => JSX`
+  - Optional
+  - Defaults to this column's `Cell` formatter
+  - Receives the table instance and cell model as props
+  - Must return valid JSX
+  - This function (or component) formats this column's value when it is being grouped and aggregated, eg. If this column was showing the number of visits for a user to a website and it was currently being grouped to show an **average** of the values, the `Aggregated` function for this column could format that value to `1,000 Avg. Visits`
+- `disableGrouping: Boolean`
+  - Defaults to `true`
+  - If `true`, this column is able to be grouped.
+
+### Instance Properties

 The following values are provided to the table `instance`:

 - `rows: Array<Row>`
-  - An array of **sorted** rows.
+  - An array of **grouped and aggregated** rows.
+- `preGroupedRows: Array<Row>`
+  - The array of rows originally used to create the grouped rows.
+- `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
+
+The following properties are available on every `Column` object returned by the table instance.
+
+- `canGroupBy: Boolean`
+  - If `true`, this column is able to be grouped.
+  - This is resolved from the column having a valid accessor / data model, and not being manually disabled via other `useGroupBy` related options
+- `grouped: Boolean`
+  - If `true`, this column is currently being grouped
+- `groupedIndex: Int`
+  - If this column is currently being grouped, this integer is the index of this column's ID in the table state's `groupBy` array.
+- `toggleGroupBy: Function(?set: Bool) => void`
+  - This function can be used to programmatically set or toggle the groupBy state fo this column.
+- `getGroupByToggleProps: Function(props) => props`
+  - **Required**
+  - This function is used to resolve any props needed for this column's UI that is responsible for toggling grouping when the user clicks it.
+  - 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({ sortBy: [{ id: 'firstName', desc: true }] })
+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 { rows } = useTable(
-  {
-    // state[0].sortBy === [{ id: 'firstName', desc: true }]
-    state,
-  },
-  useSortBy
-)
+  // 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()
+
+  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`
@@ -915,9 +1263,12 @@ export default function MyTable({ manualPageIndex }) {
  const state = useTableState(initialState, overrides)

  // You can use effects to observe changes to the state
-  React.useEffect(() => {
-    console.log('Page Size Changed!', initialState.pageSize)
-  }, [initialState.pageSize])
+  React.useEffect(
+    () => {
+      console.log('Page Size Changed!', initialState.pageSize)
+    },
+    [initialState.pageSize]
+  )

  const { rows } = useTable({
    state,
@@ -925,7 +1276,137 @@ export default function MyTable({ manualPageIndex }) {
 }
 ```

-<!-- # Guides
+# Guides
+
+## Sorting
+
+### Client-Side Sorting
+
+- [Example]()
+
+Client-side sorting can be accomplished by using the `useSortBy` plugin hook. Start by importing the hook from `react-table`:
+
+```diff
+-import { useTable } from 'react-table'
+import { useTable, useSortBy } from 'react-table'
+```
+
+Next, add the `useSortBy` hook to your `useTable` hook and add the necessary UI pieces we need to make sorting work:
+
+```diff
+function MyTable() {
+  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
+    {
+      data,
+      columns,
+    },
+-   useSortBy
+   useSortBy
+  )
+
+  return (
+    <table {...getTableProps()}>
+      <thead>
+        {headerGroups.map(headerGroup => (
+          <tr {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map(column => (
+-             <th {...column.getHeaderProps()}>
+             <th {...column.getHeaderProps(column.getSortByToggleProps())}>
+                {column.render('Header')}
+               <span>
+                 {column.sorted ? (column.sortedDesc ? ' 🔽' : ' 🔼') : ''}
+               </span>
+              </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>
+  )
+}
+```
+
+### Server-Side Sorting
+
+Server-side sorting can be accomplished by using the `useSortBy` plugin hook in **controlled** mode along with the `useTableState` hook. Start by importing these hooks from `react-table`:
+
+```diff
+-import { useTable } from 'react-table'
+import { useTable, useSortBy, useTableState } from 'react-table'
+```
+
+Next, add the `useSortBy` and `useTableState` hooks to your `useTable` hook, configure the table state, then add the necessary UI pieces we need to make sorting work:
+
+```diff
+function MyTable(data, columns, fetchData) {
+
+ const state = useTableState()
+ const [{ sortBy }] = state
+
+ React.useEffect(() => {
+   // When sorting changes, trigger your parent component
+   // or hook to fetch new data with the table state
+   fetchData(state[0])
+ }, [sortBy])
+
+  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
+    {
+      data,
+      columns,
+     state,
+     manualSorting: true
+    },
+-   useSortBy
+   useSortBy
+  )
+
+  return (
+    <table {...getTableProps()}>
+      <thead>
+        {headerGroups.map(headerGroup => (
+          <tr {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map(column => (
+-             <th {...column.getHeaderProps()}>
+             <th {...column.getHeaderProps(column.getSortByToggleProps())}>
+                {column.render('Header')}
+               <span>
+                 {column.sorted ? (column.sortedDesc ? ' 🔽' : ' 🔼') : ''}
+               </span>
+              </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>
+  )
+}
+```
+
+<!--

 ## Client Side Pagination

@@ -1190,14 +1671,11 @@ If you would like to help develop a suggested feature follow these steps:

 - Fork this repo
 - Install dependencies with `$ yarn`
- Auto-build files as you edit with `$ yarn run watch`
- Implement your changes to files in the `src/` directory
- Run the <a href="https://github.com/tannerlinsley/react-story">React Story</a> locally with `$ yarn run docs`
- View changes as you edit `docs/src`
+- Link `react-table` locally with `$ yarn link`
+- Auto-build files as you edit with `$ yarn start`
+- Implement your changes and tests to files in the `src/` directory
+- In any example directory, link to the local `react-table` with `$ yarn link react-table`
+- Follow example directions for running. Usually just `$ yarn && yarn start`
+- Document your changes in the root `README.md`
+- To stage a commit, run `yarn commit`
 - Submit PR for review
-
-#### Package Utilities
-
- `$ yarn run watch` Watches files and builds via babel
- `$ yarn run docs` Runs the storybook server
- `$ yarn run test` Runs the test suite
@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] }
@@ -1,17 +1,16 @@
-const path = require('path');
+const path = require('path')

 module.exports = {
  moduleDirectories: [
    'node_modules',
    /*
-     * make 'test/utils' available in tests, e.g.
+     * __dirname makes 'test/utils' available in tests, e.g.
     *
     * const {myModule} = require('utils/my-test-helper')
     */
    __dirname,
  ],
-
-  rootDir: path.resolve(__dirname, '../..'),
-
+  rootDir: path.resolve(__dirname, '../../'),
  roots: ['<rootDir>/src', __dirname],
-};
+  transformIgnorePatterns: ['node_modules'],
+}
@@ -1,15 +1,12 @@
-const commonConfig = require('./jest.common');
+const commonConfig = require('./jest.common')

 module.exports = {
  ...commonConfig,
-
  displayName: 'unit',
-
  coverageDirectory: '../../coverage',
-
-  testMatch: ['<rootDir>/tests/**/*.js'],
-
+  testMatch: ['<rootDir>/src/**/*.test.js'],
  transform: {
-    // '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
  },
-};
+  setupFilesAfterEnv: ['./configs/tests/setup.common.js'],
+}
@@ -0,0 +1 @@
+import 'snapshot-diff/extend-expect'
@@ -45,7 +45,7 @@ function Table({ columns, data }) {
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
-          <tr {...headerGroup.getRowProps()}>
+          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
@@ -0,0 +1,36 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "eject": "rescripts eject"
+  },
+  "dependencies": {
+    "match-sorter": "^4.0.0",
+    "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"
+    ]
+  }
+}
@@ -0,0 +1,328 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useFilters } from 'react-table'
+// A great library for fuzzy filtering/sorting items
+import matchSorter from 'match-sorter'
+
+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;
+      }
+    }
+  }
+`
+
+// Define a default UI for filtering
+function DefaultColumnFilter({ filterValue, setFilter }) {
+  return (
+    <input
+      value={filterValue || ''}
+      onChange={e => {
+        setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
+      }}
+      placeholder="Search..."
+    />
+  )
+}
+
+// This is a custom filter UI for selecting
+// a unique option from a list
+function SelectColumnFilter({ filterValue, setFilter, preFilteredRows, id }) {
+  // Calculate the options for filtering
+  // using the preFilteredRows
+  const options = React.useMemo(
+    () => {
+      const options = new Set()
+      preFilteredRows.forEach(row => {
+        options.add(row.values[id])
+      })
+      return [...options.values()]
+    },
+    [id, preFilteredRows]
+  )
+
+  // Render a multi-select box
+  return (
+    <select
+      value={filterValue}
+      onChange={e => {
+        setFilter(e.target.value || undefined)
+      }}
+    >
+      <option value="">All</option>
+      {options.map((option, i) => (
+        <option key={i} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+  )
+}
+
+// This is a custom filter UI that uses a
+// slider to set the filter value between a column's
+// min and max values
+function SliderColumnFilter({ filterValue, setFilter, preFilteredRows, id }) {
+  // Calculate the min and max
+  // using the preFilteredRows
+  const [min, max] = React.useMemo(
+    () => {
+      let min = 0
+      let max = 0
+      preFilteredRows.forEach(row => {
+        min = Math.min(row.values[id], min)
+        max = Math.max(row.values[id], max)
+      })
+      return [min, max]
+    },
+    [id, preFilteredRows]
+  )
+
+  return (
+    <>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        value={filterValue || min}
+        onChange={e => {
+          setFilter(parseInt(e.target.value, 10))
+        }}
+      />
+      <button onClick={() => setFilter(undefined)}>Off</button>
+    </>
+  )
+}
+
+// This is a custom UI for our 'between' or number range
+// filter. It uses two number boxes and filters rows to
+// ones that have values between the two
+function NumberRangeColumnFilter({ filterValue = [], setFilter }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+      }}
+    >
+      <input
+        value={filterValue[0] || ''}
+        type="number"
+        onChange={e => {
+          const val = e.target.value
+          setFilter((old = []) => [val ? parseInt(val, 10) : undefined, old[1]])
+        }}
+        placeholder="Min"
+        style={{
+          width: '70px',
+          marginRight: '0.5rem',
+        }}
+      />
+      to
+      <input
+        value={filterValue[1] || ''}
+        type="number"
+        onChange={e => {
+          const val = e.target.value
+          setFilter((old = []) => [old[0], val ? parseInt(val, 10) : undefined])
+        }}
+        placeholder="Max"
+        style={{
+          width: '70px',
+          marginLeft: '0.5rem',
+        }}
+      />
+    </div>
+  )
+}
+
+function fuzzyTextFilterFn(rows, id, filterValue) {
+  return matchSorter(rows, filterValue, { keys: [row => row.values[id]] })
+}
+
+// Let the table remove the filter if the string is empty
+fuzzyTextFilterFn.autoRemove = val => !val
+
+// Our table component
+function Table({ columns, data }) {
+  const filterTypes = React.useMemo(
+    () => ({
+      // Add a new fuzzyTextFilterFn filter type.
+      fuzzyText: fuzzyTextFilterFn,
+      // Or, override the default text filter to use
+      // "startWith"
+      text: (rows, id, filterValue) => {
+        return rows.filter(row => {
+          const rowValue = row.values[id]
+          return rowValue !== undefined
+            ? String(rowValue)
+                .toLowerCase()
+                .startsWith(String(filterValue).toLowerCase())
+            : true
+        })
+      },
+    }),
+    []
+  )
+
+  const defaultColumn = React.useMemo(
+    () => ({
+      // Let's set up our default Filter UI
+      Filter: DefaultColumnFilter,
+    }),
+    []
+  )
+
+  const { getTableProps, headerGroups, rows, prepareRow, state } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn, // Be sure to pass the defaultColumn option
+      filterTypes,
+    },
+    useFilters // useFilters!
+  )
+
+  // 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(0, 20)
+
+  return (
+    <>
+      <div>
+        <pre>
+          <code>{JSON.stringify(state[0].filters, null, 2)}</code>
+        </pre>
+      </div>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>
+                  {column.render('Header')}
+                  {/* Render the columns filter UI */}
+                  <div>{column.canFilter ? column.render('Filter') : null}</div>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {firstPageRows.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>
+    </>
+  )
+}
+
+// Define a custom filter filter function!
+function filterGreaterThan(rows, id, filterValue) {
+  return rows.filter(row => {
+    const rowValue = row.values[id]
+    return rowValue >= filterValue
+  })
+}
+
+// This is an autoRemove method on the filter function that
+// when given the new filter value and returns true, the filter
+// will be automatically removed. Normally this is just an undefined
+// check, but here, we want to remove the filter if it's not a number
+filterGreaterThan.autoRemove = val => typeof val !== 'number'
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+            // Use our custom `fuzzyText` filter on this column
+            filter: 'fuzzyText',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+            Filter: SliderColumnFilter,
+            filter: 'equals',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+            Filter: NumberRangeColumnFilter,
+            filter: 'between',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+            Filter: SelectColumnFilter,
+            filter: 'includes',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+            Filter: SliderColumnFilter,
+            filter: filterGreaterThan,
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(10000), [])
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
+
+export default App
@@ -0,0 +1,4 @@
+{
+  "presets": ["react-app"],
+  "plugins": ["styled-components"]
+}
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
@@ -0,0 +1,7 @@
+{
+  "extends": ["react-app", "prettier"],
+  "rules": {
+    // "eqeqeq": 0,
+    // "jsx-a11y/anchor-is-valid": 0
+  }
+}
@@ -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*
@@ -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,
+]
@@ -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
@@ -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>
@@ -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"
+}
@@ -0,0 +1,261 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useGroupBy, useExpanded } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`
+
+function Table({ columns, data }) {
+  const {
+    getTableProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state: [{ groupBy, expanded }],
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    useGroupBy,
+    useExpanded // useGroupBy would be pretty useless without useExpanded ;)
+  )
+
+  // 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()
+
+  return (
+    <>
+      <pre>
+        <code>{JSON.stringify({ groupBy, expanded }, null, 2)}</code>
+      </pre>
+      <Legend />
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>
+                  {column.canGroupBy ? (
+                    // If the column can be grouped, let's add a toggle
+                    <span {...column.getGroupByToggleProps()}>
+                      {column.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
+                        // 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
+                            ? '#0aff0082'
+                            : cell.aggregated
+                            ? '#ffa50078'
+                            : cell.repeatedValue
+                            ? '#ff000042'
+                            : 'white',
+                        }}
+                      >
+                        {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>
+      <br />
+      <div>Showing the first 20 results of {rows.length} rows</div>
+    </>
+  )
+}
+
+function Legend() {
+  return (
+    <div
+      style={{
+        padding: '0.5rem 0',
+      }}
+    >
+      <span
+        style={{
+          display: 'inline-block',
+          background: '#0aff0082',
+          padding: '0.5rem',
+        }}
+      >
+        Grouped
+      </span>{' '}
+      <span
+        style={{
+          display: 'inline-block',
+          background: '#ffa50078',
+          padding: '0.5rem',
+        }}
+      >
+        Aggregated
+      </span>{' '}
+      <span
+        style={{
+          display: 'inline-block',
+          background: '#ff000042',
+          padding: '0.5rem',
+        }}
+      >
+        Repeated Value
+      </span>
+    </div>
+  )
+}
+
+// This is a custom aggregator that
+// takes in an array of values and
+// returns the rounded median
+function roundedMedian(values) {
+  let min = values[0] || ''
+  let max = values[0] || ''
+
+  values.forEach(value => {
+    min = Math.min(min, value)
+    max = Math.max(max, value)
+  })
+
+  return Math.round((min + max) / 2)
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+            // Use a two-stage aggregator here to first
+            // count the total rows being aggregated,
+            // then sum any of those counts if they are
+            // aggregated further
+            aggregate: ['sum', 'count'],
+            Aggregated: ({ 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 (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
+
+export default App
@@ -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)
+})
@@ -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;
+}
@@ -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()
@@ -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()
+}
@@ -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()
+    })
+  }
+}
@@ -0,0 +1,4 @@
+{
+  "presets": ["react-app"],
+  "plugins": ["styled-components"]
+}
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
@@ -0,0 +1,7 @@
+{
+  "extends": ["react-app", "prettier"],
+  "rules": {
+    // "eqeqeq": 0,
+    // "jsx-a11y/anchor-is-valid": 0
+  }
+}
@@ -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*
@@ -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,
+]
@@ -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
@@ -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"
+    ]
+  }
+}
@@ -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>
@@ -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"
+}
@@ -0,0 +1,3 @@
+{
+  "infiniteLoopProtection": false
+}
@@ -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
@@ -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)
+})
@@ -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;
+}
@@ -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()
@@ -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()
+}
@@ -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()
+    })
+  }
+}
@@ -0,0 +1,4 @@
+{
+  "presets": ["react-app"],
+  "plugins": ["styled-components"]
+}
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
@@ -0,0 +1,7 @@
+{
+  "extends": ["react-app", "prettier"],
+  "rules": {
+    // "eqeqeq": 0,
+    // "jsx-a11y/anchor-is-valid": 0
+  }
+}
@@ -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*
@@ -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,
+]
@@ -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
@@ -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"
+    ]
+  }
+}
@@ -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>
@@ -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"
+}
@@ -0,0 +1,155 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useSortBy } 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;
+      }
+    }
+  }
+`
+
+const defaultColumn = {
+  sort: 'numeric',
+}
+
+function Table({ columns, data }) {
+  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+      debug: true,
+    },
+    useSortBy
+  )
+
+  // 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(0, 20)
+
+  return (
+    <>
+      <table {...getTableProps()}>
+        <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>
+                  )
+              )}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {firstPageRows.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(
+    () => [
+      {
+        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(2000), [])
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
+
+export default App
@@ -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);
+});
@@ -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;
+}
@@ -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();
@@ -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()
+}
@@ -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();
+    });
+  }
+}
@@ -1,7 +1,7 @@
-const path = require('path');
+const path = require('path')

-const lintProject = require('./configs/tests/jest.lint');
-const unitProject = require('./configs/tests/jest.unit');
+const lintProject = require('./configs/tests/jest.lint')
+const unitProject = require('./configs/tests/jest.unit')

 module.exports = {
  ...require('./configs/tests/jest.common'),
@@ -13,4 +13,4 @@ module.exports = {
    'jest-watch-typeahead/testname',
    'jest-watch-select-projects',
  ],
-};
+}
@@ -1,3 +1,3 @@
 module.exports = {
-  '*.js': ['prettier --write', 'git add'],
+  '*.{md,js,ts,jsx,tsx}': ['prettier --write --no-editorconfig', 'git add'],
 }
@@ -1,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "7.0.0-alpha.8",
+  "version": "7.0.0-alpha.15",
  "description": "A fast, lightweight, opinionated table and datagrid built on React",
  "license": "MIT",
  "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -18,6 +18,7 @@
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
  "scripts": {
+    "commit": "git add . && git-cz",
    "test": "is-ci 'test:ci' 'test:dev'",
    "test:dev": "jest --watch",
    "test:ci": "jest",
@@ -25,16 +26,15 @@
    "start": "rollup -c -w",
    "prepare": "yarn build",
    "release": "yarn publish",
-    "releaseNext": "yarn publish --tag next"
+    "releaseNext": "yarn publish --tag next",
+    "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",
+    "dist",
+    "LICENCE",
+    "package.json",
+    "README.md"
  ],
  "peerDependencies": {
    "prop-types": "^15.5.0",
@@ -42,40 +42,58 @@
    "react-dom": "^16.8.3"
  },
  "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.2.1",
-    "@babel/preset-env": "^7.2.0",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.2.0",
-    "@svgr/rollup": "^4.1.0",
-    "@testing-library/react": "^8.0.4",
-    "babel-core": "7.0.0-bridge.0",
+    "@babel/runtime": "^7.5.5",
+    "@commitlint/cli": "^8.1.0",
+    "@commitlint/config-conventional": "^8.1.0",
+    "@svgr/rollup": "^4.3.2",
+    "@testing-library/dom": "^5.6.0",
+    "@testing-library/jest-dom": "^4.0.0",
+    "@testing-library/react": "^8.0.7",
    "babel-eslint": "9.x",
-    "cross-env": "^5.1.4",
+    "commitizen": "^4.0.3",
+    "core-js": "3",
+    "cross-env": "^5.2.0",
    "eslint": "5.x",
    "eslint-config-prettier": "^4.3.0",
    "eslint-config-react-app": "^4.0.1",
    "eslint-config-standard": "^12.0.0",
    "eslint-config-standard-react": "^7.0.2",
    "eslint-plugin-flowtype": "2.x",
-    "eslint-plugin-import": "2.x",
-    "eslint-plugin-jsx-a11y": "6.x",
+    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-node": "^8.0.0",
    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-promise": "^4.0.0",
-    "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "1.5.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "7.14.3",
+    "eslint-plugin-react-hooks": "1.6.1",
    "eslint-plugin-standard": "^4.0.0",
+    "husky": "^3.0.2",
    "is-ci-cli": "^1.1.1",
    "jest": "^24.8.0",
    "jest-cli": "^24.8.0",
    "jest-runner-eslint": "^0.7.4",
    "jest-watch-select-projects": "^0.1.2",
    "jest-watch-typeahead": "^0.3.1",
+    "lint-staged": "^9.2.1",
+    "prop-types": "^15.5.0",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
    "rollup": "^0.68.0",
-    "rollup-plugin-babel": "^4.1.0",
+    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-commonjs": "^9.1.3",
    "rollup-plugin-node-resolve": "^4.0.0",
    "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-uglify": "^6.0.2"
-  }
+    "rollup-plugin-uglify": "^6.0.2",
+    "snapshot-diff": "^0.5.2"
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-conventional-changelog"
+    }
+  },
+  "browserslist": "> 0.25%, not dead"
 }
@@ -1,6 +1,12 @@
 module.exports = {
-  trailingComma: 'es5',
+  printWidth: 80,
  tabWidth: 2,
+  useTabs: false,
  semi: false,
  singleQuote: true,
+  trailingComma: 'es5',
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  arrowParens: 'avoid',
+  endOfLine: 'auto',
 }
@@ -12,17 +12,17 @@ export default [
    output: {
      file: pkg.main,
      format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
    },
    plugins: [
      external(),
      babel({
-        exclude: 'node_modules/**'
+        exclude: 'node_modules/**',
      }),
      resolve(),
      commonjs(),
-      uglify()
-    ]
+      uglify(),
+    ],
  },
  {
    input: 'src/index.js',
@@ -30,12 +30,12 @@ export default [
    output: {
      file: pkg.module,
      format: 'es',
-      sourcemap: true
+      sourcemap: true,
    },
    plugins: [
      babel({
-        exclude: ['/**/node_modules/**']
-      })
-    ]
-  }
+        exclude: ['/**/node_modules/**'],
+      }),
+    ],
+  },
 ]
@@ -5,3 +5,23 @@ export function sum(values, rows) {
 export function average(values, rows) {
  return Math.round((sum(values, rows) / values.length) * 100) / 100
 }
+
+export function median(values) {
+  let min = values[0] || ''
+  let max = values[0] || ''
+
+  values.forEach(value => {
+    min = Math.min(min, value)
+    max = Math.max(max, value)
+  })
+
+  return (min + max) / 2
+}
+
+export function uniqueCount(values) {
+  return new Set(values).size
+}
+
+export function count(values) {
+  return values.length
+}
@@ -9,6 +9,8 @@ export const text = (rows, id, filterValue) => {
  })
 }

+text.autoRemove = val => !val
+
 export const exactText = (rows, id, filterValue) => {
  return rows.filter(row => {
    const rowValue = row.values[id]
@@ -18,6 +20,8 @@ export const exactText = (rows, id, filterValue) => {
  })
 }

+exactText.autoRemove = val => !val
+
 export const exactTextCase = (rows, id, filterValue) => {
  return rows.filter(row => {
    const rowValue = row.values[id]
@@ -27,6 +31,8 @@ export const exactTextCase = (rows, id, filterValue) => {
  })
 }

+exactTextCase.autoRemove = val => !val
+
 export const includes = (rows, id, filterValue) => {
  return rows.filter(row => {
    const rowValue = row.values[id]
@@ -34,6 +40,8 @@ export const includes = (rows, id, filterValue) => {
  })
 }

+includes.autoRemove = val => !val || !val.length
+
 export const includesAll = (rows, id, filterValue) => {
  return rows.filter(row => {
    const rowValue = row.values[id]
@@ -41,6 +49,8 @@ export const includesAll = (rows, id, filterValue) => {
  })
 }

+includesAll.autoRemove = val => !val || !val.length
+
 export const exact = (rows, id, filterValue) => {
  return rows.filter(row => {
    const rowValue = row.values[id]
@@ -48,9 +58,35 @@ export const exact = (rows, id, filterValue) => {
  })
 }

-export const between = (rows, id, filterValue) => {
+exact.autoRemove = val => typeof val === 'undefined'
+
+export const equals = (rows, id, filterValue) => {
  return rows.filter(row => {
    const rowValue = row.values[id]
-    return rowValue >= filterValue[0] && rowValue <= filterValue[1]
+    // eslint-disable-next-line eqeqeq
+    return rowValue == filterValue
  })
 }
+
+equals.autoRemove = val => val == null
+
+export const between = (rows, id, filterValue) => {
+  let [min, max] = filterValue || []
+
+  min = typeof min === 'number' ? min : -Infinity
+  max = typeof max === 'number' ? max : Infinity
+
+  if (min > max) {
+    const temp = min
+    min = max
+    max = temp
+  }
+
+  return rows.filter(row => {
+    const rowValue = row.values[id]
+    return rowValue >= min && rowValue <= max
+  })
+}
+
+between.autoRemove = val =>
+  !val || (typeof val[0] !== 'number' && typeof val[1] !== 'number')
@@ -0,0 +1,172 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a basic table 1`] = `
+<DocumentFragment>
+  <table
+    class=""
+  >
+    <thead>
+      <tr
+        class=""
+      >
+        <th
+          class=""
+          colspan="2"
+        >
+          Name
+        </th>
+        <th
+          class=""
+          colspan="4"
+        >
+          Info
+        </th>
+      </tr>
+      <tr
+        class=""
+      >
+        <th
+          class=""
+          colspan="1"
+        >
+          First Name
+        </th>
+        <th
+          class=""
+          colspan="1"
+        >
+          Last Name
+        </th>
+        <th
+          class=""
+          colspan="1"
+        >
+          Age
+        </th>
+        <th
+          class=""
+          colspan="1"
+        >
+          Visits
+        </th>
+        <th
+          class=""
+          colspan="1"
+        >
+          Status
+        </th>
+        <th
+          class=""
+          colspan="1"
+        >
+          Profile Progress
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        class=""
+      >
+        <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=""
+        >
+          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=""
+        >
+          joe
+        </td>
+        <td
+          class=""
+        >
+          bergevin
+        </td>
+        <td
+          class=""
+        >
+          45
+        </td>
+        <td
+          class=""
+        >
+          20
+        </td>
+        <td
+          class=""
+        >
+          Complicated
+        </td>
+        <td
+          class=""
+        >
+          10
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
+`;
@@ -0,0 +1,126 @@
+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'
+import { useTable } from '../useTable'
+
+const data = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 29,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'derek',
+    lastName: 'perkins',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'bergevin',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+]
+
+function Table({ columns, data }) {
+  // Use the state and functions returned from useTable to build your UI
+  const { getTableProps, headerGroups, rows, prepareRow } = useTable({
+    columns,
+    data,
+  })
+
+  // 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>
+  )
+}
+
+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',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  return <Table columns={columns} data={data} />
+}
+
+test('renders a basic table', () => {
+  const { getByText, asFragment } = render(<App />)
+
+  expect(getByText('tanner')).toBeInTheDocument()
+  expect(getByText('linsley')).toBeInTheDocument()
+  expect(getByText('29')).toBeInTheDocument()
+  expect(getByText('100')).toBeInTheDocument()
+  expect(getByText('In Relationship')).toBeInTheDocument()
+  expect(getByText('50')).toBeInTheDocument()
+
+  expect(asFragment()).toMatchSnapshot()
+})
@@ -1,229 +0,0 @@
-import { useMemo } from 'react'
-import PropTypes from 'prop-types'
-
-import { getBy } from '../utils'
-
-const propTypes = {
-  // General
-  columns: PropTypes.arrayOf(
-    PropTypes.shape({
-      Cell: PropTypes.any,
-      Header: PropTypes.any,
-    })
-  ),
-  defaultColumn: PropTypes.any,
-}
-
-// Find the depth of the columns
-function findMaxDepth(columns, depth = 0) {
-  return columns.reduce((prev, curr) => {
-    if (curr.columns) {
-      return Math.max(prev, findMaxDepth(curr.columns, depth + 1))
-    }
-    return depth
-  }, 0)
-}
-
-function decorateColumn(column, defaultColumn, parent, depth, index) {
-  // Apply the defaultColumn
-  column = { ...defaultColumn, ...column }
-
-  // First check for string accessor
-  let { id, accessor, Header } = column
-
-  if (typeof accessor === 'string') {
-    id = id || accessor
-    const accessorString = accessor
-    accessor = row => getBy(row, accessorString)
-  }
-
-  if (!id && typeof Header === 'string') {
-    id = Header
-  }
-
-  if (!id && column.columns) {
-    console.error(column)
-    throw new Error('A column ID (or unique "Header" value) is required!')
-  }
-
-  if (!id) {
-    console.error(column)
-    throw new Error('A column ID (or string accessor) is required!')
-  }
-
-  column = {
-    Header: ({ id }) => id,
-    Cell: ({ value }) => value,
-    show: true,
-    ...column,
-    id,
-    accessor,
-    parent,
-    depth,
-    index,
-  }
-
-  return column
-}
-
-// Build the visible columns, headers and flat column list
-function decorateColumnTree(columns, defaultColumn, parent, depth = 0) {
-  return columns.map((column, columnIndex) => {
-    column = decorateColumn(column, defaultColumn, parent, depth, columnIndex)
-    if (column.columns) {
-      column.columns = decorateColumnTree(
-        column.columns,
-        defaultColumn,
-        column,
-        depth + 1
-      )
-    }
-    return column
-  })
-}
-
-// Build the header groups from the bottom up
-function makeHeaderGroups(columns, maxDepth, defaultColumn) {
-  const headerGroups = []
-
-  const removeChildColumns = column => {
-    delete column.columns
-    if (column.parent) {
-      removeChildColumns(column.parent)
-    }
-  }
-  columns.forEach(removeChildColumns)
-
-  const buildGroup = (columns, depth = 0) => {
-    const headerGroup = {
-      headers: [],
-    }
-
-    const parentColumns = []
-
-    const hasParents = columns.some(col => col.parent)
-
-    columns.forEach(column => {
-      const isFirst = !parentColumns.length
-      let latestParentColumn = [...parentColumns].reverse()[0]
-
-      // If the column has a parent, add it if necessary
-      if (column.parent) {
-        if (isFirst || latestParentColumn.originalID !== column.parent.id) {
-          parentColumns.push({
-            ...column.parent,
-            originalID: column.parent.id,
-            id: [column.parent.id, parentColumns.length].join('_'),
-          })
-        }
-      } else if (hasParents) {
-        // If other columns have parents, add a place holder if necessary
-        const placeholderColumn = decorateColumn(
-          {
-            originalID: [column.id, 'placeholder', maxDepth - depth].join('_'),
-            id: [
-              column.id,
-              'placeholder',
-              maxDepth - depth,
-              parentColumns.length,
-            ].join('_'),
-          },
-          defaultColumn
-        )
-        if (
-          isFirst ||
-          latestParentColumn.originalID !== placeholderColumn.originalID
-        ) {
-          parentColumns.push(placeholderColumn)
-        }
-      }
-
-      // Establish the new columns[] relationship on the parent
-      if (column.parent || hasParents) {
-        latestParentColumn = [...parentColumns].reverse()[0]
-        latestParentColumn.columns = latestParentColumn.columns || []
-        if (!latestParentColumn.columns.includes(column)) {
-          latestParentColumn.columns.push(column)
-        }
-      }
-
-      headerGroup.headers.push(column)
-    })
-
-    headerGroups.push(headerGroup)
-
-    if (parentColumns.length) {
-      buildGroup(parentColumns)
-    }
-  }
-
-  buildGroup(columns)
-
-  return headerGroups.reverse()
-}
-
-export const useColumns = props => {
-  const {
-    debug,
-    columns: userColumns,
-    defaultColumn = {},
-    state: [{ groupBy }],
-  } = props
-
-  PropTypes.checkPropTypes(propTypes, props, 'property', 'useColumns')
-
-  const { columns, headerGroups, headers } = useMemo(() => {
-    if (debug) console.info('getColumns')
-
-    // Decorate All the columns
-    let columnTree = decorateColumnTree(userColumns, defaultColumn)
-
-    // Get the flat list of all columns
-    let columns = flattenBy(columnTree, 'columns')
-
-    columns = [
-      ...groupBy.map(g => columns.find(col => col.id === g)),
-      ...columns.filter(col => !groupBy.includes(col.id)),
-    ]
-
-    // Get headerGroups
-    const headerGroups = makeHeaderGroups(
-      columns,
-      findMaxDepth(columnTree),
-      defaultColumn
-    )
-
-    const headers = flattenBy(headerGroups, 'headers')
-
-    return {
-      columns,
-      headerGroups,
-      headers,
-    }
-  }, [debug, defaultColumn, groupBy, userColumns])
-
-  return {
-    ...props,
-    columns,
-    headerGroups,
-    headers,
-  }
-
-  function flattenBy(columns, childKey) {
-    const flatColumns = []
-
-    const recurse = columns => {
-      columns.forEach(d => {
-        if (!d[childKey]) {
-          flatColumns.push(d)
-        } else {
-          recurse(d[childKey])
-        }
-      })
-    }
-
-    recurse(columns)
-
-    return flatColumns
-  }
-}
@@ -1,66 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const propTypes = {
-  subRowsKey: PropTypes.string,
-}
-
-export const useRows = props => {
-  PropTypes.checkPropTypes(propTypes, props, 'property', 'useRows')
-
-  const { debug, columns, subRowsKey = 'subRows', data } = props
-
-  const accessedRows = React.useMemo(() => {
-    if (debug) console.info('getAccessedRows')
-
-    // Access the row's data
-    const accessRow = (originalRow, i, depth = 0) => {
-      // Keep the original reference around
-      const original = originalRow
-
-      // Process any subRows
-      const subRows = originalRow[subRowsKey]
-        ? originalRow[subRowsKey].map((d, i) => accessRow(d, i, depth + 1))
-        : undefined
-
-      const row = {
-        original,
-        index: i,
-        path: [i], // used to create a key for each row even if not nested
-        subRows,
-        depth,
-        cells: [{}], // This is a dummy cell
-      }
-
-      // Override common array functions (and the dummy cell's getCellProps function)
-      // to show an error if it is accessed without calling prepareRow
-      const unpreparedAccessWarning = () => {
-        throw new Error(
-          'React-Table: You have not called prepareRow(row) one or more rows you are attempting to render.'
-        )
-      }
-      row.cells.map = unpreparedAccessWarning
-      row.cells.filter = unpreparedAccessWarning
-      row.cells.forEach = unpreparedAccessWarning
-      row.cells[0].getCellProps = unpreparedAccessWarning
-
-      // Create the cells and values
-      row.values = {}
-      columns.forEach(column => {
-        row.values[column.id] = column.accessor
-          ? column.accessor(originalRow, i, { subRows, depth, data })
-          : undefined
-      })
-
-      return row
-    }
-
-    // Use the resolved data
-    return data.map((d, i) => accessRow(d, i))
-  }, [debug, data, subRowsKey, columns])
-
-  return {
-    ...props,
-    rows: accessedRows,
-  }
-}
@@ -1,14 +1,30 @@
+import React from 'react'
 import PropTypes from 'prop-types'
 //
-import { applyHooks, applyPropHooks, mergeProps, flexRender } from '../utils'
+import {
+  applyHooks,
+  applyPropHooks,
+  mergeProps,
+  flexRender,
+  decorateColumnTree,
+  makeHeaderGroups,
+  findMaxDepth,
+  flattenBy,
+} from '../utils'

 import { useTableState } from './useTableState'
-import { useColumns } from './useColumns'
-import { useRows } from './useRows'

 const propTypes = {
  // General
  data: PropTypes.array.isRequired,
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      Cell: PropTypes.any,
+      Header: PropTypes.any,
+    })
+  ).isRequired,
+  defaultColumn: PropTypes.object,
+  subRowsKey: PropTypes.string,
  debug: PropTypes.bool,
 }

@@ -23,8 +39,9 @@ export const useTable = (props, ...plugins) => {
  let {
    data,
    state: userState,
-    useColumns: userUseColumns = useColumns,
-    useRows: userUseRows = useRows,
+    columns: userColumns,
+    defaultColumn = {},
+    subRowsKey = 'subRows',
    debug,
  } = props

@@ -36,86 +53,207 @@ export const useTable = (props, ...plugins) => {
  // But use the users state if provided
  const state = userState || defaultState

-  // These are hooks that plugins can use right before render
-  const hooks = {
-    beforeRender: [],
-    columns: [],
-    headers: [],
-    headerGroups: [],
-    rows: [],
-    row: [],
-    getTableProps: [],
-    getRowProps: [],
-    getHeaderGroupProps: [],
-    getHeaderProps: [],
-    getCellProps: [],
-  }
-
  // The initial api
-  let api = {
+  let instanceRef = React.useRef({})
+
+  Object.assign(instanceRef.current, {
    ...props,
    data,
    state,
-    hooks,
-  }
-
-  if (debug) console.time('hooks')
-  // Loop through plugins to build the api out
-  api = [userUseColumns, userUseRows, ...plugins]
-    .filter(Boolean)
-    .reduce((prev, next) => next(prev), api)
-  if (debug) console.timeEnd('hooks')
-
-  // Determine column visibility
-  api.columns.forEach(column => {
-    column.visible =
-      typeof column.show === 'function' ? column.show(api) : !!column.show
+    plugins,
+    hooks: {
+      columnsBeforeHeaderGroups: [],
+      useMain: [],
+      useColumns: [],
+      useHeaders: [],
+      useHeaderGroups: [],
+      useRows: [],
+      prepareRow: [],
+      getTableProps: [],
+      getRowProps: [],
+      getHeaderGroupProps: [],
+      getHeaderProps: [],
+      getCellProps: [],
+    },
  })

-  // Allow hooks to decorate columns
-  if (debug) console.time('hooks.columns')
-  api.columns = applyHooks(api.hooks.columns, api.columns, api)
-  if (debug) console.timeEnd('hooks.columns')
+  // Allow plugins to register hooks
+  if (debug) console.time('plugins')
+  plugins.filter(Boolean).forEach(plugin => {
+    plugin(instanceRef.current.hooks)
+  })
+  if (debug) console.timeEnd('plugins')

-  // Allow hooks to decorate headers
-  if (debug) console.time('hooks.headers')
-  api.headers = applyHooks(api.hooks.headers, api.headers, api)
-  if (debug) console.timeEnd('hooks.headers')
-  ;[...api.columns, ...api.headers].forEach(column => {
-    // Give columns/headers rendering power
-    column.render = (type, userProps = {}) => {
-      const Comp = typeof type === 'string' ? column[type] : type
+  // Compute columns, headerGroups and headers
+  const columnInfo = React.useMemo(
+    () => {
+      if (debug) console.info('buildColumns/headerGroup/headers')
+      // Decorate All the columns
+      let columnTree = decorateColumnTree(userColumns, defaultColumn)

-      if (typeof Comp === 'undefined') {
-        throw new Error(renderErr)
+      // 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(
+        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,
+      }
+    },
+    [debug, defaultColumn, userColumns]
+  )
+
+  // Place the columns, headerGroups and headers on the api
+  Object.assign(instanceRef.current, columnInfo)
+
+  // Access the row model
+  instanceRef.current.rows = React.useMemo(
+    () => {
+      if (debug) console.time('getAccessedRows')
+      // Access the row's data
+      const accessRow = (originalRow, i, depth = 0) => {
+        // Keep the original reference around
+        const original = originalRow
+
+        // Process any subRows
+        const subRows = originalRow[subRowsKey]
+          ? originalRow[subRowsKey].map((d, i) => accessRow(d, i, depth + 1))
+          : []
+
+        const row = {
+          original,
+          index: i,
+          path: [i], // used to create a key for each row even if not nested
+          subRows,
+          depth,
+          cells: [{}], // This is a dummy cell
+        }
+
+        // Override common array functions (and the dummy cell's getCellProps function)
+        // to show an error if it is accessed without calling prepareRow
+        const unpreparedAccessWarning = () => {
+          throw new Error(
+            'React-Table: You have not called prepareRow(row) one or more rows you are attempting to render.'
+          )
+        }
+        row.cells.map = unpreparedAccessWarning
+        row.cells.filter = unpreparedAccessWarning
+        row.cells.forEach = unpreparedAccessWarning
+        row.cells[0].getCellProps = unpreparedAccessWarning
+
+        // Create the cells and values
+        row.values = {}
+        instanceRef.current.columns.forEach(column => {
+          row.values[column.id] = column.accessor
+            ? column.accessor(originalRow, i, { subRows, depth, data })
+            : undefined
+        })
+
+        return row
      }

-      return flexRender(Comp, {
-        ...api,
-        ...column,
-        ...userProps,
-      })
-    }
+      // Use the resolved data
+      const accessedData = data.map((d, i) => accessRow(d, i))
+      if (debug) console.timeEnd('getAccessedRows')
+      return accessedData
+    },
+    [debug, data, subRowsKey]
+  )

-    // Give columns/headers a default getHeaderProps
-    column.getHeaderProps = props =>
-      mergeProps(
-        {
-          key: ['header', column.id].join('_'),
-          colSpan: column.columns ? column.columns.length : 1,
-        },
-        applyPropHooks(api.hooks.getHeaderProps, column, api),
-        props
-      )
+  // Determine column visibility
+  instanceRef.current.columns.forEach(column => {
+    column.visible =
+      typeof column.show === 'function'
+        ? column.show(instanceRef.current)
+        : !!column.show
  })

-  // Allow hooks to decorate headerGroups
-  if (debug) console.time('hooks.headerGroups')
-  api.headerGroups = applyHooks(
-    api.hooks.headerGroups,
-    api.headerGroups,
-    api
-  ).filter((headerGroup, i) => {
+  if (debug) console.time('hooks.useMain')
+  instanceRef.current = applyHooks(
+    instanceRef.current.hooks.useMain,
+    instanceRef.current
+  )
+  if (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
+      column.render = (type, userProps = {}) => {
+        const Comp = typeof type === 'string' ? column[type] : type
+
+        if (typeof Comp === 'undefined') {
+          throw new Error(renderErr)
+        }
+
+        return flexRender(Comp, {
+          ...instanceRef.current,
+          ...column,
+          ...userProps,
+        })
+      }
+
+      // Give columns/headers a default getHeaderProps
+      column.getHeaderProps = props =>
+        mergeProps(
+          {
+            key: ['header', column.id].join('_'),
+            colSpan: column.columns ? column.columns.length : 1,
+          },
+          applyPropHooks(
+            instanceRef.current.hooks.getHeaderProps,
+            column,
+            instanceRef.current
+          ),
+          props
+        )
+    }
+  )
+
+  // // 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 => {
      const recurse = columns =>
@@ -138,7 +276,11 @@ export const useTable = (props, ...plugins) => {
          {
            key: [`header${i}`].join('_'),
          },
-          applyPropHooks(api.hooks.getHeaderGroupProps, headerGroup, api),
+          applyPropHooks(
+            instanceRef.current.hooks.getHeaderGroupProps,
+            headerGroup,
+            instanceRef.current
+          ),
          props
        )
      return true
@@ -146,29 +288,36 @@ export const useTable = (props, ...plugins) => {

    return false
  })
-  if (debug) console.timeEnd('hooks.headerGroups')
+  // 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.rows')
-  api.rows = applyHooks(api.hooks.rows, api.rows, api)
-  if (debug) console.timeEnd('hooks.rows')
+  if (debug) console.time('hooks.useRows')
+  instanceRef.current.rows = applyHooks(
+    instanceRef.current.hooks.useRows,
+    instanceRef.current.rows,
+    instanceRef.current
+  )
+  if (debug) console.timeEnd('hooks.useRows')

  // The prepareRow function is absolutely necessary and MUST be called on
  // any rows the user wishes to be displayed.

-  api.prepareRow = row => {
+  instanceRef.current.prepareRow = row => {
    const { path } = row
    row.getRowProps = props =>
      mergeProps(
        { key: ['row', ...path].join('_') },
-        applyPropHooks(api.hooks.getRowProps, row, api),
+        applyPropHooks(
+          instanceRef.current.hooks.getRowProps,
+          row,
+          instanceRef.current
+        ),
        props
      )

-    // need to apply any row specific hooks (useExpanded requires this)
-    applyHooks(api.hooks.row, row, api)
-
-    const visibleColumns = api.columns.filter(column => column.visible)
+    const visibleColumns = instanceRef.current.columns.filter(
+      column => column.visible
+    )

    // Build the cells for each row
    row.cells = visibleColumns.map(column => {
@@ -180,12 +329,16 @@ export const useTable = (props, ...plugins) => {

      // Give each cell a getCellProps base
      cell.getCellProps = props => {
-        const columnPathStr = [path, column.id].join('_')
+        const columnPathStr = [...path, column.id].join('_')
        return mergeProps(
          {
            key: ['cell', columnPathStr].join('_'),
          },
-          applyPropHooks(api.hooks.getCellProps, cell, api),
+          applyPropHooks(
+            instanceRef.current.hooks.getCellProps,
+            cell,
+            instanceRef.current
+          ),
          props
        )
      }
@@ -199,7 +352,7 @@ export const useTable = (props, ...plugins) => {
        }

        return flexRender(Comp, {
-          ...api,
+          ...instanceRef.current,
          ...cell,
          ...userProps,
        })
@@ -207,10 +360,19 @@ export const useTable = (props, ...plugins) => {

      return cell
    })
+
+    // need to apply any row specific hooks (useExpanded requires this)
+    applyHooks(instanceRef.current.hooks.prepareRow, row, instanceRef.current)
  }

-  api.getTableProps = userProps =>
-    mergeProps(applyPropHooks(api.hooks.getTableProps, api), userProps)
+  instanceRef.current.getTableProps = userProps =>
+    mergeProps(
+      applyPropHooks(
+        instanceRef.current.hooks.getTableProps,
+        instanceRef.current
+      ),
+      userProps
+    )

-  return api
+  return instanceRef.current
 }
@@ -1,8 +1,6 @@
 import * as utils from './utils'
 export { utils }
 export { useTable } from './hooks/useTable'
-export { useColumns } from './hooks/useColumns'
-export { useRows } from './hooks/useRows'
 export { useTableState, defaultState } from './hooks/useTableState'
 export { useExpanded } from './plugin-hooks/useExpanded'
 export { useFilters } from './plugin-hooks/useFilters'
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a sortable table 1`] = `
+"Snapshot Diff:
+Compared values have no visual difference."
+`;
+
+exports[`renders a sortable table 2`] = `
+"Snapshot Diff:
+Compared values have no visual difference."
+`;
@@ -0,0 +1,252 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a sortable table 1`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -31,11 +31,13 @@
+            colspan=\\"1\\"
+            style=\\"cursor: pointer;\\"
+            title=\\"Toggle SortBy\\"
+          >
+            First Name
+-           <span />
+           <span>
+              🔼
+           </span>
+          </th>
+          <th
+            class=\\"\\"
+            colspan=\\"1\\"
+            style=\\"cursor: pointer;\\"
+@@ -87,104 +89,104 @@
+          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: derek
+           firstName: joe
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           lastName: perkins
+           lastName: bergevin
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           age: 40
+           age: 45
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           visits: 40
+           visits: 20
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           status: Single
+           status: Complicated
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           progress: 80
+           progress: 10
+          </td>
+        </tr>
+        <tr
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           firstName: joe
+           firstName: tanner
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           lastName: bergevin
+           lastName: linsley
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           age: 45
+           age: 29
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           visits: 20
+           visits: 100
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           status: Complicated
+           status: In Relationship
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           progress: 10
+           progress: 50
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </DocumentFragment>"
+`;
+
+exports[`renders a sortable table 2`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -32,11 +32,11 @@
+            style=\\"cursor: pointer;\\"
+            title=\\"Toggle SortBy\\"
+          >
+            First Name
+            <span>
+-              🔼
+              🔽
+            </span>
+          </th>
+          <th
+            class=\\"\\"
+            colspan=\\"1\\"
+@@ -89,36 +89,36 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           firstName: derek
+           firstName: tanner
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           lastName: perkins
+           lastName: linsley
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           age: 40
+           age: 29
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           visits: 40
+           visits: 100
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           status: Single
+           status: In Relationship
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           progress: 80
+           progress: 50
+          </td>
+        </tr>
+        <tr
+          class=\\"\\"
+        >
+@@ -157,36 +157,36 @@
+          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>
+      </tbody>
+    </table>
+  </DocumentFragment>"
+`;
@@ -0,0 +1,157 @@
+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, fireEvent } from '@testing-library/react'
+import { useTable } from '../../hooks/useTable'
+import { useFilters } from '../useFilters'
+
+const data = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 29,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'derek',
+    lastName: 'perkins',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'bergevin',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+  {
+    firstName: 'jaylen',
+    lastName: 'linsley',
+    age: 26,
+    visits: 99,
+    status: 'In Relationship',
+    progress: 70,
+  },
+]
+
+const defaultColumn = {
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
+  Filter: ({ filterValue, setFilter }) => (
+    <input
+      value={filterValue || ''}
+      onChange={e => {
+        setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
+      }}
+      placeholder="Search..."
+    />
+  ),
+}
+
+function Table({ columns, data }) {
+  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+    },
+    useFilters
+  )
+
+  return (
+    <table {...getTableProps()}>
+      <thead>
+        {headerGroups.map(headerGroup => (
+          <tr {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map(column => (
+              <th {...column.getHeaderProps()}>
+                {column.render('Header')}
+                {column.render('Filter')}
+              </th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody>
+        {rows.map(
+          (row, i) =>
+            prepareRow(row) || (
+              <tr {...row.getRowProps()}>
+                {row.cells.map(cell => (
+                  <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                ))}
+              </tr>
+            )
+        )}
+      </tbody>
+    </table>
+  )
+}
+
+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',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  return <Table columns={columns} data={data} />
+}
+
+test('renders a sortable table', () => {
+  const { getByText, asFragment } = render(<App />)
+
+  const beforeSort = asFragment()
+
+  fireEvent.click(getByText('First Name'))
+
+  const afterSort1 = asFragment()
+
+  fireEvent.click(getByText('First Name'))
+
+  const afterSort2 = asFragment()
+
+  expect(beforeSort).toMatchDiffSnapshot(afterSort1)
+  expect(afterSort1).toMatchDiffSnapshot(afterSort2)
+})
@@ -1,43 +1,49 @@
+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 styled from 'styled-components'
-import { useTable, useSortBy } from 'react-table'
+import { render, fireEvent } from '@testing-library/react'
+import { useTable } from '../../hooks/useTable'
+import { useSortBy } from '../useSortBy'

-import makeData from './makeData'
+const data = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 29,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'derek',
+    lastName: 'perkins',
+    age: 40,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'bergevin',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+]

-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;
-      }
-    }
-  }
-`
+const defaultColumn = {
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
+}

 function Table({ columns, data }) {
  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
    {
      columns,
      data,
+      defaultColumn,
    },
    useSortBy
  )
@@ -46,7 +52,7 @@ function Table({ columns, data }) {
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
-          <tr {...headerGroup.getRowProps()}>
+          <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
@@ -118,13 +124,22 @@ function App() {
    []
  )

-  const data = React.useMemo(() => makeData(20), [])
-
-  return (
-    <Styles>
-      <Table columns={columns} data={data} />
-    </Styles>
-  )
+  return <Table columns={columns} data={data} />
 }

-export default App
+test('renders a sortable table', () => {
+  const { getByText, asFragment } = render(<App />)
+
+  const beforeSort = asFragment()
+
+  fireEvent.click(getByText('First Name'))
+
+  const afterSort1 = asFragment()
+
+  fireEvent.click(getByText('First Name'))
+
+  const afterSort2 = asFragment()
+
+  expect(beforeSort).toMatchDiffSnapshot(afterSort1)
+  expect(afterSort1).toMatchDiffSnapshot(afterSort2)
+})
@@ -14,8 +14,12 @@ const propTypes = {
  paginateSubRows: PropTypes.bool,
 }

-export const useExpanded = props => {
-  PropTypes.checkPropTypes(propTypes, props, 'property', 'useExpanded')
+export const useExpanded = hooks => {
+  hooks.useMain.push(useMain)
+}
+
+function useMain(instance) {
+  PropTypes.checkPropTypes(propTypes, instance, 'property', 'useExpanded')

  const {
    debug,
@@ -24,7 +28,7 @@ export const useExpanded = props => {
    hooks,
    state: [{ expanded }, setState],
    paginateSubRows = true,
-  } = props
+  } = instance

  const toggleExpandedByPath = (path, set) => {
    return setState(old => {
@@ -38,50 +42,49 @@ export const useExpanded = props => {
    }, actions.toggleExpanded)
  }

-  hooks.row.push(row => {
+  hooks.prepareRow.push(row => {
    const { path } = row
    row.toggleExpanded = set => toggleExpandedByPath(path, set)
    return row
  })

-  const expandedRows = useMemo(() => {
-    if (debug) console.info('getExpandedRows')
+  const expandedRows = useMemo(
+    () => {
+      if (debug) console.info('getExpandedRows')

-    const expandedRows = []
+      const expandedRows = []

-    // Here we do some mutation, but it's the last stage in the
-    // immutable process so this is safe
-    const handleRow = (row, depth = 0, parentPath = []) => {
-      // Compute some final state for the row
-      const path = [...parentPath, row.index]
+      // Here we do some mutation, but it's the last stage in the
+      // immutable process so this is safe
+      const handleRow = row => {
+        row.isExpanded =
+          (row.original && row.original[manualExpandedKey]) ||
+          getBy(expanded, row.path)

-      row.path = path
-      row.depth = depth
+        if (paginateSubRows || (!paginateSubRows && row.depth === 0)) {
+          expandedRows.push(row)
+        }

-      row.isExpanded =
-        (row.original && row.original[manualExpandedKey]) ||
-        getBy(expanded, path)
+        row.canExpand = row.subRows && !!row.subRows.length

-      if (paginateSubRows || (!paginateSubRows && row.depth === 0)) {
-        expandedRows.push(row)
+        if (row.isExpanded && row.subRows && row.subRows.length) {
+          row.subRows.forEach((row, i) => handleRow(row))
+        }
+
+        return row
      }

-      if (row.isExpanded && row.subRows && row.subRows.length) {
-        row.subRows.forEach((row, i) => handleRow(row, depth + 1, path))
-      }
+      rows.forEach(row => handleRow(row))

-      return row
-    }
-
-    rows.forEach(row => handleRow(row))
-
-    return expandedRows
-  }, [debug, rows, manualExpandedKey, expanded, paginateSubRows])
+      return expandedRows
+    },
+    [debug, rows, manualExpandedKey, expanded, paginateSubRows]
+  )

  const expandedDepth = findExpandedDepth(expanded)

  return {
-    ...props,
+    ...instance,
    toggleExpandedByPath,
    expandedDepth,
    rows: expandedRows,
@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'

 import { getFirstDefined, isFunction } from '../utils'
@@ -14,176 +14,207 @@ const propTypes = {
  // General
  columns: PropTypes.arrayOf(
    PropTypes.shape({
-      filterFn: PropTypes.func,
-      filterAll: PropTypes.bool,
-      canFilter: PropTypes.bool,
+      disableFilters: PropTypes.bool,
      Filter: PropTypes.any,
    })
  ),

-  filterFn: PropTypes.func,
  manualFilters: PropTypes.bool,
 }

-export const useFilters = props => {
-  PropTypes.checkPropTypes(propTypes, props, 'property', 'useFilters')
+export const useFilters = hooks => {
+  hooks.useMain.push(useMain)
+}
+
+function useMain(instance) {
+  PropTypes.checkPropTypes(propTypes, instance, 'property', 'useFilters')

  const {
    debug,
    rows,
    columns,
    filterTypes: userFilterTypes,
-    defaultFilter = filterTypes.text,
    manualFilters,
    disableFilters,
-    hooks,
    state: [{ filters }, setState],
-  } = props
+  } = instance
+
+  const setFilter = (id, updater) => {
+    const column = columns.find(d => d.id === id)
+
+    const filterMethod = getFilterMethod(
+      column.filter,
+      userFilterTypes || {},
+      filterTypes
+    )

-  const setFilter = (id, val) => {
    return setState(old => {
-      if (typeof val === 'undefined') {
-        const { [id]: prev, ...rest } = filters
+      const newFilter =
+        typeof updater === 'function' ? updater(old.filters[id]) : updater
+
+      //
+      if (shouldAutoRemove(filterMethod.autoRemove, newFilter)) {
+        const { [id]: remove, ...newFilters } = old.filters
        return {
          ...old,
-          filters: {
-            ...rest,
-          },
+          filters: newFilters,
        }
      }

      return {
        ...old,
        filters: {
-          ...filters,
-          [id]: val,
+          ...old.filters,
+          [id]: newFilter,
        },
      }
    }, actions.setFilter)
  }

-  const setAllFilters = filters => {
+  const setAllFilters = updater => {
    return setState(old => {
+      const newFilters = typeof updater === 'function' ? updater(old) : updater
+
+      // Filter out undefined values
+      Object.keys(newFilters).forEach(id => {
+        const newFilter = newFilters[id]
+        const column = columns.find(d => d.id === id)
+        const filterMethod = getFilterMethod(
+          column.filter,
+          userFilterTypes || {},
+          filterTypes
+        )
+
+        if (shouldAutoRemove(filterMethod.autoRemove, newFilter)) {
+          delete newFilters[id]
+        }
+      })
+
      return {
        ...old,
-        filters,
+        filters: newFilters,
      }
    }, actions.setAllFilters)
  }

-  hooks.columns.push(columns => {
-    columns.forEach(column => {
-      const { id, accessor, canFilter } = column
+  columns.forEach(column => {
+    const { id, accessor, disableFilters: columnDisableFilters } = column

-      // Determine if a column is filterable
-      column.canFilter = accessor
-        ? getFirstDefined(
-            canFilter,
-            disableFilters === true ? false : undefined,
-            true
-          )
-        : false
+    // Determine if a column is filterable
+    column.canFilter = accessor
+      ? getFirstDefined(
+          columnDisableFilters,
+          disableFilters === true ? false : undefined,
+          true
+        )
+      : false

-      // Provide the column a way of updating the filter value
-      column.setFilter = val => setFilter(column.id, val)
+    // Provide the column a way of updating the filter value
+    column.setFilter = val => setFilter(column.id, val)

-      // Provide the current filter value to the column for
-      // convenience
-      column.filterValue = filters[id]
-    })
-
-    return columns
+    // Provide the current filter value to the column for
+    // convenience
+    column.filterValue = filters[id]
  })

-  const filteredRows = useMemo(() => {
-    if (manualFilters || !Object.keys(filters).length) {
-      return rows
-    }
+  // TODO: Create a filter cache for incremental high speed multi-filtering
+  // This gets pretty complicated pretty fast, since you have to maintain a
+  // cache for each row group (top-level rows, and each row's recursive subrows)
+  // This would make multi-filtering a lot faster though. Too far?

-    if (debug) console.info('getFilteredRows')
+  const filteredRows = React.useMemo(
+    () => {
+      if (manualFilters || !Object.keys(filters).length) {
+        return rows
+      }

-    // Filters top level and nested rows
-    const filterRows = rows => {
-      let filteredRows = rows
+      if (debug) console.info('getFilteredRows')

-      filteredRows = Object.entries(filters).reduce(
-        (filteredSoFar, [columnID, filterValue]) => {
-          // Find the filters column
-          const column = columns.find(d => d.id === columnID)
+      // Filters top level and nested rows
+      const filterRows = rows => {
+        let filteredRows = rows

-          // Don't filter hidden columns or columns that have had their filters disabled
-          if (!column || column.filterable === false) {
-            return filteredSoFar
-          }
+        filteredRows = Object.entries(filters).reduce(
+          (filteredSoFar, [columnID, filterValue]) => {
+            // Find the filters column
+            const column = columns.find(d => d.id === columnID)

-          // Look up filter functions in this order:
-          // column function
-          // column string lookup on user filters
-          // column string lookup on built-in filters
-          // default function
-          // default string lookup on user filters
-          // default string lookup on built-in filters
-          const filterMethod =
-            isFunction(column.filter) ||
-            (userFilterTypes || {})[column.filter] ||
-            filterTypes[column.filter] ||
-            isFunction(defaultFilter) ||
-            (userFilterTypes || {})[defaultFilter] ||
-            filterTypes[defaultFilter]
+            if (!column) {
+              return filteredSoFar
+            }

-          if (!filterMethod) {
-            console.warn(
-              `Could not find a valid 'column.filter' for column with the ID: ${
-                column.id
-              }.`
+            column.preFilteredRows = filteredSoFar
+
+            const filterMethod = getFilterMethod(
+              column.filter,
+              userFilterTypes || {},
+              filterTypes
            )
-            return filteredSoFar
+
+            if (!filterMethod) {
+              console.warn(
+                `Could not find a valid 'column.filter' for column with the ID: ${
+                  column.id
+                }.`
+              )
+              return filteredSoFar
+            }
+
+            // Pass the rows, id, filterValue and column to the filterMethod
+            // to get the filtered rows back
+            return filterMethod(filteredSoFar, columnID, filterValue, column)
+          },
+          rows
+        )
+
+        // Apply the filter to any subRows
+        // We technically could do this recursively in the above loop,
+        // but that would severely hinder the API for the user, since they
+        // would be required to do that recursion in some scenarios
+        filteredRows = filteredRows.map(row => {
+          if (!row.subRows) {
+            return row
          }
+          return {
+            ...row,
+            subRows: filterRows(row.subRows),
+          }
+        })

-          // Pass the rows, id, filterValue and column to the filterMethod
-          // to get the filtered rows back
-          return filterMethod(filteredSoFar, columnID, filterValue, column)
-        },
-        rows
-      )
+        // then filter any rows without subcolumns because it would be strange to show
+        filteredRows = filteredRows.filter(row => {
+          if (!row.subRows) {
+            return true
+          }
+          return row.subRows.length > 0
+        })

-      // Apply the filter to any subRows
-      filteredRows = filteredRows.map(row => {
-        if (!row.subRows) {
-          return row
-        }
-        return {
-          ...row,
-          subRows: filterRows(row.subRows),
-        }
-      })
+        return filteredRows
+      }

-      // then filter any rows without subcolumns because it would be strange to show
-      filteredRows = filteredRows.filter(row => {
-        if (!row.subRows) {
-          return true
-        }
-        return row.subRows.length > 0
-      })
-
-      return filteredRows
-    }
-
-    return filterRows(rows)
-  }, [
-    manualFilters,
-    filters,
-    debug,
-    rows,
-    columns,
-    userFilterTypes,
-    defaultFilter,
-  ])
+      return filterRows(rows)
+    },
+    [manualFilters, filters, debug, rows, columns, userFilterTypes]
+  )

  return {
-    ...props,
+    ...instance,
    setFilter,
    setAllFilters,
+    preFilteredRows: rows,
    rows: filteredRows,
  }
 }
+
+function shouldAutoRemove(autoRemove, value) {
+  return autoRemove ? autoRemove(value) : typeof value === 'undefined'
+}
+
+function getFilterMethod(filter, userFilterTypes, filterTypes) {
+  return (
+    isFunction(filter) ||
+    userFilterTypes[filter] ||
+    filterTypes[filter] ||
+    filterTypes.text
+  )
+}
@@ -19,43 +19,70 @@ const propTypes = {
  // General
  columns: PropTypes.arrayOf(
    PropTypes.shape({
-      aggregate: PropTypes.func,
-      canGroupBy: PropTypes.bool,
+      aggregate: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.string,
+        PropTypes.arrayOf(
+          PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+        ),
+      ]),
+      disableGrouping: PropTypes.bool,
      Aggregated: PropTypes.any,
    })
  ),
  groupByFn: PropTypes.func,
  manualGrouping: PropTypes.bool,
+  disableGrouping: PropTypes.bool,
  aggregations: PropTypes.object,
 }

-export const useGroupBy = props => {
-  PropTypes.checkPropTypes(propTypes, props, 'property', 'useGroupBy')
+export const useGroupBy = hooks => {
+  hooks.columnsBeforeHeaderGroups.push(columnsBeforeHeaderGroups)
+  hooks.useMain.push(useMain)
+}
+
+function columnsBeforeHeaderGroups(columns, { state: [{ groupBy }] }) {
+  // Sort grouped columns to the start of the column list
+  // before the headers are built
+  return [
+    ...groupBy.map(g => columns.find(col => col.id === g)),
+    ...columns.filter(col => !groupBy.includes(col.id)),
+  ]
+}
+
+function useMain(instance) {
+  PropTypes.checkPropTypes(propTypes, instance, 'property', 'useGroupBy')

  const {
    debug,
    rows,
    columns,
+    headers,
    groupByFn = defaultGroupByFn,
    manualGroupBy,
    disableGrouping,
    aggregations: userAggregations = {},
    hooks,
    state: [{ groupBy }, setState],
-  } = props
+  } = instance

  columns.forEach(column => {
-    const { id, accessor, canGroupBy } = column
+    const { id, accessor, disableGrouping: columnDisableGrouping } = column
    column.grouped = groupBy.includes(id)
+    column.groupedIndex = groupBy.indexOf(id)

    column.canGroupBy = accessor
      ? getFirstDefined(
-          canGroupBy,
+          columnDisableGrouping,
          disableGrouping === true ? false : undefined,
          true
        )
      : false

+    if (column.canGroupBy) {
+      column.toggleGroupBy = () => toggleGroupBy(column.id)
+    }
+
    column.Aggregated = column.Aggregated || column.Cell
  })

@@ -76,120 +103,151 @@ export const useGroupBy = props => {
    }, actions.toggleGroupBy)
  }

-  hooks.columns.push(columns => {
-    columns.forEach(column => {
-      if (column.canGroupBy) {
-        column.toggleGroupBy = () => toggleGroupBy(column.id)
-      }
-    })
-    return columns
-  })
-
  hooks.getGroupByToggleProps = []

-  const addGroupByToggleProps = (columns, api) => {
-    columns.forEach(column => {
-      const { canGroupBy } = column
-      column.getGroupByToggleProps = props => {
-        return mergeProps(
-          {
-            onClick: canGroupBy
-              ? e => {
-                  e.persist()
-                  column.toggleGroupBy()
-                }
-              : undefined,
-            style: {
-              cursor: canGroupBy ? 'pointer' : undefined,
-            },
-            title: 'Toggle GroupBy',
+  //
+  ;[...columns, ...headers].forEach(column => {
+    const { canGroupBy } = column
+    column.getGroupByToggleProps = props => {
+      return mergeProps(
+        {
+          onClick: canGroupBy
+            ? e => {
+                e.persist()
+                column.toggleGroupBy()
+              }
+            : undefined,
+          style: {
+            cursor: canGroupBy ? 'pointer' : undefined,
          },
-          applyPropHooks(api.hooks.getGroupByToggleProps, column, api),
-          props
-        )
-      }
+          title: 'Toggle GroupBy',
+        },
+        applyPropHooks(instance.hooks.getGroupByToggleProps, column, instance),
+        props
+      )
+    }
+  })
+
+  hooks.prepareRow.push(row => {
+    row.cells.forEach(cell => {
+      // Grouped cells are in the groupBy and the pivot cell for the row
+      cell.grouped = cell.column.grouped && cell.column.id === row.groupByID
+      // Repeated cells are any columns in the groupBy that are not grouped
+      cell.repeatedValue = !cell.grouped && cell.column.grouped
+      // Aggregated cells are not grouped, not repeated, but still have subRows
+      cell.aggregated = !cell.grouped && !cell.repeatedValue && row.canExpand
    })
-    return columns
-  }
+    return row
+  })

-  hooks.columns.push(addGroupByToggleProps)
-  hooks.headers.push(addGroupByToggleProps)
-
-  const groupedRows = useMemo(() => {
-    if (manualGroupBy || !groupBy.length) {
-      return rows
-    }
-    if (debug) console.info('getGroupedRows')
-    // Find the columns that can or are aggregating
-
-    // Uses each column to aggregate rows into a single value
-    const aggregateRowsToValues = rows => {
-      const values = {}
-      columns.forEach(column => {
-        const columnValues = rows.map(d => d.values[column.id])
-        let aggregate =
-          userAggregations[column.aggregate] ||
-          aggregations[column.aggregate] ||
-          column.aggregate
-        if (typeof aggregate === 'function') {
-          values[column.id] = aggregate(columnValues, rows)
-        } else if (aggregate) {
-          throw new Error(
-            `Invalid aggregate "${aggregate}" passed to column with ID: "${
-              column.id
-            }"`
-          )
-        } else {
-          values[column.id] = columnValues[0]
-        }
-      })
-      return values
-    }
-
-    // Recursively group the data
-    const groupRecursively = (rows, groupBy, depth = 0) => {
-      // This is the last level, just return the rows
-      if (depth >= groupBy.length) {
+  const groupedRows = useMemo(
+    () => {
+      if (manualGroupBy || !groupBy.length) {
        return rows
      }

-      // Group the rows together for this level
-      let groupedRows = Object.entries(groupByFn(rows, groupBy[depth])).map(
-        ([groupByVal, subRows], index) => {
-          // Recurse to sub rows before aggregation
-          subRows = groupRecursively(subRows, groupBy, depth + 1)
+      if (debug) console.info('getGroupedRows')
+      // Find the columns that can or are aggregating

-          const values = aggregateRowsToValues(subRows)
+      // Uses each column to aggregate rows into a single value
+      const aggregateRowsToValues = (rows, isSourceRows) => {
+        const values = {}

-          const row = {
-            groupByID: groupBy[depth],
-            groupByVal,
-            values,
-            subRows,
-            depth,
-            index,
+        columns.forEach(column => {
+          // Don't aggregate columns that are in the groupBy
+          if (groupBy.includes(column.id)) {
+            values[column.id] = rows[0] ? rows[0].values[column.id] : null
+            return
          }
-          return row
+
+          const columnValues = rows.map(d => d.values[column.id])
+
+          let aggregator = column.aggregate
+
+          if (Array.isArray(aggregator)) {
+            if (aggregator.length !== 2) {
+              console.info({ column })
+              throw new Error(
+                `React Table: Complex aggregators must have 2 values, eg. aggregate: ['sum', 'count']. More info above...`
+              )
+            }
+            if (isSourceRows) {
+              aggregator = aggregator[1]
+            } else {
+              aggregator = aggregator[0]
+            }
+          }
+
+          let aggregateFn =
+            typeof aggregator === 'function'
+              ? aggregator
+              : userAggregations[aggregator] || aggregations[aggregator]
+
+          if (aggregateFn) {
+            values[column.id] = aggregateFn(columnValues, rows)
+          } else if (aggregator) {
+            console.info({ column })
+            throw new Error(
+              `React Table: Invalid aggregate option for column listed above`
+            )
+          } else {
+            values[column.id] = null
+          }
+        })
+        return values
+      }
+
+      // Recursively group the data
+      const groupRecursively = (rows, depth = 0, parentPath = []) => {
+        // This is the last level, just return the rows
+        if (depth >= groupBy.length) {
+          return rows
        }
-      )

-      return groupedRows
-    }
+        const columnID = groupBy[depth]

-    // Assign the new data
-    return groupRecursively(rows, groupBy)
-  }, [
-    manualGroupBy,
-    groupBy,
-    debug,
-    rows,
-    columns,
-    userAggregations,
-    groupByFn,
-  ])
+        // Group the rows together for this level
+        let groupedRows = groupByFn(rows, columnID)
+
+        // Recurse to sub rows before aggregation
+        groupedRows = Object.entries(groupedRows).map(
+          ([groupByVal, subRows], index) => {
+            const path = [...parentPath, groupByVal]
+
+            subRows = groupRecursively(subRows, depth + 1, path)
+
+            const values = aggregateRowsToValues(
+              subRows,
+              depth + 1 >= groupBy.length
+            )
+
+            const row = {
+              groupByID: columnID,
+              groupByVal,
+              values,
+              subRows,
+              depth,
+              index,
+              path,
+            }
+
+            return row
+          }
+        )
+
+        return groupedRows
+      }
+
+      // Assign the new data
+      return groupRecursively(rows)
+    },
+    [manualGroupBy, groupBy, debug, rows, columns, userAggregations, groupByFn]
+  )

  return {
-    ...props,
+    ...instance,
+    toggleGroupBy,
    rows: groupedRows,
+    preGroupedRows: rows,
  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
tannerlinsley	bcefe5d6e8	v7.0.0-alpha.15	2019-07-30 14:10:19 -06:00
tannerlinsley	df827d76e2	test(usefilters): added useFilters test placeholder	2019-07-30 14:09:48 -06:00
tannerlinsley	0ae8693444	fix(global): fix npm dist, update docs	2019-07-30 14:07:31 -06:00
tannerlinsley	56f3dc9fe6	docs(example): removed page options from the pagination example state	2019-07-30 12:54:19 -06:00
tannerlinsley	5f58786e94	docs(examples): added pagination example	2019-07-30 12:51:14 -06:00
tannerlinsley	48f992fa0c	v7.0.0-alpha.14	2019-07-30 11:44:21 -06:00
tannerlinsley	0b868fe8c4	chore(husky): added yarn test:ci	2019-07-30 11:43:22 -06:00
tannerlinsley	a7a95b2ce6	fix(usepagination): pageOptions calculate correctly, added pagination ex	2019-07-30 11:41:11 -06:00
tannerlinsley	116f5cdeba	docs(grouping example): better annotations and more data	2019-07-30 11:09:20 -06:00
tannerlinsley	0187fcfc2c	fix(example): fixed css issues in codesandbox (no css prop)	2019-07-30 10:33:06 -06:00
tannerlinsley	ab32339bfa	v7.0.0-alpha.13	2019-07-30 10:23:42 -06:00
tannerlinsley	7fd8fa1dfc	docs: adding grouping example	2019-07-30 10:21:05 -06:00
tannerlinsley	bc89ae3027	Merge branch 'master' of https://github.com/react-tools/react-table	2019-07-30 09:57:04 -06:00
tannerlinsley	af739d91d0	fix(usegroupby): fix useGroupBy, add grouping example and fix some tests	2019-07-30 09:56:44 -06:00
Cyril SimanandTanner Linsley	35f78132f6	Avoid react error if the data source doesn't have the property. (#1420 ) * Fix : Avoid react error if the data source doesn't have the property. * Update fix with tannerlinsley's better solution	2019-07-30 09:51:17 -06:00
Larry BothaandTanner Linsley	d7a4db0979	chore(commitlint): add deps, config, and git hook (#1419 )	2019-07-29 23:45:46 -06:00
tannerlinsley	11167e5635	Refactor useTable, sorting, and filtering to use new hook layer	2019-07-29 14:51:07 -06:00
Larry BothaandTanner Linsley	14a43b1a68	Update test configs (#1417 ) * chore(package.json): use latest babel core, remove bridge * test(.babelrc): add test environment so that Jest can use ES6 imports * test(usetable): fix import	2019-07-29 14:34:33 -06:00
tannerlinsley	0375a7e7d5	Set up some failing tests	2019-07-29 12:05:19 -06:00
tannerlinsley	6b70309f42	Add prettier format	2019-07-29 11:33:47 -06:00
tannerlinsley	9b262676be	Fix hook defaults	2019-07-29 11:14:41 -06:00
tannerlinsley	1caad4cd8c	Merge branch 'master' of https://github.com/react-tools/react-table	2019-07-29 11:00:11 -06:00
tannerlinsley	dc73347003	Relocate columns and row logic, fix columns and useGroupBy to be more pure Since useColumns was relying on groupBy logic, this was code smell. I wanted useGroupBy to be able to add that logic all by itself and not have to have dependencies in the core of the table. To fix that, I've moved the core column and row logic to the useTable hook and added a new hook 'columnsBeforeHeaderGroups' to allow useGroupBy to do what i needs in a more pure way.	2019-07-29 11:00:07 -06:00
gargrohandTanner Linsley	66bfec34a8	[minor] Readme update (#1415 ) * correcting typos * [minor ] Readme update	2019-07-29 09:37:48 -06:00
gargrohandTanner Linsley	6347157f80	correcting typos (#1413 )	2019-07-29 08:46:56 -06:00
jaapjanfransandTanner Linsley	b6db8775ad	Small readme example update (#1412 ) in commit `ea79cd8388` the`getRowProps` member of the headerGroup object changed into `getHeaderGroupProps`	2019-07-29 07:51:01 -06:00
tannerlinsley	cadd8bf62a	Rename examples and their directories	2019-07-26 16:03:54 -06:00
tannerlinsley	9f4746a7ac	Add sorting guide	2019-07-26 15:54:50 -06:00
tannerlinsley	a0ca841287	Update App.js	2019-07-26 11:27:10 -06:00
tannerlinsley	52ee923675	Update package.json	2019-07-26 11:22:58 -06:00
tannerlinsley	24f6a2750d	fix(usefilters): fix filter type fallback and autoRemove functionality AGAIN	2019-07-26 11:22:23 -06:00
tannerlinsley	8988660618	fix(usefilters): fixed filtering fallback logic and autoRemove bug	2019-07-26 10:58:35 -06:00
tannerlinsley	a3e5cac298	fix(usefilters): fixed the default filter to be 'text'	2019-07-26 10:52:27 -06:00
tannerlinsley	47d2651b8d	docs: updated contribution documentation	2019-07-26 10:45:33 -06:00
tannerlinsley	412f64cece	chore: released version 7.0.0-alpha.9	2019-07-26 10:39:19 -06:00
tannerlinsley	933cc27e33	Update README.md	2019-07-26 10:30:59 -06:00
tannerlinsley	54be978268	Update App.js	2019-07-26 10:30:20 -06:00
tannerlinsley	90922f8637	Upgrade filter types to support configurable autoRemoval	2019-07-26 10:19:38 -06:00
tannerlinsley	fd8a686b30	Merge branch 'master' of https://github.com/react-tools/react-table	2019-07-26 07:14:06 -06:00
Larry BothaandTanner Linsley	a361a372ee	chore(packages): add husky and lint-staged (#1409 )	2019-07-26 07:13:58 -06:00
Larry BothaandTanner Linsley	563e809d05	docs(package.json): add commitizen dep, config, and npm script (#1408 ) use `npm run commit` to use commitizen for better commit messages re #1383	2019-07-25 22:39:25 -06:00
				`@@ -0,0 +1 @@`
				`module.exports = { extends: ['@commitlint/config-conventional'] }`