v7.0.0-rc.2

Fixes #1573
Fixes #1719
Fixes #1718

.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/index.js": {
-    "bundled": 101464,
-    "minified": 49540,
-    "gzipped": 12771
+    "bundled": 102847,
+    "minified": 50399,
+    "gzipped": 12909
   },
   "dist/index.es.js": {
-    "bundled": 100408,
-    "minified": 48597,
-    "gzipped": 12591,
+    "bundled": 101791,
+    "minified": 49456,
+    "gzipped": 12726,
     "treeshaked": {
       "rollup": {
         "code": 78,

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 7.0.0-rc.1
+
+- Minor regex optimizations during row path creation
+
+## 7.0.0-rc.0
+
+- 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.md) - Get to know React Table's API
+- [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
@@ -182,6 +182,7 @@ 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,7 +132,11 @@ 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 [Header Group Properties](#headergroup-properties) for more information
+  - 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
 - `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.
@@ -190,6 +194,11 @@ 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
 
@@ -203,7 +212,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` renderers. Other renderers like `Filter` are available via hooks like `useFilters`.
+  - 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 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
@@ -216,6 +225,11 @@ 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.md)
+- [Study the API](./api/README.md)

docs/examples.md

@@ -4,6 +4,9 @@
   - 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)
@@ -31,6 +34,9 @@
   - 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.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.0.tgz#e2c3c8dba768425f897cf0f9e51fe2e241485d4c"
-  integrity sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==
+  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==
   dependencies:
-    eslint-visitor-keys "^1.0.0"
+    eslint-visitor-keys "^1.1.0"
 
-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-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@^5.16.0:
   version "5.16.0"
@@ -8087,10 +8087,10 @@ react-scripts@3.0.1:
   optionalDependencies:
     fsevents "2.0.6"
 
-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-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@^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/basic)
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/column-hiding)
 - `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.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.0.tgz#e2c3c8dba768425f897cf0f9e51fe2e241485d4c"
-  integrity sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==
+  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==
   dependencies:
-    eslint-visitor-keys "^1.0.0"
+    eslint-visitor-keys "^1.1.0"
 
-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-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@^5.16.0:
   version "5.16.0"

examples/footers/.babelrc

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

examples/footers/.env

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

examples/footers/.eslintrc

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

examples/footers/.gitignore

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

examples/footers/.rescriptsrc.js

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

examples/footers/README.md

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

examples/footers/package.json

@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "eject": "rescripts eject"
+  },
+  "dependencies": {
+    "namor": "^1.1.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1",
+    "react-table": "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

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/footers/public/manifest.json

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

examples/footers/src/App.js

@@ -0,0 +1,169 @@
+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

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

examples/footers/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

examples/footers/src/index.js

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,40 @@
+import namor from 'namor'
+
+const range = len => {
+  const arr = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = () => {
+  const statusChance = Math.random()
+  return {
+    firstName: namor.generate({ words: 1, numbers: 0 }),
+    lastName: namor.generate({ words: 1, numbers: 0 }),
+    age: Math.floor(Math.random() * 30),
+    visits: Math.floor(Math.random() * 100),
+    progress: Math.floor(Math.random() * 100),
+    status:
+      statusChance > 0.66
+        ? 'relationship'
+        : statusChance > 0.33
+        ? 'complicated'
+        : 'single',
+  }
+}
+
+export default function makeData(...lens) {
+  const makeDataLevel = (depth = 0) => {
+    const len = lens[depth]
+    return range(len).map(d => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}

examples/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.md#useSortBy)
+More information can be found in the [API Docs](/docs/api/README.md#useSortBy)
 
 ````diff
 const columns = React.useMemo(

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-beta.27",
+  "version": "7.0.0-rc.2",
   "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,4 +1,44 @@
 [
+  {
+    "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,4 +1,44 @@
 [
+  {
+    "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,8 +15,12 @@ import {
 
 import { useColumnVisibility } from './useColumnVisibility'
 
-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.'
+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 defaultInitialState = {}
 const defaultColumnInstance = {}
@@ -98,7 +102,9 @@ export const useTable = (props, ...plugins) => {
       getTableBodyProps: [],
       getRowProps: [],
       getHeaderGroupProps: [],
+      getFooterGroupProps: [],
       getHeaderProps: [],
+      getFooterProps: [],
       getCellProps: [],
     },
   })
@@ -288,23 +294,38 @@ 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(header => {
+      headerGroup.headers = headerGroup.headers.filter(column => {
         const recurse = headers =>
-          headers.filter(header => {
-            if (header.headers) {
-              return recurse(header.headers)
+          headers.filter(column => {
+            if (column.headers) {
+              return recurse(column.headers)
             }
-            return header.isVisible
+            return column.isVisible
           }).length
-        if (header.headers) {
-          return recurse(header.headers)
+        if (column.headers) {
+          return recurse(column.headers)
         }
-        return header.isVisible
+        return column.isVisible
       })
 
       // Give headerGroups getRowProps
@@ -322,6 +343,19 @@ 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
       }
 
@@ -329,6 +363,10 @@ 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
 
-@@ -22,11 +22,13 @@
+@@ -20,11 +20,13 @@
             colspan="1"
             style="cursor: pointer;"
             title="Toggle SortBy"
@@ -20,7 +20,7 @@ Snapshot Diff:
             colspan="1"
             style="cursor: pointer;"
             title="Toggle SortBy"
-@@ -69,66 +71,66 @@
+@@ -67,66 +69,66 @@
         </tr>
       </thead>
       <tbody>
@@ -112,7 +112,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -23,11 +23,11 @@
+@@ -21,11 +21,11 @@
             style="cursor: pointer;"
             title="Toggle SortBy"
           >
@@ -125,7 +125,7 @@ Snapshot Diff:
           <th
             colspan="1"
             style="cursor: pointer;"
-@@ -71,26 +71,26 @@
+@@ -69,26 +69,26 @@
         </tr>
       </thead>
       <tbody>
@@ -158,7 +158,7 @@ Snapshot Diff:
         <tr>
           <td>
             firstName: joe
-@@ -111,26 +111,26 @@
+@@ -109,26 +109,26 @@
             progress: 10
           </td>
         </tr>

src/plugin-hooks/useFilters.js

@@ -133,15 +133,6 @@ 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 })
   }
@@ -290,6 +281,26 @@ 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,15 +181,6 @@ 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 })
@@ -242,7 +233,7 @@ function useInstance(instance) {
           style: {
             cursor: canSort ? 'pointer' : undefined,
           },
-          title: 'Toggle SortBy',
+          title: canSort ? 'Toggle SortBy' : undefined,
         },
         applyPropHooks(
           instanceRef.current.hooks.getSortByToggleProps,
@@ -349,6 +340,25 @@ 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,6 +65,7 @@ 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,
@@ -416,6 +417,9 @@ export function functionalUpdate(updater, old) {
 
 //
 
+const reOpenBracket = /\[/g
+const reCloseBracket = /\]/g
+
 function makePathArray(obj) {
   return (
     flattenDeep(obj)
@@ -424,8 +428,8 @@ function makePathArray(obj) {
       // join parts using period
       .join('.')
       // replace brackets with periods
-      .replace(/\[/g, '.')
-      .replace(/\]/g, '')
+      .replace(reOpenBracket, '.')
+      .replace(reCloseBracket, '')
       // split it back out on periods
       .split('.')
   )