v7.0.0-beta.3

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.

README.md

@@ -83,7 +83,7 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
 **React Table v7** is being built and maintained by me, @tannerlinsley and I am always in need of more Patreon support to keep this project afloat. If you would like to contribute to my Patreon goal for v7 and beyond, [visit my Patreon and help me out!](https://patreon.com/tannerlinsley)
 
 <table>
-  <tbody>
+  <tbody {...getTableBodyProps()}>
     <tr>
       <td align="center" valign="middle">
         <a href="https://patreon.com/tannerlinsley" target="_blank">
@@ -105,7 +105,7 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
 </table>
 
 <table>
-  <tbody>
+  <tbody {...getTableBodyProps()}>
     <tr>
       <td align="center" valign="middle">
         <a href="https://patreon.com/tannerlinsley" target="_blank">
@@ -127,7 +127,7 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
 </table>
 
 <table>
-  <tbody>
+  <tbody {...getTableBodyProps()}>
     <tr>
       <td align="center" valign="middle">
         <a href="https://patreon.com/tannerlinsley" target="_blank">
@@ -144,7 +144,7 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
 </table>
 
 <table>
-  <tbody>
+  <tbody {...getTableBodyProps()}>
     <tr>
       <td valign="top">
         <a href="https://patreon.com/tannerlinsley">
@@ -160,7 +160,7 @@ The differences between the 2 versions are incredibly massive. Unfortunately, I
 </table>
 
 <table>
-  <tbody>
+  <tbody {...getTableBodyProps()}>
     <tr>
       <td valign="top">
         <a href="https://patreon.com/tannerlinsley">

docs/api.md

@@ -15,6 +15,10 @@ React Table is essentially a compatible collection of **custom React hooks**:
     - [`usePagination`](#usePagination)
     - [`useRowSelect`](#useRowSelect)
     - [`useRowState`](#useRowState)
+    - [`useColumnOrder`](#useColumnOrder)
+  - Layout Hooks
+    - [`useBlockLayout`](#useBlockLayout)
+    - [`useAbsoluteLayout`](#useAbsoluteLayout)
   - Utility Hooks
     - [`useTableState`](#useTableState)
 - 3rd Party Plugin Hooks
@@ -151,6 +155,20 @@ The following options are supported on any column object you can pass to `column
   - Receives the table instance and cell model as props
   - Must return valid JSX
   - This function (or component) is primarily used for formatting the column value, eg. If your column accessor returns a date object, you can use a `Cell` function to format that date to a readable format.
+- `width: Int`
+  - Optional
+  - Defaults to `150`
+  - Specifies the width for the column (when using non-table-element layouts)
+- `minWidth: Int`
+  - Optional
+  - Defaults to `0`
+  - Specifies the minimum width for the column (when using non-table-element layouts)
+  - Specifically useful when using plugin hooks that allow the user to resize column widths
+- `maxWidth: Int`
+  - Optional
+  - Defaults to `0`
+  - Specifies the maximum width for the column (when using non-table-element layouts)
+  - Specifically useful when using plugin hooks that allow the user to resize column widths
 
 ### Instance Properties
 
@@ -182,6 +200,10 @@ The following properties are available on the table instance returned from `useT
   - **Required**
   - This function is used to resolve any props needed for your table wrapper.
   - Custom props may be passed. **NOTE: Custom props will override built-in table props, so be careful!**
+- `getTableBodyProps: Function(?props)`
+  - **Required**
+  - This function is used to resolve any props needed for your table body wrapper.
+  - Custom props may be passed. **NOTE: Custom props will override built-in table body props, so be careful!**
 - `prepareRow: Function(Row)`
   - **Required**
   - This function is responsible for lazily preparing a row for rendering. Any row that you intend to render in your table needs to be passed to this function **before every render**.
@@ -193,6 +215,8 @@ The following properties are available on the table instance returned from `useT
 - `flatRows: Array<Row>`
   - An array of all rows, including subRows which have been flattened into the order in which they were detected (depth first)
   - This can be helpful in calculating total row counts that must include subRows
+- `totalColumnsWidth: Int`
+  - This is the total width of all visible columns (when using non-table-element layouts)
 - `setRowState: Function(rowPath, updater: Function | any) => void`
   - This function can be used to update the internal state for any row.
   - Pass it a valid `rowPath` array and `updater`. The `updater` may be a value or function, similar to `React.useState`'s usage.
@@ -228,6 +252,12 @@ The following properties are available on every `Column` object returned by the
   - The entire table `instance` will be passed to the renderer with the addition of a `column` property, containing a reference to the column
   - If `type` is a string, will render using the `column[type]` renderer. React Table ships with default `Header` renderers. Other renderers like `Filter` are available via hooks like `useFilters`.
   - If a function or component is passed instead of a string, it will be be passed the table instance and column model as props and is expected to return any valid JSX.
+- `totalLeft: Int`
+  - This is the total width in pixels of all columns to the left of this column
+  - Specifically useful when using plugin hooks that allow the user to resize column widths
+- `totalWidth: Int`
+  - This is the total width in pixels for this column (if it is a leaf-column) or or all of it's sub-columns (if it is a column group)
+  - Specifically useful when using plugin hooks that allow the user to resize column widths
 - `getHeaderProps: Function(?props)`
   - **Required**
   - This function is used to resolve any props needed for this column's header cell.
@@ -347,7 +377,7 @@ function MyTable({ columns, data }) {
           </tr>
         ))}
       </thead>
-      <tbody>
+      <tbody {...getTableBodyProps()}>
         {rows.map(
           (row, i) =>
             prepareRow(row) || (
@@ -514,7 +544,7 @@ function Table({ columns, data }) {
           </tr>
         ))}
       </thead>
-      <tbody>
+      <tbody {...getTableBodyProps()}>
         {rows.map(
           (row, i) =>
             prepareRow(row) || (
@@ -807,7 +837,7 @@ function Table({ columns, data }) {
           </tr>
         ))}
       </thead>
-      <tbody>
+      <tbody {...getTableBodyProps()}>
         {firstPageRows.map(
           (row, i) =>
             prepareRow(row) || (
@@ -1006,7 +1036,7 @@ function Table({ columns: userColumns, data }) {
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {rows.map(
             (row, i) =>
               prepareRow(row) || (
@@ -1225,7 +1255,7 @@ function Table({ columns, data }) {
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {page.map(
             (row, i) =>
               prepareRow(row) || (
@@ -1434,7 +1464,7 @@ function Table({ columns, data }) {
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {rows.map(
             (row, i) =>
               prepareRow(row) || (
@@ -1576,6 +1606,76 @@ The following additional properties are available on every `Cell` object returne
   - Use this function to programmatically update the state of a cell.
   - `updater` can be a function or value. If a `function` is passed, it will receive the current value and expect a new one to be returned.
 
+# `useBlocklayout`
+
+- Plugin Hook
+- Optional
+
+`useBlocklayout` is a plugin hook that adds support for headers and cells to be rendered as `inline-block` `div`s (or other non-table elements) with explicit `width`. Similar to the `useAbsoluteLayout` hook, this becomes useful if and when you need to virtualize rows and cells for performance.
+
+**NOTE:** Although no additional options are needed, the core column options `width`, `minWidth` and `maxWidth` are used to calculate column and cell widths and must be set. [See Column Options](#column-options) for more information on these options.
+
+### Row Properties
+
+- `getRowProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for rows
+
+### Cell Properties
+
+- `getCellProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for rows cells
+
+### Header Properties
+
+- `getHeaderProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for headers
+
+### Example
+
+- [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/block-layout)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/block-layout)
+
+# `useAbsoluteLayout`
+
+- Plugin Hook
+- Optional
+
+`useAbsoluteLayout` is a plugin hook that adds support for headers and cells to be rendered as absolutely positioned `div`s (or other non-table elements) with explicit `width`. Similar to the `useBlockLayout` hook, this becomes useful if and when you need to virtualize rows and cells for performance.
+
+**NOTE:** Although no additional options are needed, the core column options `width`, `minWidth` and `maxWidth` are used to calculate column and cell widths and must be set. [See Column Options](#column-options) for more information on these options.
+
+### Instance Properties
+
+- `getTableBodyProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for the table body
+
+### Row Properties
+
+- `getRowProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for rows
+
+### Cell Properties
+
+- `getCellProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for rows cells
+
+### Header Properties
+
+- `getHeaderProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for headers
+
+### Example
+
+- [Source + Guide](https://github.com/tannerlinsley/react-table/tree/master/examples/absolute-layout)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/absolute-layout)
+
 # `useColumnOrder`
 
 - Plugin Hook

docs/examples.md

@@ -39,12 +39,17 @@
   - Pagination (Controlled)
     - [Source + Guide](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 + Guide](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)
     - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
+  - Material-UI
+    - [Source + Guide](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)

examples/absolute-layout/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["react-app"],
+  "plugins": ["styled-components"]
+}

examples/absolute-layout/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

examples/absolute-layout/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["react-app", "prettier"],
+  "rules": {
+    // "eqeqeq": 0,
+    // "jsx-a11y/anchor-is-valid": 0
+  }
+}

examples/absolute-layout/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/absolute-layout/.rescriptsrc.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const resolveFrom = require('resolve-from')
+
+const fixLinkedDependencies = config => {
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      react$: resolveFrom(path.resolve('node_modules'), 'react'),
+      'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+    },
+  }
+  return config
+}
+
+const includeSrcDirectory = config => {
+  config.resolve = {
+    ...config.resolve,
+    modules: [path.resolve('src'), ...config.resolve.modules],
+  }
+  return config
+}
+
+module.exports = [
+  ['use-babel-config', '.babelrc'],
+  ['use-eslint-config', '.eslintrc'],
+  fixLinkedDependencies,
+  // includeSrcDirectory,
+]

examples/absolute-layout/README.md

@@ -0,0 +1,6 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and Rescripts.
+
+You can:
+
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/absolute-layout)
+- `yarn` and `yarn start` to run and edit the example

examples/absolute-layout/package.json

@@ -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"
+    ]
+  }
+}

examples/absolute-layout/public/index.html

@@ -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>

examples/absolute-layout/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/absolute-layout/src/App.js

@@ -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

examples/absolute-layout/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

examples/absolute-layout/src/index.css

@@ -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;
+}

examples/absolute-layout/src/index.js

@@ -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();

examples/absolute-layout/src/makeData.js

@@ -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()
+}

examples/absolute-layout/src/serviceWorker.js

@@ -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();
+    });
+  }
+}

examples/animated-framer-motion/src/App.js

@@ -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) =>

examples/basic/src/App.js

@@ -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) || (

examples/block-layout/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["react-app"],
+  "plugins": ["styled-components"]
+}

examples/block-layout/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

examples/block-layout/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["react-app", "prettier"],
+  "rules": {
+    // "eqeqeq": 0,
+    // "jsx-a11y/anchor-is-valid": 0
+  }
+}

examples/block-layout/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/block-layout/.rescriptsrc.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const resolveFrom = require('resolve-from')
+
+const fixLinkedDependencies = config => {
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      react$: resolveFrom(path.resolve('node_modules'), 'react'),
+      'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+    },
+  }
+  return config
+}
+
+const includeSrcDirectory = config => {
+  config.resolve = {
+    ...config.resolve,
+    modules: [path.resolve('src'), ...config.resolve.modules],
+  }
+  return config
+}
+
+module.exports = [
+  ['use-babel-config', '.babelrc'],
+  ['use-eslint-config', '.eslintrc'],
+  fixLinkedDependencies,
+  // includeSrcDirectory,
+]

examples/block-layout/README.md

@@ -0,0 +1,6 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and Rescripts.
+
+You can:
+
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/block-layout)
+- `yarn` and `yarn start` to run and edit the example

examples/block-layout/package.json

@@ -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"
+    ]
+  }
+}

examples/block-layout/public/index.html

@@ -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>

examples/block-layout/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/block-layout/src/App.js

@@ -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

examples/block-layout/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})

examples/block-layout/src/index.css

@@ -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;
+}

examples/block-layout/src/index.js

@@ -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()

examples/block-layout/src/makeData.js

@@ -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()
+}

examples/block-layout/src/serviceWorker.js

@@ -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()
+    })
+  }
+}

examples/column-ordering/src/App.js

@@ -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) || (

examples/editable-data/src/App.js

@@ -83,6 +83,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
   // Otherwise, nothing is different here.
   const {
     getTableProps,
+    getTableBodyProps,
     headerGroups,
     prepareRow,
     page,
@@ -124,7 +125,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {page.map(
             (row, i) =>
               prepareRow(row) || (

examples/expanding/src/App.js

@@ -36,6 +36,7 @@ const Styles = styled.div`
 function Table({ columns: userColumns, data }) {
   const {
     getTableProps,
+    getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
@@ -60,7 +61,7 @@ function Table({ columns: userColumns, data }) {
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {rows.map(
             (row, i) =>
               prepareRow(row) || (

examples/filtering/src/App.js

@@ -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,
@@ -245,7 +252,7 @@ function Table({ columns, data }) {
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {firstPageRows.map(
             (row, i) =>
               prepareRow(row) || (

examples/grouping/src/App.js

@@ -36,6 +36,7 @@ const Styles = styled.div`
 function Table({ columns, data }) {
   const {
     getTableProps,
+    getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
@@ -77,7 +78,7 @@ function Table({ columns, data }) {
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {firstPageRows.map(
             (row, i) =>
               prepareRow(row) || (

examples/kitchen-sink-controlled/src/App.js

@@ -270,6 +270,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
   // 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,
@@ -344,7 +345,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {page.map(
             row =>
               prepareRow(row) || (

examples/kitchen-sink/src/App.js

@@ -270,6 +270,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
   // 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,
@@ -344,7 +345,7 @@ function Table({ columns, data, updateMyData, disablePageResetOnDataChange }) {
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {page.map(
             row =>
               prepareRow(row) || (

examples/material-UI-components/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-app"]
+}

examples/material-UI-components/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

examples/material-UI-components/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["react-app", "prettier"],
+  "rules": {
+    // "eqeqeq": 0,
+    // "jsx-a11y/anchor-is-valid": 0
+  }
+}

examples/material-UI-components/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/material-UI-components/.rescriptsrc.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const resolveFrom = require('resolve-from')
+
+const fixLinkedDependencies = config => {
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      react$: resolveFrom(path.resolve('node_modules'), 'react'),
+      'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+    },
+  }
+  return config
+}
+
+const includeSrcDirectory = config => {
+  config.resolve = {
+    ...config.resolve,
+    modules: [path.resolve('src'), ...config.resolve.modules],
+  }
+  return config
+}
+
+module.exports = [
+  ['use-babel-config', '.babelrc'],
+  ['use-eslint-config', '.eslintrc'],
+  fixLinkedDependencies,
+  // includeSrcDirectory,
+]

examples/material-UI-components/README.md

@@ -0,0 +1,6 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and Rescripts.
+
+You can:
+
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-components)
+- `yarn` and `yarn start` to run and edit the example

examples/material-UI-components/package.json

@@ -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"
+    ]
+  }
+}

examples/material-UI-components/public/index.html

@@ -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>

examples/material-UI-components/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/material-UI-components/src/App.js

@@ -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

examples/material-UI-components/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

examples/material-UI-components/src/index.css

@@ -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;
+}

examples/material-UI-components/src/index.js

@@ -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();

examples/material-UI-components/src/makeData.js

@@ -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()
+}

examples/material-UI-components/src/serviceWorker.js

@@ -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();
+    });
+  }
+}

examples/pagination-controlled/src/App.js

@@ -54,15 +54,13 @@ function Table({
   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]
-  )
+  React.useEffect(() => {
+    fetchData({ pageIndex, pageSize })
+  }, [fetchData, pageIndex, pageSize])
 
   const {
     getTableProps,
+    getTableBodyProps,
     headerGroups,
     prepareRow,
     page,
@@ -116,7 +114,7 @@ function Table({
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {page.map(
             (row, i) =>
               prepareRow(row) || (

examples/pagination/src/App.js

@@ -43,6 +43,7 @@ function Table({ columns, data }) {
   // 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,
@@ -95,7 +96,7 @@ function Table({ columns, data }) {
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {page.map(
             (row, i) =>
               prepareRow(row) || (

examples/row-selection/src/App.js

@@ -37,6 +37,7 @@ function Table({ columns, data }) {
   // Use the state and functions returned from useTable to build your UI
   const {
     getTableProps,
+    getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
@@ -62,7 +63,7 @@ function Table({ columns, data }) {
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {rows.map(
             (row, i) =>
               prepareRow(row) || (

examples/sorting/README.md

@@ -18,7 +18,7 @@ Next, add the `useSortBy` hook to your `useTable` hook and add the necessary UI
 
 ```diff
 function MyTable() {
-  const { getTableProps, headerGroups, rows, prepareRow } = useTable(
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
     {
       data,
       columns,
@@ -43,7 +43,7 @@ function MyTable() {
           </tr>
         ))}
       </thead>
-      <tbody>
+      <tbody {...getTableBodyProps()}>
         {rows.map(
           (row, i) =>
             prepareRow(row) || (

examples/sorting/src/App.js

@@ -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) || (

examples/sub-components/src/App.js

@@ -39,6 +39,7 @@ const Styles = styled.div`
 function Table({ columns: userColumns, data, renderRowSubComponent }) {
   const {
     getTableProps,
+    getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
@@ -68,7 +69,7 @@ function Table({ columns: userColumns, data, renderRowSubComponent }) {
             </tr>
           ))}
         </thead>
-        <tbody>
+        <tbody {...getTableBodyProps()}>
           {rows.map(
             (row, i) =>
               prepareRow(row) || (

examples/virtualized-rows/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["react-app"],
+  "plugins": ["styled-components"]
+}

examples/virtualized-rows/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

examples/virtualized-rows/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["react-app", "prettier"],
+  "rules": {
+    // "eqeqeq": 0,
+    // "jsx-a11y/anchor-is-valid": 0
+  }
+}

examples/virtualized-rows/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/virtualized-rows/.rescriptsrc.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const resolveFrom = require('resolve-from')
+
+const fixLinkedDependencies = config => {
+  config.resolve = {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      react$: resolveFrom(path.resolve('node_modules'), 'react'),
+      'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+    },
+  }
+  return config
+}
+
+const includeSrcDirectory = config => {
+  config.resolve = {
+    ...config.resolve,
+    modules: [path.resolve('src'), ...config.resolve.modules],
+  }
+  return config
+}
+
+module.exports = [
+  ['use-babel-config', '.babelrc'],
+  ['use-eslint-config', '.eslintrc'],
+  fixLinkedDependencies,
+  // includeSrcDirectory,
+]

examples/virtualized-rows/README.md

@@ -0,0 +1,6 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and Rescripts.
+
+You can:
+
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
+- `yarn` and `yarn start` to run and edit the example

examples/virtualized-rows/package.json

@@ -0,0 +1,36 @@
+{
+  "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",
+    "react-window": "^1.8.5",
+    "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"
+    ]
+  }
+}

examples/virtualized-rows/public/index.html

@@ -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>

examples/virtualized-rows/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/virtualized-rows/src/App.js

@@ -0,0 +1,175 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useBlockLayout } from 'react-table'
+import { FixedSizeList } from 'react-window'
+
+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,
+    totalColumnsWidth,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+    },
+    useBlockLayout
+  )
+
+  const RenderRow = React.useCallback(
+    ({ index, style }) => {
+      const row = rows[index]
+      prepareRow(row)
+      return (
+        <div
+          {...row.getRowProps({
+            style,
+          })}
+          className="tr"
+        >
+          {row.cells.map(cell => {
+            return (
+              <div {...cell.getCellProps()} className="td">
+                {cell.render('Cell')}
+              </div>
+            )
+          })}
+        </div>
+      )
+    },
+    [prepareRow, rows]
+  )
+
+  console.log(headerGroups)
+
+  // 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()}>
+        <FixedSizeList
+          height={400}
+          itemCount={rows.length}
+          itemSize={35}
+          width={totalColumnsWidth}
+        >
+          {RenderRow}
+        </FixedSizeList>
+      </div>
+    </div>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Row Index',
+        accessor: (row, i) => i,
+      },
+      {
+        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(100000), [])
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
+
+export default App

examples/virtualized-rows/src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})

examples/virtualized-rows/src/index.css

@@ -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;
+}

examples/virtualized-rows/src/index.js

@@ -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()

examples/virtualized-rows/src/makeData.js

@@ -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()
+}

examples/virtualized-rows/src/serviceWorker.js

@@ -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()
+    })
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.3",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

src/hooks/tests/__snapshots__/useTable.test.js.snap

@@ -63,7 +63,9 @@ exports[`renders a basic table 1`] = `
         </th>
       </tr>
     </thead>
-    <tbody>
+    <tbody
+      class=""
+    >
       <tr
         class=""
       >

src/hooks/tests/useTable.test.js

@@ -31,7 +31,13 @@ const data = [
 
 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,
   })
@@ -48,7 +54,7 @@ function Table({ columns, data }) {
           </tr>
         ))}
       </thead>
-      <tbody>
+      <tbody {...getTableBodyProps()}>
         {rows.map(
           (row, i) =>
             prepareRow(row) || (

src/hooks/useTable.js

@@ -70,6 +70,7 @@ export const useTable = (props, ...plugins) => {
       useRows: [],
       prepareRow: [],
       getTableProps: [],
+      getTableBodyProps: [],
       getRowProps: [],
       getHeaderGroupProps: [],
       getHeaderProps: [],
@@ -214,6 +215,8 @@ export const useTable = (props, ...plugins) => {
     []
   )
 
+  calculateDimensions(instanceRef.current)
+
   if (process.env.NODE_ENV === 'development' && debug)
     console.time('hooks.useMain')
   instanceRef.current = applyHooks(
@@ -306,7 +309,7 @@ export const useTable = (props, ...plugins) => {
   // The prepareRow function is absolutely necessary and MUST be called on
   // any rows the user wishes to be displayed.
 
-  instanceRef.current.prepareRow = row => {
+  instanceRef.current.prepareRow = React.useCallback(row => {
     row.getRowProps = props =>
       mergeProps(
         { key: ['row', ...row.path].join('_') },
@@ -366,7 +369,7 @@ export const useTable = (props, ...plugins) => {
 
     // need to apply any row specific hooks (useExpanded requires this)
     applyHooks(instanceRef.current.hooks.prepareRow, row, instanceRef.current)
-  }
+  }, [])
 
   instanceRef.current.getTableProps = userProps =>
     mergeProps(
@@ -377,5 +380,44 @@ export const useTable = (props, ...plugins) => {
       userProps
     )
 
+  instanceRef.current.getTableBodyProps = userProps =>
+    mergeProps(
+      applyPropHooks(
+        instanceRef.current.hooks.getTableBodyProps,
+        instanceRef.current
+      ),
+      userProps
+    )
+
   return instanceRef.current
 }
+
+function calculateDimensions(instance) {
+  const { headers } = instance
+
+  instance.totalColumnsWidth = calculateHeaderWidths(headers)
+}
+
+function calculateHeaderWidths(headers, left = 0) {
+  let sumTotalWidth = 0
+
+  headers.forEach(header => {
+    let { headers: subHeaders } = header
+
+    header.totalLeft = left
+
+    if (subHeaders && subHeaders.length) {
+      header.totalWidth = calculateHeaderWidths(subHeaders, left)
+    } else {
+      header.totalWidth = Math.min(
+        Math.max(header.minWidth, header.width),
+        header.maxWidth
+      )
+    }
+
+    left += header.totalWidth
+    sumTotalWidth += header.totalWidth
+  })
+
+  return sumTotalWidth
+}

src/index.js

@@ -11,4 +11,6 @@ export { usePagination } from './plugin-hooks/usePagination'
 export { useRowSelect } from './plugin-hooks/useRowSelect'
 export { useRowState } from './plugin-hooks/useRowState'
 export { useColumnOrder } from './plugin-hooks/useColumnOrder'
+export { useAbsoluteLayout } from './plugin-hooks/useAbsoluteLayout'
+export { useBlockLayout } from './plugin-hooks/useBlockLayout'
 export { actions, addActions } from './actions'

src/plugin-hooks/tests/__snapshots__/useAbsoluteLayout.test.js.snap

@@ -0,0 +1,206 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a table 1`] = `
+<DocumentFragment>
+  <div
+    class="table"
+  >
+    <div>
+      <div
+        class="row"
+        style="position: relative; width: 1400px;"
+      >
+        <div
+          class="cell header"
+          colspan="2"
+          style="position: absolute; top: 0px; left: 0px; width: 550px;"
+        >
+          Name
+        </div>
+        <div
+          class="cell header"
+          colspan="4"
+          style="position: absolute; top: 0px; left: 550px; width: 850px;"
+        >
+          Info
+        </div>
+      </div>
+      <div
+        class="row"
+        style="position: relative; width: 1400px;"
+      >
+        <div
+          class="cell header"
+          colspan="1"
+          style="position: absolute; top: 0px; left: 0px; width: 250px;"
+        >
+          First Name
+        </div>
+        <div
+          class="cell header"
+          colspan="1"
+          style="position: absolute; top: 0px; left: 250px; width: 300px;"
+        >
+          Last Name
+        </div>
+        <div
+          class="cell header"
+          colspan="1"
+          style="position: absolute; top: 0px; left: 550px; width: 300px;"
+        >
+          Age
+        </div>
+        <div
+          class="cell header"
+          colspan="1"
+          style="position: absolute; top: 0px; left: 850px; width: 150px;"
+        >
+          Visits
+        </div>
+        <div
+          class="cell header"
+          colspan="1"
+          style="position: absolute; top: 0px; left: 1000px; width: 200px;"
+        >
+          Status
+        </div>
+        <div
+          class="cell header"
+          colspan="1"
+          style="position: absolute; top: 0px; left: 1200px; width: 200px;"
+        >
+          Profile Progress
+        </div>
+      </div>
+    </div>
+    <div
+      class=""
+      style="position: relative; width: 1400px;"
+    >
+      <div
+        class="row"
+        style="position: relative; width: 1400px;"
+      >
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 0px; width: 250px;"
+        >
+          firstName: tanner
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 250px; width: 300px;"
+        >
+          lastName: linsley
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 550px; width: 300px;"
+        >
+          age: 29
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 850px; width: 150px;"
+        >
+          visits: 100
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 1000px; width: 200px;"
+        >
+          status: In Relationship
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 1200px; width: 200px;"
+        >
+          progress: 50
+        </div>
+      </div>
+      <div
+        class="row"
+        style="position: relative; width: 1400px;"
+      >
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 0px; width: 250px;"
+        >
+          firstName: derek
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 250px; width: 300px;"
+        >
+          lastName: perkins
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 550px; width: 300px;"
+        >
+          age: 30
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 850px; width: 150px;"
+        >
+          visits: 40
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 1000px; width: 200px;"
+        >
+          status: Single
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 1200px; width: 200px;"
+        >
+          progress: 80
+        </div>
+      </div>
+      <div
+        class="row"
+        style="position: relative; width: 1400px;"
+      >
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 0px; width: 250px;"
+        >
+          firstName: joe
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 250px; width: 300px;"
+        >
+          lastName: bergevin
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 550px; width: 300px;"
+        >
+          age: 45
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 850px; width: 150px;"
+        >
+          visits: 20
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 1000px; width: 200px;"
+        >
+          status: Complicated
+        </div>
+        <div
+          class="cell"
+          style="position: absolute; top: 0px; left: 1200px; width: 200px;"
+        >
+          progress: 10
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

src/plugin-hooks/tests/__snapshots__/useBlockLayout.test.js.snap

@@ -0,0 +1,205 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a table 1`] = `
+<DocumentFragment>
+  <div
+    class="table"
+  >
+    <div>
+      <div
+        class="row"
+        style="display: block; width: 1400px;"
+      >
+        <div
+          class="cell header"
+          colspan="2"
+          style="display: inline-block; box-sizing: border-box; width: 550px;"
+        >
+          Name
+        </div>
+        <div
+          class="cell header"
+          colspan="4"
+          style="display: inline-block; box-sizing: border-box; width: 850px;"
+        >
+          Info
+        </div>
+      </div>
+      <div
+        class="row"
+        style="display: block; width: 1400px;"
+      >
+        <div
+          class="cell header"
+          colspan="1"
+          style="display: inline-block; box-sizing: border-box; width: 250px;"
+        >
+          First Name
+        </div>
+        <div
+          class="cell header"
+          colspan="1"
+          style="display: inline-block; box-sizing: border-box; width: 300px;"
+        >
+          Last Name
+        </div>
+        <div
+          class="cell header"
+          colspan="1"
+          style="display: inline-block; box-sizing: border-box; width: 300px;"
+        >
+          Age
+        </div>
+        <div
+          class="cell header"
+          colspan="1"
+          style="display: inline-block; box-sizing: border-box; width: 150px;"
+        >
+          Visits
+        </div>
+        <div
+          class="cell header"
+          colspan="1"
+          style="display: inline-block; box-sizing: border-box; width: 200px;"
+        >
+          Status
+        </div>
+        <div
+          class="cell header"
+          colspan="1"
+          style="display: inline-block; box-sizing: border-box; width: 200px;"
+        >
+          Profile Progress
+        </div>
+      </div>
+    </div>
+    <div
+      class=""
+    >
+      <div
+        class="row"
+        style="display: block; width: 1400px;"
+      >
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 250px;"
+        >
+          firstName: tanner
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 300px;"
+        >
+          lastName: linsley
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 300px;"
+        >
+          age: 29
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 150px;"
+        >
+          visits: 100
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 200px;"
+        >
+          status: In Relationship
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 200px;"
+        >
+          progress: 50
+        </div>
+      </div>
+      <div
+        class="row"
+        style="display: block; width: 1400px;"
+      >
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 250px;"
+        >
+          firstName: derek
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 300px;"
+        >
+          lastName: perkins
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 300px;"
+        >
+          age: 30
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 150px;"
+        >
+          visits: 40
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 200px;"
+        >
+          status: Single
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 200px;"
+        >
+          progress: 80
+        </div>
+      </div>
+      <div
+        class="row"
+        style="display: block; width: 1400px;"
+      >
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 250px;"
+        >
+          firstName: joe
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 300px;"
+        >
+          lastName: bergevin
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 300px;"
+        >
+          age: 45
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 150px;"
+        >
+          visits: 20
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 200px;"
+        >
+          status: Complicated
+        </div>
+        <div
+          class="cell"
+          style="display: inline-block; box-sizing: border-box; width: 200px;"
+        >
+          progress: 10
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

src/plugin-hooks/tests/__snapshots__/useExpanded.test.js.snap

@@ -19,7 +19,7 @@ Snapshot Diff:
     </pre>
     <table
       class=""
-@@ -82,10 +84,53 @@
+@@ -86,10 +88,53 @@
           <td
             class=""
           >
@@ -73,7 +73,7 @@ Snapshot Diff:
             </span>
           </td>
           <td
-@@ -115,10 +160,139 @@
+@@ -119,10 +164,139 @@
           </td>
           <td
             class=""
@@ -234,7 +234,7 @@ Snapshot Diff:
       </code>
     </pre>
     <table
-@@ -127,11 +128,54 @@
+@@ -131,11 +132,54 @@
           <td
             class=""
           >
@@ -289,7 +289,7 @@ Snapshot Diff:
           </td>
           <td
             class=""
-@@ -160,10 +204,139 @@
+@@ -164,10 +208,139 @@
           </td>
           <td
             class=""
@@ -450,7 +450,7 @@ Snapshot Diff:
       </code>
     </pre>
     <table
-@@ -171,11 +172,54 @@
+@@ -175,11 +176,54 @@
           <td
             class=""
           >
@@ -505,7 +505,7 @@ Snapshot Diff:
           </td>
           <td
             class=""
-@@ -204,10 +248,139 @@
+@@ -208,10 +252,139 @@
           </td>
           <td
             class=""
@@ -666,7 +666,7 @@ Snapshot Diff:
       </code>
     </pre>
     <table
-@@ -216,11 +217,11 @@
+@@ -220,11 +221,11 @@
             class=""
           >
             <span
@@ -679,7 +679,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -248,10 +249,30 @@
+@@ -252,10 +253,30 @@
           </td>
           <td
             class=""
@@ -734,7 +734,7 @@ Snapshot Diff:
     </pre>
     <table
       class=""
-@@ -88,140 +83,11 @@
+@@ -92,140 +87,11 @@
             class=""
           >
             <span
@@ -876,7 +876,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -249,417 +115,10 @@
+@@ -253,417 +119,10 @@
           </td>
           <td
             class=""

src/plugin-hooks/tests/__snapshots__/useFilters.test.js.snap

@@ -18,7 +18,7 @@ Snapshot Diff:
           <th
             class=""
             colspan="1"
-@@ -115,78 +115,10 @@
+@@ -117,78 +117,10 @@
           </td>
           <td
             class=""
@@ -117,7 +117,7 @@ Snapshot Diff:
           <th
             class=""
             colspan="1"
-@@ -89,70 +89,70 @@
+@@ -91,70 +91,70 @@
           class=""
         >
           <td

src/plugin-hooks/tests/__snapshots__/useGroupBy.test.js.snap

@@ -34,7 +34,7 @@ Snapshot Diff:
             class=""
             colspan="1"
           >
-@@ -107,138 +107,119 @@
+@@ -109,138 +109,119 @@
           class=""
         >
           <td
@@ -286,7 +286,7 @@ Snapshot Diff:
             class=""
             colspan="1"
           >
-@@ -114,10 +126,13 @@
+@@ -116,10 +128,13 @@
             >
               👉
             </span>
@@ -300,7 +300,7 @@ Snapshot Diff:
           >
             2 Names
           </td>
-@@ -127,15 +142,10 @@
+@@ -129,15 +144,10 @@
             27.5 (avg)
           </td>
           <td
@@ -316,7 +316,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -155,22 +165,20 @@
+@@ -157,22 +167,20 @@
             </span>
             lastName: perkins (1)
           </td>
@@ -342,7 +342,7 @@ Snapshot Diff:
             class=""
           >
             status: null
-@@ -194,22 +202,20 @@
+@@ -196,22 +204,20 @@
             </span>
             lastName: bergevin (1)
           </td>

src/plugin-hooks/tests/__snapshots__/usePagination.test.js.snap

@@ -5,7 +5,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -65,11 +65,11 @@
+@@ -67,11 +67,11 @@
           class=""
         >
           <td
@@ -18,7 +18,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -99,11 +99,11 @@
+@@ -101,11 +101,11 @@
           class=""
         >
           <td
@@ -31,7 +31,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -133,11 +133,11 @@
+@@ -135,11 +135,11 @@
           class=""
         >
           <td
@@ -44,7 +44,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -167,11 +167,11 @@
+@@ -169,11 +169,11 @@
           class=""
         >
           <td
@@ -57,7 +57,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -201,11 +201,11 @@
+@@ -203,11 +203,11 @@
           class=""
         >
           <td
@@ -70,7 +70,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -235,11 +235,11 @@
+@@ -237,11 +237,11 @@
           class=""
         >
           <td
@@ -83,7 +83,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -269,11 +269,11 @@
+@@ -271,11 +271,11 @@
           class=""
         >
           <td
@@ -96,7 +96,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -303,11 +303,11 @@
+@@ -305,11 +305,11 @@
           class=""
         >
           <td
@@ -109,7 +109,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -337,11 +337,11 @@
+@@ -339,11 +339,11 @@
           class=""
         >
           <td
@@ -122,7 +122,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -371,11 +371,11 @@
+@@ -373,11 +373,11 @@
           class=""
         >
           <td
@@ -135,7 +135,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -423,20 +423,20 @@
+@@ -425,20 +425,20 @@
       </button>
        
       <span>
@@ -165,7 +165,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -65,11 +65,11 @@
+@@ -67,11 +67,11 @@
           class=""
         >
           <td
@@ -178,7 +178,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -99,11 +99,11 @@
+@@ -101,11 +101,11 @@
           class=""
         >
           <td
@@ -191,7 +191,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -133,11 +133,11 @@
+@@ -135,11 +135,11 @@
           class=""
         >
           <td
@@ -204,7 +204,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -167,11 +167,11 @@
+@@ -169,11 +169,11 @@
           class=""
         >
           <td
@@ -217,7 +217,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -201,11 +201,11 @@
+@@ -203,11 +203,11 @@
           class=""
         >
           <td
@@ -230,7 +230,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -235,11 +235,11 @@
+@@ -237,11 +237,11 @@
           class=""
         >
           <td
@@ -243,7 +243,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -269,11 +269,11 @@
+@@ -271,11 +271,11 @@
           class=""
         >
           <td
@@ -256,7 +256,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -303,11 +303,11 @@
+@@ -305,11 +305,11 @@
           class=""
         >
           <td
@@ -269,7 +269,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -337,11 +337,11 @@
+@@ -339,11 +339,11 @@
           class=""
         >
           <td
@@ -282,7 +282,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -371,11 +371,11 @@
+@@ -373,11 +373,11 @@
           class=""
         >
           <td
@@ -295,7 +295,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -423,20 +423,20 @@
+@@ -425,20 +425,20 @@
       </button>
        
       <span>
@@ -325,7 +325,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -65,11 +65,11 @@
+@@ -67,11 +67,11 @@
           class=""
         >
           <td
@@ -338,7 +338,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -99,11 +99,11 @@
+@@ -101,11 +101,11 @@
           class=""
         >
           <td
@@ -351,7 +351,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -133,11 +133,11 @@
+@@ -135,11 +135,11 @@
           class=""
         >
           <td
@@ -364,7 +364,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -167,11 +167,11 @@
+@@ -169,11 +169,11 @@
           class=""
         >
           <td
@@ -377,7 +377,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -201,11 +201,11 @@
+@@ -203,11 +203,11 @@
           class=""
         >
           <td
@@ -390,7 +390,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -235,11 +235,11 @@
+@@ -237,11 +237,11 @@
           class=""
         >
           <td
@@ -403,7 +403,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -269,11 +269,11 @@
+@@ -271,11 +271,11 @@
           class=""
         >
           <td
@@ -416,7 +416,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -303,11 +303,11 @@
+@@ -305,11 +305,11 @@
           class=""
         >
           <td
@@ -429,7 +429,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -337,11 +337,11 @@
+@@ -339,11 +339,11 @@
           class=""
         >
           <td
@@ -442,7 +442,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -371,11 +371,11 @@
+@@ -373,11 +373,11 @@
           class=""
         >
           <td
@@ -455,7 +455,7 @@ Snapshot Diff:
             class=""
           >
             linsley
-@@ -412,31 +412,35 @@
+@@ -414,31 +414,35 @@
        
       <button>
         &lt;

src/plugin-hooks/tests/__snapshots__/useRowSelect.test.js.snap

@@ -5,7 +5,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -109,11 +109,11 @@
+@@ -117,11 +117,11 @@
           </td>
           <td
             class=""
@@ -18,7 +18,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -165,11 +165,11 @@
+@@ -173,11 +173,11 @@
           </td>
           <td
             class=""
@@ -31,7 +31,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -221,11 +221,11 @@
+@@ -229,11 +229,11 @@
           </td>
           <td
             class=""
@@ -44,7 +44,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -277,11 +277,11 @@
+@@ -285,11 +285,11 @@
           </td>
           <td
             class=""
@@ -57,7 +57,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -333,11 +333,11 @@
+@@ -341,11 +341,11 @@
           </td>
           <td
             class=""
@@ -70,7 +70,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -389,11 +389,11 @@
+@@ -397,11 +397,11 @@
           </td>
           <td
             class=""
@@ -83,7 +83,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -445,11 +445,11 @@
+@@ -453,11 +453,11 @@
           </td>
           <td
             class=""
@@ -96,7 +96,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -501,11 +501,11 @@
+@@ -509,11 +509,11 @@
           </td>
           <td
             class=""
@@ -109,7 +109,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -557,11 +557,11 @@
+@@ -565,11 +565,11 @@
           </td>
           <td
             class=""
@@ -122,7 +122,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -613,11 +613,11 @@
+@@ -621,11 +621,11 @@
           </td>
           <td
             class=""
@@ -135,7 +135,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -669,11 +669,11 @@
+@@ -677,11 +677,11 @@
           </td>
           <td
             class=""
@@ -148,7 +148,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -725,11 +725,11 @@
+@@ -733,11 +733,11 @@
           </td>
           <td
             class=""
@@ -161,7 +161,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -781,11 +781,11 @@
+@@ -789,11 +789,11 @@
           </td>
           <td
             class=""
@@ -174,7 +174,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -837,11 +837,11 @@
+@@ -845,11 +845,11 @@
           </td>
           <td
             class=""
@@ -187,7 +187,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -893,11 +893,11 @@
+@@ -901,11 +901,11 @@
           </td>
           <td
             class=""
@@ -200,7 +200,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -949,11 +949,11 @@
+@@ -957,11 +957,11 @@
           </td>
           <td
             class=""
@@ -213,7 +213,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1005,11 +1005,11 @@
+@@ -1013,11 +1013,11 @@
           </td>
           <td
             class=""
@@ -226,7 +226,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1061,11 +1061,11 @@
+@@ -1069,11 +1069,11 @@
           </td>
           <td
             class=""
@@ -239,7 +239,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1117,11 +1117,11 @@
+@@ -1125,11 +1125,11 @@
           </td>
           <td
             class=""
@@ -252,7 +252,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1173,11 +1173,11 @@
+@@ -1181,11 +1181,11 @@
           </td>
           <td
             class=""
@@ -265,7 +265,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1229,11 +1229,11 @@
+@@ -1237,11 +1237,11 @@
           </td>
           <td
             class=""
@@ -278,7 +278,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1285,11 +1285,11 @@
+@@ -1293,11 +1293,11 @@
           </td>
           <td
             class=""
@@ -291,7 +291,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1341,11 +1341,11 @@
+@@ -1349,11 +1349,11 @@
           </td>
           <td
             class=""
@@ -304,7 +304,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1397,11 +1397,11 @@
+@@ -1405,11 +1405,11 @@
           </td>
           <td
             class=""
@@ -317,7 +317,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1453,11 +1453,11 @@
+@@ -1461,11 +1461,11 @@
           </td>
           <td
             class=""
@@ -330,7 +330,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1509,11 +1509,11 @@
+@@ -1517,11 +1517,11 @@
           </td>
           <td
             class=""
@@ -343,7 +343,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1565,11 +1565,11 @@
+@@ -1573,11 +1573,11 @@
           </td>
           <td
             class=""
@@ -356,7 +356,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1621,11 +1621,11 @@
+@@ -1629,11 +1629,11 @@
           </td>
           <td
             class=""
@@ -369,7 +369,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1677,11 +1677,11 @@
+@@ -1685,11 +1685,11 @@
           </td>
           <td
             class=""
@@ -382,7 +382,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1733,11 +1733,11 @@
+@@ -1741,11 +1741,11 @@
           </td>
           <td
             class=""
@@ -395,7 +395,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1789,11 +1789,11 @@
+@@ -1797,11 +1797,11 @@
           </td>
           <td
             class=""
@@ -408,7 +408,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1845,11 +1845,11 @@
+@@ -1853,11 +1853,11 @@
           </td>
           <td
             class=""
@@ -421,7 +421,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1901,11 +1901,11 @@
+@@ -1909,11 +1909,11 @@
           </td>
           <td
             class=""
@@ -434,7 +434,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1957,11 +1957,11 @@
+@@ -1965,11 +1965,11 @@
           </td>
           <td
             class=""
@@ -447,7 +447,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -2013,11 +2013,11 @@
+@@ -2021,11 +2021,11 @@
           </td>
           <td
             class=""
@@ -460,7 +460,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -2069,11 +2069,11 @@
+@@ -2077,11 +2077,11 @@
           </td>
           <td
             class=""
@@ -473,7 +473,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -2106,15 +2106,52 @@
+@@ -2114,15 +2114,52 @@
           </td>
         </tr>
       </tbody>
@@ -535,7 +535,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -109,11 +109,11 @@
+@@ -117,11 +117,11 @@
           </td>
           <td
             class=""
@@ -548,7 +548,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -165,11 +165,11 @@
+@@ -173,11 +173,11 @@
           </td>
           <td
             class=""
@@ -561,7 +561,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -221,11 +221,11 @@
+@@ -229,11 +229,11 @@
           </td>
           <td
             class=""
@@ -574,7 +574,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -277,11 +277,11 @@
+@@ -285,11 +285,11 @@
           </td>
           <td
             class=""
@@ -587,7 +587,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -333,11 +333,11 @@
+@@ -341,11 +341,11 @@
           </td>
           <td
             class=""
@@ -600,7 +600,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -389,11 +389,11 @@
+@@ -397,11 +397,11 @@
           </td>
           <td
             class=""
@@ -613,7 +613,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -445,11 +445,11 @@
+@@ -453,11 +453,11 @@
           </td>
           <td
             class=""
@@ -626,7 +626,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -501,11 +501,11 @@
+@@ -509,11 +509,11 @@
           </td>
           <td
             class=""
@@ -639,7 +639,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -557,11 +557,11 @@
+@@ -565,11 +565,11 @@
           </td>
           <td
             class=""
@@ -652,7 +652,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -613,11 +613,11 @@
+@@ -621,11 +621,11 @@
           </td>
           <td
             class=""
@@ -665,7 +665,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -669,11 +669,11 @@
+@@ -677,11 +677,11 @@
           </td>
           <td
             class=""
@@ -678,7 +678,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -725,11 +725,11 @@
+@@ -733,11 +733,11 @@
           </td>
           <td
             class=""
@@ -691,7 +691,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -781,11 +781,11 @@
+@@ -789,11 +789,11 @@
           </td>
           <td
             class=""
@@ -704,7 +704,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -837,11 +837,11 @@
+@@ -845,11 +845,11 @@
           </td>
           <td
             class=""
@@ -717,7 +717,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -893,11 +893,11 @@
+@@ -901,11 +901,11 @@
           </td>
           <td
             class=""
@@ -730,7 +730,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -949,11 +949,11 @@
+@@ -957,11 +957,11 @@
           </td>
           <td
             class=""
@@ -743,7 +743,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1005,11 +1005,11 @@
+@@ -1013,11 +1013,11 @@
           </td>
           <td
             class=""
@@ -756,7 +756,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1061,11 +1061,11 @@
+@@ -1069,11 +1069,11 @@
           </td>
           <td
             class=""
@@ -769,7 +769,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1117,11 +1117,11 @@
+@@ -1125,11 +1125,11 @@
           </td>
           <td
             class=""
@@ -782,7 +782,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1173,11 +1173,11 @@
+@@ -1181,11 +1181,11 @@
           </td>
           <td
             class=""
@@ -795,7 +795,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1229,11 +1229,11 @@
+@@ -1237,11 +1237,11 @@
           </td>
           <td
             class=""
@@ -808,7 +808,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1285,11 +1285,11 @@
+@@ -1293,11 +1293,11 @@
           </td>
           <td
             class=""
@@ -821,7 +821,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1341,11 +1341,11 @@
+@@ -1349,11 +1349,11 @@
           </td>
           <td
             class=""
@@ -834,7 +834,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1397,11 +1397,11 @@
+@@ -1405,11 +1405,11 @@
           </td>
           <td
             class=""
@@ -847,7 +847,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1453,11 +1453,11 @@
+@@ -1461,11 +1461,11 @@
           </td>
           <td
             class=""
@@ -860,7 +860,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1509,11 +1509,11 @@
+@@ -1517,11 +1517,11 @@
           </td>
           <td
             class=""
@@ -873,7 +873,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1565,11 +1565,11 @@
+@@ -1573,11 +1573,11 @@
           </td>
           <td
             class=""
@@ -886,7 +886,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1621,11 +1621,11 @@
+@@ -1629,11 +1629,11 @@
           </td>
           <td
             class=""
@@ -899,7 +899,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1677,11 +1677,11 @@
+@@ -1685,11 +1685,11 @@
           </td>
           <td
             class=""
@@ -912,7 +912,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1733,11 +1733,11 @@
+@@ -1741,11 +1741,11 @@
           </td>
           <td
             class=""
@@ -925,7 +925,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1789,11 +1789,11 @@
+@@ -1797,11 +1797,11 @@
           </td>
           <td
             class=""
@@ -938,7 +938,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1845,11 +1845,11 @@
+@@ -1853,11 +1853,11 @@
           </td>
           <td
             class=""
@@ -951,7 +951,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1901,11 +1901,11 @@
+@@ -1909,11 +1909,11 @@
           </td>
           <td
             class=""
@@ -964,7 +964,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -1957,11 +1957,11 @@
+@@ -1965,11 +1965,11 @@
           </td>
           <td
             class=""
@@ -977,7 +977,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -2013,11 +2013,11 @@
+@@ -2021,11 +2021,11 @@
           </td>
           <td
             class=""
@@ -990,7 +990,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -2069,11 +2069,11 @@
+@@ -2077,11 +2077,11 @@
           </td>
           <td
             class=""
@@ -1003,7 +1003,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -2106,52 +2106,15 @@
+@@ -2114,52 +2114,15 @@
           </td>
         </tr>
       </tbody>
@@ -1065,7 +1065,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -109,11 +109,11 @@
+@@ -117,11 +117,11 @@
           </td>
           <td
             class=""
@@ -1078,7 +1078,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -221,11 +221,11 @@
+@@ -229,11 +229,11 @@
           </td>
           <td
             class=""
@@ -1091,7 +1091,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -277,11 +277,11 @@
+@@ -285,11 +285,11 @@
           </td>
           <td
             class=""
@@ -1104,7 +1104,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -333,11 +333,11 @@
+@@ -341,11 +341,11 @@
           </td>
           <td
             class=""
@@ -1117,7 +1117,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -2106,15 +2106,20 @@
+@@ -2114,15 +2114,20 @@
           </td>
         </tr>
       </tbody>
@@ -1147,7 +1147,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -221,11 +221,11 @@
+@@ -229,11 +229,11 @@
           </td>
           <td
             class=""
@@ -1160,7 +1160,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -277,11 +277,11 @@
+@@ -285,11 +285,11 @@
           </td>
           <td
             class=""
@@ -1173,7 +1173,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -333,11 +333,11 @@
+@@ -341,11 +341,11 @@
           </td>
           <td
             class=""
@@ -1186,7 +1186,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -2106,20 +2106,17 @@
+@@ -2114,20 +2114,17 @@
           </td>
         </tr>
       </tbody>
@@ -1216,7 +1216,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -277,11 +277,11 @@
+@@ -285,11 +285,11 @@
           </td>
           <td
             class=""
@@ -1229,7 +1229,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -2106,17 +2106,18 @@
+@@ -2114,17 +2114,18 @@
           </td>
         </tr>
       </tbody>
@@ -1257,7 +1257,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -333,11 +333,11 @@
+@@ -341,11 +341,11 @@
           </td>
           <td
             class=""
@@ -1270,7 +1270,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -2106,18 +2106,19 @@
+@@ -2114,18 +2114,19 @@
           </td>
         </tr>
       </tbody>
@@ -1299,7 +1299,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -333,11 +333,11 @@
+@@ -341,11 +341,11 @@
           </td>
           <td
             class=""
@@ -1312,7 +1312,7 @@ Snapshot Diff:
           <td
             class=""
           >
-@@ -2106,19 +2106,18 @@
+@@ -2114,19 +2114,18 @@
           </td>
         </tr>
       </tbody>

src/plugin-hooks/tests/__snapshots__/useSortBy.test.js.snap

@@ -20,7 +20,7 @@ Snapshot Diff:
             class=""
             colspan="1"
             style="cursor: pointer;"
-@@ -87,104 +89,104 @@
+@@ -89,104 +91,104 @@
           class=""
         >
           <td
@@ -163,7 +163,7 @@ Snapshot Diff:
           <th
             class=""
             colspan="1"
-@@ -89,36 +89,36 @@
+@@ -91,36 +91,36 @@
           class=""
         >
           <td
@@ -206,7 +206,7 @@ Snapshot Diff:
         <tr
           class=""
         >
-@@ -157,36 +157,36 @@
+@@ -159,36 +159,36 @@
           class=""
         >
           <td

src/plugin-hooks/tests/useAbsoluteLayout.test.js

@@ -0,0 +1,142 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { useTable } from '../../hooks/useTable'
+import { useAbsoluteLayout } from '../useAbsoluteLayout'
+
+const data = [
+  {
+    firstName: 'tanner',
+    lastName: 'linsley',
+    age: 29,
+    visits: 100,
+    status: 'In Relationship',
+    progress: 50,
+  },
+  {
+    firstName: 'derek',
+    lastName: 'perkins',
+    age: 30,
+    visits: 40,
+    status: 'Single',
+    progress: 80,
+  },
+  {
+    firstName: 'joe',
+    lastName: 'bergevin',
+    age: 45,
+    visits: 20,
+    status: 'Complicated',
+    progress: 10,
+  },
+]
+
+const defaultColumn = {
+  Cell: ({ cell: { value }, column: { id } }) => `${id}: ${value}`,
+  width: 200,
+  minWidth: 100,
+  maxWidth: 300,
+}
+
+function Table({ columns, data }) {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+    },
+    useAbsoluteLayout
+  )
+
+  return (
+    <div {...getTableProps()} className="table">
+      <div>
+        {headerGroups.map(headerGroup => (
+          <div {...headerGroup.getHeaderGroupProps()} className="row">
+            {headerGroup.headers.map(column => (
+              <div {...column.getHeaderProps()} className="cell header">
+                {column.render('Header')}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      <div {...getTableBodyProps()}>
+        {rows.map(
+          (row, i) =>
+            prepareRow(row) || (
+              <div {...row.getRowProps()} className="row">
+                {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',
+            width: 250,
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+            width: 350,
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+            minWidth: 300,
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+            maxWidth: 150,
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  return <Table columns={columns} data={data} />
+}
+
+test('renders a table', () => {
+  const { asFragment } = render(<App />)
+
+  expect(asFragment()).toMatchSnapshot()
+})