Add Footer Support

.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "dist/index.js": {
-    "bundled": 101735,
+    "bundled": 102774,
-    "minified": 49674,
+    "minified": 50337,
-    "gzipped": 12789
+    "gzipped": 12881
   },
   "dist/index.es.js": {
-    "bundled": 100679,
+    "bundled": 101718,
-    "minified": 48731,
+    "minified": 49394,
-    "gzipped": 12610,
+    "gzipped": 12698,
     "treeshaked": {
       "rollup": {
         "code": 78,

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 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

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

@@ -8087,10 +8087,10 @@ react-scripts@3.0.1:
   optionalDependencies:
     fsevents "2.0.6"
 
-react-table@next:
+react-table@latest:
-  version "7.0.0-alpha.7"
+  version "7.0.0-beta.28"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-alpha.7.tgz#0cb6da6f32adb397e68505b7cdd4880d15d73017"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.28.tgz#f5cd37b09fdbc7f22f472d021c56637d9fae097c"
-  integrity sha512-oXE9RRkE2CFk1OloNCSTPQ9qxOdujgkCoW5b/srbJsBog/ySkWuozBTQkxH1wGNmnSxGyTrTxJqXdXPQam7VAw==
+  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/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()
+}

src/hooks/useTable.js

@@ -15,8 +15,12 @@ import {
 
 import { useColumnVisibility } from './useColumnVisibility'
 
-const renderErr =
+let renderErr = 'Renderer Error'
-  'You must specify a valid render component. This could be "column.Cell", "column.Header", "column.Filter", "column.Aggregated" or any other custom renderer component.'
+
+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 => {
+          headers.filter(column => {
-            if (header.headers) {
+            if (column.headers) {
-              return recurse(header.headers)
+              return recurse(column.headers)
             }
-            return header.isVisible
+            return column.isVisible
           }).length
-        if (header.headers) {
+        if (column.headers) {
-          return recurse(header.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/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,