v7.0.0-alpha.20

Merge branch 'master' of https://github.com/react-tools/react-table
feat(multiple): useRowState, fix useRowSelect/useSortBy/usePagination
2026-08-19 16:30:21 +00:00 · 2019-08-06 20:01:52 -06:00 · 2019-08-06 20:01:11 -06:00 · 2019-08-06 19:57:48 -06:00 · 2019-08-06 08:03:17 -06:00 · 2019-08-05 14:52:56 -06:00
116 changed files with 47149 additions and 284 deletions
@@ -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,275 @@
+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;
+      }
+
+      input {
+        font-size: 1rem;
+        padding: 0;
+        margin: 0;
+        border: 0;
+      }
+    }
+  }
+
+  .pagination {
+    padding: 0.5rem;
+  }
+`
+
+// Create an editable cell renderer
+const EditableCell = ({
+  value: initialValue,
+  row: { index },
+  column: { id },
+  updateMyData, // This is a custom function that we supplied to our table instance
+}) => {
+  // We need to keep and update the state of the cell normally
+  const [value, setValue] = React.useState(initialValue)
+  const onChange = e => {
+    setValue(e.target.value)
+  }
+  // We'll only update the external data when the input is blurred
+  const onBlur = () => {
+    updateMyData(index, id, value)
+  }
+  return <input value={value} onChange={onChange} onBlur={onBlur} />
+}
+
+// Set our editable cell renderer as the default Cell renderer
+const defaultColumn = {
+  Cell: EditableCell,
+}
+
+// Be sure to pass our updateMyData and the disablePageResetOnDataChange option
+function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
+  // For this example, we're using pagination to illustrate how to stop
+  // the current page from resetting when our data changes
+  // Otherwise, nothing is different here.
+  const {
+    getTableProps,
+    headerGroups,
+    prepareRow,
+    page,
+    canPreviousPage,
+    canNextPage,
+    pageOptions,
+    pageCount,
+    gotoPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    state: [{ pageIndex, pageSize }],
+  } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+      disablePageResetOnDataChange,
+      // updateMyData isn't part of the API, but
+      // anything we put into these options will
+      // automatically be available on the instance.
+      // That way we can call this function from our
+      // cell renderer!
+      updateMyData,
+    },
+    usePagination
+  )
+
+  // 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>
+          {page.map(
+            (row, i) =>
+              prepareRow(row) || (
+                <tr {...row.getRowProps()}>
+                  {row.cells.map(cell => {
+                    return (
+                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                    )
+                  })}
+                </tr>
+              )
+          )}
+        </tbody>
+      </table>
+      <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, setData] = React.useState(() => makeData(20))
+
+  // We need to keep the table from resetting the pageIndex when we
+  // Update data. So we can keep track of that flag with a ref.
+  const skipPageResetRef = React.useRef(false)
+
+  // When our cell renderer calls updateMyData, we'll use
+  // the rowIndex, columnID and new value to update the
+  // original data
+  const updateMyData = (rowIndex, columnID, value) => {
+    // We also turn on the flag to not reset the page
+    skipPageResetRef.current = true
+    setData(old => {
+      return old.filter((row, index) => {
+        if (index === rowIndex) {
+          return {
+            ...old[rowIndex],
+            [columnID]: value,
+          }
+        }
+        return row
+      })
+    })
+  }
+
+  // After data chagnes, we turn the flag back off
+  // so that if data actually changes when we're not
+  // editing it, the page is reset
+  React.useEffect(
+    () => {
+      skipPageResetRef.current = false
+    },
+    [data]
+  )
+
+  // Let's add a data resetter/randomizer to help
+  // illustrate that flow...
+  const resetData = () => setData(makeData(20))
+
+  return (
+    <Styles>
+      <button onClick={resetData}>Reset Data</button>
+      <Table
+        columns={columns}
+        data={data}
+        updateMyData={updateMyData}
+        disablePageResetOnDataChange={skipPageResetRef.current}
+      />
+    </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,159 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useExpanded } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`
+
+function Table({ columns: userColumns, data }) {
+  const {
+    getTableProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state: [{ expanded }],
+  } = useTable(
+    {
+      columns: userColumns,
+      data,
+    },
+    useExpanded // Use the useExpanded plugin hook
+  )
+
+  return (
+    <>
+      <pre>
+        <code>{JSON.stringify({ expanded }, null, 2)}</code>
+      </pre>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {rows.map(
+            (row, i) =>
+              prepareRow(row) || (
+                <tr {...row.getRowProps()}>
+                  {row.cells.map(cell => {
+                    return (
+                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                    )
+                  })}
+                </tr>
+              )
+          )}
+        </tbody>
+      </table>
+      <br />
+      <div>Showing the first 20 results of {rows.length} rows</div>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        // Build our expander column
+        Header: () => null, // No header, please
+        id: 'expander', // Make sure it has an ID
+        Cell: ({ row }) =>
+          // Use the row.canExpand and row.getExpandedToggleProps prop getter
+          // to build the toggle for expanding a row
+          row.canExpand ? (
+            <span
+              {...row.getExpandedToggleProps({
+                style: {
+                  // We can even use the row.depth property
+                  // and paddingLeft to indicate the depth
+                  // of the row
+                  paddingLeft: `${row.depth * 2}rem`,
+                },
+              })}
+            >
+              {row.isExpanded ? '👇' : '👉'}
+            </span>
+          ) : null,
+      },
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(5, 5, 5), [])
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
+
+export default App
@@ -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()
+    })
+  }
+}
@@ -49,9 +49,9 @@ function Table({ columns, data }) {
    useExpanded // useGroupBy would be pretty useless without useExpanded ;)
  )

-  // We don't want to render all 2000 rows for this example, so cap
+  // We don't want to render all of the rows for this example, so cap
  // it at 20 for this use case
-  const firstPageRows = rows.slice()
+  const firstPageRows = rows.slice(0, 100)

  return (
    <>
@@ -68,7 +68,7 @@ function Table({ columns, data }) {
                  {column.canGroupBy ? (
                    // If the column can be grouped, let's add a toggle
                    <span {...column.getGroupByToggleProps()}>
-                      {column.grouped ? '🛑' : '👊'}
+                      {column.grouped ? '🛑 ' : '👊 '}
                    </span>
                  ) : null}
                  {column.render('Header')}
@@ -102,14 +102,9 @@ function Table({ columns, data }) {
                        {cell.grouped ? (
                          // If it's a grouped cell, add an expander and row count
                          <>
-                            <span
-                              style={{
-                                cursor: 'pointer',
-                              }}
-                              onClick={() => row.toggleExpanded()}
-                            >
+                            <span {...row.getExpandedToggleProps()}>
                              {row.isExpanded ? '👇' : '👉'}
-                            </span>
+                            </span>{' '}
                            {cell.render('Cell')} ({row.subRows.length})
                          </>
                        ) : cell.aggregated ? (
@@ -129,7 +124,7 @@ function Table({ columns, data }) {
        </tbody>
      </table>
      <br />
-      <div>Showing the first 20 results of {rows.length} rows</div>
+      <div>Showing the first 100 results of {rows.length} rows</div>
    </>
  )
 }
@@ -0,0 +1,3 @@
+{
+  "infiniteLoopProtection": false
+}
@@ -76,7 +76,6 @@ function Table({ columns, data }) {
              pageCount,
              canNextPage,
              canPreviousPage,
-              pageOptions: [...pageOptions.slice(0, 6), '...'],
            },
            null,
            2
@@ -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,156 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useRowSelect } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`
+
+function Table({ columns, data }) {
+  // Use the state and functions returned from useTable to build your UI
+  const {
+    getTableProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state: [{ selectedRows }],
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    useRowSelect
+  )
+
+  // Render the UI for your table
+  return (
+    <>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {rows.map(
+            (row, i) =>
+              prepareRow(row) || (
+                <tr {...row.getRowProps()}>
+                  {row.cells.map(cell => {
+                    return (
+                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                    )
+                  })}
+                </tr>
+              )
+          )}
+        </tbody>
+      </table>
+      <p>Selected Rows: {selectedRows.length}</p>
+      <pre>
+        <code>{JSON.stringify({ selectedRows }, null, 2)}</code>
+      </pre>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      // Let's make a column for selection
+      {
+        id: 'selection',
+        // The header can use the table's getToggleAllRowsSelectedProps method
+        // to render a checkbox
+        Header: ({ getToggleAllRowsSelectedProps }) => (
+          <div>
+            <input type="checkbox" {...getToggleAllRowsSelectedProps()} />
+          </div>
+        ),
+        // The cell can use the individual row's getToggleRowSelectedProps method
+        // to the render a checkbox
+        Cell: ({ row }) => (
+          <div>
+            <input type="checkbox" {...row.getToggleRowSelectedProps()} />
+          </div>
+        ),
+      },
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(10), [])
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
+
+export default App
@@ -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()
+    })
+  }
+}
@@ -58,26 +58,17 @@ function Table({ columns, data }) {
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(
-                column =>
-                  console.log(column) || (
-                    // Add the sorting props to control sorting. For this example
-                    // we can add them into the header props
-                    <th
-                      {...column.getHeaderProps(column.getSortByToggleProps())}
-                    >
-                      {column.render('Header')}
-                      {/* Add a sort direction indicator */}
-                      <span>
-                        {column.sorted
-                          ? column.sortedDesc
-                            ? ' 🔽'
-                            : ' 🔼'
-                          : ''}
-                      </span>
-                    </th>
-                  )
-              )}
+              {headerGroup.headers.map(column => (
+                // Add the sorting props to control sorting. For this example
+                // we can add them into the header props
+                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
+                  {column.render('Header')}
+                  {/* Add a sort direction indicator */}
+                  <span>
+                    {column.sorted ? (column.sortedDesc ? ' 🔽' : ' 🔼') : ''}
+                  </span>
+                </th>
+              ))}
            </tr>
          ))}
        </thead>
@@ -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,198 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useExpanded } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  table {
+    border-spacing: 0;
+    border: 1px solid black;
+
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`
+
+// A simple way to support a renderRowSubComponent is to make a render prop
+// This is NOT part of the React Table API, it's merely a rendering
+// option we are creating for ourselves in our table renderer
+function Table({ columns: userColumns, data, renderRowSubComponent }) {
+  const {
+    getTableProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    columns,
+    state: [{ expanded }],
+  } = useTable(
+    {
+      columns: userColumns,
+      data,
+    },
+    useExpanded // We can useExpanded to track the expanded state
+    // for sub components too!
+  )
+
+  return (
+    <>
+      <pre>
+        <code>{JSON.stringify({ expanded }, null, 2)}</code>
+      </pre>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {rows.map(
+            (row, i) =>
+              prepareRow(row) || (
+                // Use a React.Fragment here so the table markup is still valid
+                <>
+                  <tr {...row.getRowProps()}>
+                    {row.cells.map(cell => {
+                      return (
+                        <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                      )
+                    })}
+                  </tr>
+                  {/*
+                    If the row is in an expanded state, render a row with a
+                    column that spands the entire length of the table.
+                  */}
+                  {row.isExpanded ? (
+                    <tr>
+                      <td colSpan={columns.length}>
+                        {/*
+                          Inside it, call our renderRowSubComponent function. In reality,
+                          you coul pass whatever you want as props to
+                          a component like this, including the entire
+                          table instance. But for this example, we'll just
+                          pass the row
+                        */}
+                        {renderRowSubComponent({ row })}
+                      </td>
+                    </tr>
+                  ) : null}
+                </>
+              )
+          )}
+        </tbody>
+      </table>
+      <br />
+      <div>Showing the first 20 results of {rows.length} rows</div>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        // Make an expander cell
+        Header: () => null, // No header
+        id: 'expander', // It needs an ID
+        Cell: ({ row }) => (
+          // Use Cell to render an expander for each row.
+          // We can use the getExpandedToggleProps prop-getter
+          // to build the expander.
+          <span {...row.getExpandedToggleProps()}>
+            {row.isExpanded ? '👇' : '👉'}
+          </span>
+        ),
+      },
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(10), [])
+
+  // Create a function that will render our row sub components
+  const renderRowSubComponent = React.useCallback(
+    ({ row }) => (
+      <pre
+        style={{
+          fontSize: '10px',
+        }}
+      >
+        <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
+      </pre>
+    ),
+    []
+  )
+
+  return (
+    <Styles>
+      <Table
+        columns={columns}
+        data={data}
+        // We added this as a prop for our table component
+        // Remember, this is not part of the React Table API,
+        // it's merely a rendering option we created for
+        // ourselves
+        renderRowSubComponent={renderRowSubComponent}
+      />
+    </Styles>
+  )
+}
+
+export default App
@@ -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,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "7.0.0-alpha.14",
+  "version": "7.0.0-alpha.20",
  "description": "A fast, lightweight, opinionated table and datagrid built on React",
  "license": "MIT",
  "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -27,16 +27,15 @@
    "prepare": "yarn build",
    "release": "yarn publish",
    "releaseNext": "yarn publish --tag next",
-    "format": "prettier ./**{md,js,jsx,tsx} --write"
+    "format": "prettier ./src/**/*.{md,js,jsx,tsx} --write"
  },
  "files": [
-    "src/",
-    "es/",
-    "lib/",
-    "react-table.js",
-    "react-table.min.js",
-    "react-table.css",
-    "media/*.png"
+    "CHANGELOG.md",
+    "src/**/*.js",
+    "dist",
+    "LICENCE",
+    "package.json",
+    "README.md"
  ],
  "peerDependencies": {
    "prop-types": "^15.5.0",
@@ -1,12 +1,11 @@
 export const text = (rows, id, filterValue) => {
-  return rows.filter(row => {
+  rows = rows.filter(row => {
    const rowValue = row.values[id]
-    return rowValue !== undefined
-      ? String(rowValue)
-          .toLowerCase()
-          .includes(String(filterValue).toLowerCase())
-      : true
+    return String(rowValue)
+      .toLowerCase()
+      .includes(String(filterValue).toLowerCase())
  })
+  return rows
 }

 text.autoRemove = val => !val
@@ -1,6 +1,5 @@
 import '@testing-library/react/cleanup-after-each'
 import '@testing-library/jest-dom/extend-expect'
-// NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required

 import React from 'react'
 import { render } from '@testing-library/react'
@@ -63,6 +63,7 @@ export const useTable = (props, ...plugins) => {
    plugins,
    hooks: {
      columnsBeforeHeaderGroups: [],
+      columnsBeforeHeaderGroupsDeps: [],
      useMain: [],
      useColumns: [],
      useHeaders: [],
@@ -78,70 +79,99 @@ export const useTable = (props, ...plugins) => {
  })

  // Allow plugins to register hooks
-  if (debug) console.time('plugins')
+  if (process.env.NODE_ENV === 'development' && debug) console.time('plugins')
  plugins.filter(Boolean).forEach(plugin => {
    plugin(instanceRef.current.hooks)
  })
-  if (debug) console.timeEnd('plugins')
+  if (process.env.NODE_ENV === 'development' && debug)
+    console.timeEnd('plugins')

-  // Compute columns, headerGroups and headers
-  const columnInfo = React.useMemo(
+  if (process.env.NODE_ENV === 'development' && debug)
+    console.info('buildColumns/headerGroup/headers')
+  // Decorate All the columns
+  let columnTree = React.useMemo(
+    () => decorateColumnTree(userColumns, defaultColumn),
+    [defaultColumn, userColumns]
+  )
+
+  // Get the flat list of all columns
+  let columns = React.useMemo(() => flattenBy(columnTree, 'columns'), [
+    columnTree,
+  ])
+
+  // Allow hooks to decorate columns (and trigger this memoization via deps)
+  columns = React.useMemo(
    () => {
-      if (debug) console.info('buildColumns/headerGroup/headers')
-      // Decorate All the columns
-      let columnTree = decorateColumnTree(userColumns, defaultColumn)
-
-      // Get the flat list of all columns
-      let columns = flattenBy(columnTree, 'columns')
-
-      // Allow hooks to decorate columns
-      if (debug) console.time('hooks.columnsBeforeHeaderGroups')
-      columns = applyHooks(
+      if (process.env.NODE_ENV === 'development' && debug)
+        console.time('hooks.columnsBeforeHeaderGroups')
+      const newColumns = applyHooks(
        instanceRef.current.hooks.columnsBeforeHeaderGroups,
        columns,
        instanceRef.current
      )
-      if (debug) console.timeEnd('hooks.columnsBeforeHeaderGroups')
-
-      // Make the headerGroups
-      const headerGroups = makeHeaderGroups(
-        columns,
-        findMaxDepth(columnTree),
-        defaultColumn
-      )
-
-      const headers = flattenBy(headerGroups, 'headers')
-
-      return {
-        columns,
-        headerGroups,
-        headers,
-      }
+      if (process.env.NODE_ENV === 'development' && debug)
+        console.timeEnd('hooks.columnsBeforeHeaderGroups')
+      return newColumns
    },
-    [debug, defaultColumn, userColumns]
+    [
+      columns,
+      debug,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...applyHooks(
+        instanceRef.current.hooks.columnsBeforeHeaderGroupsDeps,
+        [],
+        instanceRef.current
+      ),
+    ]
  )

-  // Place the columns, headerGroups and headers on the api
-  Object.assign(instanceRef.current, columnInfo)
+  // Make the headerGroups
+  const headerGroups = React.useMemo(
+    () => makeHeaderGroups(columns, findMaxDepth(columnTree), defaultColumn),
+    [columnTree, columns, defaultColumn]
+  )
+
+  const headers = React.useMemo(() => flattenBy(headerGroups, 'headers'), [
+    headerGroups,
+  ])
+
+  Object.assign(instanceRef.current, {
+    columns,
+    headerGroups,
+    headers,
+  })

  // Access the row model
-  instanceRef.current.rows = React.useMemo(
+  const [rows, rowPaths, flatRows] = React.useMemo(
    () => {
-      if (debug) console.time('getAccessedRows')
+      if (process.env.NODE_ENV === 'development' && debug)
+        console.time('getAccessedRows')
+
+      let flatRows = 0
+      const rowPaths = []
+
      // Access the row's data
-      const accessRow = (originalRow, i, depth = 0) => {
+      const accessRow = (originalRow, i, depth = 0, parentPath = []) => {
        // Keep the original reference around
        const original = originalRow

+        // Make the new path for the row
+        const path = [...parentPath, i]
+
+        flatRows++
+        rowPaths.push(path.join('.'))
+
        // Process any subRows
        const subRows = originalRow[subRowsKey]
-          ? originalRow[subRowsKey].map((d, i) => accessRow(d, i, depth + 1))
+          ? originalRow[subRowsKey].map((d, i) =>
+              accessRow(d, i, depth + 1, path)
+            )
          : []

        const row = {
          original,
          index: i,
-          path: [i], // used to create a key for each row even if not nested
+          path, // used to create a key for each row even if not nested
          subRows,
          depth,
          cells: [{}], // This is a dummy cell
@@ -172,12 +202,17 @@ export const useTable = (props, ...plugins) => {

      // Use the resolved data
      const accessedData = data.map((d, i) => accessRow(d, i))
-      if (debug) console.timeEnd('getAccessedRows')
-      return accessedData
+      if (process.env.NODE_ENV === 'development' && debug)
+        console.timeEnd('getAccessedRows')
+      return [accessedData, rowPaths, flatRows]
    },
    [debug, data, subRowsKey]
  )

+  instanceRef.current.rows = rows
+  instanceRef.current.rowPaths = rowPaths
+  instanceRef.current.flatRows = flatRows
+
  // Determine column visibility
  instanceRef.current.columns.forEach(column => {
    column.visible =
@@ -186,31 +221,14 @@ export const useTable = (props, ...plugins) => {
        : !!column.show
  })

-  if (debug) console.time('hooks.useMain')
+  if (process.env.NODE_ENV === 'development' && debug)
+    console.time('hooks.useMain')
  instanceRef.current = applyHooks(
    instanceRef.current.hooks.useMain,
    instanceRef.current
  )
-  if (debug)
+  if (process.env.NODE_ENV === 'development' && debug)
    console.timeEnd('hooks.useMain')
-
-    // // Allow hooks to decorate columns
-    // if (debug) console.time('hooks.useColumns')
-    // instanceRef.current.columns = applyHooks(
-    //   instanceRef.current.hooks.useColumns,
-    //   instanceRef.current.columns,
-    //   instanceRef.current
-    // )
-    // if (debug) console.timeEnd('hooks.useColumns')
-
-    // // Allow hooks to decorate headers
-    // if (debug) console.time('hooks.useHeaders')
-    // instanceRef.current.headers = applyHooks(
-    //   instanceRef.current.hooks.useHeaders,
-    //   instanceRef.current.headers,
-    //   instanceRef.current
-    // )
-    // if (debug) console.timeEnd('hooks.useHeaders')
  ;[...instanceRef.current.columns, ...instanceRef.current.headers].forEach(
    column => {
      // Give columns/headers rendering power
@@ -245,14 +263,6 @@ export const useTable = (props, ...plugins) => {
    }
  )

-  // // Allow hooks to decorate headerGroups
-  // if (debug) console.time('hooks.useHeaderGroups')
-  // instanceRef.current.headerGroups = applyHooks(
-  //   instanceRef.current.hooks.useHeaderGroups,
-  //   instanceRef.current.headerGroups,
-  //   instanceRef.current
-  // )
-
  instanceRef.current.headerGroups.filter((headerGroup, i) => {
    // Filter out any headers and headerGroups that don't have visible columns
    headerGroup.headers = headerGroup.headers.filter(header => {
@@ -288,25 +298,25 @@ export const useTable = (props, ...plugins) => {

    return false
  })
-  // if (debug) console.timeEnd('hooks.useHeaderGroups')

  // Run the rows (this could be a dangerous hook with a ton of data)
-  if (debug) console.time('hooks.useRows')
+  if (process.env.NODE_ENV === 'development' && debug)
+    console.time('hooks.useRows')
  instanceRef.current.rows = applyHooks(
    instanceRef.current.hooks.useRows,
    instanceRef.current.rows,
    instanceRef.current
  )
-  if (debug) console.timeEnd('hooks.useRows')
+  if (process.env.NODE_ENV === 'development' && debug)
+    console.timeEnd('hooks.useRows')

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

  instanceRef.current.prepareRow = row => {
-    const { path } = row
    row.getRowProps = props =>
      mergeProps(
-        { key: ['row', ...path].join('_') },
+        { key: ['row', ...row.path].join('_') },
        applyPropHooks(
          instanceRef.current.hooks.getRowProps,
          row,
@@ -329,7 +339,7 @@ export const useTable = (props, ...plugins) => {

      // Give each cell a getCellProps base
      cell.getCellProps = props => {
-        const columnPathStr = [...path, column.id].join('_')
+        const columnPathStr = [...row.path, column.id].join('_')
        return mergeProps(
          {
            key: ['cell', columnPathStr].join('_'),
@@ -16,17 +16,20 @@ export const useTableState = (
    ...initialState,
  })

-  const overriddenState = React.useMemo(() => {
-    const newState = {
-      ...state,
-    }
-    if (overrides) {
-      Object.keys(overrides).forEach(key => {
-        newState[key] = overrides[key]
-      })
-    }
-    return newState
-  }, [overrides, state])
+  const overriddenState = React.useMemo(
+    () => {
+      const newState = {
+        ...state,
+      }
+      if (overrides) {
+        Object.keys(overrides).forEach(key => {
+          newState[key] = overrides[key]
+        })
+      }
+      return newState
+    },
+    [overrides, state]
+  )

  const overriddenStateRef = React.useRef()
  overriddenStateRef.current = overriddenState
@@ -7,6 +7,8 @@ export { useFilters } from './plugin-hooks/useFilters'
 export { useGroupBy } from './plugin-hooks/useGroupBy'
 export { useSortBy } from './plugin-hooks/useSortBy'
 export { usePagination } from './plugin-hooks/usePagination'
+export { useRowSelect } from './plugin-hooks/useRowSelect'
+export { useRowState } from './plugin-hooks/useRowState'
 export { useFlexLayout } from './plugin-hooks/useFlexLayout'
-export { useTokenPagination } from './plugin-hooks/useTokenPagination'
+export { useTokenPagination } from './utility-hooks/useTokenPagination'
 export { actions, addActions } from './actions'
@@ -0,0 +1,714 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders an expandable table 1`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -1,10 +1,12 @@
+  <DocumentFragment>
+    <pre>
+      <code>
+        {
+-   \\"expanded\\": {}
+   \\"expanded\\": {
+     \\"0\\": true
+   }
+  }
+      </code>
+    </pre>
+    <table
+      class=\\"\\"
+@@ -82,10 +84,53 @@
+          <td
+            class=\\"\\"
+          >
+            <span
+              style=\\"cursor: pointer; padding-left: 0rem;\\"
+           >
+             👇
+           </span>
+         </td>
+         <td
+           class=\\"\\"
+         >
+           tanner
+         </td>
+         <td
+           class=\\"\\"
+         >
+           linsley
+         </td>
+         <td
+           class=\\"\\"
+         >
+           29
+         </td>
+         <td
+           class=\\"\\"
+         >
+           100
+         </td>
+         <td
+           class=\\"\\"
+         >
+           In Relationship
+         </td>
+         <td
+           class=\\"\\"
+         >
+           50
+         </td>
+       </tr>
+       <tr
+         class=\\"\\"
+       >
+         <td
+           class=\\"\\"
+         >
+           <span
+             style=\\"cursor: pointer; padding-left: 2rem;\\"
+            >
+              👉
+            </span>
+          </td>
+          <td
+@@ -115,10 +160,139 @@
+          </td>
+          <td
+            class=\\"\\"
+          >
+            50
+         </td>
+       </tr>
+       <tr
+         class=\\"\\"
+       >
+         <td
+           class=\\"\\"
+         >
+           <span
+             style=\\"cursor: pointer; padding-left: 2rem;\\"
+           >
+             👉
+           </span>
+         </td>
+         <td
+           class=\\"\\"
+         >
+           derek
+         </td>
+         <td
+           class=\\"\\"
+         >
+           perkins
+         </td>
+         <td
+           class=\\"\\"
+         >
+           40
+         </td>
+         <td
+           class=\\"\\"
+         >
+           40
+         </td>
+         <td
+           class=\\"\\"
+         >
+           Single
+         </td>
+         <td
+           class=\\"\\"
+         >
+           80
+         </td>
+       </tr>
+       <tr
+         class=\\"\\"
+       >
+         <td
+           class=\\"\\"
+         >
+           <span
+             style=\\"cursor: pointer; padding-left: 2rem;\\"
+           >
+             👉
+           </span>
+         </td>
+         <td
+           class=\\"\\"
+         >
+           joe
+         </td>
+         <td
+           class=\\"\\"
+         >
+           bergevin
+         </td>
+         <td
+           class=\\"\\"
+         >
+           45
+         </td>
+         <td
+           class=\\"\\"
+         >
+           20
+         </td>
+         <td
+           class=\\"\\"
+         >
+           Complicated
+         </td>
+         <td
+           class=\\"\\"
+         >
+           10
+         </td>
+       </tr>
+       <tr
+         class=\\"\\"
+       >
+         <td
+           class=\\"\\"
+         >
+           <span
+             style=\\"cursor: pointer; padding-left: 2rem;\\"
+           >
+             👉
+           </span>
+         </td>
+         <td
+           class=\\"\\"
+         >
+           jaylen
+         </td>
+         <td
+           class=\\"\\"
+         >
+           linsley
+         </td>
+         <td
+           class=\\"\\"
+         >
+           26
+         </td>
+         <td
+           class=\\"\\"
+         >
+           99
+         </td>
+         <td
+           class=\\"\\"
+         >
+           In Relationship
+         </td>
+         <td
+           class=\\"\\"
+         >
+           70
+          </td>
+        </tr>
+        <tr
+          class=\\"\\"
+        >"
+`;
+
+exports[`renders an expandable table 2`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -1,11 +1,13 @@
+  <DocumentFragment>
+    <pre>
+      <code>
+        {
+    \\"expanded\\": {
+-     \\"0\\": true
+     \\"0\\": {
+       \\"0\\": true
+     }
+    }
+  }
+      </code>
+    </pre>
+    <table
+@@ -127,10 +129,53 @@
+          <td
+            class=\\"\\"
+          >
+            <span
+              style=\\"cursor: pointer; padding-left: 2rem;\\"
+           >
+             👇
+           </span>
+         </td>
+         <td
+           class=\\"\\"
+         >
+           tanner
+         </td>
+         <td
+           class=\\"\\"
+         >
+           linsley
+         </td>
+         <td
+           class=\\"\\"
+         >
+           29
+         </td>
+         <td
+           class=\\"\\"
+         >
+           100
+         </td>
+         <td
+           class=\\"\\"
+         >
+           In Relationship
+         </td>
+         <td
+           class=\\"\\"
+         >
+           50
+         </td>
+       </tr>
+       <tr
+         class=\\"\\"
+       >
+         <td
+           class=\\"\\"
+         >
+           <span
+             style=\\"cursor: pointer; padding-left: 4rem;\\"
+            >
+              👉
+            </span>
+          </td>
+          <td
+@@ -160,10 +205,139 @@
+          </td>
+          <td
+            class=\\"\\"
+          >
+            50
+         </td>
+       </tr>
+       <tr
+         class=\\"\\"
+       >
+         <td
+           class=\\"\\"
+         >
+           <span
+             style=\\"cursor: pointer; padding-left: 4rem;\\"
+           >
+             👉
+           </span>
+         </td>
+         <td
+           class=\\"\\"
+         >
+           derek
+         </td>
+         <td
+           class=\\"\\"
+         >
+           perkins
+         </td>
+         <td
+           class=\\"\\"
+         >
+           40
+         </td>
+         <td
+           class=\\"\\"
+         >
+           40
+         </td>
+         <td
+           class=\\"\\"
+         >
+           Single
+         </td>
+         <td
+           class=\\"\\"
+         >
+           80
+         </td>
+       </tr>
+       <tr
+         class=\\"\\"
+       >
+         <td
+           class=\\"\\"
+         >
+           <span
+             style=\\"cursor: pointer; padding-left: 4rem;\\"
+           >
+             👉
+           </span>
+         </td>
+         <td
+           class=\\"\\"
+         >
+           joe
+         </td>
+         <td
+           class=\\"\\"
+         >
+           bergevin
+         </td>
+         <td
+           class=\\"\\"
+         >
+           45
+         </td>
+         <td
+           class=\\"\\"
+         >
+           20
+         </td>
+         <td
+           class=\\"\\"
+         >
+           Complicated
+         </td>
+         <td
+           class=\\"\\"
+         >
+           10
+         </td>
+       </tr>
+       <tr
+         class=\\"\\"
+       >
+         <td
+           class=\\"\\"
+         >
+           <span
+             style=\\"cursor: pointer; padding-left: 4rem;\\"
+           >
+             👉
+           </span>
+         </td>
+         <td
+           class=\\"\\"
+         >
+           jaylen
+         </td>
+         <td
+           class=\\"\\"
+         >
+           linsley
+         </td>
+         <td
+           class=\\"\\"
+         >
+           26
+         </td>
+         <td
+           class=\\"\\"
+         >
+           99
+         </td>
+         <td
+           class=\\"\\"
+         >
+           In Relationship
+         </td>
+         <td
+           class=\\"\\"
+         >
+           70
+          </td>
+        </tr>
+        <tr
+          class=\\"\\"
+        >"
+`;
+
+exports[`renders an expandable table 3`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -2,11 +2,13 @@
+    <pre>
+      <code>
+        {
+    \\"expanded\\": {
+      \\"0\\": {
+-       \\"0\\": true
+       \\"0\\": {
+         \\"0\\": true
+       }
+      }
+    }
+  }
+      </code>
+    </pre>
+@@ -172,10 +174,53 @@
+          <td
+            class=\\"\\"
+          >
+            <span
+              style=\\"cursor: pointer; padding-left: 4rem;\\"
+           >
+             👇
+           </span>
+         </td>
+         <td
+           class=\\"\\"
+         >
+           tanner
+         </td>
+         <td
+           class=\\"\\"
+         >
+           linsley
+         </td>
+         <td
+           class=\\"\\"
+         >
+           29
+         </td>
+         <td
+           class=\\"\\"
+         >
+           100
+         </td>
+         <td
+           class=\\"\\"
+         >
+           In Relationship
+         </td>
+         <td
+           class=\\"\\"
+         >
+           50
+         </td>
+       </tr>
+       <tr
+         class=\\"\\"
+       >
+         <td
+           class=\\"\\"
+         >
+           <span
+             style=\\"cursor: pointer; padding-left: 6rem;\\"
+            >
+              👉
+            </span>
+          </td>
+          <td
+@@ -205,10 +250,139 @@
+          </td>
+          <td
+            class=\\"\\"
+          >
+            50
+         </td>
+       </tr>
+       <tr
+         class=\\"\\"
+       >
+         <td
+           class=\\"\\"
+         >
+           <span
+             style=\\"cursor: pointer; padding-left: 6rem;\\"
+           >
+             👉
+           </span>
+         </td>
+         <td
+           class=\\"\\"
+         >
+           derek
+         </td>
+         <td
+           class=\\"\\"
+         >
+           perkins
+         </td>
+         <td
+           class=\\"\\"
+         >
+           40
+         </td>
+         <td
+           class=\\"\\"
+         >
+           40
+         </td>
+         <td
+           class=\\"\\"
+         >
+           Single
+         </td>
+         <td
+           class=\\"\\"
+         >
+           80
+         </td>
+       </tr>
+       <tr
+         class=\\"\\"
+       >
+         <td
+           class=\\"\\"
+         >
+           <span
+             style=\\"cursor: pointer; padding-left: 6rem;\\"
+           >
+             👉
+           </span>
+         </td>
+         <td
+           class=\\"\\"
+         >
+           joe
+         </td>
+         <td
+           class=\\"\\"
+         >
+           bergevin
+         </td>
+         <td
+           class=\\"\\"
+         >
+           45
+         </td>
+         <td
+           class=\\"\\"
+         >
+           20
+         </td>
+         <td
+           class=\\"\\"
+         >
+           Complicated
+         </td>
+         <td
+           class=\\"\\"
+         >
+           10
+         </td>
+       </tr>
+       <tr
+         class=\\"\\"
+       >
+         <td
+           class=\\"\\"
+         >
+           <span
+             style=\\"cursor: pointer; padding-left: 6rem;\\"
+           >
+             👉
+           </span>
+         </td>
+         <td
+           class=\\"\\"
+         >
+           jaylen
+         </td>
+         <td
+           class=\\"\\"
+         >
+           linsley
+         </td>
+         <td
+           class=\\"\\"
+         >
+           26
+         </td>
+         <td
+           class=\\"\\"
+         >
+           99
+         </td>
+         <td
+           class=\\"\\"
+         >
+           In Relationship
+         </td>
+         <td
+           class=\\"\\"
+         >
+           70
+          </td>
+        </tr>
+        <tr
+          class=\\"\\"
+        >"
+`;
+
+exports[`renders an expandable table 4`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -3,11 +3,13 @@
+      <code>
+        {
+    \\"expanded\\": {
+      \\"0\\": {
+        \\"0\\": {
+-         \\"0\\": true
+         \\"0\\": {
+           \\"0\\": true
+         }
+        }
+      }
+    }
+  }
+      </code>
+@@ -218,11 +220,11 @@
+            class=\\"\\"
+          >
+            <span
+              style=\\"cursor: pointer; padding-left: 6rem;\\"
+            >
+-             👉
+             👇
+            </span>
+          </td>
+          <td
+            class=\\"\\"
+          >
+@@ -250,10 +252,30 @@
+          </td>
+          <td
+            class=\\"\\"
+          >
+            50
+         </td>
+       </tr>
+       <tr>
+         <td
+           colspan=\\"7\\"
+         >
+           <pre>
+             <code>
+               {
+   \\"values\\": {
+     \\"firstName\\": \\"tanner\\",
+     \\"lastName\\": \\"linsley\\",
+     \\"age\\": 29,
+     \\"visits\\": 100,
+     \\"status\\": \\"In Relationship\\",
+     \\"progress\\": 50
+   }
+ }
+             </code>
+           </pre>
+          </td>
+        </tr>
+        <tr
+          class=\\"\\"
+        >"
+`;
@@ -0,0 +1,203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a filterable table 1`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -37,11 +37,11 @@
+            colspan=\\"1\\"
+          >
+            Last Name
+            <input
+              placeholder=\\"Search...\\"
+-             value=\\"\\"
+             value=\\"l\\"
+            />
+          </th>
+          <th
+            class=\\"\\"
+            colspan=\\"1\\"
+@@ -115,78 +115,10 @@
+          </td>
+          <td
+            class=\\"\\"
+          >
+            progress: 50
+-         </td>
+-       </tr>
+-       <tr
+-         class=\\"\\"
+-       >
+-         <td
+-           class=\\"\\"
+-         >
+-           firstName: derek
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           lastName: perkins
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           age: 40
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           visits: 40
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           status: Single
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           progress: 80
+-         </td>
+-       </tr>
+-       <tr
+-         class=\\"\\"
+-       >
+-         <td
+-           class=\\"\\"
+-         >
+-           firstName: joe
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           lastName: bergevin
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           age: 45
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           visits: 20
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           status: Complicated
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           progress: 10
+          </td>
+        </tr>
+        <tr
+          class=\\"\\"
+        >"
+`;
+
+exports[`renders a filterable table 2`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -37,11 +37,11 @@
+            colspan=\\"1\\"
+          >
+            Last Name
+            <input
+              placeholder=\\"Search...\\"
+-             value=\\"l\\"
+             value=\\"er\\"
+            />
+          </th>
+          <th
+            class=\\"\\"
+            colspan=\\"1\\"
+@@ -89,70 +89,70 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           firstName: tanner
+           firstName: derek
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           lastName: linsley
+           lastName: perkins
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           age: 29
+           age: 40
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           visits: 100
+           visits: 40
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           status: In Relationship
+           status: Single
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           progress: 50
+           progress: 80
+          </td>
+        </tr>
+        <tr
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           firstName: jaylen
+           firstName: joe
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           lastName: linsley
+           lastName: bergevin
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           age: 26
+           age: 45
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           visits: 99
+           visits: 20
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           status: In Relationship
+           status: Complicated
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           progress: 70
+           progress: 10
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </DocumentFragment>"
+`;
@@ -0,0 +1,371 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a groupable table 1`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -29,13 +29,13 @@
+            <span
+              class=\\"\\"
+              style=\\"cursor: pointer;\\"
+              title=\\"Toggle GroupBy\\"
+            >
+-             👊
+             🛑
+            </span>
+-           First Name
+           Last Name
+          </th>
+          <th
+            class=\\"\\"
+            colspan=\\"1\\"
+          >
+@@ -44,11 +44,11 @@
+              style=\\"cursor: pointer;\\"
+              title=\\"Toggle GroupBy\\"
+            >
+              👊
+            </span>
+-           Last Name
+           First Name
+          </th>
+          <th
+            class=\\"\\"
+            colspan=\\"1\\"
+          >
+@@ -107,138 +107,119 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           firstName: tanner
+-         </td>
+-         <td
+-           class=\\"\\"
+           <span
+             style=\\"cursor: pointer;\\"
+            >
+-           lastName: linsley
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           age: 29
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           visits: 100
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           status: In Relationship
+             👉
+           </span>
+           lastName: linsley (2)
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           progress: 50
+-         </td>
+-       </tr>
+-       <tr
+-         class=\\"\\"
+-       >
+-         <td
+-           class=\\"\\"
+-         >
+-           firstName: derek
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+-           lastName: perkins
+           2 Names
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           age: 40
+           27.5 (avg)
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           visits: 40
+           199 (total)
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           status: Single
+           status: null
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           progress: 80
+           60 (med)
+          </td>
+        </tr>
+        <tr
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           firstName: joe
+           <span
+             style=\\"cursor: pointer;\\"
+           >
+             👉
+           </span>
+           lastName: perkins (1)
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           lastName: bergevin
+           1 Names
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           age: 45
+           40 (avg)
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           visits: 20
+           40 (total)
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           status: Complicated
+           status: null
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           progress: 10
+           80 (med)
+          </td>
+        </tr>
+        <tr
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           firstName: jaylen
+           <span
+             style=\\"cursor: pointer;\\"
+           >
+             👉
+           </span>
+           lastName: bergevin (1)
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           lastName: linsley
+           1 Names
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           age: 26
+           45 (avg)
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           visits: 99
+           20 (total)
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           status: In Relationship
+           status: null
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           progress: 70
+           10 (med)
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </DocumentFragment>"
+`;
+
+exports[`renders a groupable table 2`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -6,17 +6,29 @@
+        <tr
+          class=\\"\\"
+        >
+          <th
+            class=\\"\\"
+-           colspan=\\"2\\"
+           colspan=\\"1\\"
+          >
+            Name
+          </th>
+          <th
+            class=\\"\\"
+-           colspan=\\"4\\"
+           colspan=\\"1\\"
+         >
+           Info
+         </th>
+         <th
+           class=\\"\\"
+           colspan=\\"1\\"
+         >
+           Name
+         </th>
+         <th
+           class=\\"\\"
+           colspan=\\"3\\"
+          >
+            Info
+          </th>
+        </tr>
+        <tr
+@@ -42,13 +54,13 @@
+            <span
+              class=\\"\\"
+              style=\\"cursor: pointer;\\"
+              title=\\"Toggle GroupBy\\"
+            >
+-             👊
+             🛑
+            </span>
+-           First Name
+           Visits
+          </th>
+          <th
+            class=\\"\\"
+            colspan=\\"1\\"
+          >
+@@ -57,11 +69,11 @@
+              style=\\"cursor: pointer;\\"
+              title=\\"Toggle GroupBy\\"
+            >
+              👊
+            </span>
+-           Age
+           First Name
+          </th>
+          <th
+            class=\\"\\"
+            colspan=\\"1\\"
+          >
+@@ -70,11 +82,11 @@
+              style=\\"cursor: pointer;\\"
+              title=\\"Toggle GroupBy\\"
+            >
+              👊
+            </span>
+-           Visits
+           Age
+          </th>
+          <th
+            class=\\"\\"
+            colspan=\\"1\\"
+          >
+@@ -114,10 +126,13 @@
+            >
+              👉
+            </span>
+            lastName: linsley (2)
+          </td>
+         <td
+           class=\\"\\"
+         />
+          <td
+            class=\\"\\"
+          >
+            2 Names
+          </td>
+@@ -127,15 +142,10 @@
+            27.5 (avg)
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           199 (total)
+-         </td>
+-         <td
+-           class=\\"\\"
+-         >
+            status: null
+          </td>
+          <td
+            class=\\"\\"
+          >
+@@ -155,22 +165,20 @@
+            </span>
+            lastName: perkins (1)
+          </td>
+          <td
+            class=\\"\\"
+-         >
+-           1 Names
+-         </td>
+         />
+          <td
+            class=\\"\\"
+          >
+-           40 (avg)
+           1 Names
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           40 (total)
+           40 (avg)
+          </td>
+          <td
+            class=\\"\\"
+          >
+            status: null
+@@ -194,22 +202,20 @@
+            </span>
+            lastName: bergevin (1)
+          </td>
+          <td
+            class=\\"\\"
+-         >
+-           1 Names
+-         </td>
+         />
+          <td
+            class=\\"\\"
+          >
+-           45 (avg)
+           1 Names
+          </td>
+          <td
+            class=\\"\\"
+          >
+-           20 (total)
+           45 (avg)
+          </td>
+          <td
+            class=\\"\\"
+          >
+            status: null"
+`;
@@ -0,0 +1,520 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a paginated table 1`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -65,11 +65,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 1
+           tanner 11
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -99,11 +99,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 2
+           tanner 12
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -133,11 +133,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 3
+           tanner 13
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -167,11 +167,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 4
+           tanner 14
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -201,11 +201,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 5
+           tanner 15
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -235,11 +235,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 6
+           tanner 16
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -269,11 +269,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 7
+           tanner 17
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -303,11 +303,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 8
+           tanner 18
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -337,11 +337,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 9
+           tanner 19
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -371,11 +371,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 10
+           tanner 20
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -404,19 +404,15 @@
+      </tbody>
+    </table>
+    <div
+      class=\\"pagination\\"
+    >
+-     <button
+-       disabled=\\"\\"
+-     >
+     <button>
+        &lt;&lt;
+      </button>
+       
+-     <button
+-       disabled=\\"\\"
+-     >
+     <button>
+        &lt;
+      </button>
+       
+      <button>
+        &gt;
+@@ -427,20 +423,20 @@
+      </button>
+       
+      <span>
+        Page 
+        <strong>
+-         1 of 10
+         2 of 10
+        </strong>
+         
+      </span>
+      <span>
+        | Go to page: 
+        <input
+          style=\\"width: 100px;\\"
+          type=\\"number\\"
+-         value=\\"1\\"
+         value=\\"2\\"
+        />
+      </span>
+       
+      <select>
+        <option"
+`;
+
+exports[`renders a paginated table 2`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -65,11 +65,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 11
+           tanner 21
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -99,11 +99,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 12
+           tanner 22
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -133,11 +133,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 13
+           tanner 23
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -167,11 +167,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 14
+           tanner 24
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -201,11 +201,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 15
+           tanner 25
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -235,11 +235,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 16
+           tanner 26
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -269,11 +269,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 17
+           tanner 27
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -303,11 +303,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 18
+           tanner 28
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -337,11 +337,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 19
+           tanner 29
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -371,11 +371,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 20
+           tanner 30
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -423,20 +423,20 @@
+      </button>
+       
+      <span>
+        Page 
+        <strong>
+-         2 of 10
+         3 of 10
+        </strong>
+         
+      </span>
+      <span>
+        | Go to page: 
+        <input
+          style=\\"width: 100px;\\"
+          type=\\"number\\"
+-         value=\\"2\\"
+         value=\\"3\\"
+        />
+      </span>
+       
+      <select>
+        <option"
+`;
+
+exports[`renders a paginated table 3`] = `
+"Snapshot Diff:
+- First value
+ Second value
+
+@@ -65,11 +65,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 21
+           tanner 91
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -99,11 +99,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 22
+           tanner 92
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -133,11 +133,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 23
+           tanner 93
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -167,11 +167,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 24
+           tanner 94
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -201,11 +201,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 25
+           tanner 95
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -235,11 +235,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 26
+           tanner 96
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -269,11 +269,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 27
+           tanner 97
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -303,11 +303,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 28
+           tanner 98
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -337,11 +337,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 29
+           tanner 99
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -371,11 +371,11 @@
+          class=\\"\\"
+        >
+          <td
+            class=\\"\\"
+          >
+-           tanner 30
+           tanner 100
+          </td>
+          <td
+            class=\\"\\"
+          >
+            linsley
+@@ -412,31 +412,35 @@
+       
+      <button>
+        &lt;
+      </button>
+       
+-     <button>
+     <button
+       disabled=\\"\\"
+     >
+        &gt;
+      </button>
+       
+-     <button>
+     <button
+       disabled=\\"\\"
+     >
+        &gt;&gt;
+      </button>
+       
+      <span>
+        Page 
+        <strong>
+-         3 of 10
+         10 of 10
+        </strong>
+         
+      </span>
+      <span>
+        | Go to page: 
+        <input
+          style=\\"width: 100px;\\"
+          type=\\"number\\"
+-         value=\\"3\\"
+         value=\\"10\\"
+        />
+      </span>
+       
+      <select>
+        <option"
+`;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
tannerlinsley	4f01c32216	v7.0.0-alpha.20	2019-08-06 20:01:52 -06:00
tannerlinsley	5145a632c9	Merge branch 'master' of https://github.com/react-tools/react-table	2019-08-06 20:01:11 -06:00
tannerlinsley	8508a6567d	feat(multiple): useRowState, fix useRowSelect/useSortBy/usePagination	2019-08-06 19:57:48 -06:00
PierreandTanner Linsley	1e80dd85d6	fix: disableSorting in column config level (#1434 )	2019-08-06 08:03:17 -06:00
Tanner LinsleyandGitHub	3cbb49fc37	Update README.md	2019-08-05 14:52:56 -06:00
tannerlinsley	110e04bf61	v7.0.0-alpha.19	2019-08-05 09:00:16 -06:00
tannerlinsley	2b30c84abc	fix(utils/example): fixed ensurePluginOrder utility, perf/debug updates	2019-08-05 08:59:35 -06:00
tannerlinsley	fd0fe43ad9	Merge branch 'master' of https://github.com/react-tools/react-table	2019-08-05 08:45:18 -06:00
gargrohandTanner Linsley	5975e0c4cd	[Minor] use actual param in `ensurePluginOrder` (#1429 )	2019-08-05 08:45:01 -06:00
gargrohandTanner Linsley	e7bbddbb0f	[Minor] typo correction (#1431 )	2019-08-05 08:44:16 -06:00
Tanner LinsleyandGitHub	49a1023467	Update README.md	2019-08-05 08:43:39 -06:00
Tanner LinsleyandGitHub	7167350921	Update README.md	2019-08-05 08:39:54 -06:00
Tanner LinsleyandGitHub	77cb0d97a8	Update README.md	2019-08-05 07:39:55 -06:00
Tanner LinsleyandGitHub	0672de486a	Update README.md	2019-08-05 07:38:07 -06:00
Tanner LinsleyandGitHub	e0f83d32fe	Update README.md	2019-08-05 06:53:29 -06:00
Tanner LinsleyandGitHub	3aaa5b9b1e	Update README.md	2019-08-05 06:52:46 -06:00
Tanner LinsleyandGitHub	352de348fe	Update README.md	2019-08-05 06:48:00 -06:00
tannerlinsley	21d3853dba	v7.0.0-alpha.18	2019-08-03 14:37:38 -06:00
tannerlinsley	095979b9db	docs(readme): updated readme	2019-08-03 14:36:52 -06:00
tannerlinsley	f52d5af115	docs(examples): updated example directory names	2019-08-03 14:31:13 -06:00
tannerlinsley	037c32345f	feat(use-row-select): added useRowSelect plugin hook + related	2019-08-03 14:20:08 -06:00
tannerlinsley	6ad0d4e0c0	Merge branch 'master' of https://github.com/react-tools/react-table	2019-08-02 07:43:30 -06:00
tannerlinsley	512790bc1c	fix(multiple): sub-components example, minor refactors Fixes #1423	2019-08-02 07:42:42 -06:00
gargrohandTanner Linsley	118b873531	fix(useFilters): Honor column level `disableFilters` by setting `canFilters` correct value (#1427 ) * correcting typos * [minor ] Readme update * Honor `columnDisableFilters` in useFilters by setting `canFilters` correct value	2019-08-02 07:28:38 -06:00
tannerlinsley	39c2b152f6	docs(readme): better docs on nested columns	2019-07-31 16:21:03 -06:00
tannerlinsley	adfc82b472	v7.0.0-alpha.17	2019-07-31 12:27:58 -06:00
tannerlinsley	6030282428	Merge branch 'master' of https://github.com/react-tools/react-table	2019-07-31 12:27:18 -06:00
tannerlinsley	f6ee2a3d99	fix(npm/examples): added src back to npm package, fixed grouping example	2019-07-31 12:27:06 -06:00
AurimasandTanner Linsley	633cc27a99	fix(utils): default Cell renderer cleanup (#1421 )	2019-07-31 08:47:21 -06:00
tannerlinsley	02b2671f5c	v7.0.0-alpha.16	2019-07-30 17:01:59 -06:00
tannerlinsley	2c5610d885	test(usegroupby/useexpanded): improved tests for useGroupBy/useExpanded	2019-07-30 17:00:59 -06:00
tannerlinsley	12e7b3220d	test: snapshots for useFilters, useGroupBy, useSortBy	2019-07-30 15:57:11 -06:00
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