v6.11.4

v6.11.3
Merge branch 'v6' of https://github.com/react-tools/react-table into v6
2026-08-19 08:20:30 +00:00 · 2019-12-05 15:10:12 -05:00 · 2019-12-05 15:07:36 -05:00 · 2019-12-05 14:41:42 -05:00 · 2019-12-05 14:41:26 -05:00 · 2019-12-05 14:40:51 -05:00
516 changed files with 48182 additions and 132230 deletions
@@ -1,16 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false
-      }
-    ],
-    "@babel/react"
-  ],
-  "env": {
-    "test": {
-      "presets": ["@babel/preset-env", "@babel/react"]
-    }
-  }
-}
@@ -1,3 +0,0 @@
-{
-  "extends": ["react-app", "prettier"]
-}
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'react-tools',
+}
@@ -1,5 +0,0 @@
-# These are supported funding model platforms
-
-github: tannerlinsley
-patreon: tannerlinsley
-custom: https://youtube.com/tannerlinsley
@@ -4,14 +4,6 @@ about: Create a report to help us improve

 ---

-# Using v6?
-
-v6 is now considered feature complete to its current abilities and limitations. We are not actively working to fix any issues for v6 any more. We will, however, merge any non-breaking pull requests submitted to fix anything in v6.
-
-# Using v7?
-
-Thanks for using the alpha version of React Table v7! We're very excited about it.
-
 **Describe the bug**
 A clear and concise description of what the bug is.

@@ -26,7 +18,7 @@ Steps to reproduce the behavior:
 A clear and concise description of what you expected to happen.

 **Codesandbox!**
-Use a new [react-table codesandbox](https://codesandbox.io/s/m5lxzzpz69) to reproduce the issue.
+Use a new [react-table codesandbox](codesandbox.io/s/X6npLXPRW) to reproduce the issue.

 **Screenshots**
 If applicable, add screenshots to help explain your problem.
@@ -4,6 +4,14 @@ about: Suggest an idea for this project

 ---

-# STOP
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

-We do not track feature requests through Github. Please use the [Spectrum React Table Forum](https://spectrum.chat/react-table) to talk about new ideas and features.
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
@@ -4,8 +4,8 @@ about: Looking for help? Need a question answered?

 ---

-# STOP
+STOP!!!

-We do not use Github to track general support. Please use our public support forum at https://spectrum.chat/react-table.
+Github issues is no place for general support. We encourage you to use our public support forum at https://spectrum.chat/react-table.

 NOTE: If a support/help/question issue is opened, it will be closed immediately and be redirected to the forum. Thanks for helping us keep our issues clean and productive!
@@ -1,7 +1,6 @@
-node_modules
-lib
-dist
-es
+node_modules/
+lib/
+es/
 docs/build
 react-table.js
 react-table.min.js
@@ -10,3 +9,4 @@ react-table.css
 .idea
 .DS_Store
 .history
+.vscode
@@ -1,6 +0,0 @@
-module.exports = {
-  hooks: {
-    'pre-commit': 'lint-staged && yarn test:ci',
-    'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
-  },
-}
@@ -1,7 +1,4 @@
 language: node_js
 node_js:
-  - "10"
-
-cache: yarn
-
+  - "6"
 script: npm test
@@ -1,3 +1,24 @@
+## 6.10.3
+
+- Further improve `normalizeComponent` function
+
+## 6.10.2
+
+- Fixed regression found in `normalizeComponent` function fix
+
+## 6.10.1
+
+- Fixed issues with `normalizeComponent` function
+
+## 6.10.0
+
+- Rebased volatile commits out of 6.9.0
+- Merged (hopefully) non-breaking fixes after rebasing and reverting.
+
+## 6.9.0
+
+This version has been reverted due to some major bugs that were introduced with it.
+
 ## 6.8.6

 #### Fixes & Optimizations
@@ -1,22 +0,0 @@
-{
-  "name": "react-table-simple-table",
-  "version": "0.0.1",
-  "description": null,
-  "keywords": [],
-  "main": "index.js",
-  "dependencies": {
-    "react-table": "6.7.0-alpha-0",
-    "react-dom": "15.5.3",
-    "react": "15.5.3",
-    "namor": "1.0.1"
-  },
-  "devDependencies": {
-    "react-scripts": "1.0.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
@@ -1,107 +0,0 @@
-import React from "react";
-import { render } from "react-dom";
-import { makeData, Logo, Tips } from "./Utils";
-
-// Import React Table
-import ReactTable from "react-table";
-import "react-table/react-table.css";
-
-class App extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      data: makeData(),
-      key: 0,
-      columns: [
-        {
-          Header: "Name",
-          columns: [
-            {
-              Header: "First Name",
-              accessor: "firstName",
-              show: true
-            },
-            {
-              Header: "Last Name",
-              id: "lastName",
-              accessor: d => d.lastName
-            }
-          ]
-        },
-        {
-          Header: "Info",
-          columns: [
-            {
-              Header: "Age",
-              accessor: "age"
-            },
-            {
-              Header: "Status",
-              accessor: "status"
-            }
-          ]
-        },
-        {
-          Header: "Stats",
-          columns: [
-            {
-              Header: "Visits",
-              accessor: "visits"
-            }
-          ]
-        }
-      ]
-    };
-  }
-
-  chnageColumnsAndKey = () => {
-
-    const { columns } = this.state;
-    let updatedColumns = columns;
-
-    // this style of update is technically considered a mutation
-    updatedColumns[0].columns[0].show = false;
-
-    this.setState(state => {
-      // But, by returning a new array instead of utilizing the old one, we can skirt the issue.
-      return { columns: [...updatedColumns], key: state.key + 1 };
-    });
-  };
-
-  changeColumns = () => {
-    const { columns } = this.state;
-    let updatedColumns = columns;
-
-    // this style of update is technically considered a mutation.
-    updatedColumns[0].columns[0].show = false;
-
-    this.setState(state => {
-      // But, by returning a new array instead of utilizing the old one, we can skirt the issue.
-      return { columns: [...updatedColumns] };
-    });
-  };
-
-  render() {
-    const { data, columns, key } = this.state;
-    return (
-      <div>
-        <button onClick={this.changeColumns}>Hide firstname (broken)</button>
-        <button onClick={this.chnageColumnsAndKey}>
-          hide firstname (hacky fix)
-        </button>
-        <ReactTable
-          key={key}
-          data={data}
-          columns={columns}
-          defaultPageSize={10}
-          className="-striped -highlight"
-        />
-        <br />
-        <Tips />
-        <Logo />
-      </div>
-    );
-  }
-}
-
-render(<App />, document.getElementById("root"));
@@ -1,13 +0,0 @@
-{
-  "name": "react-table-simple-table",
-  "version": "1.0.0",
-  "description": "",
-  "keywords": [],
-  "main": "index.js",
-  "dependencies": {
-    "react-table": "6.7.0-alpha-0",
-    "react-dom": "15.5.3",
-    "react": "15.5.3",
-    "namor": "1.0.1"
-  }
-}
@@ -1,21 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# 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*
@@ -1,38 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="theme-color" content="#000000">
-  <!--
-    manifest.json provides metadata used when your web app is added to the
-    homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-  -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-  <!--
-    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>
-  <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>
@@ -1,15 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "192x192",
-      "type": "image/png"
-    }
-  ],
-  "start_url": "./index.html",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
@@ -1,5 +0,0 @@
-body {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
-  font-weight: 300;
-  font-size: 14px;
-}
@@ -1,21 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# 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*
@@ -1,22 +0,0 @@
-{
-  "name": "react-table-sub-components",
-  "version": "0.0.2",
-  "description": null,
-  "keywords": [],
-  "main": "index.js",
-  "dependencies": {
-    "react-table": "6.5.3",
-    "react-dom": "15.5.3",
-    "react": "15.5.3",
-    "namor": "1.0.1"
-  },
-  "devDependencies": {
-    "react-scripts": "1.0.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}
@@ -1,38 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="theme-color" content="#000000">
-  <!--
-    manifest.json provides metadata used when your web app is added to the
-    homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-  -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-  <!--
-    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>
-  <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>
@@ -1,15 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "192x192",
-      "type": "image/png"
-    }
-  ],
-  "start_url": "./index.html",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
@@ -1,52 +0,0 @@
-// In production, we register a service worker to serve assets from local cache.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the "N+1" visit to a page, since previously
-// cached resources are updated in the background.
-
-// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
-// This link also includes instructions on opting out of this behavior.
-
-export default function register() {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-      navigator.serviceWorker
-        .register(swUrl)
-        .then(registration => {
-          // eslint-disable-next-line no-param-reassign
-          registration.onupdatefound = () => {
-            const installingWorker = registration.installing;
-            installingWorker.onstatechange = () => {
-              if (installingWorker.state === 'installed') {
-                if (navigator.serviceWorker.controller) {
-                  // At this point, the old content will have been purged and
-                  // the fresh content will have been added to the cache.
-                  // It's the perfect time to display a "New content is
-                  // available; please refresh." message in your web app.
-                  console.log('New content is available; please refresh.'); // eslint-disable-line no-console
-                } else {
-                  // At this point, everything has been precached.
-                  // It's the perfect time to display a
-                  // "Content is cached for offline use." message.
-                  console.log('Content is cached for offline use.'); // eslint-disable-line no-console
-                }
-              }
-            };
-          };
-        })
-        .catch(error => {
-          console.error('Error during service worker registration:', error);
-        });
-    });
-  }
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
-  }
-}
@@ -1,5 +0,0 @@
-body {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
-  font-weight: 300;
-  font-size: 14px;
-}
@@ -1,98 +0,0 @@
-import React from "react";
-import { render } from "react-dom";
-import { makeData, Logo, Tips } from "./Utils";
-
-// Import React Table
-import ReactTable from "react-table";
-import "react-table/react-table.css";
-
-const columns = [
-  {
-    Header: "Name",
-    columns: [
-      {
-        Header: "First Name",
-        accessor: "firstName"
-      },
-      {
-        Header: "Last Name",
-        id: "lastName",
-        accessor: d => d.lastName
-      }
-    ]
-  },
-  {
-    Header: "Info",
-    columns: [
-      {
-        Header: "Age",
-        accessor: "age"
-      },
-      {
-        Header: "Status",
-        accessor: "status"
-      }
-    ]
-  },
-  {
-    Header: "Stats",
-    columns: [
-      {
-        Header: "Visits",
-        accessor: "visits"
-      }
-    ]
-  }
-];
-
-class App extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      data: makeData()
-    };
-  }
-  render() {
-    const { data } = this.state;
-    return (
-      <div>
-        <ReactTable
-          data={data}
-          columns={columns}
-          defaultPageSize={10}
-          className="-striped -highlight"
-          SubComponent={row => {
-            return (
-              <div style={{ padding: "20px" }}>
-                <em>
-                  You can put any component you want here, even another React
-                  Table!
-                </em>
-                <br />
-                <br />
-                <ReactTable
-                  data={data}
-                  columns={columns}
-                  defaultPageSize={3}
-                  showPagination={false}
-                  SubComponent={row => {
-                    return (
-                      <div style={{ padding: "20px" }}>
-                        Another Sub Component!
-                      </div>
-                    );
-                  }}
-                />
-              </div>
-            );
-          }}
-        />
-        <br />
-        <Tips />
-        <Logo />
-      </div>
-    );
-  }
-}
-
-render(<App />, document.getElementById("root"));
@@ -1 +0,0 @@
-module.exports = { extends: ['@commitlint/config-conventional'] }
@@ -1,16 +0,0 @@
-const path = require('path')
-
-module.exports = {
-  moduleDirectories: [
-    'node_modules',
-    /*
-     * __dirname makes 'test/utils' available in tests, e.g.
-     *
-     * const {myModule} = require('utils/my-test-helper')
-     */
-    __dirname,
-  ],
-  rootDir: path.resolve(__dirname, '../../'),
-  roots: ['<rootDir>/src', __dirname],
-  transformIgnorePatterns: ['node_modules'],
-}
@@ -1,13 +0,0 @@
-const {rootDir} = require('./jest.common');
-
-module.exports = {
-  rootDir,
-
-  displayName: 'lint',
-
-  runner: 'jest-runner-eslint',
-
-  testMatch: ['<rootDir>/src/**/*.js'],
-
-  testPathIgnorePatterns: ['node_modules', 'coverage', 'dist', '.test.js'],
-};
@@ -1,12 +0,0 @@
-const commonConfig = require('./jest.common')
-
-module.exports = {
-  ...commonConfig,
-  displayName: 'unit',
-  coverageDirectory: '../../coverage',
-  testMatch: ['<rootDir>/src/**/*.test.js'],
-  transform: {
-    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
-  },
-  setupFilesAfterEnv: ['./configs/tests/setup.common.js'],
-}
@@ -1 +0,0 @@
-import 'snapshot-diff/extend-expect'
@@ -0,0 +1,77 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 8,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+      node: false,
+      classes: true
+    },
+    sourceType: 'module'
+  },
+
+  parser: 'babel-eslint',
+
+  extends: ['standard'],
+
+  plugins: ['react'],
+
+  rules: {
+    // Nozzle
+    'jsx-quotes': [2, 'prefer-single'],
+    'comma-dangle': [2, 'always-multiline'],
+
+    // // React
+    'react/jsx-boolean-value': 2,
+    'react/jsx-curly-spacing': [2, 'never'],
+    'react/jsx-equals-spacing': [2, 'never'],
+    // 'react/jsx-indent': 2,
+    'react/jsx-indent-props': [2, 2],
+    'react/jsx-no-duplicate-props': 2,
+    'react/jsx-no-undef': 2,
+    'react/jsx-tag-spacing': [
+      2,
+      {
+        closingSlash: 'never',
+        beforeSelfClosing: 'always',
+        afterOpening: 'never'
+      }
+    ],
+    'react/jsx-uses-react': 2,
+    'react/jsx-uses-vars': 2,
+    'react/self-closing-comp': 2,
+    'react/jsx-no-bind': [
+      2,
+      {
+        allowArrowFunctions: true,
+        allowBind: false,
+        ignoreRefs: true
+      }
+    ],
+    'react/no-did-update-set-state': 2,
+    'react/no-unknown-property': 2,
+    'react/react-in-jsx-scope': 2,
+    'react/jsx-closing-bracket-location': [0, 'tag-aligned'],
+    'react/jsx-tag-spacing': [2, { beforeSelfClosing: 'always' }],
+    'react/jsx-wrap-multilines': 2,
+    'react/self-closing-comp': 2,
+    'react/jsx-key': 2,
+    'react/jsx-no-comment-textnodes': 2,
+    'react/jsx-no-duplicate-props': 2,
+    'react/jsx-no-target-blank': 2,
+    'react/jsx-no-undef': 2,
+    'react/jsx-uses-react': 2,
+    'react/jsx-uses-vars': 2,
+    'react/no-danger-with-children': 2,
+    'react/no-deprecated': 2,
+    'react/no-direct-mutation-state': 2,
+    'react/no-find-dom-node': 2,
+    'react/no-is-mounted': 2,
+    'react/no-render-return-value': 2,
+    'react/no-string-refs': 2,
+    'react/no-unknown-property': 2,
+    'react/react-in-jsx-scope': 2,
+    'react/require-render-return': 2
+    // 'react/jsx-max-props-per-line': [2, { maximum: 1 }]
+  }
+}
@@ -0,0 +1 @@
+react-table.js.org
@@ -0,0 +1,53 @@
+{
+  "name": "new",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "autoprefixer": "^6.7.0",
+    "babel-cli": "6.14.0",
+    "babel-eslint": "6.1.2",
+    "babel-preset-es2015": "6.14.0",
+    "babel-preset-react": "6.11.1",
+    "babel-preset-stage-2": "6.13.0",
+    "eslint": "^4.1.1",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-plugin-class-property": "^1.0.6",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-node": "^5.2.1",
+    "eslint-plugin-promise": "^3.6.0",
+    "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "html-element-attributes": "^1.3.0",
+    "match-sorter": "^1.8.0",
+    "npm-run-all": "^3.1.1",
+    "onchange": "^3.0.2",
+    "postcss-cli": "^2.6.0",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-json-tree": "^0.10.9",
+    "rimraf": "^2.6.1",
+    "standard": "^10.0.2",
+    "stylus": "^0.54.5"
+  },
+  "dependencies": {
+    "eslint-config-react-tools": "^1.0.10",
+    "github-markdown-css": "^2.6.0",
+    "marked": "^0.3.6",
+    "namor": "^1.0.1",
+    "raw-loader": "^0.5.1",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-json-tree": "^0.10.9",
+    "react-script": "^2.0.5",
+    "react-scripts": "^0.9.5",
+    "react-story": "^0.0.10",
+    "shortid": "^2.2.8"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
@@ -1,17 +1,11 @@
-<!DOCTYPE html>
+<!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" />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
-      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.
+      Notice the use of %PUBLIC_URL% in the tag 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.

@@ -19,10 +13,9 @@
      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>
+    <title>React Table - A lightweight, fast and extendable datagrid built for React</title>
  </head>
  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
@@ -31,8 +24,8 @@
      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`.
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
    -->
  </body>
 </html>
@@ -0,0 +1,120 @@
+/* eslint-disable */
+
+import React from 'react';
+//
+import ReactStory, { defaultProps } from 'react-story';
+import CodeSandbox from './CodeSandbox.js';
+import './stories/utils/prism.css';
+import '../../react-table.css';
+
+import Readme from './stories/Readme.js';
+import HOCReadme from './stories/HOCReadme.js';
+
+// import Test from './stories/test.js'
+
+// import Tester from './examples/expander';
+
+const stories = [
+  { name: 'Readme', component: Readme },
+  { name: 'HOC Readme', component: HOCReadme },
+
+  // { name: 'Tester', component: Test },
+  { name: 'Simple Table', component: CodeSandbox('X6npLXPRW') },
+  {
+    name: 'Cell Renderers & Custom Components',
+    component: CodeSandbox('OyRL04Z4Y')
+  },
+  { name: 'Default Sorting', component: CodeSandbox('gLwmmjzA3') },
+  {
+    name: 'Custom Sorting',
+    component: CodeSandbox('VGx67J35')
+  },
+  { name: 'Custom Column Widths', component: CodeSandbox('o2OORXNXN') },
+  { name: 'Custom Component Props', component: CodeSandbox('nZW3L0wp4') },
+  { name: 'Server-side Data', component: CodeSandbox('wjrn8wy3R') },
+  { name: 'Sub Components', component: CodeSandbox('n2gqAxl7') },
+  { name: 'Pivoting & Aggregation', component: CodeSandbox('oNY9z8xN') },
+  {
+    name: 'Pivoting & Aggregation w/ Sub Components',
+    component: CodeSandbox('p0kEVBgQ')
+  },
+  {
+    name: '100k Rows w/ Pivoting & Sub Components',
+    component: CodeSandbox('DRmKj0XyK')
+  },
+  { name: 'Pivoting Options', component: CodeSandbox('kZKmNBK6r') },
+  { name: 'Functional Rendering', component: CodeSandbox('VPZ0Bzv8X') },
+  {
+    name: 'Custom Expander Position',
+    component: CodeSandbox('1jj2XrPEV')
+  },
+  { name: 'Custom "No Data" Text', component: CodeSandbox('RgRpRDv80') },
+  { name: 'Footers', component: CodeSandbox('KOqQXn3p8') },
+  { name: 'Custom Filtering', component: CodeSandbox('5Eyxxxyx') },
+  { name: 'Controlled Component', component: CodeSandbox('r7XEZRK2') },
+  { name: 'Editable Table', component: CodeSandbox('n5r19gzQP') },
+  {
+    name: 'Fixed Header w/ Vertical Scroll',
+    component: CodeSandbox('7LY0gjA8O')
+  },
+  {
+    name: 'Multiple Pagers (Top and Bottom)',
+    component: CodeSandbox('VEZ8OgvX')
+  },
+
+  { name: 'Tree Table (HOC)', component: CodeSandbox('lxmr4wynzq') },
+  { name: 'Select Table (HOC)', component: CodeSandbox('7yq5ylw09j') },
+  { name: 'Select Tree Table (HOC)', component: CodeSandbox('2p7jp4klwp') },
+  { name: 'Foldable Table (HOC)', component: CodeSandbox('8pkrj5yorl') },
+  { name: 'Advanced Expand Table (HOC)', component: CodeSandbox('y2m39jz8v1') }
+];
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <ReactStory
+        style={{
+          display: 'block',
+          width: '100%',
+          height: '100%'
+        }}
+        pathPrefix="story/"
+        StoryWrapper={props => (
+          <defaultProps.StoryWrapper
+            css={{
+              padding: 0,
+              display: 'flex',
+              flexDirection: 'column'
+            }}
+          >
+            <a
+              href="//github.com/react-tools/react-table"
+              style={{
+                display: 'block',
+                textAlign: 'center',
+                borderBottom: 'solid 3px #cccccc'
+              }}
+            >
+              <img
+                src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
+                alt="React Table Logo"
+                style={{
+                  width: '150px',
+                  padding: '10px'
+                }}
+              />
+            </a>
+            <div
+              {...props}
+              style={{
+                flex: '1 0 auto',
+                position: 'relative'
+              }}
+            />
+          </defaultProps.StoryWrapper>
+        )}
+        stories={stories}
+      />
+    );
+  }
+}
@@ -0,0 +1,21 @@
+import React from "react";
+
+export default id => () => {
+  return (
+    <iframe
+      src={`https://codesandbox.io/embed/${id}?autoresize=1&hidenavigation=1&view=${
+        global.innerWidth < 1000 ? "preview" : "split"
+      }`}
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: `100%`,
+        height: `100%`,
+        border: 0,
+        overflow: `hidden`
+      }}
+      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+    />
+  );
+};
@@ -0,0 +1,116 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { makeData, Logo, Tips } from './Utils';
+import { advancedExpandTableHOC } from '../../../../lib/hoc/advancedExpandTable';
+
+// Import React Table
+import ReactTable from 'react-table';
+import 'react-table/react-table.css';
+
+const columns = [
+  {
+    Header: 'First Name',
+    accessor: 'firstName',
+    Cell: props => {
+      const {
+        // react table props
+        columnProps: { rest: { showRowSubComponent } },
+        nestingPath
+      } = props;
+      return (
+        <div>
+          <button
+            onClick={e => showRowSubComponent({ nestingPath: nestingPath }, e)}
+          >
+            SHOW SUBCOMPONENT {props.value}
+          </button>
+        </div>
+      );
+    }
+  },
+  {
+    Header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName
+  },
+  {
+    Header: 'Info',
+    columns: [
+      {
+        Header: 'Age',
+        accessor: 'age',
+        Cell: props => {
+          const {
+            // react table props
+            columnProps: { rest: { toggleRowSubComponent } },
+            nestingPath
+          } = props;
+          return (
+            <div>
+              <button
+                onClick={e =>
+                  toggleRowSubComponent({ nestingPath: nestingPath }, e)
+                }
+              >
+                TOGGLE SUBCOMPONENT {props.value}
+              </button>
+            </div>
+          );
+        }
+      },
+      {
+        Header: 'Status',
+        accessor: 'status'
+      }
+    ]
+  },
+  {
+    Header: 'Stats',
+    columns: [
+      {
+        Header: 'Visits',
+        accessor: 'visits'
+      }
+    ]
+  }
+];
+
+const AdvancedExpandReactTable = advancedExpandTableHOC(ReactTable);
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: makeData()
+    };
+  }
+  render() {
+    const { data } = this.state;
+    return (
+      <div>
+        <AdvancedExpandReactTable
+          data={data}
+          columns={columns}
+          defaultPageSize={10}
+          className='-striped -highlight'
+          SubComponent={({ row, nestingPath, toggleRowSubComponent }) => {
+            return (
+              <div style={{ padding: '20px' }}>
+                <button
+                  onClick={e => toggleRowSubComponent({ nestingPath }, e)}
+                >
+                  CLOSE SUBCOMPONENT {row.firstName} {row.lastName}
+                </button>
+              </div>
+            );
+          }}
+        />
+        <br />
+        <Tips />
+        <Logo />
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById('root'));
@@ -0,0 +1,94 @@
+import React from "react";
+
+export default Component => {
+  const wrapper = class RTCheckboxTable extends React.Component {
+    // we only need a Component so we can get the 'ref' - pure components can't get a 'ref'
+
+    rowSelector = row => {
+      if (!row || !row.hasOwnProperty(this.props.keyField)) return null;
+      const checked = this.props.isSelected(row[this.props.keyField]);
+      return (
+        <input
+          type="checkbox"
+          checked={checked}
+          onClick={e => {
+            const { shiftKey } = e;
+            e.stopPropagation();
+            this.props.toggleSelection(row[this.props.keyField], shiftKey, row);
+          }}
+          onChange={() => {}}
+          value=""
+        />
+      );
+    };
+
+    headSelector = row => {
+      const checked = this.props.selectAll;
+      return (
+        <input
+          type="checkbox"
+          checked={checked}
+          onClick={e => {
+            e.stopPropagation();
+            this.props.toggleAll();
+          }}
+          onChange={() => {}}
+          value=""
+        />
+      );
+    };
+
+    // this is so we can expose the underlying ReactTable to get at the sortedData for selectAll
+    getWrappedInstance = () => this.wrappedInstance;
+
+    render() {
+      const {
+        columns: originalCols,
+        isSelected,
+        toggleSelection,
+        toggleAll,
+        keyField,
+        selectAll,
+        ...rest
+      } = this.props;
+      const { rowSelector, headSelector } = this;
+      const select = {
+        id: "_selector",
+        accessor: () => "x", // this value is not important
+        Header: headSelector,
+        Cell: ci => {
+          return rowSelector(ci.original);
+        },
+        width: 30,
+        filterable: false,
+        sortable: false,
+        resizable: false,
+        style: { textAlign: "center" }
+      };
+      const columns = [select, ...originalCols];
+      const extra = {
+        columns
+      };
+      return (
+        <Component {...rest} {...extra} ref={r => (this.wrappedInstance = r)} />
+      );
+    }
+  };
+
+  wrapper.displayName = "RTCheckboxTable";
+  wrapper.defaultProps = {
+    keyField: "_id",
+    isSelected: key => {
+      console.log("No isSelected handler provided:", { key });
+    },
+    selectAll: false,
+    toggleSelection: (key, shift, row) => {
+      console.log("No toggleSelection handler provided:", { key, shift, row });
+    },
+    toggleAll: () => {
+      console.log("No toggleAll handler provided.");
+    }
+  };
+
+  return wrapper;
+};
@@ -0,0 +1,148 @@
+import React from "react";
+import shortid from "shortid";
+
+import ReactTable from "../../../../lib/index";
+import "../../../../react-table.css";
+
+import checkboxTableHOC from "./checkboxHOC";
+
+const CheckboxTable = checkboxTableHOC(ReactTable);
+
+async function getData() {
+  const result = await (await fetch("/au_500_tree.json")).json();
+  // we are adding a unique ID to the data for tracking the selected records
+  return result.map(item => {
+    const _id = shortid.generate();
+    return {
+      _id,
+      ...item
+    };
+  });
+}
+
+function getColumns(data) {
+  const columns = [];
+  const sample = data[0];
+  for (let key in sample) {
+    if (key === "_id") continue;
+    columns.push({
+      accessor: key,
+      Header: key
+    });
+  }
+  return columns;
+}
+
+export class ComponentTest extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: null,
+      columns: null,
+      selection: [],
+      selectAll: false
+    };
+  }
+  componentDidMount() {
+    getData().then(data => {
+      const columns = getColumns(data);
+      this.setState({ data, columns });
+    });
+  }
+  toggleSelection = (key, shift, row) => {
+    /*
+      Implementation of how to manage the selection state is up to the developer.
+      This implementation uses an array stored in the component state.
+      Other implementations could use object keys, a Javascript Set, or Redux... etc.
+    */
+    // start off with the existing state
+    let selection = [...this.state.selection];
+    const keyIndex = selection.indexOf(key);
+    // check to see if the key exists
+    if (keyIndex >= 0) {
+      // it does exist so we will remove it using destructing
+      selection = [
+        ...selection.slice(0, keyIndex),
+        ...selection.slice(keyIndex + 1)
+      ];
+    } else {
+      // it does not exist so add it
+      selection.push(key);
+    }
+    // update the state
+    this.setState({ selection });
+  };
+  toggleAll = () => {
+    /*
+      'toggleAll' is a tricky concept with any filterable table
+      do you just select ALL the records that are in your data?
+      OR
+      do you only select ALL the records that are in the current filtered data?
+      
+      The latter makes more sense because 'selection' is a visual thing for the user.
+      This is especially true if you are going to implement a set of external functions
+      that act on the selected information (you would not want to DELETE the wrong thing!).
+      
+      So, to that end, access to the internals of ReactTable are required to get what is
+      currently visible in the table (either on the current page or any other page).
+      
+      The HOC provides a method call 'getWrappedInstance' to get a ref to the wrapped
+      ReactTable and then get the internal state and the 'sortedData'. 
+      That can then be iterrated to get all the currently visible records and set
+      the selection state.
+    */
+    const selectAll = this.state.selectAll ? false : true;
+    const selection = [];
+    if (selectAll) {
+      // we need to get at the internals of ReactTable
+      const wrappedInstance = this.checkboxTable.getWrappedInstance();
+      // the 'sortedData' property contains the currently accessible records based on the filter and sort
+      const currentRecords = wrappedInstance.getResolvedState().sortedData;
+      // we just push all the IDs onto the selection array
+      currentRecords.forEach(item => {
+        selection.push(item._original._id);
+      });
+    }
+    this.setState({ selectAll, selection });
+  };
+  isSelected = key => {
+    /*
+      Instead of passing our external selection state we provide an 'isSelected'
+      callback and detect the selection state ourselves. This allows any implementation
+      for selection (either an array, object keys, or even a Javascript Set object).
+    */
+    return this.state.selection.includes(key);
+  };
+  logSelection = () => {
+    console.log("selection:", this.state.selection);
+  };
+  render() {
+    const { toggleSelection, toggleAll, isSelected, logSelection } = this;
+    const { data, columns, selectAll } = this.state;
+    const extraProps = {
+      selectAll,
+      isSelected,
+      toggleAll,
+      toggleSelection
+    };
+    return (
+      <div style={{ padding: "10px" }}>
+        <h1>react-table - Checkbox Table</h1>
+        <button onClick={logSelection}>Log Selection to Console</button>
+        {` (${this.state.selection.length}) selected`}
+        {data ? (
+          <CheckboxTable
+            data={data}
+            columns={columns}
+            ref={r => (this.checkboxTable = r)}
+            className="-striped -highlight"
+            {...extraProps}
+          />
+        ) : null}
+      </div>
+    );
+  }
+}
+
+// export default treeTableHOC(ComponentTest);
+export default ComponentTest;
@@ -0,0 +1,60 @@
+import React from "react";
+
+export default class ComponentTest extends React.component {
+  render() {
+    return <div>Bozo</div>;
+  }
+}
+
+// import ReactTable from '../../../../lib/index'
+// import '../../../../react-table.css'
+//
+// console.log('ReactTable:',ReactTable)
+//
+// const data = [
+//   {one:"1.1",two:"1.2"},
+//   {one:"2.1",two:"2.2"},
+//   {one:"3.1",two:"3.2"},
+//   {one:"4.1",two:"4.2"},
+// ]
+//
+// const columns = [
+//   {accessor:'one', Header: 'One'},
+//   {accessor:'two', Header: 'Two'},
+// ]
+//
+// class ExpanderComponent extends React.Component {
+//   render()
+//   {
+//     return (
+//       <div className={`rt-expander ${this.props.isExpanded ? '-open' : ''}`}>
+//         &bull;
+//       </div>
+//     )
+//   }
+// }
+//
+// class SubComponent extends React.Component {
+//   render()
+//   {
+//     return <div>Nothing</div>
+//   }
+// }
+//
+// export default class ComponentTest extends React.Component {
+//   render()
+//   {
+//     const rtProps = {
+//       data,
+//       columns,
+//       // ExpanderComponent: (props, closeExpanded)=><ExpanderComponent {...props, closeExpanded} />,
+//       // SubComponent: (props)=><SubComponent {...props} />,
+//       // multiSort: false,
+//     }
+//     return (
+//       <ReactTable
+//         {...rtProps}
+//       />
+//     )
+//   }
+// }
@@ -0,0 +1,110 @@
+import React from 'react'
+import ReactTable from '../../../../lib/index'
+import FoldableTableHOC from '../../../../lib/hoc/foldableTable'
+import selectTableHOC from '../../../../lib/hoc/selectTable'
+
+const FoldableTable = FoldableTableHOC(selectTableHOC(ReactTable))
+
+export default class FoldableTableCustomState extends React.Component {
+    constructor(props, context) {
+        super(props, context)
+
+        this.state = { folded: {}, seleted: {}, selectedAll: false }
+    }
+
+    getData = () => [{
+        id: 1,
+        first_name: 'Jeanette',
+        'last_name': 'Penddreth',
+        email: 'jpenddreth0@census.gov',
+        'gender': 'Female',
+        ip_address: '26.58.193.2',
+    }, {
+        'id': 2,
+        'first_name': 'Giavani',
+        last_name: 'Frediani',
+        'email': 'gfrediani1@senate.gov',
+        'gender': 'Male',
+        'ip_address': '229.179.4.212',
+    }, {
+        'id': 3,
+        first_name: 'Noell',
+        last_name: 'Bea',
+        'email': 'nbea2@imageshack.us',
+        gender: 'Female',
+        ip_address: '180.66.162.255',
+    }, {
+        'id': 4,
+        'first_name': 'Willard',
+        'last_name': 'Valek',
+        email: 'wvalek3@vk.com',
+        'gender': 'Male',
+        ip_address: '67.76.188.26',
+    }];
+
+    toggleSelection = (key, shift, row) => {
+        const { selected } = this.state
+        let newSelected = Object.assign({}, selected)
+        newSelected[key] = !newSelected[key]
+        this.setState(p => ({ selected: newSelected }))
+    };
+
+    toggleAll = () => {
+        const { selectedAll } = this.state
+
+        if (selectedAll) { this.setState(p => { return { selectedAll: false, seleted: {} } }); }
+        else {
+            const data = this.getData()
+
+            let newSelected = {}
+            data.forEach(d => newSelected[d.id] = true)
+            this.setState(p => ({ selectedAll: true, seleted: newSelected }))
+        }
+    }
+
+    isSelected = key => this.state.seleted[key];
+
+    render() {
+        return (<FoldableTable
+            //SelectTable props
+            keyField='id'
+            toggleSelection={this.toggleSelection}
+            toggleAll={this.toggleAll}
+            isSelected={this.isSelected}
+            selectAll={this.state.selectedAll}
+            selectType='checkbox'
+
+            onFoldChange={newFolded => this.setState(p => { return { folded: newFolded } })}
+            folded={this.state.folded}
+
+            data={this.getData()}
+            columns={[{
+                Header: "Name",
+                foldable: true,
+                columns: [
+                    {
+                        Header: "First Name",
+                        accessor: "first_name"
+                    },
+                    {
+                        Header: "Last Name",
+                        accessor: "last_name"
+                    }
+                ]
+            }, {
+                Header: "Info",
+                foldable: true,
+                columns: [
+                    {
+                        Header: "Email",
+                        accessor: "email"
+                    },
+                    {
+                        Header: "Gender",
+                        accessor: "gender"
+                    }
+                ]
+            }]
+            }></FoldableTable>)
+    }
+}
@@ -0,0 +1,71 @@
+import React from 'react'
+import ReactTable from '../../../../lib/index'
+import FoldableTableHOC from '../../../../lib/hoc/foldableTable'
+
+const FoldableTable = FoldableTableHOC(ReactTable)
+
+export default class FoldableTableWithHeader extends React.Component {
+
+    getData = () => [{
+        id: 1,
+        first_name: 'Jeanette',
+        last_name: 'Penddreth',
+        'email': 'jpenddreth0@census.gov',
+        gender: 'Female',
+        'ip_address': '26.58.193.2',
+    }, {
+        'id': 2,
+        first_name: 'Giavani',
+        last_name: 'Frediani',
+        email: 'gfrediani1@senate.gov',
+        gender: 'Male',
+        'ip_address': '229.179.4.212',
+    }, {
+        'id': 3,
+        'first_name': 'Noell',
+        last_name: 'Bea',
+        'email': 'nbea2@imageshack.us',
+        'gender': 'Female',
+        ip_address: '180.66.162.255',
+    }, {
+        'id': 4,
+        'first_name': 'Willard',
+        'last_name': 'Valek',
+        email: 'wvalek3@vk.com',
+        'gender': 'Male',
+        ip_address: '67.76.188.26',
+    }];
+
+    render() {
+        return (<FoldableTable
+            data={this.getData()}
+            columns={[{
+                Header: "Name",
+                foldable: true,
+                columns: [
+                    {
+                        Header: "First Name",
+                        accessor: "first_name"
+                    },
+                    {
+                        Header: "Last Name",
+                        accessor: "last_name"
+                    }
+                ]
+            }, {
+                Header: "Info",
+                foldable: true,
+                columns: [
+                    {
+                        Header: "Email",
+                        accessor: "email"
+                    },
+                    {
+                        Header: "Gender",
+                        accessor: "gender"
+                    }
+                ]
+            }]
+            }></FoldableTable>)
+    }
+}
@@ -0,0 +1,64 @@
+import React from 'react';
+import ReactTable from '../../../../lib/index';
+import FoldableTableHOC from '../../../../lib/hoc/foldableTable';
+
+const FoldableTable = FoldableTableHOC(ReactTable);
+
+export default class FoldableTableWithoutHeader extends React.Component {
+
+    getData = () => [{
+        "id": 1,
+        "first_name": "Jeanette",
+        "last_name": "Penddreth",
+        "email": "jpenddreth0@census.gov",
+        "gender": "Female",
+        "ip_address": "26.58.193.2"
+    }, {
+        "id": 2,
+        "first_name": "Giavani",
+        "last_name": "Frediani",
+        "email": "gfrediani1@senate.gov",
+        "gender": "Male",
+        "ip_address": "229.179.4.212"
+    }, {
+        "id": 3,
+        "first_name": "Noell",
+        "last_name": "Bea",
+        "email": "nbea2@imageshack.us",
+        "gender": "Female",
+        "ip_address": "180.66.162.255"
+    }, {
+        "id": 4,
+        "first_name": "Willard",
+        "last_name": "Valek",
+        "email": "wvalek3@vk.com",
+        "gender": "Male",
+        "ip_address": "67.76.188.26"
+    }];
+
+    render() {
+        return <FoldableTable
+            data={this.getData()}
+            columns={[
+                {
+                    Header: "First Name",
+                    accessor: "first_name"
+                },
+                {
+                    Header: "Last Name",
+                    accessor: "last_name",
+                    foldable: true,
+                },
+                {
+                    Header: "Email",
+                    accessor: "email",
+                    foldable: true,
+                },
+                {
+                    Header: "Gender",
+                    accessor: "gender",
+                    foldable: true,
+                }
+            ]}></FoldableTable>
+    }
+}
@@ -0,0 +1,30 @@
+
+import React from 'react'
+import '../../../../react-table.css'
+
+import FoldableTableWithHeader from './FoldableTableWithHeader'
+import FoldableTableWithoutHeader from './FoldableTableWithoutHeader'
+import FoldableTableCustomState from './FoldableTableCustomState'
+
+class FaldableComponentTest extends React.Component {
+    render() {
+
+        return (
+            <div>
+                <p>- Sample With Header Columns</p>
+                <br />
+                <FoldableTableWithHeader />
+                <br /> <br />
+                <p>- Sample With Normal Columns</p>
+                <br />
+                <FoldableTableWithoutHeader />
+                <br /> <br />
+                <p>- Custom State and selectedTable</p>
+                <br />
+                <FoldableTableCustomState />
+            </div >
+        )
+    }
+}
+
+export default FaldableComponentTest
@@ -0,0 +1,13 @@
+/* eslint-disable */
+
+import TreeTable from './treetable'
+import SelectTable from './selecttable'
+import SelectTreeTable from './selecttreetable'
+import FoldableTable from './foldabletable';
+
+export {
+  TreeTable,
+  SelectTable,
+  SelectTreeTable,
+  FoldableTable
+}
@@ -0,0 +1,173 @@
+import React from "react";
+import shortid from "shortid";
+
+import ReactTable from "../../../../lib/index";
+import "../../../../react-table.css";
+
+import selectTableHOC from "../../../../lib/hoc/selectTable";
+
+const SelectTable = selectTableHOC(ReactTable);
+
+async function getData() {
+  const result = await (await fetch("/au_500_tree.json")).json();
+  // we are adding a unique ID to the data for tracking the selected records
+  return result.map(item => {
+    const _id = shortid.generate();
+    return {
+      _id,
+      ...item
+    };
+  });
+}
+
+function getColumns(data) {
+  const columns = [];
+  const sample = data[0];
+  for (let key in sample) {
+    if (key === "_id") continue;
+    columns.push({
+      accessor: key,
+      Header: key
+    });
+  }
+  return columns;
+}
+
+export class ComponentTest extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: null,
+      columns: null,
+      selection: [],
+      selectAll: false,
+      selectType: "checkbox"
+    };
+  }
+  componentDidMount() {
+    getData().then(data => {
+      const columns = getColumns(data);
+      this.setState({ data, columns });
+    });
+  }
+  toggleSelection = (key, shift, row) => {
+    /*
+      Implementation of how to manage the selection state is up to the developer.
+      This implementation uses an array stored in the component state.
+      Other implementations could use object keys, a Javascript Set, or Redux... etc.
+    */
+    // start off with the existing state
+    if (this.state.selectType === "radio") {
+      let selection = [];
+      if (selection.indexOf(key) < 0) selection.push(key);
+      this.setState({ selection });
+    } else {
+      let selection = [...this.state.selection];
+      const keyIndex = selection.indexOf(key);
+      // check to see if the key exists
+      if (keyIndex >= 0) {
+        // it does exist so we will remove it using destructing
+        selection = [
+          ...selection.slice(0, keyIndex),
+          ...selection.slice(keyIndex + 1)
+        ];
+      } else {
+        // it does not exist so add it
+        selection.push(key);
+      }
+      // update the state
+      this.setState({ selection });
+    }
+  };
+  toggleAll = () => {
+    /*
+      'toggleAll' is a tricky concept with any filterable table
+      do you just select ALL the records that are in your data?
+      OR
+      do you only select ALL the records that are in the current filtered data?
+      
+      The latter makes more sense because 'selection' is a visual thing for the user.
+      This is especially true if you are going to implement a set of external functions
+      that act on the selected information (you would not want to DELETE the wrong thing!).
+      
+      So, to that end, access to the internals of ReactTable are required to get what is
+      currently visible in the table (either on the current page or any other page).
+      
+      The HOC provides a method call 'getWrappedInstance' to get a ref to the wrapped
+      ReactTable and then get the internal state and the 'sortedData'. 
+      That can then be iterrated to get all the currently visible records and set
+      the selection state.
+    */
+    const selectAll = this.state.selectAll ? false : true;
+    const selection = [];
+    if (selectAll) {
+      // we need to get at the internals of ReactTable
+      const wrappedInstance = this.selectTable.getWrappedInstance();
+      // the 'sortedData' property contains the currently accessible records based on the filter and sort
+      const currentRecords = wrappedInstance.getResolvedState().sortedData;
+      // we just push all the IDs onto the selection array
+      currentRecords.forEach(item => {
+        if (item._original) {
+          selection.push(item._original._id);
+        }
+      });
+    }
+    this.setState({ selectAll, selection });
+  };
+  isSelected = key => {
+    /*
+      Instead of passing our external selection state we provide an 'isSelected'
+      callback and detect the selection state ourselves. This allows any implementation
+      for selection (either an array, object keys, or even a Javascript Set object).
+    */
+    return this.state.selection.includes(key);
+  };
+  logSelection = () => {
+    console.log("selection:", this.state.selection);
+  };
+  toggleType = () => {
+    this.setState({
+      selectType: this.state.selectType === "radio" ? "checkbox" : "radio",
+      selection: [],
+      selectAll: false
+    });
+  };
+  render() {
+    const {
+      toggleSelection,
+      toggleAll,
+      isSelected,
+      logSelection,
+      toggleType
+    } = this;
+    const { data, columns, selectAll, selectType } = this.state;
+    const extraProps = {
+      selectAll,
+      isSelected,
+      toggleAll,
+      toggleSelection,
+      selectType
+    };
+    return (
+      <div style={{ padding: "10px" }}>
+        <h1>react-table - Select Table</h1>
+        <button onClick={toggleType}>
+          Select Type: <strong>{selectType}</strong>
+        </button>
+        <button onClick={logSelection}>Log Selection to Console</button>
+        {` (${this.state.selection.length}) selected`}
+        {data ? (
+          <SelectTable
+            data={data}
+            columns={columns}
+            ref={r => (this.selectTable = r)}
+            className="-striped -highlight"
+            {...extraProps}
+          />
+        ) : null}
+      </div>
+    );
+  }
+}
+
+export default ComponentTest;
@@ -0,0 +1,238 @@
+import React from "react";
+import shortid from "shortid";
+
+import ReactTable from "../../../../lib/index";
+import "../../../../react-table.css";
+
+import selectTableHOC from "../../../../lib/hoc/selectTable";
+import treeTableHOC from "../../../../lib/hoc/treeTable";
+
+const SelectTreeTable = selectTableHOC(treeTableHOC(ReactTable));
+
+async function getData() {
+  const result = await (await fetch("/au_500_tree.json")).json();
+  // we are adding a unique ID to the data for tracking the selected records
+  return result.map(item => {
+    const _id = shortid.generate();
+    return {
+      _id,
+      ...item
+    };
+  });
+}
+
+function getColumns(data) {
+  const columns = [];
+  const sample = data[0];
+  for (let key in sample) {
+    if (key === "_id") continue;
+    columns.push({
+      accessor: key,
+      Header: key
+    });
+  }
+  return columns;
+}
+
+function getNodes(data, node = []) {
+  data.forEach(item => {
+    if (item.hasOwnProperty("_subRows") && item._subRows) {
+      node = getNodes(item._subRows, node);
+    } else {
+      node.push(item._original);
+    }
+  });
+  return node;
+}
+
+export class ComponentTest extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: null,
+      columns: null,
+      selection: [],
+      selectAll: false,
+      selectType: "checkbox"
+    };
+  }
+  componentDidMount() {
+    getData().then(data => {
+      const columns = getColumns(data);
+      const pivotBy = ["state", "post"];
+      this.setState({ data, columns, pivotBy });
+    });
+  }
+  toggleSelection = (key, shift, row) => {
+    /*
+      Implementation of how to manage the selection state is up to the developer.
+      This implementation uses an array stored in the component state.
+      Other implementations could use object keys, a Javascript Set, or Redux... etc.
+    */
+    // start off with the existing state
+    if (this.state.selectType === "radio") {
+      let selection = [];
+      if (selection.indexOf(key) < 0) selection.push(key);
+      this.setState({ selection });
+    } else {
+      let selection = [...this.state.selection];
+      const keyIndex = selection.indexOf(key);
+      // check to see if the key exists
+      if (keyIndex >= 0) {
+        // it does exist so we will remove it using destructing
+        selection = [
+          ...selection.slice(0, keyIndex),
+          ...selection.slice(keyIndex + 1)
+        ];
+      } else {
+        // it does not exist so add it
+        selection.push(key);
+      }
+      // update the state
+      this.setState({ selection });
+    }
+  };
+  toggleAll = () => {
+    /*
+      'toggleAll' is a tricky concept with any filterable table
+      do you just select ALL the records that are in your data?
+      OR
+      do you only select ALL the records that are in the current filtered data?
+      
+      The latter makes more sense because 'selection' is a visual thing for the user.
+      This is especially true if you are going to implement a set of external functions
+      that act on the selected information (you would not want to DELETE the wrong thing!).
+      
+      So, to that end, access to the internals of ReactTable are required to get what is
+      currently visible in the table (either on the current page or any other page).
+      
+      The HOC provides a method call 'getWrappedInstance' to get a ref to the wrapped
+      ReactTable and then get the internal state and the 'sortedData'. 
+      That can then be iterrated to get all the currently visible records and set
+      the selection state.
+    */
+    const selectAll = this.state.selectAll ? false : true;
+    const selection = [];
+    if (selectAll) {
+      // we need to get at the internals of ReactTable
+      const wrappedInstance = this.selectTable.getWrappedInstance();
+      // the 'sortedData' property contains the currently accessible records based on the filter and sort
+      const currentRecords = wrappedInstance.getResolvedState().sortedData;
+      // we need to get all the 'real' (original) records out to get at their IDs
+      const nodes = getNodes(currentRecords);
+      // we just push all the IDs onto the selection array
+      nodes.forEach(item => {
+        selection.push(item._id);
+      });
+    }
+    this.setState({ selectAll, selection });
+  };
+  isSelected = key => {
+    /*
+      Instead of passing our external selection state we provide an 'isSelected'
+      callback and detect the selection state ourselves. This allows any implementation
+      for selection (either an array, object keys, or even a Javascript Set object).
+    */
+    return this.state.selection.includes(key);
+  };
+  logSelection = () => {
+    console.log("selection:", this.state.selection);
+  };
+  toggleType = () => {
+    this.setState({
+      selectType: this.state.selectType === "radio" ? "checkbox" : "radio",
+      selection: [],
+      selectAll: false
+    });
+  };
+  toggleTree = () => {
+    if (this.state.pivotBy.length) {
+      this.setState({ pivotBy: [], expanded: {} });
+    } else {
+      this.setState({ pivotBy: ["state", "post"], expanded: {} });
+    }
+  };
+  onExpandedChange = expanded => {
+    this.setState({ expanded });
+  };
+  render() {
+    const {
+      toggleSelection,
+      toggleAll,
+      isSelected,
+      logSelection,
+      toggleType,
+      toggleTree,
+      onExpandedChange
+    } = this;
+    const {
+      data,
+      columns,
+      selectAll,
+      selectType,
+      pivotBy,
+      expanded
+    } = this.state;
+    const extraProps = {
+      selectAll,
+      isSelected,
+      toggleAll,
+      toggleSelection,
+      selectType,
+      pivotBy,
+      expanded,
+      onExpandedChange,
+      pageSize: 5
+    };
+    return (
+      <div style={{ padding: "10px" }}>
+        <h1>react-table - Select Tree Table</h1>
+        <p>
+          This example combines two HOCs (the TreeTable and the SelectTable) to
+          make a composite component.
+        </p>
+        <p>We'll call it SelectTreeTable!</p>
+        <p>Here is what the buttons do:</p>
+        <ul>
+          <li>
+            <strong>Toggle Tree:</strong> enables or disabled the pivotBy on the
+            table.
+          </li>
+          <li>
+            <strong>Select Type:</strong> changes from 'checkbox' to 'radio' and
+            back again.
+          </li>
+          <li>
+            <strong>Log Selection to Console:</strong> open your console to see
+            what has been selected.
+          </li>
+        </ul>
+        <p>
+          <strong>NOTE:</strong> the selection is maintained when toggling the
+          tree on and off but is cleared when switching between select types
+          (radio, checkbox).
+        </p>
+        <button onClick={toggleTree}>
+          Toggle Tree [{pivotBy && pivotBy.length ? pivotBy.join(", ") : ""}]
+        </button>
+        <button onClick={toggleType}>
+          Select Type: <strong>{selectType}</strong>
+        </button>
+        <button onClick={logSelection}>Log Selection to Console</button>
+        {` (${this.state.selection.length}) selected`}
+        {data ? (
+          <SelectTreeTable
+            data={data}
+            columns={columns}
+            ref={r => (this.selectTable = r)}
+            className="-striped -highlight"
+            freezeWhenExpanded={true}
+            {...extraProps}
+          />
+        ) : null}
+      </div>
+    );
+  }
+}
+
+export default ComponentTest;
@@ -0,0 +1,70 @@
+import React from "react";
+
+import ReactTable from "../../../../lib/index";
+import "../../../../react-table.css";
+
+import treeTableHOC from "../../../../lib/hoc/treeTable";
+
+async function getData() {
+  const result = await (await fetch("/au_500_tree.json")).json();
+  return result;
+}
+
+function getColumns(data, pivotBy) {
+  const columns = [];
+  const sample = data[0];
+  for (let key in sample) {
+    columns.push({
+      accessor: key,
+      Header: key
+    });
+  }
+  return columns;
+}
+
+export class ComponentTest extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: null,
+      columns: null,
+      pivotBy: null // ["firstName", "lastName"],
+    };
+  }
+  componentDidMount() {
+    getData().then(data => {
+      // console.log('cwm data:',data);
+      const pivotBy = ["state", "post", "city"];
+      const columns = getColumns(data, pivotBy);
+      // console.log('cwm cols:',columns);
+      this.setState({ data, columns, pivotBy });
+    });
+  }
+  showState = () => {
+    console.log("state:", this.reactTable.getResolvedState());
+  };
+  render() {
+    const { data, columns, pivotBy } = this.state;
+    const extraProps = {
+      data,
+      columns,
+      pivotBy
+    };
+    const TreeTable = treeTableHOC(ReactTable);
+    return (
+      <div style={{ padding: "10px" }}>
+        <h1>react-table - Tree Table</h1>
+        {data ? (
+          <TreeTable
+            ref={r => (this.reactTable = r)}
+            className="-striped -highlight"
+            defaultPageSize={5}
+            {...extraProps}
+          />
+        ) : null}
+      </div>
+    );
+  }
+}
+
+export default ComponentTest;
@@ -0,0 +1,53 @@
+import React from "react";
+
+export default Component => {
+  const wrapper = componentProps => {
+    const TrComponent = props => {
+      const { ri, ...rest } = props;
+      if (ri && ri.groupedByPivot) {
+        const cell = props.children[ri.level];
+
+        cell.props.style.flex = "unset";
+        cell.props.style.width = "100%";
+        cell.props.style.maxWidth = "unset";
+        cell.props.style.paddingLeft = `${componentProps.treeTableIndent *
+          ri.level}px`;
+        cell.props.style.backgroundColor = "#DDD";
+        cell.props.style.borderBottom = "1px solid rgba(128,128,128,0.2)";
+
+        return <div {...rest}>{cell}</div>;
+      }
+      return <Component.defaultProps.TrComponent {...rest} />;
+    };
+
+    const getTrProps = (state, ri, ci, instance) => {
+      return { ri };
+    };
+
+    const { columns, ...rest } = componentProps;
+    const extra = {
+      columns: columns.map(col => {
+        let column = col;
+        if (rest.pivotBy && rest.pivotBy.includes(col.accessor)) {
+          column = {
+            accessor: col.accessor,
+            width: `${componentProps.treeTableIndent}px`,
+            show: false,
+            Header: ""
+          };
+        }
+        return column;
+      }),
+      TrComponent,
+      getTrProps
+    };
+
+    return <Component {...rest} {...extra} />;
+  };
+  wrapper.displayName = "RTTreeTable";
+  wrapper.defaultProps = {
+    treeTableRowBackground: "#EEE",
+    treeTableIndent: 10
+  };
+  return wrapper;
+};
@@ -1,6 +1,4 @@
-import React from "react";
 import namor from "namor";
-import "./index.css";

 const range = len => {
  const arr = [];
@@ -21,7 +19,9 @@ const newPerson = () => {
    status:
      statusChance > 0.66
        ? "relationship"
-        : statusChance > 0.33 ? "complicated" : "single"
+        : statusChance > 0.33
+          ? "complicated"
+          : "single"
  };
 };

@@ -33,20 +33,3 @@ export function makeData(len = 5553) {
    };
  });
 }
-
-export const Logo = () =>
-  <div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
-    For more examples, visit {''}
-  <br />
-    <a href="https://github.com/react-tools/react-table" target="_blank">
-      <img
-        src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
-        style={{ width: `150px`, margin: ".5em auto .3em" }}
-      />
-    </a>
-  </div>;
-
-export const Tips = () =>
-  <div style={{ textAlign: "center" }}>
-    <em>Tip: Hold shift when sorting to multi-sort!</em>
-  </div>;
@@ -0,0 +1,10 @@
+html,
+body,
+#root {
+  height: 100%;
+}
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
@@ -0,0 +1,7 @@
+import React from "react";
+import ReactDOM from "react-dom";
+//
+import "./index.css";
+import App from "./App.js";
+
+ReactDOM.render(<App />, document.getElementById("root"));
@@ -0,0 +1,23 @@
+/* eslint-disable  */
+import React from "react";
+import marked from "marked";
+//
+import HOCReadme from "!raw!../../../src/hoc/README.md";
+import "github-markdown-css/github-markdown.css";
+import "./utils/prism.js";
+
+export default class HOCStory extends React.Component {
+  render() {
+    return (
+      <div style={{ padding: "10px" }}>
+        <span
+          className="markdown-body"
+          dangerouslySetInnerHTML={{ __html: marked(HOCReadme) }}
+        />
+      </div>
+    );
+  }
+  componentDidMount() {
+    global.Prism && global.Prism.highlightAll();
+  }
+}
@@ -0,0 +1,23 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import React from "react";
+import marked from "marked";
+//
+import Readme from "!raw!../../../README.md";
+import "github-markdown-css/github-markdown.css";
+import "./utils/prism.js";
+
+export default class Story extends React.Component {
+  render() {
+    return (
+      <div style={{ padding: "10px" }}>
+        <span
+          className="markdown-body"
+          dangerouslySetInnerHTML={{ __html: marked(Readme) }}
+        />
+      </div>
+    );
+  }
+  componentDidMount() {
+    global.Prism && global.Prism.highlightAll();
+  }
+}
@@ -0,0 +1,27 @@
+import React from "react";
+
+import ReactTable from "../../../lib/index";
+import "../../../react-table.css";
+
+const data = [
+  { one: "1.1", two: "1.2" },
+  { one: "2.1", two: "2.2" },
+  { one: "3.1", two: "3.2" },
+  { one: "4.1", two: "4.2" }
+];
+
+const columns = [
+  { accessor: "one", Header: "One" },
+  { accessor: "two", Header: "Two" }
+];
+
+export default class Story extends React.Component {
+  render() {
+    return (
+      <div>
+        Test
+        <ReactTable data={data} columns={columns} />
+      </div>
+    );
+  }
+}
@@ -0,0 +1,138 @@
+/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #a67f59;
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
@@ -1,4 +0,0 @@
-{
-  "presets": ["react-app"],
-  "plugins": ["styled-components"]
-}
@@ -1 +0,0 @@
-SKIP_PREFLIGHT_CHECK=true
@@ -1,7 +0,0 @@
-{
-  "extends": ["react-app", "prettier"],
-  "rules": {
-    // "eqeqeq": 0,
-    // "jsx-a11y/anchor-is-valid": 0
-  }
-}
@@ -1,23 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
@@ -1,29 +0,0 @@
-const path = require('path')
-const resolveFrom = require('resolve-from')
-
-const fixLinkedDependencies = config => {
-  config.resolve = {
-    ...config.resolve,
-    alias: {
-      ...config.resolve.alias,
-      react$: resolveFrom(path.resolve('node_modules'), 'react'),
-      'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
-    },
-  }
-  return config
-}
-
-const includeSrcDirectory = config => {
-  config.resolve = {
-    ...config.resolve,
-    modules: [path.resolve('src'), ...config.resolve.modules],
-  }
-  return config
-}
-
-module.exports = [
-  ['use-babel-config', '.babelrc'],
-  ['use-eslint-config', '.eslintrc'],
-  fixLinkedDependencies,
-  // includeSrcDirectory,
-]
@@ -1,6 +0,0 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and Rescripts.
-
-You can:
-
- [Open this example in a new CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic)
- `yarn` and `yarn start` to run and edit the example
@@ -1,35 +0,0 @@
-{
-  "private": true,
-  "scripts": {
-    "start": "rescripts start",
-    "build": "rescripts build",
-    "test": "rescripts test",
-    "eject": "rescripts eject"
-  },
-  "dependencies": {
-    "namor": "^1.1.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1",
-    "react-table": "next",
-    "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"
-    ]
-  }
-}
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
@@ -1,15 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
@@ -1,121 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import { useTable } from 'react-table'
-
-import makeData from './makeData'
-
-const Styles = styled.div`
-  padding: 1rem;
-
-  table {
-    border-spacing: 0;
-    border: 1px solid black;
-
-    tr {
-      :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;
-      }
-    }
-  }
-`
-
-function Table({ columns, data }) {
-  // Use the state and functions returned from useTable to build your UI
-  const { getTableProps, headerGroups, rows, prepareRow } = useTable({
-    columns,
-    data,
-  })
-
-  // Render the UI for your table
-  return (
-    <table {...getTableProps()}>
-      <thead>
-        {headerGroups.map(headerGroup => (
-          <tr {...headerGroup.getHeaderGroupProps()}>
-            {headerGroup.headers.map(column => (
-              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
-            ))}
-          </tr>
-        ))}
-      </thead>
-      <tbody>
-        {rows.map(
-          (row, i) =>
-            prepareRow(row) || (
-              <tr {...row.getRowProps()}>
-                {row.cells.map(cell => {
-                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
-                })}
-              </tr>
-            )
-        )}
-      </tbody>
-    </table>
-  )
-}
-
-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',
-          },
-          {
-            Header: 'Visits',
-            accessor: 'visits',
-          },
-          {
-            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
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
@@ -1,12 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
@@ -1,40 +0,0 @@
-import namor from 'namor'
-
-const range = len => {
-  const arr = []
-  for (let i = 0; i < len; i++) {
-    arr.push(i)
-  }
-  return arr
-}
-
-const newPerson = () => {
-  const statusChance = Math.random()
-  return {
-    firstName: namor.generate({ words: 1, numbers: 0 }),
-    lastName: namor.generate({ words: 1, numbers: 0 }),
-    age: Math.floor(Math.random() * 30),
-    visits: Math.floor(Math.random() * 100),
-    progress: Math.floor(Math.random() * 100),
-    status:
-      statusChance > 0.66
-        ? 'relationship'
-        : statusChance > 0.33
-        ? 'complicated'
-        : 'single',
-  }
-}
-
-export default function makeData(...lens) {
-  const makeDataLevel = (depth = 0) => {
-    const len = lens[depth]
-    return range(len).map(d => {
-      return {
-        ...newPerson(),
-        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
-      }
-    })
-  }
-
-  return makeDataLevel()
-}
@@ -1,135 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
-
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
-  }
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Tanner Linsley	585ddea7c2	v6.11.4	2019-12-05 15:10:12 -05:00
Tanner Linsley	652a366efc	v6.11.3	2019-12-05 15:07:36 -05:00
Tanner Linsley	476bddfcad	Merge branch 'v6' of https://github.com/react-tools/react-table into v6	2019-12-05 14:41:42 -05:00
Tanner Linsley	249bf509b5	Fix regression	2019-12-05 14:41:26 -05:00
Yurui ZhangandTanner Linsley	f8563affb5	properly initialize state in lifecycle.js (#1707 )	2019-12-05 14:40:51 -05:00
Yurui ZhangandTanner Linsley	22c703391c	[v6] fixes broken lifecycle.js (#1699 ) * resumes broken lifecycle.js * add back componentDidMount in lifecycle.js	2019-12-03 22:27:25 -07:00
Tanner LinsleyandGitHub	3107517226	Update README.md	2019-11-21 20:24:15 -07:00
Henry Q. DineenandTanner Linsley	f2e62a13f2	v6: prefer components in normalizeComponent (#1609 ) * prefer components in normalizeComponent * move react-is to direct dep	2019-11-20 08:47:06 -07:00
Roman KomarovandTanner Linsley	fb134462ff	Added index.d.ts to the package.json (#1599 )	2019-11-05 14:37:41 -07:00
Yurui ZhangandTanner Linsley	da5e9d7d27	v6: avoid calling `setState` in constructor from lifecycle.js (#1621 ) * avoid calling setState in constructor from lifecycle.js * fixes lint errors	2019-10-30 04:57:12 +01:00
Roman KomarovandTanner Linsley	3e464faf8c	Changing the name to react-table-v6 (#1584 ) Also adds the corresponding changes to the documentation and adds TypeScript definitions.	2019-10-10 06:54:10 -06:00
Tanner LinsleyandGitHub	0fde1ed8d6	Update package.json	2019-09-23 11:35:48 -06:00
Yurui ZhangandTanner Linsley	e1690ea151	fixes deprecated lifecycle method warnings in v6 (#1536 ) * try to migrate all the UNSAFE lifecycle methods * fixes lifecycle.js * fixes foldableTable * changes how to reset state in pagination	2019-09-22 15:41:01 -06:00
tannerlinsley	6584dbdad2	Update package.json	2019-09-09 07:52:41 -06:00
tannerlinsley	e4d1b8ac47	Update CHANGELOG.md	2019-09-09 07:51:20 -06:00
tannerlinsley	9b2fc7680a	Update utils.js	2019-09-09 07:50:39 -06:00
tannerlinsley	6bc2389ab3	Update CHANGELOG.md	2019-09-06 11:00:49 -06:00
tannerlinsley	872304da17	v6.10.2	2019-09-06 10:59:48 -06:00
Dan OttandTanner Linsley	5875f80089	use getPrototypeOf instead of .prototype (#1503 )	2019-09-06 10:58:41 -06:00
tannerlinsley	d05e54dee8	v6.10.1	2019-09-06 08:22:14 -06:00
Thomas RichandTanner Linsley	ab12816799	Fix 6.10 remounting/double click issue (#1499 ) Fixes https://github.com/tannerlinsley/react-table/issues/1336 (or at least fixes my issue with double click not working)	2019-09-05 14:45:03 -06:00
Christian KellnerandTanner Linsley	8ea48576b8	Fixing react warnings (#1495 ) * fixing react warnings * changing forgotten names to UNSAFE_	2019-09-04 09:07:44 -06:00
Vitali NedzvedzandTanner Linsley	5730544d35	fix: replace 'outline: none' with 'outline-width: 0' (#1474 )	2019-08-22 14:55:42 -06:00
David HandTanner Linsley	e2f03ef2f2	* fixed docs: "getTfootThProps" does not exist in code, but "getTfootTdProps" does (#1399 ) * added `column` argument to getTfootTdProps function (match getTheadThProps and other prop getters in that scope)	2019-07-16 13:21:43 -06:00
VojtechPandTanner Linsley	7a38d1fdb3	Fix components prop types (#1390 )	2019-07-15 11:26:19 -06:00
JayChungandTanner Linsley	36666e19d2	Fix deprecated getThProps function in doc (#1387 )	2019-07-15 11:25:56 -06:00
Rohit Rajat ChattopadhyayandTanner Linsley	50b03b7ec6	Added Gold sponsors (#1375 ) * Added Gold sponsors * Broken link fix zappi.com -> zaippi.io	2019-06-22 06:45:38 -06:00
Jessica ChouandTanner Linsley	79ba413db2	Fix spelling on word “receive”. (#1351 )	2019-05-30 06:33:04 -06:00
Jon PortellaandTanner Linsley	4c68975cf0	fix typo (#1350 )	2019-05-30 06:32:44 -06:00
Elie KhouryandTanner Linsley	0070d60d42	Fix initial state (#1348 )	2019-05-30 06:32:18 -06:00
Matthew LancellottiandTanner Linsley	1621bcb0c3	Resolve issue #1320 (#1324 ) Resolve issue #1320	2019-04-28 19:49:35 -06:00
tannerlinsley	4a4d2245fd	6.10.0	2019-04-23 17:01:28 -06:00
mike391andtannerlinsley	2c2d2aa092	Add cellInfo to onExpandedChange handler. (#1299 )	2019-04-23 16:52:03 -06:00
Tanner Linsley	92321b6d0a	Move HOC docs to readme	2019-04-23 16:51:28 -06:00
Andrue Andersonandtannerlinsley	0c15308d7a	fix: use isNaN for IE11 support (#1313 )	2019-04-23 16:50:33 -06:00
Bojan Bedracandtannerlinsley	8cde0cafbf	Typo (#1307 ) - fixes a typo in documentation	2019-04-23 16:50:33 -06:00
mike391andtannerlinsley	afab8a34cc	Add cellInfo to onExpandedChange handler. (#1299 )	2019-04-23 16:50:33 -06:00
Paul Vogelandtannerlinsley	969407254f	TravisCI badge: Use correct link (#1291 ) And correct branch	2019-04-23 16:50:33 -06:00
Michael Quinnandtannerlinsley	a5a49709d4	Fix #1275 minResizeWidth not working when using functional accessor and column id (#1276 )	2019-04-23 16:50:33 -06:00
Tanner Linsley	71c25f571b	Update README.md	2019-04-23 16:50:33 -06:00
andreaciandtannerlinsley	b75055ef38	BUG in resize columns (#1271 ) * BUG in resize columns * rows shorter than 100 chars... * Revert "rows shorter than 100 chars..." This reverts commit b32f17a2fe8736fe276b5026997837e6f02ec909.	2019-04-23 16:50:33 -06:00
Tanner Linsley	1079914996	Add links to old codesandbox examples	2019-04-23 16:50:33 -06:00
Tanner Linsley	5301355192	Move HOC docs to readme	2019-04-23 16:50:33 -06:00
Tanner Linsley	4c7e493f41	Create _redirects	2019-04-23 16:50:33 -06:00
Tanner Linsley	928233713e	Update README.md	2019-04-23 16:50:33 -06:00
Tanner Linsley	feda66196e	Update README.md	2019-04-23 16:50:33 -06:00
Josh McCulloughandtannerlinsley	c1b399d603	cleanup all but one linting issue (#1232 )	2019-04-23 16:50:32 -06:00
Jannik Keyeandtannerlinsley	d59d7e4fba	feature: allow minResizeWidth to be set (#1135 ) * feature: allow minResizeWidth to be set * fix: add minResizeWidth propType	2019-04-23 16:48:54 -06:00
				`@@ -1 +0,0 @@`
				`module.exports = { extends: ['@commitlint/config-conventional'] }`