diff --git a/README.md b/README.md
index 025c9b4..31d6b07 100644
--- a/README.md
+++ b/README.md
@@ -239,7 +239,7 @@ 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 one `instance`. This happens until the last instance object is returned from the last hook.
+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`
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.
@@ -264,11 +264,11 @@ React Table relies on memoization to determine when state and side effects shoul
### Options
-- `state: [stateObject, stateUpdater]`
- - Must be **memoized**
+- `state: TableStateTuple[stateObject, stateUpdater]`
+ - Must be **memoized** table state tuple. See [`useTableState`](#usetablestate) for more information.
- The state/updater pair for the table instance. You would want to override this if you plan on controlling or hoisting table state into your own code.
- Defaults to using an internal `useTableState()` instance if not defined.
- - See [Controlling and Hoisting Table State](#controlling-and-hoistin-table-state)
+ - See [Controlling and Hoisting Table State](#controlling-and-hoisting-table-state)
- `debug: Bool`
- A flag to turn on debug mode.
- Defaults to `false`
diff --git a/examples/basic/.babelrc b/examples/basic/.babelrc
new file mode 100644
index 0000000..141bbba
--- /dev/null
+++ b/examples/basic/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["react-app"],
+ "plugins": ["styled-components"]
+}
diff --git a/examples/basic/.env b/examples/basic/.env
new file mode 100644
index 0000000..7d910f1
--- /dev/null
+++ b/examples/basic/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
diff --git a/examples/basic/.eslintrc b/examples/basic/.eslintrc
new file mode 100644
index 0000000..404725a
--- /dev/null
+++ b/examples/basic/.eslintrc
@@ -0,0 +1,7 @@
+{
+ "extends": ["react-app", "prettier"],
+ "rules": {
+ // "eqeqeq": 0,
+ // "jsx-a11y/anchor-is-valid": 0
+ }
+}
diff --git a/examples/basic/.gitignore b/examples/basic/.gitignore
new file mode 100644
index 0000000..4d29575
--- /dev/null
+++ b/examples/basic/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/basic/.rescriptsrc.js b/examples/basic/.rescriptsrc.js
new file mode 100644
index 0000000..ea2e203
--- /dev/null
+++ b/examples/basic/.rescriptsrc.js
@@ -0,0 +1,29 @@
+const path = require('path')
+const resolveFrom = require('resolve-from')
+
+const fixLinkedDependencies = config => {
+ config.resolve = {
+ ...config.resolve,
+ alias: {
+ ...config.resolve.alias,
+ react$: resolveFrom(path.resolve('node_modules'), 'react'),
+ 'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+ },
+ }
+ return config
+}
+
+const includeSrcDirectory = config => {
+ config.resolve = {
+ ...config.resolve,
+ modules: [path.resolve('src'), ...config.resolve.modules],
+ }
+ return config
+}
+
+module.exports = [
+ ['use-babel-config', '.babelrc'],
+ ['use-eslint-config', '.eslintrc'],
+ fixLinkedDependencies,
+ // includeSrcDirectory,
+]
diff --git a/examples/basic/README.md b/examples/basic/README.md
new file mode 100644
index 0000000..12dead0
--- /dev/null
+++ b/examples/basic/README.md
@@ -0,0 +1,6 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and Rescripts.
+
+You can:
+
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
+- `yarn` and `yarn start` to run and edit the example
diff --git a/examples/basic/package.json b/examples/basic/package.json
new file mode 100644
index 0000000..5a070bf
--- /dev/null
+++ b/examples/basic/package.json
@@ -0,0 +1,34 @@
+{
+ "private": true,
+ "scripts": {
+ "start": "rescripts start",
+ "build": "rescripts build",
+ "test": "rescripts test",
+ "eject": "rescripts eject"
+ },
+ "dependencies": {
+ "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"
+ ]
+ }
+}
diff --git a/examples/basic/public/favicon.ico b/examples/basic/public/favicon.ico
new file mode 100644
index 0000000..a11777c
Binary files /dev/null and b/examples/basic/public/favicon.ico differ
diff --git a/examples/basic/public/index.html b/examples/basic/public/index.html
new file mode 100644
index 0000000..dd1ccfd
--- /dev/null
+++ b/examples/basic/public/index.html
@@ -0,0 +1,38 @@
+
+
+
+ React App
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
diff --git a/examples/basic/public/manifest.json b/examples/basic/public/manifest.json
new file mode 100644
index 0000000..1f2f141
--- /dev/null
+++ b/examples/basic/public/manifest.json
@@ -0,0 +1,15 @@
+{
+ "short_name": "React App",
+ "name": "Create React App Sample",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/examples/basic/src/App.js b/examples/basic/src/App.js
new file mode 100644
index 0000000..8a80511
--- /dev/null
+++ b/examples/basic/src/App.js
@@ -0,0 +1,101 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useColumns, useRows } from 'react-table'
+
+import olympicWinnersSmall from './data/olympicWinnersSmall.json'
+
+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 data = olympicWinnersSmall.slice(0, 100)
+
+function Table() {
+ const columns = React.useMemo(
+ () => [
+ { Header: 'Athlete', accessor: 'athlete' },
+ { Header: 'Country', accessor: 'country' },
+ { Header: 'Age', accessor: 'age' },
+ { Header: 'Bronze', accessor: 'bronze' },
+ { Header: 'Date', accessor: 'date' },
+ { Header: 'Gold', accessor: 'gold' },
+ { Header: 'Silver', accessor: 'silver' },
+ { Header: 'Sport', accessor: 'sport' },
+ { Header: 'Total', accessor: 'total' },
+ { Header: 'Year', accessor: 'year' },
+ ],
+ []
+ )
+
+ // Use the state and functions returned from useTable to build your UI
+ const { getTableProps, headerGroups, rows, prepareRow } = useTable(
+ {
+ columns,
+ data,
+ },
+ useColumns,
+ useRows
+ )
+
+ // Render the UI for your table
+ return (
+
+
+ {headerGroups.map(headerGroup => (
+
+ {headerGroup.headers.map(column => (
+ {column.render('Header')}
+ ))}
+
+ ))}
+
+
+ {rows.map(
+ (row, i) =>
+ prepareRow(row) || (
+
+ {row.cells.map(cell => {
+ return {cell.render('Cell')}
+ })}
+
+ )
+ )}
+
+
+ )
+}
+
+function App() {
+ return (
+
+
+
+ )
+}
+
+export default App
diff --git a/examples/basic/src/App.test.js b/examples/basic/src/App.test.js
new file mode 100644
index 0000000..a754b20
--- /dev/null
+++ b/examples/basic/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+ const div = document.createElement('div');
+ ReactDOM.render(