v7.0.0-beta.11

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
2026-08-19 08:20:30 +00:00 · 2019-10-09 15:15:39 -06:00 · 2019-10-09 15:15:00 -06:00 · 2019-10-09 15:13:17 -06:00 · 2019-10-08 10:17:45 -06:00 · 2019-10-08 09:49:23 -06:00
153 changed files with 46757 additions and 2088 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.
@@ -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,10 +43,34 @@ 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

+## News / Q&A
+
+#### 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 **beta** release state. It's estimated that it will be fully released as a stable version sometime during October 2019.
+
+#### Should I use v7@beta in production?
+
+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?
+
+v6 is a great library and is still the default install for `react-table`, however, I do not intend on offering any long-term support for it. If you intend to keep using v6, I recommend maintaining your own fork of the library and keeping it up to date for your version of React.
+
+#### Where are the docs for the older v6 version?
+
+Please [visit the v6 branch](https://github.com/tannerlinsley/react-table/tree/v6)
+
+#### I want to migrate from v6 to v7. How do I do that?
+
+The differences between the 2 versions are incredibly massive. Unfortunately, I cannot write a one-to-one upgrade guide for any of v6's API, simply because much of it is irrelevant with v7's headless approach. The best approach for migrating to v7 is to learn its API by reading the documentation and then following some of the examples to begin building your own table component.
+
 ## Documentation

 - [Installation](./docs/installation.md) - Walk through how to install React Table
@@ -71,7 +98,7 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
        </a>
      </td>
      <td align="center" valign="middle">
-        <a href="http://bjntech.com/index.html&utm_campaign=react_table" target="_blank">
+        <a href="http://bjntech.com/index.html?utm_campaign=react_table" target="_blank">
          <img width='250' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-bjn.png">
        </a>
      </td>
@@ -129,6 +156,7 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
      <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>
@@ -149,6 +177,8 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
        <div>Thomas Funk</div>
        <div>Dan Houle</div>
        <div>David Pickut</div>
+        <div>Jordan Soltman</div>
+        <div>Robert Tajnšek</div>
      </td>
    </tr>
  </tbody>
@@ -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)
@@ -10,7 +10,7 @@ $ npm install react-table@next
 $ yarn add react-table@next
 ```

-> NOTE: `@next` is only required tempororarily while work on the alpha and beta versions are still shifting.
+> NOTE: `@next` is only required temporarily while work on the alpha and beta versions are still shifting.

 To import React Table:

@@ -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
@@ -7,13 +7,10 @@
    "eject": "rescripts eject"
  },
  "dependencies": {
-    "framer-motion": "^1.6.3",
-    "match-sorter": "^4.0.1",
    "namor": "^1.1.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
-    "react-spring": "^8.0.27",
    "react-table": "next",
    "styled-components": "^4.3.2"
  },
@@ -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,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,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>
    </>
  )
@@ -1,382 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import { useTable, useSortBy, useFilters, useColumnOrder } from 'react-table'
-import { motion, AnimatePresence } from 'framer-motion'
-import matchSorter from 'match-sorter'
-
-import makeData from './makeData'
-
-const Styles = styled.div`
-  padding: 1rem;
-
-  table {
-    border-spacing: 0;
-    border: 1px solid black;
-
-    tr {
-      :last-child {
-        td {
-          border-bottom: 0;
-        }
-      }
-    }
-
-    th,
-    td {
-      margin: 0;
-      padding: 0.5rem;
-      border-bottom: 1px solid black;
-      border-right: 1px solid black;
-      background: white;
-
-      :last-child {
-        border-right: 0;
-      }
-    }
-  }
-`
-
-// Define a default UI for filtering
-function DefaultColumnFilter({
-  column: { filterValue, preFilteredRows, setFilter },
-}) {
-  const count = preFilteredRows.length
-
-  return (
-    <input
-      value={filterValue || ''}
-      onChange={e => {
-        setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
-      }}
-      placeholder={`Search ${count} records...`}
-    />
-  )
-}
-
-// This is a custom filter UI for selecting
-// a unique option from a list
-function SelectColumnFilter({
-  column: { filterValue, setFilter, preFilteredRows, id },
-}) {
-  // Calculate the options for filtering
-  // using the preFilteredRows
-  const options = React.useMemo(() => {
-    const options = new Set()
-    preFilteredRows.forEach(row => {
-      options.add(row.values[id])
-    })
-    return [...options.values()]
-  }, [id, preFilteredRows])
-
-  // Render a multi-select box
-  return (
-    <select
-      value={filterValue}
-      onChange={e => {
-        setFilter(e.target.value || undefined)
-      }}
-    >
-      <option value="">All</option>
-      {options.map((option, i) => (
-        <option key={i} value={option}>
-          {option}
-        </option>
-      ))}
-    </select>
-  )
-}
-
-// This is a custom filter UI that uses a
-// slider to set the filter value between a column's
-// min and max values
-function SliderColumnFilter({
-  column: { filterValue, setFilter, preFilteredRows, id },
-}) {
-  // Calculate the min and max
-  // using the preFilteredRows
-
-  const [min, max] = React.useMemo(() => {
-    let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0
-    let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0
-    preFilteredRows.forEach(row => {
-      min = Math.min(row.values[id], min)
-      max = Math.max(row.values[id], max)
-    })
-    return [min, max]
-  }, [id, preFilteredRows])
-
-  return (
-    <>
-      <input
-        type="range"
-        min={min}
-        max={max}
-        value={filterValue || min}
-        onChange={e => {
-          setFilter(parseInt(e.target.value, 10))
-        }}
-      />
-      <button onClick={() => setFilter(undefined)}>Off</button>
-    </>
-  )
-}
-
-// This is a custom UI for our 'between' or number range
-// filter. It uses two number boxes and filters rows to
-// ones that have values between the two
-function NumberRangeColumnFilter({
-  column: { filterValue = [], preFilteredRows, setFilter, id },
-}) {
-  const [min, max] = React.useMemo(() => {
-    let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0
-    let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0
-    preFilteredRows.forEach(row => {
-      min = Math.min(row.values[id], min)
-      max = Math.max(row.values[id], max)
-    })
-    return [min, max]
-  }, [id, preFilteredRows])
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-      }}
-    >
-      <input
-        value={filterValue[0] || ''}
-        type="number"
-        onChange={e => {
-          const val = e.target.value
-          setFilter((old = []) => [val ? parseInt(val, 10) : undefined, old[1]])
-        }}
-        placeholder={`Min (${min})`}
-        style={{
-          width: '70px',
-          marginRight: '0.5rem',
-        }}
-      />
-      to
-      <input
-        value={filterValue[1] || ''}
-        type="number"
-        onChange={e => {
-          const val = e.target.value
-          setFilter((old = []) => [old[0], val ? parseInt(val, 10) : undefined])
-        }}
-        placeholder={`Max (${max})`}
-        style={{
-          width: '70px',
-          marginLeft: '0.5rem',
-        }}
-      />
-    </div>
-  )
-}
-
-function fuzzyTextFilterFn(rows, id, filterValue) {
-  return matchSorter(rows, filterValue, { keys: [row => row.values[id]] })
-}
-
-// Let the table remove the filter if the string is empty
-fuzzyTextFilterFn.autoRemove = val => !val
-
-function shuffle(arr) {
-  arr = [...arr]
-  const shuffled = []
-  while (arr.length) {
-    const rand = Math.floor(Math.random() * arr.length)
-    shuffled.push(arr.splice(rand, 1)[0])
-  }
-  return shuffled
-}
-
-function Table({ columns, data }) {
-  const defaultColumn = React.useMemo(
-    () => ({
-      // Let's set up our default Filter UI
-      Filter: DefaultColumnFilter,
-    }),
-    []
-  )
-
-  const {
-    getTableProps,
-    headerGroups,
-    rows,
-    flatColumns,
-    prepareRow,
-    setColumnOrder,
-    state,
-  } = useTable(
-    {
-      columns,
-      data,
-      defaultColumn,
-    },
-    useColumnOrder,
-    useFilters,
-    useSortBy
-  )
-
-  const spring = React.useMemo(
-    () => ({
-      type: 'spring',
-      damping: 50,
-      stiffness: 100,
-    }),
-    []
-  )
-
-  const randomizeColumns = () => {
-    setColumnOrder(shuffle(flatColumns.map(d => d.id)))
-  }
-
-  return (
-    <>
-      <button onClick={() => randomizeColumns({})}>Randomize Columns</button>
-      <table {...getTableProps()}>
-        <thead>
-          {headerGroups.map((headerGroup, i) => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map(column => (
-                <motion.th
-                  {...column.getHeaderProps({
-                    layoutTransition: spring,
-                    style: {
-                      minWidth: column.minWidth,
-                    },
-                  })}
-                >
-                  <div {...column.getSortByToggleProps()}>
-                    {column.render('Header')}
-                    <span>
-                      {column.isSorted
-                        ? column.isSortedDesc
-                          ? ' 🔽'
-                          : ' 🔼'
-                        : ''}
-                    </span>
-                  </div>
-                  <div>{column.canFilter ? column.render('Filter') : null}</div>
-                </motion.th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          <AnimatePresence>
-            {rows.slice(0, 10).map(
-              (row, i) =>
-                prepareRow(row) || (
-                  <motion.tr
-                    {...row.getRowProps({
-                      layoutTransition: spring,
-                      exit: { opacity: 0, maxHeight: 0 },
-                    })}
-                  >
-                    {row.cells.map((cell, i) => {
-                      return (
-                        <motion.td
-                          {...cell.getCellProps({
-                            layoutTransition: spring,
-                          })}
-                        >
-                          {cell.render('Cell')}
-                        </motion.td>
-                      )
-                    })}
-                  </motion.tr>
-                )
-            )}
-          </AnimatePresence>
-        </tbody>
-      </table>
-      <pre>
-        <code>{JSON.stringify(state[0], null, 2)}</code>
-      </pre>
-    </>
-  )
-}
-
-// Define a custom filter filter function!
-function filterGreaterThan(rows, id, filterValue) {
-  return rows.filter(row => {
-    const rowValue = row.values[id]
-    return rowValue >= filterValue
-  })
-}
-
-// This is an autoRemove method on the filter function that
-// when given the new filter value and returns true, the filter
-// will be automatically removed. Normally this is just an undefined
-// check, but here, we want to remove the filter if it's not a number
-filterGreaterThan.autoRemove = val => typeof val !== 'number'
-
-function App() {
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: 'Name',
-        columns: [
-          {
-            Header: 'First Name',
-            accessor: 'firstName',
-            minWidth: 150,
-          },
-          {
-            Header: 'Last Name',
-            accessor: 'lastName',
-            minWidth: 150,
-            // Use our custom `fuzzyText` filter on this column
-            filter: 'fuzzyText',
-          },
-        ],
-      },
-      {
-        Header: 'Info',
-        columns: [
-          {
-            Header: 'Age',
-            accessor: 'age',
-            minWidth: 150,
-            Filter: SliderColumnFilter,
-            filter: 'equals',
-          },
-          {
-            Header: 'Visits',
-            accessor: 'visits',
-            minWidth: 150,
-            Filter: NumberRangeColumnFilter,
-            filter: 'between',
-          },
-          {
-            Header: 'Status',
-            accessor: 'status',
-            minWidth: 150,
-            Filter: SelectColumnFilter,
-            filter: 'includes',
-          },
-          {
-            Header: 'Profile Progress',
-            accessor: 'progress',
-            minWidth: 150,
-            Filter: SliderColumnFilter,
-            filter: filterGreaterThan,
-          },
-        ],
-      },
-    ],
-    []
-  )
-
-  const data = React.useMemo(() => makeData(100), [])
-
-  return (
-    <Styles>
-      <Table columns={columns} data={data} />
-    </Styles>
-  )
-}
-
-export default App
@@ -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,
+]
@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo

 You can:

- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
+- [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,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,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()
+}
@@ -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) || (
@@ -230,17 +231,17 @@ function App() {

  const [data, setData] = React.useState(() => makeData(20))
  const [originalData] = React.useState(data)
+  const [skipPageReset, setSkipPageReset] = React.useState(false)

  // We need to keep the table from resetting the pageIndex when we
  // Update data. So we can keep track of that flag with a ref.
-  const skipPageResetRef = React.useRef(false)

  // When our cell renderer calls updateMyData, we'll use
  // the rowIndex, columnID and new value to update the
  // original data
  const updateMyData = (rowIndex, columnID, value) => {
    // We also turn on the flag to not reset the page
-    skipPageResetRef.current = true
+    setSkipPageReset(true)
    setData(old =>
      old.map((row, index) => {
        if (index === rowIndex) {
@@ -258,7 +259,7 @@ function App() {
  // so that if data actually changes when we're not
  // editing it, the page is reset
  React.useEffect(() => {
-    skipPageResetRef.current = false
+    setSkipPageReset(false)
  }, [data])

  // Let's add a data resetter/randomizer to help
@@ -272,7 +273,7 @@ function App() {
        columns={columns}
        data={data}
        updateMyData={updateMyData}
-        disablePageResetOnDataChange={skipPageResetRef.current}
+        disablePageResetOnDataChange={skipPageReset}
      />
    </Styles>
  )
@@ -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,
@@ -50,9 +51,6 @@ function Table({ columns: userColumns, data }) {

  return (
    <>
-      <pre>
-        <code>{JSON.stringify({ expanded }, null, 2)}</code>
-      </pre>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
@@ -63,7 +61,7 @@ function Table({ columns: userColumns, data }) {
            </tr>
          ))}
        </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
          {rows.map(
            (row, i) =>
              prepareRow(row) || (
@@ -80,6 +78,9 @@ function Table({ columns: userColumns, data }) {
      </table>
      <br />
      <div>Showing the first 20 results of {rows.length} rows</div>
+      <pre>
+        <code>{JSON.stringify({ expanded }, null, 2)}</code>
+      </pre>
    </>
  )
 }
@@ -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.
@@ -304,8 +309,8 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
      disablePageResetOnDataChange,
    },
    useFilters,
-    useSortBy,
    useGroupBy,
+    useSortBy,
    useExpanded,
    usePagination,
    useRowSelect
@@ -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,12 +18,11 @@ 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,
    },
-   useSortBy
 +   useSortBy
  )

@@ -44,7 +43,7 @@ function MyTable() {
          </tr>
        ))}
      </thead>
-      <tbody>
+      <tbody {...getTableBodyProps()}>
        {rows.map(
          (row, i) =>
            prepareRow(row) || (
@@ -60,3 +59,54 @@ function MyTable() {
  )
 }
 ```
+
+By default, the sorting will be `alphanumeric`. This can be changed in your `column` object.
+Other options include `basic` and `datetime`.
+Note that if you're planning on sorting numbers between 0 and 1, `basic` sorting will be more accurate.
+
+More information can be found in the [API Docs](/docs/api.md#useSortBy)
+
+````diff
+const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+           sortType: 'basic'
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+           sortType: 'basic'
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+           sortType: 'basic'
+          },
+        ],
+      },
+    ],
+    []
+  )```
+````
@@ -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,
+]
@@ -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/virtualized-rows)
+- `yarn` and `yarn start` to run and edit the example
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
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
tannerlinsley	45036054cb	v7.0.0-beta.0	2019-09-13 09:09:44 -06:00
tannerlinsley	8d3a97c9a2	v7.0.0-alpha.36	2019-09-13 07:35:15 -06:00
tannerlinsley	fb0eb3646a	Merge branch 'master' of https://github.com/react-tools/react-table	2019-09-13 07:34:22 -06:00
tannerlinsley	dfad9151c3	fix(expandedrows): fix in-page row expansion for paginateExpandedRows	2019-09-13 07:33:53 -06:00
Michael StramelandTanner Linsley	c618542f6e	Don't publish types (#1515 )	2019-09-12 21:29:15 -06:00
Michael StramelandTanner Linsley	670a92734e	Add typings (#1511 )	2019-09-12 09:39:53 -06:00
Andrey NikonovandTanner Linsley	c91130075b	Fix typo (#1513 )	2019-09-12 08:56:16 -06:00
Andrey NikonovandTanner Linsley	c4a8eb147c	Fix typo (#1512 )	2019-09-12 08:56:04 -06:00
Tanner LinsleyandGitHub	388cb85f0a	Update README.md	2019-09-10 13:17:12 -06:00
CodarandTanner Linsley	aea76facf1	isAllRowsSelected can only be true if there are rows. (#1504 )	2019-09-09 08:49:40 -06:00
tannerlinsley	f829cd0222	v7.0.0-alpha.35	2019-09-09 08:25:09 -06:00
tannerlinsley	0a03ea3a75	fix: better flexRender utility (supports JSX elements now)	2019-09-09 08:24:08 -06:00
tannerlinsley	0aa55dac08	fix: fixed disablePageResetOnDataChangeRef dependencies disablePageResetOnDataChangeRef will no longer trigger page resets when changed	2019-09-09 08:21:15 -06:00
Eddie HongandTanner Linsley	15778fe467	Fix typo in installation.md (#1498 )	2019-09-06 10:59:47 -06:00
tannerlinsley	ca23da0342	v7.0.0-alpha.34	2019-09-05 11:08:12 -06:00
tannerlinsley	072967b771	fix: fix defaultColumn.sortType, fix useGroupBy plugin order warning	2019-09-05 11:07:25 -06:00
tannerlinsley	da9e94091f	chore: removed unused example	2019-09-03 07:15:19 -06:00
Tanner LinsleyandGitHub	a98ec48b20	Update README.md	2019-09-03 07:01:58 -06:00
Tanner LinsleyandGitHub	1e2ca74f96	Update README.md	2019-09-03 06:59:15 -06:00
Tanner LinsleyandGitHub	aaa9459389	Update api.md	2019-09-03 06:33:07 -06:00
Tanner LinsleyandGitHub	7884f33486	Update README.md	2019-09-02 21:37:31 -06:00
Brian QianandTanner Linsley	6193a33c89	Changed docs to include sortType options for useSortBy (#1489 ) * Update api.md * Update README.md	2019-09-02 19:32:35 -06:00
tannerlinsley	0e54ef0005	v7.0.0-alpha.33	2019-08-29 09:27:31 -06:00
tannerlinsley	b10446b8c4	fix: useExpanded uses flat array for state useExpanded now uses a flat array of row path keys for tracking expanded state instead of nested objects. This is both easier to use as a developer, but also enables expanding all rows or even leaving nested rows in an expanded state, despite their parent rows' expanded state. BREAKING CHANGE: See description	2019-08-29 09:14:11 -06:00