v7.0.0-beta.12

Merge branch 'master' of https://github.com/react-tools/react-table
Add typescript docs (#1564 )
2026-08-19 16:30:21 +00:00 · 2019-10-09 15:43:14 -06:00 · 2019-10-09 15:42:24 -06:00 · 2019-10-09 15:42:09 -06:00 · 2019-10-09 15:19:04 -06:00 · 2019-10-09 15:15:39 -06:00
155 changed files with 56424 additions and 13096 deletions
@@ -1,7 +1,6 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-
 ---

 # Using v6?
@@ -10,13 +9,14 @@ v6 is now considered feature complete to its current abilities and limitations.

 # Using v7?

-Thanks for using the alpha version of React Table v7! We're very excited about it.
+Thanks for using the beta version of React Table v7! We're very excited about it.

 **Describe the bug**
 A clear and concise description of what the bug is.

 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -32,15 +32,17 @@ Use a new [react-table codesandbox](https://codesandbox.io/s/m5lxzzpz69) to repr
 If applicable, add screenshots to help explain your problem.

 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]

 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]

 **Additional context**
 Add any other context about the problem here.
@@ -10,3 +10,4 @@ react-table.css
 .idea
 .DS_Store
 .history
+package-lock.json
@@ -0,0 +1 @@
+package-lock=false
@@ -1,7 +1,18 @@
 language: node_js
+
 node_js:
-  - "10"
+  - 10
+  - 12
+
+os:
+  - linux
+  - osx
+  - windows
+
+env:
+  global:
+    - YARN_GPG=no

 cache: yarn

-script: npm test
+script: yarn test
@@ -1,3 +1,7 @@
+## 7.0.0-beta.0
+
+- Massive changes to the entire project and library. Please consult the README and documentation for more information regarding these changes.
+
 ## 6.8.6

 #### Fixes & Optimizations
@@ -7,6 +7,9 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
 <a href="https://travis-ci.org/tannerlinsley/react-table" target="\_parent">
  <img alt="" src="https://travis-ci.org/tannerlinsley/react-table.svg?branch=master" />
 </a>
+<a href="https://bundlephobia.com/result?p=react-table@next" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/react-table@next" />
+</a>
 <a href="https://npmjs.com/package/react-table" target="\_parent">
  <img alt="" src="https://img.shields.io/npm/dm/react-table.svg" />
 </a>
@@ -30,7 +33,7 @@ Hooks for building **lightweight, fast and extendable datagrids** for React

 ## Features

- Lightweight (4kb - 11kb depending on features and tree-shaking)
+- Lightweight (4kb - 9kb depending on features and tree-shaking)
 - Headless (100% customizable, Bring-your-own-UI)
 - Auto out of the box, fully controllable API
 - Sorting (Multi and Stable)
@@ -40,6 +43,8 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
 - Row Expansion
 - Column Ordering
 - Animatable
+- Virtualizable
+- Resizable
 - Server-side/controlled data/state
 - Extensible via hook-based plugin system
 - <a href="https://medium.com/@tannerlinsley/why-i-wrote-react-table-and-the-problems-it-has-solved-for-nozzle-others-445c4e93d4a8#.axza4ixba" target="\_parent">"Why I wrote React Table and the problems it has solved for Nozzle.io"</a> by Tanner Linsley
@@ -48,11 +53,11 @@ Hooks for building **lightweight, fast and extendable datagrids** for React

 #### What is the current state of React Table?

-React Table v7 is still under active development, and its API is still changing, albeit only slightly. For this reason, it is currently in an **alpha** release state. It's estimated that it will be out of alpha and into **beta** sometime during September 2019. It will then remain in beta for a short time before being released sometime in Q4 of 2019.
+React Table v7 is still under active development, and its API is still changing, albeit only slightly. For this reason, it is currently in an **beta** release state. It's estimated that it will be fully released as a stable version sometime during October 2019.

-#### Should I use v7@alpha in production?
+#### Should I use v7@beta in production?

-You can use it production as long as you lock in the alpha version in your package.json and also accept that the API will likely change before it's official release.
+You can use it in production as long as you lock in the beta version in your package.json and also accept that there may be unlikely, but possible bug fixes and/or API changes before it's official release.

 #### I'm still using v6, what should I do?

@@ -151,6 +156,7 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
      <td>
        <div><a href="https://www.metso.com/">Pekka</a></div>
        <div>Jon Eickmeier</div>
+        <div><a href="https://github.com/Shah-Sahab">Syed Hussain<a></div>
      </td>
    </tr>
  </tbody>
@@ -172,6 +178,7 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
        <div>Dan Houle</div>
        <div>David Pickut</div>
        <div>Jordan Soltman</div>
+        <div>Robert Tajnšek</div>
      </td>
    </tr>
  </tbody>
@@ -0,0 +1,39 @@
+# Using TypeScript with React-Table
+
+React-table is a very flexible library, because of this, the shape of data at almost every contact point is defined by the specific set of plugins that you choose to pass to `useTable`.
+
+Tto get started, copy the file `react-table-config.d.ts` into your source tree (e.g. into a types folder). This expands the default types with all of the plugin extensions currently in the type definitions.
+
+You can stop here if you like, but while this is simple, it's a bit misleading. Out of the box, these types will suggest that you have access to values that come from plugins that you aren't using, i.e. the error checking is weakened.
+
+To bring the resulting types into better alignment with your plugins, you should edit your local copy of `react-table-config.d.ts` and comment out all of the interfaces that don't apply to your chosen set of plugins.
+
+e.g.
+
+if you are only using `useSortBy` and `usePagination` then you would take this:
+
+```tsx
+extends UseExpandedOptions<D>,
+  UseFiltersOptions<D>,
+  UseGroupByOptions<D>,
+  UsePaginationOptions<D>,
+  UseRowSelectOptions<D>,
+  UseSortByOptions<D>,
+  UseFiltersOptions<D>,
+  UseResizeColumnsOptions<D>,
+  Record<string, any> {}
+```
+
+and convert it to this:
+
+```tsx
+export interface TableOptions<D extends object>
+  extends UsePaginationOptions<D>,
+    UseSortByOptions<D> {}
+```
+
+Then follow the same pattern for all of the other interfaces in the file. You'll notice that many plugins don't extends all of the top level interfaces.
+
+## Caveat
+
+The interfaces are all global. If you have several different configurations for the table, you should create interfaces using the union of all of the plugins that you are using.
@@ -2,7 +2,7 @@

 ## React Table is a "headless" UI library

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

 - Separation of Concerns - Not that superficial kind you read about all the time. The real kind. React Table as a library honestly has no business being in charge of your UI. The look, feel, and overall experience of your table is what makes your app or product great. The less React Table gets in the way of that, the better!
 - Maintenance - By removing the massive (and seemingly endless) API surface area required to support every UI use-case, React Table can remain small, easy-to-use and simple to update/maintain.
@@ -10,7 +10,7 @@ React Table is a headless utility, which means out of the box, it doesn't render

 ## The React Table instance

-At the heart of every React Table is the `useTable` hook and the table `instance` object that it returns. This `instance` object contains everything you'll ever need to build a table and interact with it's state. This includes, but is not limited to:
+At the heart of every React Table is the `useTable` hook and the table `instance` object that it returns. This `instance` object contains everything you'll ever need to build a table and interact with its state. This includes, but is not limited to:

 - Columns
 - Materialized Data
@@ -23,7 +23,7 @@ At the heart of every React Table is the `useTable` hook and the table `instance

 ## Rendering your own UI

-As of React Table v7, **you the developer** are responsible for rendering your own UI, but don't let that intimidate you! Table UI's are fun and React Table makes it so easy to wire up your own table UI. The easiest way to learn how to build your own table UI is to [see some existing React Table examples](./examples.md)!
+As of React Table v7, **you the developer** are responsible for rendering your own UI, but don't let that intimidate you! Table UIs are fun and React Table makes it so easy to wire up your own table UI. The easiest way to learn how to build your own table UI is to [see some existing React Table examples](./examples.md)!

 ---

@@ -2,49 +2,57 @@

 - **Simple** - All of these examples use automatic state management, meaning, they don't hoist any state out of the table or manually control anything. Start here for understanding the basics about how to build your table UI.
  - Basic
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/basic)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/basic)
    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
  - Sorting
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/sorting)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/sorting)
    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting)
  - Filtering
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/filtering)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/filtering)
    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering)
  - Grouping
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/grouping)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/grouping)
    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/grouping)
  - Pagination
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination)
    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination)
  - Row Selection
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/row-selection)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-selection)
    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection)
  - Expanding
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/expanding)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/expanding)
    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding)
  - Sub Components
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/sub-components)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/sub-components)
    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sub-components)
  - Editable Data
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/editable-data)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/editable-data)
    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/editable-data)
  - Column Ordering
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/column-ordering)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/column-ordering)
    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-ordering)
+  - Column Resizing
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/column-resizing)
+    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-resizing)
 - **Complex**
  - The "Kitchen Sink"
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
- **Controlled via `useTableState`** - These examples are more advanced because they demonstrate how to manually control and respond to the state of the table using the `useTableState` hook.
+- **Controlled** - These examples are more advanced because they demonstrate how to manually control and respond to the state of the table.
  - Pagination (Controlled)
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
    - [Open in CodeSandobx](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
- **UI** - These examples demonstrate how to use React Table with your favorite UI libraries or tools!
+- **UI & Rendering** - These examples demonstrate how to use React Table with your favorite UI libraries or tools!
+  - Virtualized Rows (React-Window)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
+    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
  - Animated (Framer-Motion)
-    - [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
+  - Material-UI
+    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/material-UI-components)
+    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-components)
  - [ ] Styled-Components
  - [ ] CSS
-  - [ ] Material-UI
  - [ ] Bootstrap
 - Want to write one of these examples or add another? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)
@@ -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/absolute-layout)
+- `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,166 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useAbsoluteLayout } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .table {
+    border: 1px solid #000;
+    max-width: 700px;
+    overflow-x: auto;
+  }
+
+  .header {
+    font-weight: bold;
+  }
+
+  .rows {
+    overflow-y: auto;
+  }
+
+  .row {
+    border-bottom: 1px solid #000;
+    height: 32px;
+
+    &.body {
+      :last-child {
+        border: 0;
+      }
+    }
+  }
+
+  .cell {
+    height: 100%;
+    line-height: 30px;
+    border-right: 1px solid #000;
+    padding-left: 5px;
+
+    :last-child {
+      border: 0;
+    }
+  }
+`
+
+function Table({ columns, data }) {
+  // Use the state and functions returned from useTable to build your UI
+
+  const defaultColumn = React.useMemo(
+    () => ({
+      width: 150,
+    }),
+    []
+  )
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+    },
+    useAbsoluteLayout
+  )
+
+  // Render the UI for your table
+  return (
+    <div {...getTableProps()} className="table">
+      <div>
+        {headerGroups.map(headerGroup => (
+          <div
+            {...headerGroup.getHeaderGroupProps()}
+            className="row header-group"
+          >
+            {headerGroup.headers.map(column => (
+              <div {...column.getHeaderProps()} className="cell header">
+                {column.render('Header')}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      <div className="rows" {...getTableBodyProps()}>
+        {rows.map(
+          (row, i) =>
+            prepareRow(row) || (
+              <div {...row.getRowProps()} className="row body">
+                {row.cells.map(cell => {
+                  return (
+                    <div {...cell.getCellProps()} className="cell">
+                      {cell.render('Cell')}
+                    </div>
+                  )
+                })}
+              </div>
+            )
+        )}
+      </div>
+    </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',
+            width: 50,
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+            width: 60,
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(20), [])
+
+  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();
+    });
+  }
+}
@@ -202,6 +202,7 @@ function Table({ columns, data }) {

  const {
    getTableProps,
+    getTableBodyProps,
    headerGroups,
    rows,
    flatColumns,
@@ -264,7 +265,7 @@ function Table({ columns, data }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          <AnimatePresence>
            {rows.slice(0, 10).map(
              (row, i) =>
@@ -293,7 +294,7 @@ function Table({ columns, data }) {
        </tbody>
      </table>
      <pre>
-        <code>{JSON.stringify(state[0], null, 2)}</code>
+        <code>{JSON.stringify(state, null, 2)}</code>
      </pre>
    </>
  )
@@ -35,7 +35,13 @@ const Styles = styled.div`

 function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI
-  const { getTableProps, headerGroups, rows, prepareRow } = useTable({
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable({
    columns,
    data,
  })
@@ -52,7 +58,7 @@ function Table({ columns, data }) {
          </tr>
        ))}
      </thead>
-      <tbody>
+      <tbody {...getTableBodyProps()}>
        {rows.map(
          (row, i) =>
            prepareRow(row) || (
@@ -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/block-layout)
+- `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,149 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useBlockLayout } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  .table {
+    display: inline-block;
+    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 defaultColumn = React.useMemo(
+    () => ({
+      width: 150,
+    }),
+    []
+  )
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+    },
+    useBlockLayout
+  )
+
+  // Render the UI for your table
+  return (
+    <div {...getTableProps()} className="table">
+      <div>
+        {headerGroups.map(headerGroup => (
+          <div {...headerGroup.getHeaderGroupProps()} className="tr">
+            {headerGroup.headers.map(column => (
+              <div {...column.getHeaderProps()} className="th">
+                {column.render('Header')}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      <div {...getTableBodyProps()}>
+        {rows.map(
+          (row, i) =>
+            prepareRow(row) || (
+              <div {...row.getRowProps()} className="tr">
+                {row.cells.map(cell => {
+                  return (
+                    <div {...cell.getCellProps()} className="td">
+                      {cell.render('Cell')}
+                    </div>
+                  )
+                })}
+              </div>
+            )
+        )}
+      </div>
+    </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',
+            width: 50,
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+            width: 60,
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(20), [])
+
+  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()
+    })
+  }
+}
@@ -47,6 +47,7 @@ function shuffle(arr) {
 function Table({ columns, data }) {
  const {
    getTableProps,
+    getTableBodyProps,
    headerGroups,
    rows,
    flatColumns,
@@ -78,7 +79,7 @@ function Table({ columns, data }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {rows.slice(0, 10).map(
            (row, i) =>
              prepareRow(row) || (
@@ -94,7 +95,7 @@ function Table({ columns, data }) {
        </tbody>
      </table>
      <pre>
-        <code>{JSON.stringify(state[0], null, 2)}</code>
+        <code>{JSON.stringify(state, null, 2)}</code>
      </pre>
    </>
  )
@@ -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/column-resizing)
+- `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,176 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useBlockLayout, useResizeColumns } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  .table {
+    display: inline-block;
+    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;
+
+      ${'' /* In this example we use an absolutely position resizer,
+       so this is required. */}
+      position: relative;
+
+      :last-child {
+        border-right: 0;
+      }
+
+      ${'' /* The resizer styles! */}
+
+      .resizer {
+        display: inline-block;
+        background: blue;
+        width: 5px;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: translateX(50%);
+        z-index: 1;
+
+        &.isResizing {
+          background: red;
+        }
+      }
+    }
+  }
+`
+
+function Table({ columns, data }) {
+  const defaultColumn = React.useMemo(
+    () => ({
+      minWidth: 20,
+      width: 150,
+      maxWidth: 500,
+    }),
+    []
+  )
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+    },
+    useBlockLayout,
+    useResizeColumns
+  )
+
+  return (
+    <div {...getTableProps()} className="table">
+      <div>
+        {headerGroups.map(headerGroup => (
+          <div {...headerGroup.getHeaderGroupProps()} className="tr">
+            {headerGroup.headers.map(column => (
+              <div {...column.getHeaderProps()} className="th">
+                {column.render('Header')}
+                {/* Use column.getResizerProps to hook up the events correctly */}
+                <div
+                  {...column.getResizerProps()}
+                  className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
+                />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      <div {...getTableBodyProps()}>
+        {rows.map(
+          (row, i) =>
+            prepareRow(row) || (
+              <div {...row.getRowProps()} className="tr">
+                {row.cells.map(cell => {
+                  return (
+                    <div {...cell.getCellProps()} className="td">
+                      {cell.render('Cell')}
+                    </div>
+                  )
+                })}
+              </div>
+            )
+        )}
+      </div>
+    </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',
+            width: 50,
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+            width: 60,
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(20), [])
+
+  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()
+    })
+  }
+}
@@ -83,6 +83,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
  // Otherwise, nothing is different here.
  const {
    getTableProps,
+    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
@@ -94,7 +95,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
    nextPage,
    previousPage,
    setPageSize,
-    state: [{ pageIndex, pageSize }],
+    state: { pageIndex, pageSize },
  } = useTable(
    {
      columns,
@@ -124,7 +125,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {page.map(
            (row, i) =>
              prepareRow(row) || (
@@ -36,10 +36,11 @@ const Styles = styled.div`
 function Table({ columns: userColumns, data }) {
  const {
    getTableProps,
+    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
-    state: [{ expanded }],
+    state: { expanded },
  } = useTable(
    {
      columns: userColumns,
@@ -60,7 +61,7 @@ function Table({ columns: userColumns, data }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {rows.map(
            (row, i) =>
              prepareRow(row) || (
@@ -210,7 +210,14 @@ function Table({ columns, data }) {
    []
  )

-  const { getTableProps, headerGroups, rows, prepareRow, state } = useTable(
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    state,
+  } = useTable(
    {
      columns,
      data,
@@ -228,7 +235,7 @@ function Table({ columns, data }) {
    <>
      <div>
        <pre>
-          <code>{JSON.stringify(state[0].filters, null, 2)}</code>
+          <code>{JSON.stringify(state.filters, null, 2)}</code>
        </pre>
      </div>
      <table {...getTableProps()}>
@@ -245,7 +252,7 @@ function Table({ columns, data }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {firstPageRows.map(
            (row, i) =>
              prepareRow(row) || (
@@ -36,10 +36,11 @@ const Styles = styled.div`
 function Table({ columns, data }) {
  const {
    getTableProps,
+    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
-    state: [{ groupBy, expanded }],
+    state: { groupBy, expanded },
  } = useTable(
    {
      columns,
@@ -77,7 +78,7 @@ function Table({ columns, data }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {firstPageRows.map(
            (row, i) =>
              prepareRow(row) || (
@@ -8,7 +8,6 @@ import {
  useGroupBy,
  useExpanded,
  useRowSelect,
-  useTableState,
 } from 'react-table'
 import matchSorter from 'match-sorter'

@@ -265,11 +264,10 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
    []
  )

-  const tableState = useTableState({ pageIndex: 2 })
-
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
+    getTableBodyProps,
    headerGroups,
    prepareRow,
    page, // Instead of using 'rows', we'll use page,
@@ -284,7 +282,14 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
    nextPage,
    previousPage,
    setPageSize,
-    state: [{ pageIndex, pageSize, groupBy, expanded, filters, selectedRows }],
+    state: {
+      pageIndex,
+      pageSize,
+      groupBy,
+      expanded,
+      filters,
+      selectedRowPaths,
+    },
  } = useTable(
    {
      columns,
@@ -292,7 +297,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
      defaultColumn,
      filterTypes,
      // nestExpandedRows: true,
-      state: tableState,
+      initialState: { pageIndex: 2 },
      // updateMyData isn't part of the API, but
      // anything we put into these options will
      // automatically be available on the instance.
@@ -344,7 +349,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {page.map(
            row =>
              prepareRow(row) || (
@@ -437,7 +442,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
              groupBy,
              expanded,
              filters,
-              selectedRows,
+              selectedRowPaths,
            },
            null,
            2
@@ -8,7 +8,6 @@ import {
  useGroupBy,
  useExpanded,
  useRowSelect,
-  useTableState,
 } from 'react-table'
 import matchSorter from 'match-sorter'

@@ -265,11 +264,10 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
    []
  )

-  const tableState = useTableState({ pageIndex: 2 })
-
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
+    getTableBodyProps,
    headerGroups,
    prepareRow,
    page, // Instead of using 'rows', we'll use page,
@@ -284,7 +282,14 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
    nextPage,
    previousPage,
    setPageSize,
-    state: [{ pageIndex, pageSize, groupBy, expanded, filters, selectedRows }],
+    state: {
+      pageIndex,
+      pageSize,
+      groupBy,
+      expanded,
+      filters,
+      selectedRowPaths,
+    },
  } = useTable(
    {
      columns,
@@ -292,7 +297,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
      defaultColumn,
      filterTypes,
      // nestExpandedRows: true,
-      state: tableState,
+      initialState: { pageIndex: 2 },
      // updateMyData isn't part of the API, but
      // anything we put into these options will
      // automatically be available on the instance.
@@ -344,7 +349,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {page.map(
            row =>
              prepareRow(row) || (
@@ -437,7 +442,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
              groupBy,
              expanded,
              filters,
-              selectedRows,
+              selectedRowPaths,
            },
            null,
            2
@@ -0,0 +1,3 @@
+{
+  "presets": ["react-app"]
+}
@@ -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/material-UI-components)
+- `yarn` and `yarn start` to run and edit the example
@@ -0,0 +1,36 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "eject": "rescripts eject"
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.4.3",
+    "namor": "^1.1.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1",
+    "react-table": "next"
+  },
+  "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",
+    "eslint-config-prettier": "^6.3.0"
+  },
+  "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,112 @@
+import React from 'react'
+
+import CssBaseline from '@material-ui/core/CssBaseline'
+import MaUTable from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableCell from '@material-ui/core/TableCell'
+import TableHead from '@material-ui/core/TableHead'
+import TableRow from '@material-ui/core/TableRow'
+
+import { useTable } from 'react-table'
+
+import makeData from './makeData'
+
+function Table({ columns, data }) {
+  // Use the state and functions returned from useTable to build your UI
+  const {
+    getTableProps,
+    getTableHeaderProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable({
+    columns,
+    data,
+  })
+
+  // Render the UI for your table
+  return (
+    <MaUTable {...getTableProps()}>
+      <TableHead>
+        {headerGroups.map(headerGroup => (
+          <TableRow {...headerGroup.getHeaderGroupProps()}>
+            {headerGroup.headers.map(column => (
+              <TableCell {...column.getHeaderProps()}>
+                {column.render('Header')}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableHead>
+      <TableBody>
+        {rows.map(
+          (row, i) =>
+            prepareRow(row) || (
+              <TableRow {...row.getRowProps()}>
+                {row.cells.map(cell => {
+                  return (
+                    <TableCell {...cell.getCellProps()}>
+                      {cell.render('Cell')}
+                    </TableCell>
+                  )
+                })}
+              </TableRow>
+            )
+        )}
+      </TableBody>
+    </MaUTable>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(20), [])
+
+  return (
+    <div>
+      <CssBaseline />
+      <Table columns={columns} data={data} />
+    </div>
+  )
+}
+
+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,8 +1,8 @@
-import React from 'react'
-import styled from 'styled-components'
-import { useTable, useTableState, usePagination } from 'react-table'
+import React from "react";
+import styled from "styled-components";
+import { useTable, usePagination } from "react-table";

-import makeData from './makeData'
+import makeData from "./makeData";

 const Styles = styled.div`
  padding: 1rem;
@@ -35,7 +35,7 @@ const Styles = styled.div`
  .pagination {
    padding: 0.5rem;
  }
-`
+`;

 // Let's add a fetchData method to our Table component that will be used to fetch
 // new data when pagination state changes
@@ -45,24 +45,11 @@ function Table({
  data,
  fetchData,
  loading,
-  pageCount: controlledPageCount,
+  pageCount: controlledPageCount
 }) {
-  // Use useTableState to hoist the state (and state updater) out of the table and control it
-  const tableState = useTableState({ pageIndex: 0 })
-
-  // Now we can get our table state from the hoisted table state tuple
-  const [{ pageIndex, pageSize }] = tableState
-
-  // Listen for changes in pagination and use the state to fetch our new data
-  React.useEffect(
-    () => {
-      fetchData({ pageIndex, pageSize })
-    },
-    [fetchData, pageIndex, pageSize]
-  )
-
  const {
    getTableProps,
+    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
@@ -74,19 +61,30 @@ function Table({
    nextPage,
    previousPage,
    setPageSize,
+    rows,
+    // Get the state from the instance
+    state: { pageIndex, pageSize }
  } = useTable(
    {
      columns,
      data,
-      state: tableState, // Pass our hoisted table state
+      initialState: { pageIndex: 0 }, // Pass our hoisted table state
      manualPagination: true, // Tell the usePagination
      // hook that we'll handle our own data fetching
      // This means we'll also have to provide our own
      // pageCount.
-      pageCount: controlledPageCount,
+      pageCount: controlledPageCount
    },
    usePagination
-  )
+  );
+
+  // Now we can get our table state from the hoisted table state tuple
+
+  // Listen for changes in pagination and use the state to fetch our new data
+  React.useEffect(() => {
+    console.log(pageIndex);
+    fetchData({ pageIndex, pageSize });
+  }, [fetchData, pageIndex, pageSize]);

  // Render the UI for your table
  return (
@@ -99,7 +97,7 @@ function Table({
              pageSize,
              pageCount,
              canNextPage,
-              canPreviousPage,
+              canPreviousPage
            },
            null,
            2
@@ -111,30 +109,35 @@ function Table({
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
-                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+                <th {...column.getHeaderProps()}>{column.render("Header")}</th>
              ))}
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {page.map(
            (row, i) =>
              prepareRow(row) || (
                <tr {...row.getRowProps()}>
                  {row.cells.map(cell => {
                    return (
-                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
-                    )
+                      <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
+                    );
                  })}
                </tr>
              )
          )}
-          {loading ? (
-            // Use our custom loading state to show a loading indicator
-            <tr>
+          <tr>
+            {loading ? (
+              // Use our custom loading state to show a loading indicator
              <td>Loading...</td>
-            </tr>
-          ) : null}
+            ) : (
+              <td>
+                Showing {page.length} of ~{controlledPageCount * pageSize}{" "}
+                results
+              </td>
+            )}
+          </tr>
        </tbody>
      </table>
      {/* 
@@ -143,39 +146,39 @@ function Table({
      */}
      <div className="pagination">
        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
-          {'<<'}
-        </button>{' '}
+          {"<<"}
+        </button>{" "}
        <button onClick={() => previousPage()} disabled={!canPreviousPage}>
-          {'<'}
-        </button>{' '}
+          {"<"}
+        </button>{" "}
        <button onClick={() => nextPage()} disabled={!canNextPage}>
-          {'>'}
-        </button>{' '}
+          {">"}
+        </button>{" "}
        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
-          {'>>'}
-        </button>{' '}
+          {">>"}
+        </button>{" "}
        <span>
-          Page{' '}
+          Page{" "}
          <strong>
            {pageIndex + 1} of {pageOptions.length}
-          </strong>{' '}
+          </strong>{" "}
        </span>
        <span>
-          | Go to page:{' '}
+          | Go to page:{" "}
          <input
            type="number"
            defaultValue={pageIndex + 1}
            onChange={e => {
-              const page = e.target.value ? Number(e.target.value) - 1 : 0
-              gotoPage(page)
+              const page = e.target.value ? Number(e.target.value) - 1 : 0;
+              gotoPage(page);
            }}
-            style={{ width: '100px' }}
+            style={{ width: "100px" }}
          />
-        </span>{' '}
+        </span>{" "}
        <select
          value={pageSize}
          onChange={e => {
-            setPageSize(Number(e.target.value))
+            setPageSize(Number(e.target.value));
          }}
        >
          {[10, 20, 30, 40, 50].map(pageSize => (
@@ -186,79 +189,86 @@ function Table({
        </select>
      </div>
    </>
-  )
+  );
 }

 // Let's simulate a large dataset on the server (outside of our component)
-const serverData = makeData(10000)
+const serverData = makeData(10000);

 function App() {
  const columns = React.useMemo(
    () => [
      {
-        Header: 'Name',
+        Header: "Name",
        columns: [
          {
-            Header: 'First Name',
-            accessor: 'firstName',
+            Header: "First Name",
+            accessor: "firstName"
          },
          {
-            Header: 'Last Name',
-            accessor: 'lastName',
-          },
-        ],
+            Header: "Last Name",
+            accessor: "lastName"
+          }
+        ]
      },
      {
-        Header: 'Info',
+        Header: "Info",
        columns: [
          {
-            Header: 'Age',
-            accessor: 'age',
+            Header: "Age",
+            accessor: "age"
          },
          {
-            Header: 'Visits',
-            accessor: 'visits',
+            Header: "Visits",
+            accessor: "visits"
          },
          {
-            Header: 'Status',
-            accessor: 'status',
+            Header: "Status",
+            accessor: "status"
          },
          {
-            Header: 'Profile Progress',
-            accessor: 'progress',
-          },
-        ],
-      },
+            Header: "Profile Progress",
+            accessor: "progress"
+          }
+        ]
+      }
    ],
    []
-  )
+  );

  // We'll start our table without any data
-  const [data, setData] = React.useState([])
-  const [loading, setLoading] = React.useState(false)
-  const [pageCount, setPageCount] = React.useState(0)
+  const [data, setData] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [pageCount, setPageCount] = React.useState(0);
+  const fetchIdRef = React.useRef(0);

  const fetchData = React.useCallback(({ pageSize, pageIndex }) => {
    // This will get called when the table needs new data
    // You could fetch your data from literally anywhere,
    // even a server. But for this example, we'll just fake it.

+    // Give this fetch an ID
+    const fetchID = ++fetchIdRef.current;
+
    // Set the loading state
-    setLoading(true)
+    setLoading(true);

    // We'll even set a delay to simulate a server here
    setTimeout(() => {
-      const startRow = pageSize * pageIndex
-      const endRow = startRow + pageSize
-      setData(serverData.slice(startRow, endRow))
+      // Only update the data if this is the latest fetch
+      if (fetchID === fetchIdRef.current) {
+        const startRow = pageSize * pageIndex;
+        const endRow = startRow + pageSize;
+        setData(serverData.slice(startRow, endRow));

-      // Your server could send back total page count.
-      // For now we'll just fake it, too
-      setPageCount(Math.ceil(serverData.length / pageSize))
+        // Your server could send back total page count.
+        // For now we'll just fake it, too
+        setPageCount(Math.ceil(serverData.length / pageSize));

-      setLoading(false)
-    }, 1000)
-  }, [])
+        setLoading(false);
+      }
+    }, 1000);
+  }, []);

  return (
    <Styles>
@@ -270,7 +280,7 @@ function App() {
        pageCount={pageCount}
      />
    </Styles>
-  )
+  );
 }

-export default App
+export default App;
@@ -42,7 +42,7 @@ function MyTable(props) {
    prepareRow,
 +   pageOptions,
 +   page,
-+   state: [{ pageIndex, pageSize }],
+   state: { pageIndex, pageSize },
 +   gotoPage,
 +   previousPage,
 +   nextPage,
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { useTable, usePagination, useTableState } from 'react-table'
+import { useTable, usePagination } from 'react-table'

 import makeData from './makeData'

@@ -38,11 +38,10 @@ const Styles = styled.div`
 `

 function Table({ columns, data }) {
-  const tableState = useTableState({ pageIndex: 2 })
-
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
+    getTableBodyProps,
    headerGroups,
    prepareRow,
    page, // Instead of using 'rows', we'll use page,
@@ -57,12 +56,12 @@ function Table({ columns, data }) {
    nextPage,
    previousPage,
    setPageSize,
-    state: [{ pageIndex, pageSize }],
+    state: { pageIndex, pageSize },
  } = useTable(
    {
      columns,
      data,
-      state: tableState,
+      initialState: { pageIndex: 2 },
    },
    usePagination
  )
@@ -95,7 +94,7 @@ function Table({ columns, data }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {page.map(
            (row, i) =>
              prepareRow(row) || (
@@ -37,10 +37,12 @@ function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
+    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
-    state: [{ selectedRows }],
+    selectedFlatRows,
+    state: { selectedRowPaths },
  } = useTable(
    {
      columns,
@@ -62,7 +64,7 @@ function Table({ columns, data }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {rows.map(
            (row, i) =>
              prepareRow(row) || (
@@ -77,9 +79,20 @@ function Table({ columns, data }) {
          )}
        </tbody>
      </table>
-      <p>Selected Rows: {selectedRows.length}</p>
+      <p>Selected Rows: {selectedRowPaths.length}</p>
      <pre>
-        <code>{JSON.stringify({ selectedRows }, null, 2)}</code>
+        <code>
+          {JSON.stringify(
+            {
+              selectedRowPaths,
+              'selectedFlatRows[].original': selectedFlatRows.map(
+                d => d.original
+              ),
+            },
+            null,
+            2
+          )}
+        </code>
      </pre>
    </>
  )
@@ -18,7 +18,7 @@ Next, add the `useSortBy` hook to your `useTable` hook and add the necessary UI

 ```diff
 function MyTable() {
-  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    {
      data,
      columns,
@@ -43,7 +43,7 @@ function MyTable() {
          </tr>
        ))}
      </thead>
-      <tbody>
+      <tbody {...getTableBodyProps()}>
        {rows.map(
          (row, i) =>
            prepareRow(row) || (
@@ -34,7 +34,13 @@ const Styles = styled.div`
 `

 function Table({ columns, data }) {
-  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
    {
      columns,
      data,
@@ -70,7 +76,7 @@ function Table({ columns, data }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {firstPageRows.map(
            (row, i) =>
              prepareRow(row) || (
@@ -39,11 +39,12 @@ const Styles = styled.div`
 function Table({ columns: userColumns, data, renderRowSubComponent }) {
  const {
    getTableProps,
+    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    flatColumns,
-    state: [{ expanded }],
+    state: { expanded },
  } = useTable(
    {
      columns: userColumns,
@@ -68,7 +69,7 @@ function Table({ columns: userColumns, data, renderRowSubComponent }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {rows.map(
            (row, i) =>
              prepareRow(row) || (
@@ -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,
+]
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Tanner Linsley	fb94eaf103	v7.0.0-beta.12	2019-10-09 15:43:14 -06:00
Tanner Linsley	409c050cbf	Merge branch 'master' of https://github.com/react-tools/react-table	2019-10-09 15:42:24 -06:00
ggascoigneandTanner Linsley	cee24c74d8	Add typescript docs (#1564 ) * Add typescript docs * update for beta.10 and feedback	2019-10-09 15:42:09 -06:00
Michael StramelandTanner Linsley	499f21c349	Remove package-lock.json (#1579 )	2019-10-09 15:19:04 -06:00
Tanner Linsley	2a39d5a21c	v7.0.0-beta.11	2019-10-09 15:15:39 -06:00
Michael Stramel Tanner Linsley Christian Murphy	36ba233e27	Updating types (#1535 ) * Attempt to bring into alignment fix plugin hook definitions Remove old prop Format fix Header and Cell props Rename prop Abstract props to definitions fix bad generic fix typo Revert "fix typo" This reverts commit 1ca58c5d8fb017bb0af79dd4aa4f0cd296e7a7e8. fix * Remove documented prop * Tweaks * Re-add comment * Some updates * more changes * Convert to interfaces * more fixes * rename sortByFn params * Fixes * Fix setFilter * Hopefully the last changes * Bump TypeScript Version for declaration file Co-Authored-By: Christian Murphy <christian.murphy.42@gmail.com> * format * Linting * fix typo * expose defaultState * swap aggregatedValue * Allow cellvalue for accessor function return * modifications * manually added changes from ggascoigne * remove changes from examples folder	2019-10-09 15:15:00 -06:00
Christian MurphyandTanner Linsley	c7dfc45e2e	ci: test cross platform (#1559 ) * ci: test cross platform Test on Node.js 10 and 12, long term release support versions. Test on Linux, Mac, and Windows machines. * fix: update ic-ci-cli to version 2 includes fixes to support windows * ci: disable yarn gpg * ci: double quote string for windows ci	2019-10-09 15:13:17 -06:00
Tanner LinsleyandGitHub	9dd36263fb	Update README.md	2019-10-08 10:17:45 -06:00
Tanner Linsley	227f7905b0	Upgrade controlled pagination example for deduped fetching	2019-10-08 09:49:23 -06:00
Tanner Linsley	f1ad032587	Update controlled pagination example	2019-10-08 09:46:06 -06:00
Tanner LinsleyandGitHub	93703d027c	Update README.md	2019-10-08 09:38:30 -06:00
GeoffandTanner Linsley	75fb61a17f	Update concepts.md (#1572 ) Some grammatical errors are fixed.	2019-10-07 20:43:53 -06:00
Andrey IvlevandTanner Linsley	7c73a7a631	Fix isClassComponent function (#1571 ) `Object.getPrototypeOf(component)` returns React `function Component()` function itself, not `Component.prototype`.	2019-10-07 12:17:22 -06:00
tannerlinsley	cbb18368b2	v7.0.0-beta.10	2019-10-07 10:27:56 -06:00
tannerlinsley	4842bc061d	fix: fix includeAll filter type, add filteredRows	2019-10-07 10:27:18 -06:00
tannerlinsley	0477ef26ca	Merge branch 'master' of https://github.com/react-tools/react-table	2019-10-05 20:50:29 -06:00
tannerlinsley	82734fc898	v7.0.0-beta.9	2019-10-05 20:49:21 -06:00
tannerlinsley	bbfc6428b7	refactor(usetable/usetablestate): integrate useTableState into useTable useTableState was an early and hasty abstraction that hasn't proved useful in many ways. Anything you could do with useTableState, you could easily do using the same options (assuming they exist) in the useTable hook. For this reason, state is now a first class citizen of the useTable hook, along with more sane properties and option locations for anything pertaining to state.	2019-10-05 20:48:28 -06:00
eclissi91andTanner Linsley	280ef16a75	Update api.md (#1567 ) I have corrected typo of this issue #1565	2019-10-04 09:01:19 -06:00
tannerlinsley	7db7d59b3d	v7.0.0-beta.8	2019-10-03 15:33:00 -06:00
tannerlinsley	e43968c684	feat(userowselect): add selectedFlatRows, rename state.selectedRows Added instance.selectedFlatRows to know which row objects are currently selecte	2019-10-03 14:08:34 -06:00
tannerlinsley	e5c04614c1	v7.0.0-beta.7	2019-10-03 13:40:22 -06:00
tannerlinsley	0ef0bc4126	fix(userowselect): useRowSelect fixed to take into account filters useRowSelect now takes into account filtered data when doing selectAll toggling and isAllRowsSelected state.	2019-10-03 13:39:35 -06:00
tannerlinsley	ef67b15c07	Merge branch 'master' of https://github.com/react-tools/react-table	2019-10-03 08:39:12 -06:00
Tanner Linsley	d248be8877	Fix sandbox loop protection	2019-10-03 08:38:33 -06:00
tannerlinsley	ea0799763d	v7.0.0-beta.6	2019-10-03 08:26:45 -06:00
tannerlinsley	98fffc3819	Merge branch 'master' of https://github.com/react-tools/react-table	2019-10-03 08:26:13 -06:00
tannerlinsley	de7f5c9385	feat(useresizecolumns): added useResizeColumns	2019-10-03 08:25:36 -06:00
Hugo BoveandTanner Linsley	69e13b87c3	feat(useexpanded, usepagination): omit subRows from rows (#1562 ) Added useExpanded 'expandSubRows' option	2019-10-02 06:51:14 -06:00
tannerlinsley	727f4157c1	v7.0.0-beta.5	2019-10-01 20:49:07 -06:00
tannerlinsley	3f9ba8daba	chore: user terser	2019-10-01 20:48:12 -06:00
tannerlinsley	3de1bbc3a7	v7.0.0-beta.4	2019-10-01 20:35:25 -06:00
tannerlinsley	7d84f86612	fix: cleanup	2019-10-01 20:34:37 -06:00
tannerlinsley	40477c1c83	fix: do not error on unkonwn user actions, side-effect-free	2019-10-01 20:33:55 -06:00
tannerlinsley	906988c35a	Merge branch 'master' of https://github.com/react-tools/react-table	2019-10-01 14:26:11 -06:00
tannerlinsley	07d879f5bb	docs(docs - example): updated example docs	2019-10-01 14:25:36 -06:00
Tanner LinsleyandGitHub	e18f371623	Update README.md	2019-10-01 14:08:01 -06:00
tannerlinsley	76a55b5103	v7.0.0-beta.3	2019-10-01 14:04:05 -06:00
tannerlinsley	247687ee08	feat: ingested width logic, useAbsoluteLayout useBlockLayout Width options (`width`, `minWidth`, `maxWidth`) options are now a part of the core column object. useBlockLayout and useAbsoluteLayout hooks now use this new internalized information to implement their layouts. Those examples have been updated. A virtualized-rows example has also been added to show off how the useBlockLayout hook can be used to virtualize rows with react-window.	2019-10-01 14:03:11 -06:00
Julian BöhnkeandTanner Linsley	f70d38e061	add material-ui table component example (#1557 ) * add material-ui table component example * remove unused styled-components package * update to react-table@nex * update sandbox link * update docs * Update examples.md	2019-09-30 12:48:10 -06:00
gargrohandTanner Linsley	b6fdb99f06	useAbsoluteLayout: Enable react-table to build with divs (#1522 ) * useAbsoluteLayout: To build tables with divs * Adding `placeholderOf` attribute to column * Adding `useAbsoluteLayout` in index.js * Adding `useAbsoluteLayout` example * Adding `useAbsoluteLayout` in api docs * Adding test for `useAbsoluteLayout` hook	2019-09-30 07:40:35 -06:00
tannerlinsley	488da2ecc5	v7.0.0-beta.2	2019-09-30 07:32:56 -06:00
tannerlinsley	5f0e7cab8b	fix: fix colspan prop to use column visibility Fixes #1555	2019-09-30 07:31:43 -06:00
Nick OomsandTanner Linsley	e2e67ed181	Added "in" to make the sentence more readable (#1554 )	2019-09-28 06:44:01 -06:00
goldenLunchboxandTanner Linsley	c8857a2871	Update api.md (#1551 ) The state variable seemed to be missing in the useTable part (row 481) and I felt the need to comment on an additional import being needed.	2019-09-27 05:43:13 -06:00
Tanner LinsleyandGitHub	98583d35f3	Update README.md	2019-09-26 13:28:31 -06:00
tannerlinsley	0a1bf55a2c	Merge branch 'master' of https://github.com/react-tools/react-table	2019-09-26 13:23:03 -06:00
tannerlinsley	54b4f8a5d1	v7.0.0-beta.1	2019-09-26 13:22:14 -06:00
tannerlinsley	f552c94972	fix(usepagination): fix unstable callbacks Closes #1549	2019-09-26 13:21:34 -06:00
ggascoigneandTanner Linsley	7ab6385839	TypeScript updates (#1521 ) * TypeScript updates I've found that trying to get solid TypeScript typings for this library are a bit of a challenge. The composable nature of the library means that the types for the builtin functions are by their nature somewhat minimal, and that the user needs to be able to extend those interfaces to reflect the specific plugins that are in use. With that in mind I propose something like this. To get the best out of them, you then need to extend those interfaces using declaration merging, see https://www.typescriptlang.org/docs/handbook/declaration-merging.html e.g. ```ts declare module 'react-table-hooks' { export interface TableInstance<D = any> extends UseFiltersValues<D>, UsePaginationValues<D>, UseExpandedValues, UseGroupByValues {} export interface TableState<D = any> extends UsePaginationState, UseGroupByState, UseSortbyState<D>, UseFiltersState<D> {} } ``` This also puts the ability to extend those types with any user defined hooks completely in the users hands. This gives the greatest flexibility, but I'll admit that it isn't particularly obvious. Perhaps a typescript readme and example is needed. * fix useExpanded type * fix module name * fix typo * address review feedback * add IdType, update Filters definition	2019-09-20 09:37:45 -06:00
Tanner LinsleyandGitHub	b8ed02cadc	Update README.md	2019-09-17 15:44:02 -06:00
Tanner LinsleyandGitHub	c3e917f13b	Update README.md	2019-09-17 15:42:36 -06:00
tannerlinsley	7e6d719af4	docs(changelog): update changelog	2019-09-13 09:24:24 -06:00
tannerlinsley	da678d0a61	Merge branch 'master' of https://github.com/react-tools/react-table	2019-09-13 09:22:09 -06:00
Tanner LinsleyandGitHub	c3fe4c7fd8	Update README.md	2019-09-13 09:22:03 -06:00