v7.0.1

* Add cell’s value to its renderer back

* Update useTable.js

Co-authored-by: Tanner Linsley <tannerlinsley@gmail.com>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,18 +3,13 @@ name: Bug report
 about: Create a report to help us improve
 ---
 
-# Using v6?
-
-v6 is now considered feature complete to its current abilities and limitations. We are not actively working to fix any issues for v6 any more. We will, however, merge any non-breaking pull requests submitted to fix anything in v6.
-
-# Using v7?
-
-Thanks for using the beta version of React Table v7! We're very excited about it.
-
-**Describe the bug**
+**Describe the bug (required)**
 A clear and concise description of what the bug is.
 
-**To Reproduce**
+**Provide an example via Codesandbox! (required)**
+Use a new [react-table codesandbox](https://codesandbox.io/s/m5lxzzpz69) to reproduce the issue.
+
+**Steps To Reproduce (required)**
 Steps to reproduce the behavior:
 
 1. Go to '...'
@@ -22,12 +17,9 @@ Steps to reproduce the behavior:
 3. Scroll down to '....'
 4. See error
 
-**Expected behavior**
+**Expected behavior (Recommended)**
 A clear and concise description of what you expected to happen.
 
-**Codesandbox!**
-Use a new [react-table codesandbox](https://codesandbox.io/s/m5lxzzpz69) to reproduce the issue.
-
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
 

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,9 +1,8 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-
 ---
 
 # STOP
 
-We do not track feature requests through Github. Please use the [Spectrum React Table Forum](https://spectrum.chat/react-table) to talk about new ideas and features.
+We do not track feature requests through Github. Please use [Github Discussions](https://github.com/tannerlinsley/react-table/discussions) to talk about new ideas and features.

.github/ISSUE_TEMPLATE/questions--support---help.md

@@ -1,11 +1,10 @@
 ---
 name: Questions, Support & Help
 about: Looking for help? Need a question answered?
-
 ---
 
 # STOP
 
-We do not use Github to track general support. Please use our public support forum at https://spectrum.chat/react-table.
+We do not use Github to track general support. Please use our public support forum at https://github.com/tannerlinsley/react-table/discussions.
 
 NOTE: If a support/help/question issue is opened, it will be closed immediately and be redirected to the forum. Thanks for helping us keep our issues clean and productive!

.gitignore

@@ -13,3 +13,4 @@ react-table.css
 .vscode
 package-lock.json
 coverage
+.docz

.nvmrc

@@ -0,0 +1 @@
+v12.13.1

CHANGELOG.md

@@ -1,3 +1,16 @@
+---
+name: Changelog
+route: /changelog
+---
+
+# React Table Changelog
+
+## 7.0.1 🎉
+
+- Added the `value` property to cell renderers so that destructurin the value from the `cell` property is now not necessary. This should help with people migrating from v6 and also just to cut down on noise in cell renderers
+- Fixed an issue where rollup would not build correctly
+- Fixed an issue where a page index of `-1` would result in an error
+
 ## 7.0.0 🎉
 
 - Fixed an issue where page options array could be empty

CODE_OF_CONDUCT.md

@@ -1,3 +1,8 @@
+---
+name: Code of Conduct
+route: /code-of-conduct
+---
+
 # Contributor Covenant Code of Conduct
 
 ## Our Pledge

CONTRIBUTING.md

@@ -1,12 +1,17 @@
+---
+name: Contributing
+route: /contributing
+---
+
 # Contributing
 
 ## Questions
 
-If you have questions about implementation details, help or support, then please use our dedicated community forum at [Spectrum.chat/react-table](https://spectrum.chat/react-table) **PLEASE NOTE:** If you choose to instead open an issue for your question, your issue will be immediately closed and redirected to the forum.
+If you have questions about implementation details, help or support, then please use our dedicated community forum at [Github Discussions](https://github.com/tannerlinsley/react-table/discussions) **PLEASE NOTE:** If you choose to instead open an issue for your question, your issue will be immediately closed and redirected to the forum.
 
 ## Reporting Issues
 
-If you have found what you think is a bug, please [file an issue](https://github.com/tannerlinsley/react-table/issues/new). **PLEASE NOTE:** Issues that are identified as implementation questions or non-issues will be immediately closed and redirected to [Spectrum.chat/react-table](https://spectrum.chat/react-table)
+If you have found what you think is a bug, please [file an issue](https://github.com/tannerlinsley/react-table/issues/new). **PLEASE NOTE:** Issues that are identified as implementation questions or non-issues will be immediately closed and redirected to [Github Discussions](https://github.com/tannerlinsley/react-table/discussions)
 
 ## Suggesting new features
 
@@ -23,6 +28,6 @@ If you have been assigned to fix an issue or develop a new feature, please follo
 - Implement your changes and tests to files in the `src/` directory and corresponding test files
 - To run examples, follow their individual directions. Usually this is just `$ yarn && yarn start`.
 - To run examples using your local build, link to the local `react-table` by running `$ yarn link react-table` from the example's directory
-- Document your changes in the root `README.md`
+- Document your changes in the appropriate doc page
 - To stage a commit, run `yarn commit`
 - Submit PR for review

README.md

@@ -1,3 +1,8 @@
+---
+name: Getting Started
+route: /
+---
+
 ![React Table Header](https://github.com/tannerlinsley/react-table/raw/master/media/header.png)
 
 <img src='https://github.com/tannerlinsley/react-table/raw/master/media/logo.png' width='300'/>
@@ -5,15 +10,15 @@
 Hooks for building **lightweight, fast and extendable datagrids** for React
 
 <a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
-  <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">
+  <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack" />
 </a><a href="https://github.com/tannerlinsley/react-table/actions?table=workflow%3A%22react-table+tests%22">
 <img src="https://github.com/tannerlinsley/react-table/workflows/react-table%20tests/badge.svg" />
 </a><a href="https://npmjs.com/package/react-table" target="\_parent">
   <img alt="" src="https://img.shields.io/npm/dm/react-table.svg" />
 </a><a href="https://bundlephobia.com/result?p=react-table@latest" target="\_parent">
   <img alt="" src="https://badgen.net/bundlephobia/minzip/react-table@latest" />
-</a><a href="https://spectrum.chat/react-table">
-  <img alt="Join the community on Spectrum" src="https://withspectrum.github.io/badge/badge.svg" />
+</a><a href="https://github.com/tannerlinsley/react-table/discussions">
+  <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
 </a><a href="https://github.com/tannerlinsley/react-table" target="\_parent">
   <img alt="" src="https://img.shields.io/github/stars/tannerlinsley/react-table.svg?style=social&label=Star" />
 </a><a href="https://twitter.com/tannerlinsley" target="\_parent">
@@ -26,7 +31,7 @@ Enjoy this library? Try them all! [React Query](https://github.com/tannerlinsley
 
 ## Features
 
-- Lightweight (5kb - 12kb+ depending on features used and tree-shaking)
+- Lightweight (5kb - 14kb+ depending on features used and tree-shaking)
 - Headless (100% customizable, Bring-your-own-UI)
 - Auto out of the box, fully controllable API
 - Sorting (Multi and Stable)
@@ -43,14 +48,7 @@ Enjoy this library? Try them all! [React Query](https://github.com/tannerlinsley
 
 ## Documentation
 
-- [Installation](./docs/installation.md) - Walk through how to install React Table
-- [Concepts](./docs/concepts.md) - Read how React Table works and how you can use it better
-- [Examples](./docs/examples.md) - Experience and learn from some examples and guides of how to use React Table and implement common patterns
-- [API](./docs/api/README.md) - Get to know React Table's API
-- [FAQ](./docs/faq.md) - Learn how to use React Table for specific challenges and tasks
-- [Previous Versions](#previous-versions)
-- [Contributing](./CONTRIBUTING.md) - Become familiar with how to contribute back to React Table
-- [Code of Conduct](./CODE_OF_CONDUCT.md) - Be a good React Table citizen by following these repository rules
+Visit our new documentation site at https://react-table.js.org
 
 ## Sponsors
 
@@ -61,7 +59,7 @@ This library is being built and maintained by me, @tannerlinsley and I am always
     <tr>
       <td align="center" valign="middle">
         <a href="https://github.com/sponsors/tannerlinsley" target="_blank">
-          <img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/diamond.png">
+          <img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/diamond.png" />
         </a>
       </td>
       <td align="center" valign="middle">
@@ -78,12 +76,12 @@ This library is being built and maintained by me, @tannerlinsley and I am always
     <tr>
       <td align="center" valign="middle">
         <a href="https://github.com/sponsors/tannerlinsley/" target="_blank">
-          <img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/platinum.png">
+          <img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/platinum.png" />
         </a>
       </td>
       <td align="center" valign="middle">
         <a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
-          <img width='225' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-retool.png">
+          <img width='300' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-retool.png" />
         </a>
       </td>
       <td align="center" valign="middle">
@@ -100,12 +98,12 @@ This library is being built and maintained by me, @tannerlinsley and I am always
     <tr>
       <td align="center" valign="middle">
         <a href="https://github.com/sponsors/tannerlinsley/" target="_blank">
-          <img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold.png">
+          <img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold.png" />
         </a>
       </td>
       <td align="center" valign="middle">
         <a href="https://nozzle.io" target="_blank">
-          <img width='225' src="https://nozzle.io/img/logo-blue.png">
+          <img width='225' src="https://nozzle.io/img/logo-blue.png" />
         </a>
       </td>
       <td align="center" valign="middle">
@@ -122,12 +120,17 @@ This library is being built and maintained by me, @tannerlinsley and I am always
     <tr>
       <td align="center" valign="middle">
         <a href="https://github.com/sponsors/tannerlinsley/" target="_blank">
-          <img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver.png">
+          <img width='150' src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver.png" />
         </a>
       </td>
        <td align="center" valign="middle">
         <a href="https://tripwire.com" target="_blank">
-          <img width='225' src="https://www.tripwire.com/-/media/tripwiredotcom/icons/tripwire-logo-footer.svg">
+          <img width='170' src="https://www.tripwire.com/-/media/tripwiredotcom/icons/tripwire-logo-footer.svg" />
+        </a>
+      </td>
+      <td align="center" valign="middle">
+        <a href="https://www.fream.pl/" target="_blank">
+          <img width='170' src="https://www.fream.pl/wp-content/uploads/2017/08/logo.png" />
         </a>
       </td>
       <td align="center" valign="middle">
@@ -185,6 +188,7 @@ This library is being built and maintained by me, @tannerlinsley and I am always
           <li>Janus Reith (@janus-reith)</li>
           <li>Timo Mämecke (@timomeh)</li>
           <li>Tyler Reiff (@reiff12)</li>
+          <li>Matt Stvartak (@mattstvartak)</li>
         </ul>
       </td>
       <td>

docs/README.md

@@ -1 +0,0 @@
-To get started with React Table, [click here](../README.md), or select a specific document from this directory.

docs/api/README.md

@@ -1,3 +1,9 @@
+---
+name: Overview
+route: /api
+menu: API
+---
+
 # API
 
 React Table uses React Hooks both internally and externally for almost all of its configuration and lifecycle management. Naturally, this is what allows React Table to be headless and lightweight while still having a concise and simple API.
@@ -5,24 +11,24 @@ React Table uses React Hooks both internally and externally for almost all of it
 React Table is essentially a compatible collection of **custom React hooks**:
 
 - The primary React Table hook
-  - [`useTable`](./useTable.md)
+  - [`useTable`](./api/useTable)
 - Plugin Hooks
   - Core Plugin Hooks
-    - [`useGroupBy`](./useGroupBy.md)
-    - [`useFilters`](./useFilters.md)
-    - [`useGlobalFilter`](./useGlobalFilter.md)
-    - [`useSortBy`](./useSortBy.md)
-    - [`useExpanded`](./useExpanded.md)
-    - [`usePagination`](./usePagination.md)
-    - [`useTokenPagination` (Coming Soon)](./useTokenPagination.md)
-    - [`useRowSelect`](./useRowSelect.md)
-    - [`useRowState`](./useRowState.md)
-    - [`useColumnOrder`](./useColumnOrder.md)
+    - [`useGroupBy`](./api/useGroupBy)
+    - [`useFilters`](./api/useFilters)
+    - [`useGlobalFilter`](./api/useGlobalFilter)
+    - [`useSortBy`](./api/useSortBy)
+    - [`useExpanded`](./api/useExpanded)
+    - [`usePagination`](./api/usePagination)
+    - [`useTokenPagination` (Coming Soon)](./api/useTokenPagination)
+    - [`useRowSelect`](./api/useRowSelect)
+    - [`useRowState`](./api/useRowState)
+    - [`useColumnOrder`](./api/useColumnOrder)
   - Layout Hooks
-    - [`useBlockLayout`](./useBlockLayout.md)
-    - [`useAbsoluteLayout`](./useAbsoluteLayout.md)
-    - [`useFlexLayout`](./useFlexLayout.md)
-    - [`useResizeColumns`](./useResizeColumns.md)
+    - [`useBlockLayout`](./api/useBlockLayout)
+    - [`useAbsoluteLayout`](./api/useAbsoluteLayout)
+    - [`useFlexLayout`](./api/useFlexLayout)
+    - [`useResizeColumns`](./api/useResizeColumns)
 - 3rd Party Plugin Hooks
   - Want your custom plugin hook listed here? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)
 
@@ -65,4 +71,4 @@ The order and usage of plugin hooks must follow The Laws of Hooks, just like any
 
 ### Option Memoization
 
-React Table relies on memoization to determine when state and side effects should update or be calculated. This means that every option you pass to `useTable` should be memoized either via `React.useMemo` (for objects) or `React.useCallback` (for functions).
+React Table relies on memoization to determine when state and side effects should update or be calculated. This means that every option you pass to `useTable` should be memoized either via [`React.useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo) (for objects) or [`React.useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback) (for functions).

docs/api/useAbsoluteLayout.md

@@ -1,3 +1,9 @@
+---
+name: useAbsoluteLayout
+route: /api/useAbsoluteLayout
+menu: API
+---
+
 # `useAbsoluteLayout`
 
 - Plugin Hook

docs/api/useBlockLayout.md

@@ -1,3 +1,9 @@
+---
+name: useBlocklayout
+route: /api/useBlocklayout
+menu: API
+---
+
 # `useBlocklayout`
 
 - Plugin Hook

docs/api/useColumnOrder.md

@@ -1,3 +1,9 @@
+---
+name: useColumnOrder
+route: /api/useColumnOrder
+menu: API
+---
+
 # `useColumnOrder`
 
 - Plugin Hook

docs/api/useExpanded.md

@@ -1,3 +1,9 @@
+---
+name: useExpanded
+route: /api/useExpanded
+menu: API
+---
+
 # `useExpanded`
 
 - Plugin Hook
@@ -33,7 +39,7 @@ The following options are supported via the main options object passed to `useTa
   - When `true`, the `expanded` state will automatically reset if any of the following conditions are met:
     - `data` is changed
   - To disable, set to `false`
-  - For more information see the FAQ ["How do I stop my table state from automatically resetting when my data changes?"](../faq.md#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
+  - For more information see the FAQ ["How do I stop my table state from automatically resetting when my data changes?"](/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
 
 ### Instance Properties
 

docs/api/useFilters.md

@@ -1,3 +1,9 @@
+---
+name: useFilters
+route: /api/useFilters
+menu: API
+---
+
 # `useFilters`
 
 - Plugin Hook
@@ -30,7 +36,7 @@ The following options are supported via the main options object passed to `useTa
   - When `true`, the `filters` state will automatically reset if any of the following conditions are met:
     - `data` is changed
   - To disable, set to `false`
-  - For more information see the FAQ ["How do I stop my table state from automatically resetting when my data changes?"](./faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
+  - For more information see the FAQ ["How do I stop my table state from automatically resetting when my data changes?"](../faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
 
 ### Column Options
 

docs/api/useFlexLayout.md

@@ -1,3 +1,9 @@
+---
+name: useFlexLayout
+route: /api/useFlexLayout
+menu: API
+---
+
 # `useFlexLayout`
 
 - Plugin Hook

docs/api/useGlobalFilter.md

@@ -1,3 +1,9 @@
+---
+name: useGlobalFilter
+route: /api/useGlobalFilter
+menu: API
+---
+
 # `useGlobalFilter`
 
 - Plugin Hook

docs/api/useGroupBy.md

@@ -1,3 +1,9 @@
+---
+name: useGroupBy
+route: /api/useGroupBy
+menu: API
+---
+
 # `useGroupBy`
 
 - Plugin Hook

docs/api/usePagination.md

@@ -1,3 +1,8 @@
+---
+name: usePagination
+route: /api/usePagination
+menu: API
+---
 # `usePagination`
 
 - Plugin Hook
@@ -34,7 +39,7 @@ The following options are supported via the main options object passed to `useTa
     - `manualFilters` is `false` and `state.filters` is changed
     - `manualGroupBy` is `false` and `state.groupBy` is changed
   - To disable, set to `false`
-  - For more information see the FAQ ["How do I stop my table state from automatically resetting when my data changes?"](../faq.md#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
+  - For more information see the FAQ ["How do I stop my table state from automatically resetting when my data changes?"](/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
 - `paginateExpandedRows: Bool`
   - Optional
   - Only applies when using the `useExpanded` plugin hook simultaneously
@@ -81,5 +86,5 @@ The following values are provided to the table `instance`:
   - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination)
   - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination)
 - Controlled Pagination
-  - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination)
-  - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination)
+  - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
+  - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled)

docs/api/useResizeColumns.md

@@ -1,3 +1,9 @@
+---
+name: useResizeColumns
+route: /api/useResizeColumns
+menu: API
+---
+
 # `useResizeColumns`
 
 - Plugin Hook

docs/api/useRowSelect.md

@@ -1,3 +1,9 @@
+---
+name: useRowSelect
+route: /api/useRowSelect
+menu: API
+---
+
 # `useRowSelect`
 
 - Plugin Hook

docs/api/useRowState.md

@@ -1,3 +1,9 @@
+---
+name: useRowState
+route: /api/useRowState
+menu: API
+---
+
 # `useRowState`
 
 - Plugin Hook

docs/api/useSortBy.md

@@ -1,3 +1,9 @@
+---
+name: useSortBy
+route: /api/useSortBy
+menu: API
+---
+
 # `useSortBy`
 
 - Plugin Hook
@@ -49,7 +55,7 @@ The following options are supported via the main options object passed to `useTa
   - When `true`, the `sortBy` state will automatically reset if any of the following conditions are met:
     - `data` is changed
   - To disable, set to `false`
-  - For more information see the FAQ ["How do I stop my table state from automatically resetting when my data changes?"](../faq.md#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
+  - For more information see the FAQ ["How do I stop my table state from automatically resetting when my data changes?"](/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes)
 
 ### Column Options
 

docs/api/useTable.md

@@ -1,3 +1,9 @@
+---
+name: useTable
+route: /api/useTable
+menu: API
+---
+
 # `useTable`
 
 - Required
@@ -40,7 +46,7 @@ The following options are supported via the main options object passed to `useTa
   - If you need to control part of the table state, this is the place to do it.
   - This function is run on every single render, just like a hook and allows you to alter the final state of the table if necessary.
   - You can use hooks inside of this function, but most of the time, we just suggest using `React.useMemo` to memoize your state overrides.
-  - See the FAQ ["How can I manually control the table state?"](../faq.md#how-can-i-manually-control-the-table-state) for a an example.
+  - See the FAQ ["How can I manually control the table state?"](/faq#how-can-i-manually-control-the-table-state) for a an example.
 - `defaultColumn: Object`
   - Optional
   - Defaults to `{}`
@@ -95,7 +101,7 @@ The following options are supported on any column object you can pass to `column
   - If a function/component is passed, it will be used for formatting the header value, eg. You can use a `Header` function to dynamically format the header using any table or column state.
 - `Cell: Function | React.Component => JSX`
   - Optional
-  - Defaults to `({ cell: { value } }) => String(value)`
+  - Defaults to `({ value }) => String(value)`
   - 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.

docs/api/useTokenPagination.md

@@ -1,3 +1,9 @@
+---
+name: useTokenPagination
+route: /api/useTokenPagination
+menu: API
+---
+
 # `useTokenPagination (Coming Soon)`
 
 - Plugin Hook

docs/concepts.md

@@ -1,3 +1,8 @@
+---
+name: Concepts
+route: /concepts
+---
+
 # Concepts
 
 ## React Table is a "headless" UI library
@@ -23,11 +28,11 @@ At the heart of every React Table is the `useTable` hook and the table `instance
 
 ## Rendering your own UI
 
-As of React Table v7, **you the developer** are responsible for rendering your own UI, but don't let that intimidate you! Table UIs are fun and React Table makes it so easy to wire up your own table UI. The easiest way to learn how to build your own table UI is to [see some existing React Table examples](./examples.md)!
+As of React Table v7, **you the developer** are responsible for rendering your own UI, but don't let that intimidate you! Table UIs are fun and React Table makes it so easy to wire up your own table UI. The easiest way to learn how to build your own table UI is to [see some existing React Table examples](./examples)!
 
 ---
 
 After reading about React Table's concepts, you should:
-
-- [Check Out Some Examples](./examples.md)
-- [Study the API](./api/README.md)
+- [Follow the Quick Start](./quickstart)
+- [Check Out Some Examples](./examples)
+- [Study the API](./api)

docs/examples.md

@@ -1,82 +0,0 @@
-# Examples
-
-- **Simple** - All of these examples use automatic state management, meaning, they don't hoist any state out of the table or manually control anything. Start here for understanding the basics about how to build your table UI.
-  - Basic
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/basic)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
-  - Footers
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/footers)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/footers)
-  - Sorting
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/sorting)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sorting)
-  - Filtering
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/filtering)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/filtering)
-  - Grouping
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/grouping)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/grouping)
-  - Grouping (Single Column)
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/grouping-column)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/grouping-column)
-  - Pagination
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination)
-  - Row Selection
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-selection)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection)
-  - Expanding
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/expanding)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding)
-  - Sub Components
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/sub-components)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sub-components)
-  - Editable Data
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/editable-data)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/editable-data)
-  - Column Ordering
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/column-ordering)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-ordering)
-  - Column Hiding
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/column-hiding)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-hiding)
-  - Column Resizing
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/column-resizing)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-resizing)
-  - Data-Driven Classes and Styles
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/data-driven-classes-and-styles)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/data-driven-classes-and-styles)
-  - Row DnD
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-dnd)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-dnd)
-  - Full Width Table (Table Elements with collapsible content)
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/full-width-table)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-table)
-  - Full Width Resizable Table (via `useFlexLayout`)
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table)
-- **Complex**
-  - The "Kitchen Sink"
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
-- **Controlled** - These examples are more advanced because they demonstrate how to manually control and respond to the state of the table.
-  - Pagination (Controlled)
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
-    - [Open in CodeSandobx](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
-- **UI & Rendering** - These examples demonstrate how to use React Table with your favorite UI libraries or tools!
-  - Virtualized Rows (React-Window)
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
-  - Animated (Framer-Motion)
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
-  - Material-UI
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/material-UI-components)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-components)
-  - Material-UI Enhanced Table
-    - [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table)
-    - [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table)
-  - [ ] Styled-Components
-  - [ ] CSS
-  - [ ] Bootstrap
-- Want to write one of these examples or add another? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)

docs/examples.mdx

@@ -0,0 +1,16 @@
+---
+name: Examples
+route: /examples
+---
+
+# Examples
+
+- [**Simple**](./examples/simple) - All of these examples use automatic state management, meaning, they don't hoist any state out of the table or manually control anything. Start here for understanding the basics about how to build your table UI.
+
+- [**Complex**](./examples/complex) - These examples are more advanced because they demonstrate how to manually control and respond to the state of the table.
+
+- [**Controlled**](./examples/controlled) - These examples are more advanced because they demonstrate how to manually control and respond to the state of the table.
+
+- [**UI & Rendering**](./examples/ui) - These examples demonstrate how to use React Table with your favorite UI libraries or tools!
+
+* Want to add another example? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)

docs/examples/complex.mdx

@@ -0,0 +1,25 @@
+---
+name: Complex
+route: /examples/complex
+menu: Examples
+---
+
+# Complex
+
+These examples are more advanced because they demonstrate how to manually control and respond to the state of the table.
+
+## The "Kitchen Sink"
+
+This example includes Pagination, Sorting, Filtering, Grouping, Expandable Rows and Row Selection so it's called the _Kitchen Sink_.
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink)
+  <iframe
+    src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="tannerlinsley/react-table: kitchen-sink"
+    allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+  ></iframe>
+
+* Want to add another example? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)

docs/examples/controlled.mdx

@@ -0,0 +1,23 @@
+---
+name: Controlled
+route: /examples/controlled
+menu: Examples
+---
+
+# Controlled
+
+These examples are more advanced because they demonstrate how to manually control and respond to the state of the table.
+
+## Pagination (Controlled)
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled)
+  <iframe
+    src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/pagination-controlled?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="tannerlinsley/react-table: pagination-controlled"
+    allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+  ></iframe>
+
+* Want to add another example? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)

docs/examples/simple.mdx

@@ -0,0 +1,108 @@
+---
+name: Simple
+route: /examples/simple
+menu: Examples
+---
+
+# Simple
+
+All of these examples use automatic state management, meaning, they don't hoist any state out of the table or manually control anything. Start here for understanding the basics about how to build your table UI.
+
+## Basic
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/basic)
+- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/basic)
+  <iframe
+    src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/basic?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="tannerlinsley/react-table: basic"
+    allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+  ></iframe>
+
+## Footers
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/footers)
+- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/footers)
+
+## Sorting
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/sorting)
+- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/sorting)
+
+## Filtering
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/filtering)
+- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/filtering)
+
+## Grouping
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/grouping)
+- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/grouping)
+
+## Grouping (Single Column)
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/grouping-column)
+- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/grouping-column)
+
+## Pagination
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/pagination)
+- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/pagination)
+
+## Row Selection
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-selection)
+- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/row-selection)
+
+## Expanding
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/expanding)
+- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/sub-components)
+
+## Sub Components
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/sub-components)
+- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/sub-components)
+
+## Editable Data
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/editable-data)
+- [Open in CodeSandbox](https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/editable-data)
+
+## Column Ordering
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/column-ordering)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-ordering)
+
+## Column Hiding
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/column-hiding)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-hiding)
+
+## Column Resizing
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/column-resizing)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-resizing)
+
+## Data-Driven Classes and Styles
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/data-driven-classes-and-styles)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/data-driven-classes-and-styles)
+
+## Row DnD
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/row-dnd)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-dnd)
+
+## Full Width Table (Table Elements with collapsible content)
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/full-width-table)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-table)
+
+## Full Width Resizable Table (via `useFlexLayout`)
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table)
+
+* Want to add another example? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)

docs/examples/ui.mdx

@@ -0,0 +1,65 @@
+---
+name: UI/Rendering
+route: /examples/ui
+menu: Examples
+---
+
+# UI and Rendering
+
+These examples demonstrate how to use React Table with your favorite UI libraries or tools!
+
+## Virtualized Rows (React-Window)
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows)
+  <iframe
+    src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="tannerlinsley/react-table: virtualized-rows"
+    allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+  ></iframe>
+
+## Animated (Framer-Motion)
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/animated-framer-motion)
+  <iframe
+    src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/animated-framer-motion?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="tannerlinsley/react-table: animated-framer-motion"
+    allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+  ></iframe>
+
+## Material-UI
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/material-UI-components)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-components)
+  <iframe
+    src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/material-UI-components?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="tannerlinsley/react-table: material-UI-components"
+    allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+  ></iframe>
+
+## Material-UI Enhanced Table
+
+- [Source](https://github.com/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table)
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table)
+  <iframe
+    src="https://codesandbox.io/embed/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table?autoresize=1&fontsize=14&module=%2Fsrc%2FApp.js&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="tannerlinsley/react-table: material-UI-enhanced-table"
+    allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+  ></iframe>
+
+## Todo
+
+- [ ] Styled-Components
+- [ ] CSS
+- [ ] Bootstrap
+
+* Want to write one of these examples or add another? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)

docs/faq.md

@@ -1,3 +1,8 @@
+---
+name: FAQ
+route: /faq
+---
+
 # FAQ
 
 Below are some of the most frequently asked questions on how to use the React Table API to solve various table challenges you may encounter
@@ -108,13 +113,13 @@ React.useEffect(() => {
 
 useTable({
   ...
-  autoResetPage: !skipPageReset,
-  autoResetExpanded: !skipPageReset,
-  autoResetGroupBy: !skipPageReset,
-  autoResetSelectedRows: !skipPageReset,
-  autoResetSortBy: !skipPageReset,
-  autoResetFilters: !skipPageReset,
-  autoResetRowState: !skipPageReset,
+  autoResetPage: !skipPageResetRef.current,
+  autoResetExpanded: !skipPageResetRef.current,
+  autoResetGroupBy: !skipPageResetRef.current,
+  autoResetSelectedRows: !skipPageResetRef.current,
+  autoResetSortBy: !skipPageResetRef.current,
+  autoResetFilters: !skipPageResetRef.current,
+  autoResetRowState: !skipPageResetRef.current,
 })
 ```
 

docs/installation.md

@@ -1,3 +1,8 @@
+---
+name: Installation
+route: /installation
+---
+
 # Installation
 
 Install React Table as a dependency using `npm` or `yarn`
@@ -10,6 +15,12 @@ $ npm install react-table
 $ yarn add react-table
 ```
 
+React Table uses [Scarf](https://www.npmjs.com/package/@scarf/scarf) to collect
+anonymized installation analytics. These anlytics help support the maintainers
+of this library. However, if you'd like to opt out, you can do so by setting the
+environment variable `SCARF_ANALYTICS=false` before you install, or by setting
+`scarfSettings.enabled = false` in your project's `package.json`
+
 To import React Table:
 
 ```js
@@ -24,4 +35,4 @@ import {
 } from 'react-table'
 ```
 
-Once you've installed React Table, continue to [Concepts](./concepts.md) to read more about how to utilize its API
+Once you've installed React Table, continue to [Concepts](./concepts) to read more about how to utilize its API

docs/quickstart.mdx

@@ -0,0 +1,178 @@
+---
+name: Quick Start
+route: /quickstart
+---
+
+# Quick Start
+
+As explained in the [Concepts](./concepts) document, react-table is a headless tool, meaning you'll have to build your own UI. We recognize this can be potentially daunting, so here's a very basic table to start with.
+
+## Define Row Shape
+
+When thinking about a table, you typically have a number of rows split into a number of columns. While table configurations can get far more complex with nested columns, subrows, etc. for this basic quick start, we need to define some data. Note that this data must be defined using [`React.useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo) in order to take advantage of the power of memoization.
+
+```javascript
+const data = React.useMemo(
+  () => [
+    {
+      col1: 'Hello',
+      col2: 'World',
+    },
+    {
+      col1: 'react-table',
+      col2: 'rocks',
+    },
+    {
+      col1: 'whatever',
+      col2: 'you want',
+    },
+  ],
+  []
+)
+```
+
+## Define Columns
+
+The first step to using react-table is to create a set of column definitions to pass into the `useTable` hook. These columns must be defined using `React.useMemo` in order to take advantage of the power of memoization.
+
+```javascript
+const columns = React.useMemo(
+  () => [
+    {
+      Header: 'Column 1',
+      accessor: 'col1', // accessor is the "key" in the data
+    },
+    {
+      Header: 'Column 2',
+      accessor: 'col2',
+    },
+  ],
+  []
+)
+```
+
+## Implement `useTable` hook
+
+Now that you have the basic `columns` and `data` defined, you can pass those into `useTable` and retrieve the properties you need.
+
+```javascript
+const {
+  getTableProps,
+  getTableBodyProps,
+  headerGroups,
+  rows,
+  prepareRow,
+} = useTable({ columns, data })
+```
+
+If you're new to JavaScript (especially ES2015+), this syntax may look a little strange. The lefthand side of the assigment is using [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to extract the properties we need that are returned from the `useTable` hook (or function). On the right hand side, at a minimum, `useTable` needs to be provided with an object containing the memoized columns and data that we created above.
+
+## Build a basic UI structure
+
+OK, so that's great, we've implemented the hook, but we still don't have a table to show, right? Let's use the properties returned from `useTable` to build a basic table structure.
+
+```javascript
+return (
+  <table {...getTableProps()}>
+    <thead>
+      {headerGroups.map(headerGroup => (
+        <tr {...headerGroup.getHeaderGroupProps()}>
+          {headerGroup.headers.map(column => (
+            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
+          ))}
+        </tr>
+      ))}
+    </thead>
+    <tbody {...getTableBodyProps()}>
+      {rows.map(row => {
+        prepareRow(row)
+        return (
+          <tr {...row.getRowProps()}>
+            {row.cells.map(cell => {
+              return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+            })}
+          </tr>
+        )
+      })}
+    </tbody>
+  </table>
+)
+```
+
+Again, if you're relatively new to JavaScript (or ES2015+ syntax), you may wonder, "What is with all the ...s?". This is the [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) that _spreads_ all properties of an object (or array) without having to manually extract them all. So, with the first row, `<table {...getRowProps()}>` will return a `table` element with all of the properties returned by `getTableProps()`.
+
+## Final Result
+
+If we put all of this together, we should get a very basic (boring) table. (_Styles added just to make it a little more attractive..._)
+
+_The following example is a live component, so as you make changes in the code, it should update the table at the top._
+
+import { Playground } from 'docz'
+import { useTable } from '../src/hooks/useTable'
+
+<Playground>
+  {() => {
+    const data = React.useMemo(
+      () => [
+        {
+          col1: 'Hello',
+          col2: 'World',
+        },
+        {
+          col1: 'react-table',
+          col2: 'rocks',
+        },
+        {
+          col1: 'whatever',
+          col2: 'you want',
+        },
+      ],
+      []
+    )
+    const columns = React.useMemo(
+      () => [
+        {
+          Header: 'Column 1',
+          accessor: 'col1', // accessor is the "key" in the data
+        },
+        {
+          Header: 'Column 2',
+          accessor: 'col2',
+        },
+      ],
+      []
+    )
+    const {
+      getTableProps,
+      getTableBodyProps,
+      headerGroups,
+      rows,
+      prepareRow,
+    } = useTable({ columns, data })
+    return (
+      <table {...getTableProps()} style={{ border: 'solid 1px blue'}}>
+        <thead>
+          {headerGroups.map(headerGroup => (
+            <tr {...headerGroup.getHeaderGroupProps()}>
+              {headerGroup.headers.map(column => (
+                <th {...column.getHeaderProps()} style={{ borderBottom: 'solid 3px red', background: 'aliceblue', color: 'black', fontWeight: 'bold'}}>{column.render('Header')}</th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map(row => {
+            prepareRow(row)
+            return (
+              <tr {...row.getRowProps()}>
+                {row.cells.map(cell => {
+                  return <td {...cell.getCellProps()} style={{ padding: '10px', border: 'solid 1px gray', background: 'papayawhip'}}>{cell.render('Cell')}</td>
+                })}
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    )
+  }}
+</Playground>

doczrc.js

@@ -0,0 +1,23 @@
+export default {
+  title: 'React Table Documentation',
+  description: 'Documentation for the react-table library built in Docz',
+  ignore: ['docs/README.md', 'examples/**/*.md'],
+  propsParser: false,
+  port: 3002,
+  menu: [
+    'Getting Started',
+    'Installation',
+    'Concepts',
+    'Quick Start',
+    {
+      name: 'Examples',
+      menu: ['Simple', 'Complex', 'Controlled', 'UI/Rendering'],
+    },
+    { name: 'API', menu: ['Overview', 'useTable'] },
+    'FAQ',
+    'Contributing',
+    'Code of Conduct',
+    'Typescript',
+    'Changelog',
+  ],
+}

examples/basic/yarn.lock

@@ -1578,9 +1578,9 @@ acorn-walk@^6.0.1:
   integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
 
 acorn@^5.5.3:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
-  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
 
 acorn@^6.0.1, acorn@^6.0.4, acorn@^6.0.5, acorn@^6.0.7:
   version "6.2.0"

examples/column-hiding/yarn.lock

@@ -1578,9 +1578,9 @@ acorn-walk@^6.0.1:
   integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
 
 acorn@^5.5.3:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
-  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
 
 acorn@^6.0.1, acorn@^6.0.4, acorn@^6.0.5, acorn@^6.0.7:
   version "6.2.0"

examples/editable-data/src/App.js

@@ -46,7 +46,7 @@ const Styles = styled.div`
 
 // Create an editable cell renderer
 const EditableCell = ({
-  cell: { value: initialValue },
+  value: initialValue,
   row: { index },
   column: { id },
   updateMyData, // This is a custom function that we supplied to our table instance

examples/grouping-column/src/App.js

@@ -260,7 +260,7 @@ function App() {
             // then sum any of those counts if they are
             // aggregated further
             aggregate: 'count',
-            Aggregated: ({ cell: { value } }) => `${value} Names`,
+            Aggregated: ({ value }) => `${value} Names`,
           },
           {
             Header: 'Last Name',
@@ -270,7 +270,7 @@ function App() {
             // being aggregated, then sum those counts if
             // they are aggregated further
             aggregate: 'uniqueCount',
-            Aggregated: ({ cell: { value } }) => `${value} Unique Names`,
+            Aggregated: ({ value }) => `${value} Unique Names`,
           },
         ],
       },
@@ -282,14 +282,14 @@ function App() {
             accessor: 'age',
             // Aggregate the average age of visitors
             aggregate: 'average',
-            Aggregated: ({ cell: { value } }) => `${value} (avg)`,
+            Aggregated: ({ value }) => `${value} (avg)`,
           },
           {
             Header: 'Visits',
             accessor: 'visits',
             // Aggregate the sum of all visits
             aggregate: 'sum',
-            Aggregated: ({ cell: { value } }) => `${value} (total)`,
+            Aggregated: ({ value }) => `${value} (total)`,
           },
           {
             Header: 'Status',
@@ -300,7 +300,7 @@ function App() {
             accessor: 'progress',
             // Use our custom roundedMedian aggregator
             aggregate: roundedMedian,
-            Aggregated: ({ cell: { value } }) => `${value} (med)`,
+            Aggregated: ({ value }) => `${value} (med)`,
           },
         ],
       },

examples/grouping/src/App.js

@@ -197,7 +197,7 @@ function App() {
             // then sum any of those counts if they are
             // aggregated further
             aggregate: 'count',
-            Aggregated: ({ cell: { value } }) => `${value} Names`,
+            Aggregated: ({ value }) => `${value} Names`,
           },
           {
             Header: 'Last Name',
@@ -207,7 +207,7 @@ function App() {
             // being aggregated, then sum those counts if
             // they are aggregated further
             aggregate: 'uniqueCount',
-            Aggregated: ({ cell: { value } }) => `${value} Unique Names`,
+            Aggregated: ({ value }) => `${value} Unique Names`,
           },
         ],
       },
@@ -219,15 +219,14 @@ function App() {
             accessor: 'age',
             // Aggregate the average age of visitors
             aggregate: 'average',
-            Aggregated: ({ cell: { value } }) =>
-              `${Math.round(value * 100) / 100} (avg)`,
+            Aggregated: ({ value }) => `${Math.round(value * 100) / 100} (avg)`,
           },
           {
             Header: 'Visits',
             accessor: 'visits',
             // Aggregate the sum of all visits
             aggregate: 'sum',
-            Aggregated: ({ cell: { value } }) => `${value} (total)`,
+            Aggregated: ({ value }) => `${value} (total)`,
           },
           {
             Header: 'Status',
@@ -238,7 +237,7 @@ function App() {
             accessor: 'progress',
             // Use our custom roundedMedian aggregator
             aggregate: roundedMedian,
-            Aggregated: ({ cell: { value } }) => `${value} (med)`,
+            Aggregated: ({ value }) => `${value} (med)`,
           },
         ],
       },

examples/grouping/yarn.lock

@@ -1578,9 +1578,9 @@ acorn-walk@^6.0.1:
   integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
 
 acorn@^5.5.3:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
-  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
 
 acorn@^6.0.1, acorn@^6.0.4, acorn@^6.0.5, acorn@^6.0.7:
   version "6.2.0"

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

@@ -57,7 +57,7 @@ const Styles = styled.div`
 
 // Create an editable cell renderer
 const EditableCell = ({
-  cell: { value: initialValue },
+  value: initialValue,
   row: { index },
   column: { id },
   updateMyData, // This is a custom function that we supplied to our table instance
@@ -400,8 +400,8 @@ function Table({ columns, data, updateMyData, skipPageReset }) {
           })}
         </tbody>
       </table>
-      {/* 
-        Pagination can be built however you'd like. 
+      {/*
+        Pagination can be built however you'd like.
         This is just a very basic UI implementation:
       */}
       <div className="pagination">
@@ -514,7 +514,7 @@ function App() {
             // then sum any of those counts if they are
             // aggregated further
             aggregate: 'count',
-            Aggregated: ({ cell: { value } }) => `${value} Names`,
+            Aggregated: ({ value }) => `${value} Names`,
           },
           {
             Header: 'Last Name',
@@ -526,7 +526,7 @@ function App() {
             // being aggregated, then sum those counts if
             // they are aggregated further
             aggregate: 'uniqueCount',
-            Aggregated: ({ cell: { value } }) => `${value} Unique Names`,
+            Aggregated: ({ value }) => `${value} Unique Names`,
           },
         ],
       },
@@ -540,7 +540,7 @@ function App() {
             filter: 'equals',
             // Aggregate the average age of visitors
             aggregate: 'average',
-            Aggregated: ({ cell: { value } }) => `${value} (avg)`,
+            Aggregated: ({ value }) => `${value} (avg)`,
           },
           {
             Header: 'Visits',
@@ -549,7 +549,7 @@ function App() {
             filter: 'between',
             // Aggregate the sum of all visits
             aggregate: 'sum',
-            Aggregated: ({ cell: { value } }) => `${value} (total)`,
+            Aggregated: ({ value }) => `${value} (total)`,
           },
           {
             Header: 'Status',
@@ -564,7 +564,7 @@ function App() {
             filter: filterGreaterThan,
             // Use our custom roundedMedian aggregator
             aggregate: roundedMedian,
-            Aggregated: ({ cell: { value } }) => `${value} (med)`,
+            Aggregated: ({ value }) => `${value} (med)`,
           },
         ],
       },

examples/kitchen-sink/src/App.js

@@ -57,7 +57,7 @@ const Styles = styled.div`
 
 // Create an editable cell renderer
 const EditableCell = ({
-  cell: { value: initialValue },
+  value: initialValue,
   row: { index },
   column: { id },
   updateMyData, // This is a custom function that we supplied to our table instance
@@ -411,8 +411,8 @@ function Table({ columns, data, updateMyData, skipReset }) {
           })}
         </tbody>
       </table>
-      {/* 
-        Pagination can be built however you'd like. 
+      {/*
+        Pagination can be built however you'd like.
         This is just a very basic UI implementation:
       */}
       <div className="pagination">
@@ -543,7 +543,7 @@ function App() {
             // then sum any of those counts if they are
             // aggregated further
             aggregate: 'count',
-            Aggregated: ({ cell: { value } }) => `${value} Names`,
+            Aggregated: ({ value }) => `${value} Names`,
           },
           {
             Header: 'Last Name',
@@ -555,7 +555,7 @@ function App() {
             // being aggregated, then sum those counts if
             // they are aggregated further
             aggregate: 'uniqueCount',
-            Aggregated: ({ cell: { value } }) => `${value} Unique Names`,
+            Aggregated: ({ value }) => `${value} Unique Names`,
           },
         ],
       },
@@ -569,7 +569,7 @@ function App() {
             filter: 'equals',
             // Aggregate the average age of visitors
             aggregate: 'average',
-            Aggregated: ({ cell: { value } }) => `${value} (avg)`,
+            Aggregated: ({ value }) => `${value} (avg)`,
           },
           {
             Header: 'Visits',
@@ -578,7 +578,7 @@ function App() {
             filter: 'between',
             // Aggregate the sum of all visits
             aggregate: 'sum',
-            Aggregated: ({ cell: { value } }) => `${value} (total)`,
+            Aggregated: ({ value }) => `${value} (total)`,
           },
           {
             Header: 'Status',
@@ -593,7 +593,7 @@ function App() {
             filter: filterGreaterThan,
             // Use our custom roundedMedian aggregator
             aggregate: roundedMedian,
-            Aggregated: ({ cell: { value } }) => `${value} (med)`,
+            Aggregated: ({ value }) => `${value} (med)`,
           },
         ],
       },

examples/material-UI-enhanced-table/src/components/EnhancedTable.js

@@ -47,7 +47,7 @@ const inputStyle = {
 
 // Create an editable cell renderer
 const EditableCell = ({
-  cell: { value: initialValue },
+  value: initialValue,
   row: { index },
   column: { id },
   updateMyData, // This is a custom function that we supplied to our table instance

examples/pivoting/src/App.js

@@ -233,8 +233,8 @@ function App() {
         accessor: d => new Date(d.date),
         sortType: 'basic',
         aggregate: 'count',
-        Cell: ({ cell: { value } }) => (value ? dayjs(value).format('l') : ''),
-        Aggregated: ({ cell: { value } }) => `${value} Orders`,
+        Cell: ({ value }) => (value ? dayjs(value).format('l') : ''),
+        Aggregated: ({ value }) => `${value} Orders`,
       },
       {
         Header: 'Employee',
@@ -260,7 +260,7 @@ function App() {
         Header: 'Unit Cost',
         accessor: 'unitCost',
         aggregate: 'average',
-        Cell: ({ cell: { value } }) =>
+        Cell: ({ value }) =>
           typeof value !== 'undefined' ? (
             <div
               style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}
@@ -273,7 +273,7 @@ function App() {
         Header: 'Total',
         accessor: 'total',
         aggregate: 'sum',
-        Cell: ({ cell: { value } }) =>
+        Cell: ({ value }) =>
           typeof value !== 'undefined' ? (
             <div
               style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}

examples/row-selection/yarn.lock

@@ -1578,9 +1578,9 @@ acorn-walk@^6.0.1:
   integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
 
 acorn@^5.5.3:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
-  integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
 
 acorn@^6.0.1, acorn@^6.0.4, acorn@^6.0.5, acorn@^6.0.7:
   version "6.2.0"

examples/sorting/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.docz

examples/sorting/README.md

@@ -65,7 +65,7 @@ By default, the sorting will be `alphanumeric`. This can be changed in your `col
 Other options include `basic` and `datetime`.
 Note that if you're planning on sorting numbers between 0 and 1, `basic` sorting will be more accurate.
 
-More information can be found in the [API Docs](/docs/api/README.md#useSortBy)
+More information can be found in the [API Docs](/api/useSortBy)
 
 ````diff
 const columns = React.useMemo(

netlify.toml

@@ -0,0 +1,5 @@
+# COMMENT: This is a rule for Single Page Apps. Docz site is one...
+[[redirects]]
+  from = "/*"
+  to = "/"
+  status = 200

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -26,7 +26,10 @@
     "prepare": "yarn build",
     "release": "yarn publish",
     "releaseNext": "yarn publish --tag next",
-    "format": "prettier {src,src/**,examples/*/src,examples/*/src/**}/*.{md,js,jsx,tsx} --write"
+    "format": "prettier {src,src/**,examples/*/src,examples/*/src/**}/*.{md,js,jsx,tsx} --write",
+    "docz:build": "docz build",
+    "docz:dev": "docz dev",
+    "docz:serve": "docz build && docz serve"
   },
   "files": [
     "CHANGELOG.md",
@@ -38,6 +41,10 @@
     "README.md"
   ],
   "browserslist": "> 0.25%, not dead",
+  "dependencies": {
+    "docz": "^2.2.0",
+    "gatsby-theme-docz": "^2.2.0"
+  },
   "peerDependencies": {
     "react": "^16.8.3"
   },
@@ -83,7 +90,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-test-renderer": "^16.13.0",
-    "rollup": "^1.27.3",
+    "rollup": "^1.32.1",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",

src/filterTypes.js

@@ -42,7 +42,7 @@ export const includes = (rows, ids, filterValue) => {
   return rows.filter(row => {
     return ids.some(id => {
       const rowValue = row.values[id]
-      return filterValue.includes(rowValue)
+      return rowValue.includes(filterValue)
     })
   })
 }

src/gatsby-theme-docz/components/Logo/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Logo = () => (
+  <img
+    src="https://github.com/tannerlinsley/react-table/raw/master/media/logo.png"
+    alt="react-table Logo"
+    style={{ maxHeight: 50 }}
+  />
+)

src/hooks/useTable.js

@@ -237,11 +237,11 @@ export const useTable = (props, ...plugins) => {
     ]
   )
 
-  // Combine new visible columns with all columns (dedupe prefers later columns)
+  // Combine new visible columns with all columns
   allColumns = React.useMemo(() => {
-    const columns = [...allColumns]
+    const columns = [...visibleColumns]
 
-    visibleColumns.forEach(column => {
+    allColumns.forEach(column => {
       if (!columns.find(d => d.id === column.id)) {
         columns.push(column)
       }
@@ -402,10 +402,12 @@ export const useTable = (props, ...plugins) => {
 
       // Build the visible cells for each row
       row.allCells = allColumns.map(column => {
+        const value = row.values[column.id]
+
         const cell = {
           column,
           row,
-          value: row.values[column.id],
+          value,
         }
 
         // Give each cell a getCellProps base
@@ -418,6 +420,7 @@ export const useTable = (props, ...plugins) => {
         cell.render = makeRenderer(getInstance(), column, {
           row,
           cell,
+          value,
         })
 
         return cell

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

@@ -31,7 +31,7 @@ const data = [
 ]
 
 const defaultColumn = {
-  Cell: ({ cell: { value }, column: { id } }) => `${id}: ${value}`,
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
   width: 200,
   minWidth: 100,
   maxWidth: 300,

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

@@ -31,7 +31,7 @@ const data = [
 ]
 
 const defaultColumn = {
-  Cell: ({ cell: { value }, column: { id } }) => `${id}: ${value}`,
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
   width: 200,
   minWidth: 100,
   maxWidth: 300,

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

@@ -40,7 +40,7 @@ const makeData = () => [
 ]
 
 const defaultColumn = {
-  Cell: ({ cell: { value }, column: { id } }) => `${id}: ${value}`,
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
   Filter: ({ column: { filterValue, setFilter } }) => (
     <input
       value={filterValue || ''}

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

@@ -106,7 +106,7 @@ function Table({ columns, data }) {
 }
 
 const defaultColumn = {
-  Cell: ({ cell: { value }, column: { id } }) => `${id}: ${value}`,
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
   Filter: ({ column: { filterValue, setFilter } }) => (
     <input
       value={filterValue || ''}

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

@@ -31,7 +31,7 @@ const data = [
 ]
 
 const defaultColumn = {
-  Cell: ({ cell: { value }, column: { id } }) => `${id}: ${value}`,
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
   width: 200,
   minWidth: 100,
   maxWidth: 300,

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

@@ -48,7 +48,7 @@ const data = [
 ]
 
 const defaultColumn = {
-  Cell: ({ cell: { value }, column: { id } }) => `${id}: ${value}`,
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
   Filter: ({ filterValue, setFilter }) => (
     <input
       value={filterValue || ''}
@@ -160,14 +160,14 @@ function App() {
             Header: 'First Name',
             accessor: 'firstName',
             aggregate: 'count',
-            Aggregated: ({ cell: { value } }) =>
+            Aggregated: ({ value }) =>
               `First Name Aggregated: ${value} Names`,
           },
           {
             Header: 'Last Name',
             accessor: 'lastName',
             aggregate: 'uniqueCount',
-            Aggregated: ({ cell: { value } }) =>
+            Aggregated: ({ value }) =>
               `Last Name Aggregated: ${value} Unique Names`,
           },
         ],
@@ -179,14 +179,14 @@ function App() {
             Header: 'Age',
             accessor: 'age',
             aggregate: 'average',
-            Aggregated: ({ cell: { value } }) =>
+            Aggregated: ({ value }) =>
               `Age Aggregated: ${value} (avg)`,
           },
           {
             Header: 'Visits',
             accessor: 'visits',
             aggregate: 'sum',
-            Aggregated: ({ cell: { value } }) =>
+            Aggregated: ({ value }) =>
               `Visits Aggregated: ${value} (total)`,
           },
           {
@@ -194,7 +194,7 @@ function App() {
             id: 'minVisits',
             accessor: 'visits',
             aggregate: 'min',
-            Aggregated: ({ cell: { value } }) =>
+            Aggregated: ({ value }) =>
               `Visits Aggregated: ${value} (min)`,
           },
           {
@@ -202,7 +202,7 @@ function App() {
             id: 'maxVisits',
             accessor: 'visits',
             aggregate: 'max',
-            Aggregated: ({ cell: { value } }) =>
+            Aggregated: ({ value }) =>
               `Visits Aggregated: ${value} (max)`,
           },
           {
@@ -210,14 +210,14 @@ function App() {
             id: 'minMaxVisits',
             accessor: 'visits',
             aggregate: 'minMax',
-            Aggregated: ({ cell: { value } }) =>
+            Aggregated: ({ value }) =>
               `Visits Aggregated: ${value} (minMax)`,
           },
           {
             Header: 'Status',
             accessor: 'status',
             aggregate: 'unique',
-            Aggregated: ({ cell: { value } }) =>
+            Aggregated: ({ value }) =>
               `Visits Aggregated: ${value.join(', ')} (unique)`,
           },
           {
@@ -225,7 +225,7 @@ function App() {
             accessor: 'progress',
             id: 'progress',
             aggregate: 'median',
-            Aggregated: ({ cell: { value } }) =>
+            Aggregated: ({ value }) =>
               `Process Aggregated: ${value} (median)`,
           },
           {
@@ -233,7 +233,7 @@ function App() {
             accessor: 'progress',
             id: 'progressRounded',
             aggregate: roundedMedian,
-            Aggregated: ({ cell: { value } }) =>
+            Aggregated: ({ value }) =>
               `Process Aggregated: ${value} (rounded median)`,
           },
         ],

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

@@ -31,7 +31,7 @@ const data = [
 ]
 
 const defaultColumn = {
-  Cell: ({ cell: { value }, column: { id } }) => `${id}: ${value}`,
+  Cell: ({ value, column: { id } }) => `${id}: ${value}`,
 }
 
 function Table({ columns, data }) {

src/plugin-hooks/usePagination.js

@@ -43,12 +43,18 @@ function reducer(state, action, previousState, instance) {
   }
 
   if (action.type === actions.gotoPage) {
-    const { pageCount } = instance
+    const { pageCount, page } = instance
     const newPageIndex = functionalUpdate(action.pageIndex, state.pageIndex)
+    const cannnotPreviousPage = newPageIndex < 0
+    const cannotNextPage =
+      pageCount === -1
+        ? page.length < state.pageSize
+        : newPageIndex > pageCount - 1
 
-    if (newPageIndex < 0 || newPageIndex > pageCount - 1) {
+    if (cannnotPreviousPage || cannotNextPage) {
       return state
     }
+
     return {
       ...state,
       pageIndex: newPageIndex,
@@ -153,7 +159,8 @@ function useInstance(instance) {
   ])
 
   const canPreviousPage = pageIndex > 0
-  const canNextPage = pageCount === -1 || pageIndex < pageCount - 1
+  const canNextPage =
+    pageCount === -1 ? page.length >= pageSize : pageIndex < pageCount - 1
 
   const gotoPage = React.useCallback(
     pageIndex => {

src/publicUtils.js

@@ -7,7 +7,7 @@ export const actions = {
 }
 
 export const defaultColumn = {
-  Cell: ({ cell: { value = '' } }) => value,
+  Cell: ({ value = '' }) => value,
   width: 150,
   minWidth: 0,
   maxWidth: Number.MAX_SAFE_INTEGER,

www/_redirects

@@ -1 +0,0 @@
-*   https://github.com/tannerlinsley/react-table