Add useColumnVisibility internal hook

.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/index.js": {
-    "bundled": 102774,
-    "minified": 50337,
-    "gzipped": 12881
+    "bundled": 101464,
+    "minified": 49540,
+    "gzipped": 12771
   },
   "dist/index.es.js": {
-    "bundled": 101718,
-    "minified": 49394,
-    "gzipped": 12698,
+    "bundled": 100408,
+    "minified": 48597,
+    "gzipped": 12591,
     "treeshaked": {
       "rollup": {
         "code": 78,

CHANGELOG.md

@@ -1,7 +1,3 @@
-## 7.0.0-beta.29
-
-- Added the support for the `Footer` renderer, `column.getFooterProps`, `footerGroups` and `footerGroup.getFooterProps`
-
 ## 7.0.0-beta.28
 
 - Added the `useColumnVisibility` plugin as a core plugin along with several new instance and column-level methods to control column visibility

README.md

@@ -42,7 +42,7 @@ Enjoy this library? Try them all! [React Query](https://github.com/tannerlinsley
 - [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
+- [API](./docs/api.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
@@ -182,7 +182,6 @@ This library is being built and maintained by me, @tannerlinsley and I am always
         <li>Jordan Soltman</li>
         <li>Robert Tajnšek</li>
         <li>Pekka Tapani</li>
-        <li>Eric Lanehart (@pushred)</li>
         </ul>
       </td>
       <td>

docs/api/useTable.md

@@ -132,11 +132,7 @@ The following properties are available on the table instance returned from `useT
 - `headerGroups: Array<HeaderGroup>`
   - An array of normalized header groups, each containing a flattened array of final column objects for that row.
   - **Some of these headers may be materialized as placeholders**
-  - See [HeaderGroup Properties](#headergroup-properties) for more information
-- `footerGroups: Array<HeaderGroup>`
-  - An array of normalized header groups, but in reverse order, each containing a flattened array of final column objects for that row.
-  - **Some of these headers may be materialized as placeholders**
-  - See [HeaderGroup Properties](#headergroup-properties) for more information
+  - See [Header Group Properties](#headergroup-properties) for more information
 - `headers: Array<Column>`
   - A **nested** array of final header objects, **similar in structure to the original columns configuration option, but rebuilt for ordering**
   - Each contains the headers that are displayed underneath it.
@@ -194,11 +190,6 @@ The following additional properties are available on every `headerGroup` object
   - This function is used to resolve any props needed for this header group's row.
   - You can use the `getHeaderGroupProps` hook to extend its functionality.
   - Custom props may be passed. **NOTE: Custom props will override built-in table props, so be careful!**
-- `getFooterGroupProps: Function(?props)`
-  - **Required**
-  - This function is used to resolve any props needed for this header group's footer row.
-  - You can use the `getFooterGroupProps` hook to extend its functionality.
-  - Custom props may be passed. **NOTE: Custom props will override built-in table props, so be careful!**
 
 ### Column Properties
 
@@ -212,7 +203,7 @@ The following properties are available on every `Column` object returned by the
 - `render: Function(type: String | Function | Component, ?props)`
   - This function is used to render content with the added context of a column.
   - 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` and `Footer` renderers. Other renderers like `Filter` and `Aggregated` are available via plugin hooks.
+  - 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
@@ -225,11 +216,6 @@ The following properties are available on every `Column` object returned by the
   - This function is used to resolve any props needed for this column's header cell.
   - You can use the `getHeaderProps` hook to extend its functionality.
   - Custom props may be passed. **NOTE: Custom props will override built-in table props, so be careful!**
-- `getFooterProps: Function(?props)`
-  - **Required**
-  - This function is used to resolve any props needed for this column's footer cell.
-  - You can use the `getFooterProps` hook to extend its functionality.
-  - Custom props may be passed. **NOTE: Custom props will override built-in table props, so be careful!**
 - `toggleHidden: Function(?hidden: Boolean) => void`
   - This function can be used to hide or show this column.
   - If no value is passed, the visibility of this column will be toggled.

docs/concepts.md

@@ -30,4 +30,4 @@ As of React Table v7, **you the developer** are responsible for rendering your o
 After reading about React Table's concepts, you should:
 
 - [Check Out Some Examples](./examples.md)
-- [Study the API](./api/README.md)
+- [Study the API](./api.md)

docs/examples.md

@@ -4,9 +4,6 @@
   - 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)
@@ -34,9 +31,6 @@
   - 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)

examples/basic/yarn.lock

@@ -3652,16 +3652,16 @@ eslint-scope@^4.0.0, eslint-scope@^4.0.3:
     estraverse "^4.1.1"
 
 eslint-utils@^1.3.1:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
-  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.0.tgz#e2c3c8dba768425f897cf0f9e51fe2e241485d4c"
+  integrity sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==
   dependencies:
-    eslint-visitor-keys "^1.1.0"
+    eslint-visitor-keys "^1.0.0"
 
-eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
-  integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
+eslint-visitor-keys@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
+  integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
 
 eslint@^5.16.0:
   version "5.16.0"
@@ -8087,10 +8087,10 @@ react-scripts@3.0.1:
   optionalDependencies:
     fsevents "2.0.6"
 
-react-table@latest:
-  version "7.0.0-beta.28"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.28.tgz#f5cd37b09fdbc7f22f472d021c56637d9fae097c"
-  integrity sha512-Ym05FAFNPGU6cid3Uw2W2+tn3mfGqKkLs51dw5FAJyz3fFNV0/i/CrTzHXZbVDA/KO2KNFYUjKGQJxIiDbXb4w==
+react-table@next:
+  version "7.0.0-alpha.7"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-alpha.7.tgz#0cb6da6f32adb397e68505b7cdd4880d15d73017"
+  integrity sha512-oXE9RRkE2CFk1OloNCSTPQ9qxOdujgkCoW5b/srbJsBog/ySkWuozBTQkxH1wGNmnSxGyTrTxJqXdXPQam7VAw==
 
 react@^16.8.6:
   version "16.8.6"

examples/column-hiding/README.md

@@ -2,5 +2,5 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 You can:
 
-- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-hiding)
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
 - `yarn` and `yarn start` to run and edit the example

examples/column-hiding/yarn.lock

@@ -3652,16 +3652,16 @@ eslint-scope@^4.0.0, eslint-scope@^4.0.3:
     estraverse "^4.1.1"
 
 eslint-utils@^1.3.1:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
-  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.0.tgz#e2c3c8dba768425f897cf0f9e51fe2e241485d4c"
+  integrity sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==
   dependencies:
-    eslint-visitor-keys "^1.1.0"
+    eslint-visitor-keys "^1.0.0"
 
-eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
-  integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
+eslint-visitor-keys@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
+  integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
 
 eslint@^5.16.0:
   version "5.16.0"

examples/footers/.babelrc

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

examples/footers/.env

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

examples/footers/.eslintrc

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

examples/footers/.gitignore

@@ -1,23 +0,0 @@
-# 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/footers/.rescriptsrc.js

@@ -1,29 +0,0 @@
-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/footers/README.md

@@ -1,6 +0,0 @@
-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/footers)
-- `yarn` and `yarn start` to run and edit the example

examples/footers/package.json

@@ -1,35 +0,0 @@
-{
-  "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": "latest",
-    "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/footers/public/index.html

@@ -1,38 +0,0 @@
-<!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/footers/public/manifest.json

@@ -1,15 +0,0 @@
-{
-  "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/footers/src/App.js

@@ -1,169 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import { useTable } from 'react-table'
-
-import makeData from './makeData'
-
-const Styles = styled.div`
-  padding: 1rem;
-
-  table {
-    border-spacing: 0;
-    border: 1px solid black;
-
-    tr {
-      ${'' /* :first-child {
-        td {
-          border-top: 1px solid black;
-        }
-      } */}
-
-      :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;
-      }
-    }
-
-    tfoot {
-      tr:first-child {
-        td {
-          border-top: 2px solid black;
-        }
-      }
-      font-weight: bolder;
-    }
-  }
-`
-
-function Table({ columns, data }) {
-  // Use the state and functions returned from useTable to build your UI
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    footerGroups,
-    rows,
-    prepareRow,
-  } = useTable({
-    columns,
-    data,
-  })
-
-  // Render the UI for your table
-  return (
-    <table {...getTableProps()}>
-      <thead>
-        {headerGroups.map(group => (
-          <tr {...group.getHeaderGroupProps()}>
-            {group.headers.map(column => (
-              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
-            ))}
-          </tr>
-        ))}
-      </thead>
-      <tbody {...getTableBodyProps()}>
-        {rows.map((row, i) => {
-          prepareRow(row)
-          return (
-            <tr {...row.getRowProps()}>
-              {row.cells.map(cell => {
-                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
-              })}
-            </tr>
-          )
-        })}
-      </tbody>
-      <tfoot>
-        {footerGroups.map(group => (
-          <tr {...group.getFooterGroupProps()}>
-            {group.headers.map(column => (
-              <td {...column.getFooterProps()}>{column.render('Footer')}</td>
-            ))}
-          </tr>
-        ))}
-      </tfoot>
-    </table>
-  )
-}
-
-function App() {
-  const columns = React.useMemo(
-    () => [
-      {
-        Header: 'Name',
-        Footer: 'Name',
-        columns: [
-          {
-            Header: 'First Name',
-            accessor: 'firstName',
-            Footer: 'First Name',
-          },
-          {
-            Header: 'Last Name',
-            accessor: 'lastName',
-            Footer: 'Last Name',
-          },
-        ],
-      },
-      {
-        Header: 'Info',
-        Footer: 'Info',
-        columns: [
-          {
-            Header: 'Age',
-            accessor: 'age',
-            Footer: 'Age',
-          },
-          {
-            Header: 'Visits',
-            accessor: 'visits',
-            Footer: info => {
-              // Only calculate total visits if rows change
-              const total = React.useMemo(
-                () =>
-                  info.rows.reduce((sum, row) => row.values.visits + sum, 0),
-                [info.rows]
-              )
-
-              return <>Total: {total}</>
-            },
-          },
-          {
-            Header: 'Status',
-            accessor: 'status',
-            Footer: 'Status',
-          },
-          {
-            Header: 'Profile Progress',
-            accessor: 'progress',
-            Footer: 'Profile Progress',
-          },
-        ],
-      },
-    ],
-    []
-  )
-
-  const data = React.useMemo(() => makeData(20), [])
-
-  return (
-    <Styles>
-      <Table columns={columns} data={data} />
-    </Styles>
-  )
-}
-
-export default App

examples/footers/src/App.test.js

@@ -1,9 +0,0 @@
-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/footers/src/index.css

@@ -1,13 +0,0 @@
-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/footers/src/index.js

@@ -1,6 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
-
-ReactDOM.render(<App />, document.getElementById('root'))

examples/footers/src/makeData.js

@@ -1,40 +0,0 @@
-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/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](/docs/api.md#useSortBy)
 
 ````diff
 const columns = React.useMemo(

package.json

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

sizes-cjs.json

@@ -1,44 +1,4 @@
 [
-  {
-    "timestamp": 1575605755429,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21421,
-        "delta": 170
-      }
-    ]
-  },
-  {
-    "timestamp": 1575579354616,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21251,
-        "delta": 6
-      }
-    ]
-  },
-  {
-    "timestamp": 1575578830463,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21245,
-        "delta": 652
-      }
-    ]
-  },
-  {
-    "timestamp": 1575555421868,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 20593,
-        "delta": 24
-      }
-    ]
-  },
   {
     "timestamp": 1575517726476,
     "files": [

sizes-es.json

@@ -1,44 +1,4 @@
 [
-  {
-    "timestamp": 1575605764195,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21200,
-        "delta": 170
-      }
-    ]
-  },
-  {
-    "timestamp": 1575579366180,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21030,
-        "delta": 7
-      }
-    ]
-  },
-  {
-    "timestamp": 1575578837727,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21023,
-        "delta": 575
-      }
-    ]
-  },
-  {
-    "timestamp": 1575555429414,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 20448,
-        "delta": 21
-      }
-    ]
-  },
   {
     "timestamp": 1575517715056,
     "files": [

src/hooks/useTable.js

@@ -15,12 +15,8 @@ import {
 
 import { useColumnVisibility } from './useColumnVisibility'
 
-let renderErr = 'Renderer Error'
-
-if (process.env.NODE_ENV !== 'production') {
-  renderErr =
-    'You must specify a valid render component. This could be "column.Cell", "column.Header", "column.Filter", "column.Aggregated" or any other custom renderer component.'
-}
+const renderErr =
+  'You must specify a valid render component. This could be "column.Cell", "column.Header", "column.Filter", "column.Aggregated" or any other custom renderer component.'
 
 const defaultInitialState = {}
 const defaultColumnInstance = {}
@@ -102,9 +98,7 @@ export const useTable = (props, ...plugins) => {
       getTableBodyProps: [],
       getRowProps: [],
       getHeaderGroupProps: [],
-      getFooterGroupProps: [],
       getHeaderProps: [],
-      getFooterProps: [],
       getCellProps: [],
     },
   })
@@ -294,38 +288,23 @@ export const useTable = (props, ...plugins) => {
         ),
         props
       )
-
-    // Give columns/headers a default getFooterProps
-    column.getFooterProps = props =>
-      mergeProps(
-        {
-          key: ['footer', column.id].join('_'),
-          colSpan: column.totalVisibleHeaderCount,
-        },
-        applyPropHooks(
-          instanceRef.current.hooks.getFooterProps,
-          column,
-          instanceRef.current
-        ),
-        props
-      )
   })
 
   instanceRef.current.headerGroups = instanceRef.current.headerGroups.filter(
     (headerGroup, i) => {
       // Filter out any headers and headerGroups that don't have visible columns
-      headerGroup.headers = headerGroup.headers.filter(column => {
+      headerGroup.headers = headerGroup.headers.filter(header => {
         const recurse = headers =>
-          headers.filter(column => {
-            if (column.headers) {
-              return recurse(column.headers)
+          headers.filter(header => {
+            if (header.headers) {
+              return recurse(header.headers)
             }
-            return column.isVisible
+            return header.isVisible
           }).length
-        if (column.headers) {
-          return recurse(column.headers)
+        if (header.headers) {
+          return recurse(header.headers)
         }
-        return column.isVisible
+        return header.isVisible
       })
 
       // Give headerGroups getRowProps
@@ -343,19 +322,6 @@ export const useTable = (props, ...plugins) => {
             props
           )
 
-        headerGroup.getFooterGroupProps = (props = {}) =>
-          mergeProps(
-            {
-              key: [`footer${i}`].join('_'),
-            },
-            applyPropHooks(
-              instanceRef.current.hooks.getFooterGroupProps,
-              headerGroup,
-              instanceRef.current
-            ),
-            props
-          )
-
         return true
       }
 
@@ -363,10 +329,6 @@ export const useTable = (props, ...plugins) => {
     }
   )
 
-  instanceRef.current.footerGroups = [
-    ...instanceRef.current.headerGroups,
-  ].reverse()
-
   // Run the rows (this could be a dangerous hook with a ton of data)
   if (process.env.NODE_ENV !== 'production' && debug)
     console.time('hooks.useRows')

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

@@ -5,7 +5,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -20,11 +20,13 @@
+@@ -22,11 +22,13 @@
             colspan="1"
             style="cursor: pointer;"
             title="Toggle SortBy"
@@ -20,7 +20,7 @@ Snapshot Diff:
             colspan="1"
             style="cursor: pointer;"
             title="Toggle SortBy"
-@@ -67,66 +69,66 @@
+@@ -69,66 +71,66 @@
         </tr>
       </thead>
       <tbody>
@@ -112,7 +112,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -21,11 +21,11 @@
+@@ -23,11 +23,11 @@
             style="cursor: pointer;"
             title="Toggle SortBy"
           >
@@ -125,7 +125,7 @@ Snapshot Diff:
           <th
             colspan="1"
             style="cursor: pointer;"
-@@ -69,26 +69,26 @@
+@@ -71,26 +71,26 @@
         </tr>
       </thead>
       <tbody>
@@ -158,7 +158,7 @@ Snapshot Diff:
         <tr>
           <td>
             firstName: joe
-@@ -109,26 +109,26 @@
+@@ -111,26 +111,26 @@
             progress: 10
           </td>
         </tr>

src/plugin-hooks/useFilters.js

@@ -133,6 +133,15 @@ function useInstance(instance) {
   const preFilteredRows = rows
   const preFilteredFlatRows = flatRows
 
+  // Bypass any effects from firing when this changes
+  const isMountedRef = React.useRef()
+  safeUseLayoutEffect(() => {
+    if (isMountedRef.current) {
+      dispatch({ type: actions.resetFilters })
+    }
+    isMountedRef.current = true
+  }, [dispatch, ...(getResetFiltersDeps ? getResetFiltersDeps(instance) : [])])
+
   const setFilter = (columnId, filterValue) => {
     dispatch({ type: actions.setFilter, columnId, filterValue })
   }
@@ -281,26 +290,6 @@ function useInstance(instance) {
     })
   }, [filteredRows, filters, flatColumns])
 
-  // Bypass any effects from firing when this changes
-  const isMountedRef = React.useRef()
-  safeUseLayoutEffect(() => {
-    if (isMountedRef.current) {
-      dispatch({ type: actions.resetFilters })
-    }
-    isMountedRef.current = true
-  }, [
-    dispatch,
-    ...(getResetFiltersDeps
-      ? getResetFiltersDeps({
-          ...instance,
-          preFilteredRows,
-          preFilteredFlatRows,
-          rows: filteredRows,
-          flatRows: filteredFlatRows,
-        })
-      : []),
-  ])
-
   return {
     ...instance,
     setFilter,

src/plugin-hooks/useSortBy.js

@@ -181,6 +181,15 @@ function useInstance(instance) {
   // Add custom hooks
   hooks.getSortByToggleProps = []
 
+  // Bypass any effects from firing when this changes
+  const isMountedRef = React.useRef()
+  safeUseLayoutEffect(() => {
+    if (isMountedRef.current) {
+      dispatch({ type: actions.resetSortBy })
+    }
+    isMountedRef.current = true
+  }, [dispatch, ...(getResetSortByDeps ? getResetSortByDeps(instance) : [])])
+
   // Updates sorting based on a columnId, desc flag and multi flag
   const toggleSortBy = (columnId, desc, multi) => {
     dispatch({ type: actions.toggleSortBy, columnId, desc, multi })
@@ -233,7 +242,7 @@ function useInstance(instance) {
           style: {
             cursor: canSort ? 'pointer' : undefined,
           },
-          title: canSort ? 'Toggle SortBy' : undefined,
+          title: 'Toggle SortBy',
         },
         applyPropHooks(
           instanceRef.current.hooks.getSortByToggleProps,
@@ -340,25 +349,6 @@ function useInstance(instance) {
     userSortTypes,
   ])
 
-  // Bypass any effects from firing when this changes
-  const isMountedRef = React.useRef()
-  safeUseLayoutEffect(() => {
-    if (isMountedRef.current) {
-      dispatch({ type: actions.resetSortBy })
-    }
-    isMountedRef.current = true
-  }, [
-    dispatch,
-    ...(getResetSortByDeps
-      ? getResetSortByDeps({
-          ...instance,
-          toggleSortBy,
-          rows: sortedRows,
-          preSortedRows: rows,
-        })
-      : []),
-  ])
-
   return {
     ...instance,
     toggleSortBy,

src/utils.js

@@ -65,7 +65,6 @@ export function decorateColumn(
   column = {
     // Make sure there is a fallback header, just in case
     Header: () => <>&nbsp;</>,
-    Footer: () => <>&nbsp;</>,
     ...column,
     // Materialize and override this stuff
     id,