v7.0.0-rc.13

.size-snapshot.json

@@ -1,13 +1,32 @@
 {
   "dist/index.js": {
-    "bundled": 104720,
-    "minified": 48438,
-    "gzipped": 13005
+    "bundled": 107717,
+    "minified": 49867,
+    "gzipped": 13333
   },
   "dist/index.es.js": {
-    "bundled": 103833,
-    "minified": 47648,
-    "gzipped": 12849,
+    "bundled": 106806,
+    "minified": 49055,
+    "gzipped": 13168,
+    "treeshaked": {
+      "rollup": {
+        "code": 80,
+        "import_statements": 21
+      },
+      "webpack": {
+        "code": 8239
+      }
+    }
+  },
+  "dist\\index.js": {
+    "bundled": 104977,
+    "minified": 48560,
+    "gzipped": 13057
+  },
+  "dist\\index.es.js": {
+    "bundled": 104090,
+    "minified": 47770,
+    "gzipped": 12900,
     "treeshaked": {
       "rollup": {
         "code": 80,
@@ -17,24 +36,5 @@
         "code": 8227
       }
     }
-  },
-  "dist\\index.js": {
-    "bundled": 105386,
-    "minified": 49565,
-    "gzipped": 13008
-  },
-  "dist\\index.es.js": {
-    "bundled": 104543,
-    "minified": 48815,
-    "gzipped": 12856,
-    "treeshaked": {
-      "rollup": {
-        "code": 80,
-        "import_statements": 21
-      },
-      "webpack": {
-        "code": 8444
-      }
-    }
   }
 }

CHANGELOG.md

@@ -1,3 +1,18 @@
+## 7.0.0-rc.13
+
+- Added the `useControlledState` hook for plugins to manipulate the final state of the table similar to how users can
+- Fixed an issue where column hiding wasn't working properly.
+
+## 7.0.0-rc.12
+
+- Fixed an issue where removing a grouped column would result in a crash
+
+## 7.0.0-rc.11
+
+- Fixed an issue where plugins using the `columns` hook were not getting decorated properly
+- Added back a new rendition of the `useFlexLayout` plugin and accompanying example.
+- Fixed all reset actions to use the initial state passed into the table, then fall back to the default initial state for the hook
+
 ## 7.0.0-rc.10
 
 - Optimizations made to make accessors, prop getters and other internals much faster. 10x in some cases!

README.md

@@ -183,6 +183,7 @@ This library is being built and maintained by me, @tannerlinsley and I am always
         <li>Pekka Tapani</li>
         <li>Eric Lanehart (@pushred)</li>
         <li>Anish P Patel (@anishpatelyaadada)</li>
+        <li>Alin Porumb (@alinporumb)</li>
         </ul>
       </td>
       <td>

docs/api/README.md

@@ -20,6 +20,7 @@ React Table is essentially a compatible collection of **custom React hooks**:
   - Layout Hooks
     - [`useBlockLayout`](./useBlockLayout.md)
     - [`useAbsoluteLayout`](./useAbsoluteLayout.md)
+    - [`useFlexLayout`](./useFlexLayout.md)
     - [`useResizeColumns`](./useResizeColumns.md)
 - 3rd Party Plugin Hooks
   - Want your custom plugin hook listed here? [Submit a PR!](https://github.com/tannerlinsley/react-table/compare)

docs/api/useAbsoluteLayout.md

@@ -25,6 +25,12 @@
   - **Usage Required**
   - This core prop getter is required to to enable absolute layout for rows cells
 
+### HeaderGroup Properties
+
+- `getHeaderGroupProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for headers
+
 ### Header Properties
 
 - `getHeaderProps`

docs/api/useBlockLayout.md

@@ -19,6 +19,12 @@
   - **Usage Required**
   - This core prop getter is required to to enable absolute layout for rows cells
 
+### HeaderGroup Properties
+
+- `getHeaderGroupProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for headers
+
 ### Header Properties
 
 - `getHeaderProps`

docs/api/useFlexLayout.md

@@ -0,0 +1,43 @@
+# `useFlexLayout`
+
+- Plugin Hook
+- Optional
+
+`useFlexLayout` is a plugin hook that adds support for headers and cells to be rendered as `inline-block` `div`s (or other non-table elements) with `width` being used as the flex-basis and flex-grow. This hook becomes useful when implementing both virtualized and resizable tables that must also be able to stretch to fill all available space.
+
+**NOTE:** Although no additional options are needed for this plugin to work, the core column options `width`, `minWidth` and `maxWidth` are used to calculate column and cell widths and must be set:
+
+- `minWidth` is only used to limit column resizing. It does not define the minimum width for a column.
+- `width` is used as both the `flex-basis` and `flex-grow`. This means that it essentially acts as both the minimum width and flex-ratio of the column.
+- `maxWidth` is only used to limit column resizing. It does not define the maximum width for a column.
+
+[See Column Options](#column-options) for more information on these options.
+
+### Row Properties
+
+- `getRowProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for rows
+
+### Cell Properties
+
+- `getCellProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for rows cells
+
+### HeaderGroup Properties
+
+- `getHeaderGroupProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for headers
+
+### Header Properties
+
+- `getHeaderProps`
+  - **Usage Required**
+  - This core prop getter is required to to enable absolute layout for headers
+
+### Example (Full Width Resizable Table)
+
+- [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)

docs/api/useTable.md

@@ -25,7 +25,7 @@ The following options are supported via the main options object passed to `useTa
   - Optional
   - The initial state object for hidden columns
   - If a column's ID is contained in this array, it will be hidden
-- `reducer: Function(newState, action, prevState) => newState`
+- `stateReducer: Function(newState, action, prevState) => newState`
   - Optional
   - With every action that is dispatched to the table's internal `React.useReducer` instance, this reducer is called and is allowed to modify the final state object for updating.
   - It is passed the `newState`, `action`, and `prevState` and is expected to either return the `newState` or a modified version of the `newState`

docs/examples.md

@@ -16,6 +16,9 @@
   - 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)
@@ -46,6 +49,12 @@
   - 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)

examples/column-hiding/src/App.js

@@ -71,8 +71,10 @@ function Table({ columns, data }) {
         </div>
         {flatColumns.map(column => (
           <div key={column.id}>
-            <input type="checkbox" {...column.getToggleHiddenProps()} />{' '}
-            {column.id}
+            <label>
+              <input type="checkbox" {...column.getToggleHiddenProps()} />{' '}
+              {column.id}
+            </label>
           </div>
         ))}
         <br />

examples/full-width-resizable-table/.babelrc

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

examples/full-width-resizable-table/.env

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

examples/full-width-resizable-table/.eslintrc

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

examples/full-width-resizable-table/.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/full-width-resizable-table/.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/full-width-resizable-table/README.md

@@ -0,0 +1,4 @@
+# Full Width Resizable Table (via useFlexLayout)
+
+- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/full-width-resizable-table)
+- `yarn` and `yarn start` to run and edit the example

examples/full-width-resizable-table/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/full-width-resizable-table/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/full-width-resizable-table/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/full-width-resizable-table/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "infiniteLoopProtection": false
+}

examples/full-width-resizable-table/src/App.js

@@ -0,0 +1,193 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useResizeColumns, useFlexLayout } from 'react-table'
+
+import makeData from './makeData'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  .table {
+    ${'' /* These styles are suggested for the table fill all available space in its containing element */}
+    display: block;
+    ${'' /* These styles are required for a horizontaly scrollable table overflow */}
+    overflow: auto;
+
+    border-spacing: 0;
+    border: 1px solid black;
+
+    .thead {
+      ${'' /* These styles are required for a scrollable body to align with the header properly */}
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    .tbody {
+      ${'' /* These styles are required for a scrollable table body */}
+      overflow-y: scroll;
+      overflow-x: hidden;
+      height: 250px;
+    }
+
+    .tr {
+      :last-child {
+        .td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    .th,
+    .td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+
+      ${'' /* In this example we use an absolutely position resizer,
+       so this is required. */}
+      position: relative;
+
+      :last-child {
+        border-right: 0;
+      }
+
+      .resizer {
+        display: inline-block;
+        background: blue;
+        width: 10px;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 1;
+        ${'' /* prevents from scrolling while dragging on touch devices */}
+        touch-action:none;
+
+        &.isResizing {
+          background: red;
+        }
+      }
+    }
+  }
+`
+
+function Table({ columns, data }) {
+  const defaultColumn = React.useMemo(
+    () => ({
+      // When using the useFlexLayout:
+      minWidth: 30, // minWidth is only used as a limit for resizing
+      width: 150, // width is used for both the flex-basis and flex-grow
+      maxWidth: 200, // maxWidth is only used as a limit for resizing
+    }),
+    []
+  )
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable(
+    {
+      columns,
+      data,
+      defaultColumn,
+    },
+    useResizeColumns,
+    useFlexLayout
+  )
+
+  return (
+    <div {...getTableProps()} className="table">
+      <div>
+        {headerGroups.map(headerGroup => (
+          <div {...headerGroup.getHeaderGroupProps()} className="tr">
+            {headerGroup.headers.map(column => (
+              <div {...column.getHeaderProps()} className="th">
+                {column.render('Header')}
+                {/* Use column.getResizerProps to hook up the events correctly */}
+                <div
+                  {...column.getResizerProps()}
+                  className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
+                />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      <div {...getTableBodyProps()} className="tbody">
+        {rows.map((row, i) => {
+          prepareRow(row)
+          return (
+            <div {...row.getRowProps()} className="tr">
+              {row.cells.map(cell => {
+                return (
+                  <div {...cell.getCellProps()} className="td">
+                    {cell.render('Cell')}
+                  </div>
+                )
+              })}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'Name',
+        columns: [
+          {
+            Header: 'First Name',
+            accessor: 'firstName',
+          },
+          {
+            Header: 'Last Name',
+            accessor: 'lastName',
+          },
+        ],
+      },
+      {
+        Header: 'Info',
+        columns: [
+          {
+            Header: 'Age',
+            accessor: 'age',
+            width: 50,
+          },
+          {
+            Header: 'Visits',
+            accessor: 'visits',
+            width: 50,
+          },
+          {
+            Header: 'Status',
+            accessor: 'status',
+          },
+          {
+            Header: 'Profile Progress',
+            accessor: 'progress',
+          },
+        ],
+      },
+    ],
+    []
+  )
+
+  const data = React.useMemo(() => makeData(20), [])
+
+  return (
+    <Styles>
+      <Table columns={columns} data={data} />
+    </Styles>
+  )
+}
+
+export default App

examples/full-width-resizable-table/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/full-width-resizable-table/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/full-width-resizable-table/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/full-width-resizable-table/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/grouping-column/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "infiniteLoopProtection": false
+}

examples/grouping-column/src/App.js

@@ -33,6 +33,20 @@ const Styles = styled.div`
   }
 `
 
+function useControlledState(state, instance) {
+  return React.useMemo(() => {
+    if (state.groupBy.length) {
+      return {
+        ...state,
+        hiddenColumns: [...state.hiddenColumns, ...state.groupBy].filter(
+          (d, i, all) => all.indexOf(d) === i
+        ),
+      }
+    }
+    return state
+  }, [state])
+}
+
 function Table({ columns, data }) {
   const {
     getTableProps,
@@ -40,7 +54,7 @@ function Table({ columns, data }) {
     headerGroups,
     rows,
     prepareRow,
-    state: { groupBy, expanded },
+    state,
   } = useTable(
     {
       columns,
@@ -50,6 +64,7 @@ function Table({ columns, data }) {
     useExpanded,
     // Our custom plugin to add the expander column
     hooks => {
+      hooks.useControlledState.push(useControlledState)
       hooks.flatColumns.push((columns, instance) => {
         if (!instance.state.groupBy.length) {
           return columns
@@ -100,7 +115,7 @@ function Table({ columns, data }) {
               return null
             },
           },
-          ...columns.map(d => ({ ...d, isVisible: !d.isGrouped })),
+          ...columns,
         ]
       })
     }
@@ -113,7 +128,7 @@ function Table({ columns, data }) {
   return (
     <>
       <pre>
-        <code>{JSON.stringify({ groupBy, expanded: expanded }, null, 2)}</code>
+        <code>{JSON.stringify({ state }, null, 2)}</code>
       </pre>
       <Legend />
       <table {...getTableProps()}>

examples/streaming-rows/.babelrc

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

examples/streaming-rows/.env

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

examples/streaming-rows/.eslintrc

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

examples/streaming-rows/.gitignore

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

examples/streaming-rows/.rescriptsrc.js

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

examples/streaming-rows/README.md

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

examples/streaming-rows/package.json

@@ -0,0 +1,36 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "eject": "rescripts eject"
+  },
+  "dependencies": {
+    "namor": "^1.1.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1",
+    "react-table": "latest",
+    "react-window": "^1.8.5",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "@rescripts/cli": "^0.0.11",
+    "@rescripts/rescript-use-babel-config": "^0.0.8",
+    "@rescripts/rescript-use-eslint-config": "^0.0.9",
+    "babel-eslint": "10.0.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/streaming-rows/public/index.html

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

examples/streaming-rows/public/manifest.json

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

examples/streaming-rows/sandbox.config.json

@@ -0,0 +1,5 @@
+{
+  "infiniteLoopProtection": false,
+  "hardReloadOnChange": false,
+  "view": "browser"
+}

examples/streaming-rows/src/App.js

@@ -0,0 +1,217 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useTable, useBlockLayout, useRowSelect } from 'react-table'
+
+const Styles = styled.div`
+  padding: 1rem;
+
+  .table {
+    display: inline-block;
+    border-spacing: 0;
+    border: 1px solid black;
+
+    .tr {
+      :last-child {
+        .td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    .th,
+    .td {
+      margin: 0;
+      padding: 0.5rem;
+      border-bottom: 1px solid black;
+      border-right: 1px solid black;
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`
+
+let sourceGridData = []
+const updateRateMS = 16
+
+function Table({ columns }) {
+  // Use the state and functions returned from useTable to build your UI
+
+  const [data, setData] = React.useState([])
+  const timerRunning = React.useRef()
+
+  if (!timerRunning.current) {
+    timerRunning.current = true
+    setInterval(() => {
+      sourceGridData.push(makeRow(sourceGridData.length))
+      let newData = [...sourceGridData]
+
+      setData(newData)
+    }, updateRateMS)
+  }
+
+  const defaultColumn = React.useMemo(
+    () => ({
+      width: 150,
+    }),
+    []
+  )
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    toggleAllRowsSelected,
+    prepareRow,
+    state,
+  } = useTable(
+    {
+      autoResetSelectedRows: false,
+      columns,
+      data,
+      defaultColumn,
+    },
+    useBlockLayout,
+    useRowSelect
+  )
+
+  // Render the UI for your table
+  return (
+    <>
+      <div {...getTableProps()} className="table">
+        <div className="thead">
+          {headerGroups.map(headerGroup => (
+            <div {...headerGroup.getHeaderGroupProps()} className="tr">
+              {headerGroup.headers.map(column => (
+                <div {...column.getHeaderProps()} className="th">
+                  {column.render('Header')}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+
+        <div {...getTableBodyProps()}>
+          {rows.slice(0, 10).map(row => {
+            prepareRow(row)
+            return (
+              <div
+                {...row.getRowProps({
+                  style: {
+                    backgroundColor: row.isSelected ? 'green' : '',
+                  },
+                  onClick: e => {
+                    toggleAllRowsSelected(false)
+                    row.toggleRowSelected()
+                  },
+                })}
+                className="tr"
+              >
+                {row.cells.map(cell => {
+                  return (
+                    <div {...cell.getCellProps()} className="td">
+                      {cell.render('Cell')}
+                    </div>
+                  )
+                })}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+      <pre>
+        <code>{JSON.stringify(state, null, 2)}</code>
+      </pre>
+    </>
+  )
+}
+
+function App() {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: 'ID',
+        accessor: 'id',
+      },
+      {
+        Header: 'Name',
+        accessor: 'name',
+      },
+      {
+        Header: 'age',
+        accessor: 'age',
+      },
+      {
+        Header: 'gender',
+        accessor: 'gender',
+      },
+      {
+        Header: 'height',
+        accessor: 'height',
+      },
+      {
+        Header: 'color',
+        accessor: 'col',
+      },
+      {
+        Header: 'dob',
+        accessor: 'dob',
+      },
+    ],
+    []
+  )
+
+  return (
+    <Styles>
+      <Table columns={columns} />
+    </Styles>
+  )
+}
+
+function makeRow(id) {
+  let r = Math.floor(Math.random() * 3) + 1
+  if (r === 0) {
+    return {
+      Id: id,
+      name: 'Billy Bob',
+      age: 12,
+      gender: 'male',
+      height: 95,
+      col: 'red',
+      dob: '14/05/2010',
+    }
+  } else if (r === 1) {
+    return {
+      Id: id,
+      name: 'Jenny Jane',
+      age: 42,
+      gender: 'female',
+      height: 142,
+      col: 'blue',
+      dob: '30/07/1954',
+    }
+  } else if (r === 2) {
+    return {
+      Id: id,
+      name: 'Steve McAlistaire',
+      age: 35,
+      gender: 'male',
+      height: 176,
+      col: 'green',
+      dob: '04/11/1982',
+    }
+  } else if (r === 3) {
+    return {
+      Id: id,
+      name: 'Jeff Joe',
+      age: 35,
+      gender: 'male',
+      height: 176,
+      col: 'green',
+      dob: '04/11/1982',
+    }
+  }
+}
+export default App

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

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

examples/streaming-rows/src/index.css

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

examples/streaming-rows/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/streaming-rows/src/makeData.js

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

examples/sub-components/src/App.js

@@ -74,8 +74,8 @@ function Table({ columns: userColumns, data, renderRowSubComponent }) {
             prepareRow(row)
             return (
               // Use a React.Fragment here so the table markup is still valid
-              <>
-                <tr {...row.getRowProps()}>
+              <React.Fragment {...row.getRowProps()}>
+                <tr>
                   {row.cells.map(cell => {
                     return (
                       <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
@@ -100,7 +100,7 @@ function Table({ columns: userColumns, data, renderRowSubComponent }) {
                     </td>
                   </tr>
                 ) : null}
-              </>
+              </React.Fragment>
             )
           })}
         </tbody>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "7.0.0-rc.10",
+  "version": "7.0.0-rc.13",
   "description": "Hooks for building lightweight, fast and extendable datagrids for React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

sizes-cjs.json

@@ -1,221 +1,11 @@
 [
   {
-    "timestamp": 1576222078852,
+    "timestamp": 1576641254453,
     "files": [
       {
         "filename": "index.js",
-        "size": 22042,
-        "delta": -647
-      }
-    ]
-  },
-  {
-    "timestamp": 1576165979638,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 22689,
-        "delta": 135
-      }
-    ]
-  },
-  {
-    "timestamp": 1576044489324,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 22554,
-        "delta": -79
-      }
-    ]
-  },
-  {
-    "timestamp": 1576020969676,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 22633,
-        "delta": -10
-      }
-    ]
-  },
-  {
-    "timestamp": 1576007021431,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 22643,
-        "delta": -7
-      }
-    ]
-  },
-  {
-    "timestamp": 1576004320856,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 22650,
-        "delta": 30
-      }
-    ]
-  },
-  {
-    "timestamp": 1576003432935,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 22620,
-        "delta": 652
-      }
-    ]
-  },
-  {
-    "timestamp": 1575985310396,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21968,
-        "delta": 323
-      }
-    ]
-  },
-  {
-    "timestamp": 1575910923566,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21645,
-        "delta": 56
-      }
-    ]
-  },
-  {
-    "timestamp": 1575859193604,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21589,
-        "delta": 563
-      }
-    ]
-  },
-  {
-    "timestamp": 1575690248030,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21026,
-        "delta": 1
-      }
-    ]
-  },
-  {
-    "timestamp": 1575675308812,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21025,
-        "delta": -421
-      }
-    ]
-  },
-  {
-    "timestamp": 1575620433902,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21446,
-        "delta": -1
-      }
-    ]
-  },
-  {
-    "timestamp": 1575607054721,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 21447,
-        "delta": 26
-      }
-    ]
-  },
-  {
-    "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": [
-      {
-        "filename": "index.js",
-        "size": 20569,
-        "delta": 58
-      }
-    ]
-  },
-  {
-    "timestamp": 1575391465436,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 20511,
-        "delta": 1
-      }
-    ]
-  },
-  {
-    "timestamp": 1575345020328,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 20510,
-        "delta": 5
-      }
-    ]
-  },
-  {
-    "timestamp": 1575331661254,
-    "files": [
-      {
-        "filename": "index.js",
-        "size": 20505,
-        "delta": 20505
+        "size": 22403,
+        "delta": 49
       }
     ]
   }

sizes-es.json

@@ -1,211 +1,11 @@
 [
   {
-    "timestamp": 1576222088784,
+    "timestamp": 1576641263002,
     "files": [
       {
         "filename": "index.es.js",
-        "size": 21847,
-        "delta": -668
-      }
-    ]
-  },
-  {
-    "timestamp": 1576165986389,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 22515,
-        "delta": 140
-      }
-    ]
-  },
-  {
-    "timestamp": 1576044496748,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 22375,
-        "delta": -76
-      }
-    ]
-  },
-  {
-    "timestamp": 1576020979047,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 22451,
-        "delta": -10
-      }
-    ]
-  },
-  {
-    "timestamp": 1576007027792,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 22461,
-        "delta": -7
-      }
-    ]
-  },
-  {
-    "timestamp": 1576004327554,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 22468,
-        "delta": 30
-      }
-    ]
-  },
-  {
-    "timestamp": 1576003439933,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 22438,
-        "delta": 656
-      }
-    ]
-  },
-  {
-    "timestamp": 1575985317929,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21782,
-        "delta": 324
-      }
-    ]
-  },
-  {
-    "timestamp": 1575910931774,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21458,
-        "delta": 55
-      }
-    ]
-  },
-  {
-    "timestamp": 1575859200604,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21403,
-        "delta": 561
-      }
-    ]
-  },
-  {
-    "timestamp": 1575675317538,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 20842,
-        "delta": -383
-      }
-    ]
-  },
-  {
-    "timestamp": 1575620442742,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21225,
-        "delta": -1
-      }
-    ]
-  },
-  {
-    "timestamp": 1575607059725,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 21226,
-        "delta": 26
-      }
-    ]
-  },
-  {
-    "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": [
-      {
-        "filename": "index.es.js",
-        "size": 20427,
-        "delta": 59
-      }
-    ]
-  },
-  {
-    "timestamp": 1575391457318,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 20368,
-        "delta": -1
-      }
-    ]
-  },
-  {
-    "timestamp": 1575345027852,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 20369,
-        "delta": 4
-      }
-    ]
-  },
-  {
-    "timestamp": 1575331668355,
-    "files": [
-      {
-        "filename": "index.es.js",
-        "size": 20365,
-        "delta": 20365
+        "size": 22202,
+        "delta": 49
       }
     ]
   }

src/hooks/useColumnVisibility.js

@@ -58,7 +58,7 @@ const defaultGetToggleHideAllColumnsProps = (props, instance) => [
   },
 ]
 
-function reducer(state, action, previousState, instanceRef) {
+function reducer(state, action, previousState, instance) {
   if (action.type === actions.init) {
     return {
       hiddenColumns: [],
@@ -69,7 +69,7 @@ function reducer(state, action, previousState, instanceRef) {
   if (action.type === actions.resetHiddenColumns) {
     return {
       ...state,
-      hiddenColumns: [],
+      hiddenColumns: instance.initialState.hiddenColumns || [],
     }
   }
 
@@ -79,6 +79,8 @@ function reducer(state, action, previousState, instanceRef) {
         ? action.value
         : !state.hiddenColumns.includes(action.columnId)
 
+    console.log(action, should)
+
     const hiddenColumns = should
       ? [...state.hiddenColumns, action.columnId]
       : state.hiddenColumns.filter(d => d !== action.columnId)
@@ -104,9 +106,7 @@ function reducer(state, action, previousState, instanceRef) {
 
     return {
       ...state,
-      hiddenColumns: shouldAll
-        ? instanceRef.current.flatColumns.map(d => d.id)
-        : [],
+      hiddenColumns: shouldAll ? instance.flatColumns.map(d => d.id) : [],
     }
   }
 }
@@ -123,10 +123,7 @@ function useInstanceBeforeDimensions(instance) {
   }
 
   const handleColumn = (column, parentVisible) => {
-    column.isVisible =
-      typeof column.isVisible !== 'undefined'
-        ? column.isVisible
-        : parentVisible && !hiddenColumns.includes(column.id)
+    column.isVisible = parentVisible && !hiddenColumns.includes(column.id)
 
     let totalVisibleHeaderCount = 0
 

src/hooks/useTable.js

@@ -133,8 +133,18 @@ export const useTable = (props, ...plugins) => {
     reducer(initialState, { type: actions.init })
   )
 
+  // Snapshot hook and disallow more from being added
+  const getUseControlledStateHooks = useConsumeHookGetter(
+    getInstance().hooks,
+    'useControlledState'
+  )
+
   // Allow the user to control the final state with hooks
-  const state = useControlledState(reducerState)
+  const state = reduceHooks(
+    [...getUseControlledStateHooks(), useControlledState],
+    reducerState,
+    getInstance()
+  )
 
   Object.assign(getInstance(), {
     state,
@@ -153,10 +163,9 @@ export const useTable = (props, ...plugins) => {
   // Decorate All the columns
   let columns = React.useMemo(
     () =>
-      reduceHooks(
-        getColumnsHooks(),
-        decorateColumnTree(userColumns, defaultColumn),
-        getInstance()
+      decorateColumnTree(
+        reduceHooks(getColumnsHooks(), userColumns, getInstance()),
+        defaultColumn
       ),
     [
       defaultColumn,
@@ -320,7 +329,15 @@ export const useTable = (props, ...plugins) => {
   loopHooks(getUseInstanceBeforeDimensions(), getInstance())
 
   // Header Visibility is needed by this point
-  getInstance().totalColumnsWidth = calculateHeaderWidths(headers)
+  const [
+    totalColumnsMinWidth,
+    totalColumnsWidth,
+    totalColumnsMaxWidth,
+  ] = calculateHeaderWidths(headers)
+
+  getInstance().totalColumnsMinWidth = totalColumnsMinWidth
+  getInstance().totalColumnsWidth = totalColumnsWidth
+  getInstance().totalColumnsMaxWidth = totalColumnsMaxWidth
 
   // Snapshot hook and disallow more from being added
   const getUseInstance = useConsumeHookGetter(
@@ -531,7 +548,9 @@ export const useTable = (props, ...plugins) => {
 }
 
 function calculateHeaderWidths(headers, left = 0) {
+  let sumTotalMinWidth = 0
   let sumTotalWidth = 0
+  let sumTotalMaxWidth = 0
 
   headers.forEach(header => {
     let { headers: subHeaders } = header
@@ -539,18 +558,28 @@ function calculateHeaderWidths(headers, left = 0) {
     header.totalLeft = left
 
     if (subHeaders && subHeaders.length) {
-      header.totalWidth = calculateHeaderWidths(subHeaders, left)
+      const [totalMinWidth, totalWidth, totalMaxWidth] = calculateHeaderWidths(
+        subHeaders,
+        left
+      )
+      header.totalMinWidth = totalMinWidth
+      header.totalWidth = totalWidth
+      header.totalMaxWidth = totalMaxWidth
     } else {
+      header.totalMinWidth = header.minWidth
       header.totalWidth = Math.min(
         Math.max(header.minWidth, header.width),
         header.maxWidth
       )
+      header.totalMaxWidth = header.maxWidth
     }
     if (header.isVisible) {
       left += header.totalWidth
+      sumTotalMinWidth += header.totalMinWidth
       sumTotalWidth += header.totalWidth
+      sumTotalMaxWidth += header.totalMaxWidth
     }
   })
 
-  return sumTotalWidth
+  return [sumTotalMinWidth, sumTotalWidth, sumTotalMaxWidth]
 }

src/index.js

@@ -11,3 +11,4 @@ export { useColumnOrder } from './plugin-hooks/useColumnOrder'
 export { useResizeColumns } from './plugin-hooks/useResizeColumns'
 export { useAbsoluteLayout } from './plugin-hooks/useAbsoluteLayout'
 export { useBlockLayout } from './plugin-hooks/useBlockLayout'
+export { useFlexLayout } from './plugin-hooks/useFlexLayout'

src/makeDefaultPluginHooks.js

@@ -36,6 +36,7 @@ export default function makeDefaultPluginHooks() {
   return {
     useOptions: [],
     stateReducers: [],
+    useControlledState: [],
     columns: [],
     columnsDeps: [],
     flatColumns: [],

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

@@ -64,6 +64,9 @@ function Table({ columns, data }) {
       columns,
       data,
       defaultColumn,
+      initialState: {
+        groupBy: ["Column Doesn't Exist"],
+      },
     },
     useGroupBy,
     useExpanded

src/plugin-hooks/useColumnOrder.js

@@ -17,7 +17,7 @@ export const useColumnOrder = hooks => {
 
 useColumnOrder.pluginName = 'useColumnOrder'
 
-function reducer(state, action) {
+function reducer(state, action, previousState, instance) {
   if (action.type === actions.init) {
     return {
       columnOrder: [],
@@ -28,7 +28,7 @@ function reducer(state, action) {
   if (action.type === actions.resetColumnOrder) {
     return {
       ...state,
-      columnOrder: [],
+      columnOrder: instance.initialState.columnOrder || [],
     }
   }
 

src/plugin-hooks/useExpanded.js

@@ -38,7 +38,7 @@ const defaultGetExpandedToggleProps = (props, instance, row) => [
 ]
 
 // Reducer
-function reducer(state, action) {
+function reducer(state, action, previousState, instance) {
   if (action.type === actions.init) {
     return {
       expanded: {},
@@ -49,7 +49,7 @@ function reducer(state, action) {
   if (action.type === actions.resetExpanded) {
     return {
       ...state,
-      expanded: {},
+      expanded: instance.initialState.expanded || {},
     }
   }
 

src/plugin-hooks/useFilters.js

@@ -33,7 +33,7 @@ function reducer(state, action, previousState, instance) {
   if (action.type === actions.resetFilters) {
     return {
       ...state,
-      filters: [],
+      filters: instance.initialState.filters || [],
     }
   }
 

src/plugin-hooks/useFlexLayout.js

@@ -0,0 +1,50 @@
+export function useFlexLayout(hooks) {
+  hooks.getTableBodyProps.push((props, instance) => [
+    props,
+    {
+      style: {
+        minWidth: `${instance.totalColumnsWidth}px`,
+      },
+    },
+  ])
+
+  const getRowStyles = (props, instance) => [
+    props,
+    {
+      style: {
+        display: 'flex',
+        flex: '1 0 auto',
+        minWidth: `${instance.totalColumnsMinWidth}px`,
+      },
+    },
+  ]
+
+  hooks.getRowProps.push(getRowStyles)
+  hooks.getHeaderGroupProps.push(getRowStyles)
+
+  hooks.getHeaderProps.push((props, instance, header) => [
+    props,
+    {
+      style: {
+        boxSizing: 'border-box',
+        flex: `${header.totalWidth} 0 auto`,
+        minWidth: `${header.totalMinWidth}px`,
+        width: `${header.totalWidth}px`,
+      },
+    },
+  ])
+
+  hooks.getCellProps.push((props, instance, cell) => [
+    props,
+    {
+      style: {
+        boxSizing: 'border-box',
+        flex: `${cell.column.totalWidth} 0 auto`,
+        minWidth: `${cell.column.totalMinWidth}px`,
+        width: `${cell.column.totalWidth}px`,
+      },
+    },
+  ])
+}
+
+useFlexLayout.pluginName = 'useFlexLayout'

src/plugin-hooks/useGroupBy.js

@@ -46,7 +46,7 @@ const defaultGetGroupByToggleProps = (props, instance, header) => [
 ]
 
 // Reducer
-function reducer(state, action) {
+function reducer(state, action, previousState, instance) {
   if (action.type === actions.init) {
     return {
       groupBy: [],
@@ -57,7 +57,7 @@ function reducer(state, action) {
   if (action.type === actions.resetGroupBy) {
     return {
       ...state,
-      groupBy: [],
+      groupBy: instance.initialState.groupBy || [],
     }
   }
 
@@ -85,7 +85,9 @@ function flatColumns(flatColumns, { state: { groupBy } }) {
   // Sort grouped columns to the start of the column list
   // before the headers are built
 
-  const groupByColumns = groupBy.map(g => flatColumns.find(col => col.id === g))
+  const groupByColumns = groupBy
+    .map(g => flatColumns.find(col => col.id === g))
+    .filter(col => !!col)
   const nonGroupByColumns = flatColumns.filter(col => !groupBy.includes(col.id))
 
   flatColumns = [...groupByColumns, ...nonGroupByColumns]
@@ -180,6 +182,11 @@ function useInstance(instance) {
       return [rows, flatRows]
     }
 
+    // Ensure that the list of filtered columns exist
+    const existingGroupBy = groupBy.filter(g =>
+      flatColumns.find(col => col.id === g)
+    )
+
     // Find the columns that can or are aggregating
     // Uses each column to aggregate rows into a single value
     const aggregateRowsToValues = (rows, isAggregated) => {
@@ -187,7 +194,7 @@ function useInstance(instance) {
 
       flatColumns.forEach(column => {
         // Don't aggregate columns that are in the groupBy
-        if (groupBy.includes(column.id)) {
+        if (existingGroupBy.includes(column.id)) {
           values[column.id] = rows[0] ? rows[0].values[column.id] : null
           return
         }
@@ -234,11 +241,11 @@ function useInstance(instance) {
     // Recursively group the data
     const groupRecursively = (rows, depth = 0, parentId) => {
       // This is the last level, just return the rows
-      if (depth === groupBy.length) {
+      if (depth === existingGroupBy.length) {
         return rows
       }
 
-      const columnId = groupBy[depth]
+      const columnId = existingGroupBy[depth]
 
       // Group the rows together for this level
       let groupedRows = groupByFn(rows, columnId)
@@ -251,7 +258,10 @@ function useInstance(instance) {
 
           subRows = groupRecursively(subRows, depth + 1, id)
 
-          const values = aggregateRowsToValues(subRows, depth < groupBy.length)
+          const values = aggregateRowsToValues(
+            subRows,
+            depth < existingGroupBy.length
+          )
 
           const row = {
             id,

src/plugin-hooks/usePagination.js

@@ -37,7 +37,7 @@ function reducer(state, action, previousState, instance) {
   if (action.type === actions.resetPage) {
     return {
       ...state,
-      pageIndex: 0,
+      pageIndex: instance.initialState.pageIndex || 0,
     }
   }
 

src/plugin-hooks/useRowSelect.js

@@ -81,7 +81,7 @@ function reducer(state, action, previousState, instance) {
   if (action.type === actions.resetSelectedRows) {
     return {
       ...state,
-      selectedRowIds: {},
+      selectedRowIds: instance.initialState.selectedRowIds || {},
     }
   }
 
@@ -126,16 +126,16 @@ function reducer(state, action, previousState, instance) {
       return state
     }
 
-    let newSelectedRowPaths = { ...state.selectedRowIds }
+    let newSelectedRowIds = { ...state.selectedRowIds }
 
     const handleRowById = id => {
       const row = flatGroupedRowsById[id]
 
       if (!row.isGrouped) {
         if (!isSelected && shouldExist) {
-          newSelectedRowPaths[id] = true
+          newSelectedRowIds[id] = true
         } else if (isSelected && !shouldExist) {
-          delete newSelectedRowPaths[id]
+          delete newSelectedRowIds[id]
         }
       }
 
@@ -148,7 +148,7 @@ function reducer(state, action, previousState, instance) {
 
     return {
       ...state,
-      selectedRowIds: newSelectedRowPaths,
+      selectedRowIds: newSelectedRowIds,
     }
   }
 }

src/plugin-hooks/useRowState.js

@@ -18,7 +18,7 @@ export const useRowState = hooks => {
 
 useRowState.pluginName = 'useRowState'
 
-function reducer(state, action) {
+function reducer(state, action, previousState, instance) {
   if (action.type === actions.init) {
     return {
       rowState: {},
@@ -29,7 +29,7 @@ function reducer(state, action) {
   if (action.type === actions.resetRowState) {
     return {
       ...state,
-      rowState: {},
+      rowState: instance.initialState.rowState || {},
     }
   }
 

src/plugin-hooks/useSortBy.js

@@ -66,7 +66,7 @@ function reducer(state, action, previousState, instance) {
   if (action.type === actions.resetSortBy) {
     return {
       ...state,
-      sortBy: [],
+      sortBy: instance.initialState.sortBy || [],
     }
   }