v6.11.3

* resumes broken lifecycle.js

* add back componentDidMount in lifecycle.js

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'react-tools',
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Codesandbox!**
+Use a new [react-table codesandbox](codesandbox.io/s/X6npLXPRW) to reproduce the issue.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+
+---
+
+**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 [...]
+
+**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.

.github/ISSUE_TEMPLATE/questions--support---help.md

@@ -0,0 +1,11 @@
+---
+name: Questions, Support & Help
+about: Looking for help? Need a question answered?
+
+---
+
+STOP!!!
+
+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!

.gitignore

@@ -1,7 +1,12 @@
 node_modules/
 lib/
+es/
+docs/build
 react-table.js
+react-table.min.js
 react-table.css
 *.log
 .idea
 .DS_Store
+.history
+.vscode

.storybook/CNAME

@@ -1 +0,0 @@
-react-table.js.org

.storybook/config.js

@@ -1,68 +0,0 @@
-import React from 'react'
-import { configure, storiesOf } from '@kadira/storybook'
-
-import './reset.css'
-import './fonts.css'
-import './layout.css'
-import '../stories/utils/prism.css'
-import 'github-markdown-css/github-markdown.css'
-import '../react-table.css'
-//
-import Readme from '../README.md'
-//
-import Simple from '../stories/Simple.js'
-import CellRenderers from '../stories/CellRenderers.js'
-import DefaultSorting from '../stories/DefaultSorting.js'
-import CustomSorting from '../stories/CustomSorting.js'
-import CustomWidths from '../stories/CustomWidths.js'
-import CustomComponentProps from '../stories/CustomComponentProps.js'
-import ServerSide from '../stories/ServerSide.js'
-import SubComponents from '../stories/SubComponents.js'
-import Pivoting from '../stories/Pivoting.js'
-import PivotingSubComponents from '../stories/PivotingSubComponents.js'
-import OneHundredKRows from '../stories/OneHundredKRows.js'
-import FunctionalRendering from '../stories/FunctionalRendering.js'
-import CustomExpanderPosition from '../stories/CustomExpanderPosition.js'
-import NoDataText from '../stories/NoDataText.js'
-import Footers from '../stories/Footers.js'
-import Filtering from '../stories/Filtering.js'
-import ControlledTable from '../stories/ControlledTable.js'
-import PivotingOptions from '../stories/PivotingOptions.js'
-import EditableTable from '../stories/EditableTable.js'
-import SubRows from '../stories/SubRows.js'
-//
-configure(() => {
-  storiesOf('1. Docs')
-    .add('Readme', () => {
-      const ReadmeCmp = React.createClass({
-        render () {
-          return <span className='markdown-body' dangerouslySetInnerHTML={{__html: Readme}} />
-        },
-        componentDidMount () {
-          global.Prism.highlightAll()
-        }
-      })
-      return <ReadmeCmp />
-    })
-  storiesOf('2. Demos')
-    .add('Simple Table', Simple)
-    .add('Cell Renderers & Custom Components', CellRenderers)
-    .add('Default Sorting', DefaultSorting)
-    .add('Custom Sorting', CustomSorting)
-    .add('Custom Column Widths', CustomWidths)
-    .add('Custom Component Props', CustomComponentProps)
-    .add('Server-side Data', ServerSide)
-    .add('Sub Components', SubComponents)
-    .add('Pivoting & Aggregation', Pivoting)
-    .add('Pivoting & Aggregation w/ Sub Components', PivotingSubComponents)
-    .add('100k Rows w/ Pivoting & Sub Components', OneHundredKRows)
-    .add('Pivoting Options', PivotingOptions)
-    .add('Functional Rendering', FunctionalRendering)
-    .add('Custom Expander Position', CustomExpanderPosition)
-    .add('Custom "No Data" Text', NoDataText)
-    .add('Footers', Footers)
-    .add('Custom Filtering', Filtering)
-    .add('Controlled Component', ControlledTable)
-    .add('Editable table', EditableTable)
-    // .add('Sub Rows', SubRows)
-}, module)

.storybook/fonts.css

@@ -1,18 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600");
-body {
-  background: #fff;
-  font-family: 'Open Sans', sans-serif;
-  font-weight: 300;
-}
-
-h1 {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 15px;
-  margin-top: 5px;
-}
-
-p {
-  margin-bottom: 15px;
-  line-height: 22px;
-}

.storybook/layout.css

@@ -1,7 +0,0 @@
-body{
-	padding: 20px;
-}
-
-strong {
-	font-weight: bold
-}

.storybook/reset.css

@@ -1,48 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-/*ol, ul {
-	list-style: none;
-}*/
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}

.storybook/webpack.config.js

@@ -1,27 +0,0 @@
-const path = require('path')
-
-// load the default config generator.
-const genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js')
-
-module.exports = (config, env) => {
-  config = genDefaultConfig(config, env)
-
-  Object.assign(config, {
-    module: Object.assign(config.module, {
-      loaders: config.module.loaders.concat([{
-        test: /\.md$/,
-        loader: 'html!markdown',
-        include: path.resolve(__dirname, '../')
-      }, {
-        test: /\.html$/,
-        loader: 'html',
-        query: {
-          minimize: true
-        },
-        include: path.resolve(__dirname, '../')
-      }])
-    })
-  })
-
-  return config
-}

CHANGELOG.md

@@ -1,6 +1,156 @@
+## 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
+
+- Since `resolveData` is now capable of materializing data on it's own, the `data` prop is no longer required as a prop-type.
+
+## 6.8.4
+
+#### Fixes & Optimizations
+
+- Only run `resolveData` prop when `data` prop has changed, not any others.
+
+## 6.8.3
+
+#### Fixes & Optimizations
+
+- Allow the `resolveData` prop to alter or materialize new data when the `data` prop changes.
+
+## 6.8.1
+
+#### Fixes & Optimizations
+
+- Updated eslint and code formatting
+
+## 6.7.5
+
+#### Fixes & Optimizations
+
+- Now passes `column` to `getResizerProps` (#667)
+- NOTE: `getResizerProps` is now only called if the column is resizable
+- Fixes the `className` ordering in defaultProps for ThComponent (#673)
+- NOTE: user supplied classNames now come at the end so they can extend the defaults
+
+## 6.7.4
+
+#### Fixes & Optimizations
+
+- Fix Prop types for columns
+
+## 6.7.3
+
+#### Fixes & Optimizations
+
+- Fix the rest of the proptypes
+
+## 6.7.2
+
+#### Fixes & Optimizations
+
+- `getPropTypes` proptype check
+
+## 6.7.1
+
+#### Fixes & Optimizations
+
+- `eslint-config` moved to dev deps
+
+## 6.7.0
+
+## 6.7.0-alpha-0
+
+#### New Features
+
+- Expose page/pageSize to rows/cells
+- Supply sort direction to custom sort methods
+
+#### Fixes & Optimizations
+
+- README updates
+- Linter cleanup
+- Added PropTypes node module
+- Deps, linting and style upgrades
+
+## 6.6.0
+
+#### Fixes & Optimizations
+
+- moved repo to react-tools
+- Doc examples moved to codesandbox.io
+- README updates
+- CSS refacting for rt-tfoot to match rt-thead
+- CSS more specific for input and select
+
+## 6.5.3
+
+#### Fixes & Optimizations
+
+- `onClick` proxying and eslint
+
+## 6.5.2
+
+#### New Features
+
+- Provide onClick handleOriginal function - #406
+
+#### Fixes & Optimizations
+
+- README updates
+- `makePathArray` in utils - #326
+- Various fixes: #294, #376, #398, #415,
+
+## 6.5.1
+
+#### Fixes & Optimizations
+
+- `defaultExpanded` now works correctly - #372
+- `column.getProps().rest` props are now applied correctly
+- `makeTemplateComponent` now supports `displayName` - #289
+
+## 6.5.0
+
+##### New Features
+
+- `column.filterAll` - defaults to `false`, but when set to `true` will provide the entire array of rows to `filterMethod` as opposed to one row at a time. This allows for more fine-grained filtering using any method you can dream up. See the [Custom Filtering example](https://react-table.js.org/#/story/custom-filtering) for more info.
+
+## 6.4.0
+
+##### New Features
+
+- `PadRowComponent` - the content rendered inside of a padding row. Defaults to a react component that renders ` `
+
+## 6.3.0
+
+##### New Features
+
+- `defaultSortDesc` - allows you to set the default sorting direction for all columns to descending.
+- `column.defaultSortDesc` - allows you to set the default sorting direction for a specific column. Falls back to the global `defaultSortDesc` when not set at all.
+
 ## 6.0.0
 
 ##### New Features
+
 - New Renderers:
   - `Aggregated` - Custom renderer for aggregated cells
   - `Pivot` - Custom renderer for Pivoted Cells (utilizes `Expander` and `PivotValue`)
@@ -16,8 +166,8 @@
 - Prevent transitions while column resizing for a smoother resize effect.
 - Disable text selection while resizing columns.
 
-
 ##### Breaking API Changes
+
 - New Renderers:
   - `Cell` - deprecates and replaces `render`
   - `Header` - deprecates and replaces `header`

ISSUE_TEMPLATE.md

@@ -1,15 +0,0 @@
-## Problem Description
-include a detailed explanation of the problem here...
-
-## Code Snippet(s) or Codepen (http://codepen.io/tannerlinsley/pen/QpeZBa?editors=0010)
-
-## Steps to Reproduce
-1. list the steps
-2. to reproduce the issue
-
-## System Information
-* **Browser & Browser Version:**
-* **Node Version:**
-* **OS Version:**
-* **NPM Version:**
-* **Yarn Version:**

docs/.eslintrc.js

@@ -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 }]
+  }
+}

docs/CNAME

@@ -1 +1 @@
-react-table.js.org
+react-table.js.org

docs/iframe.html

@@ -1,22 +0,0 @@
-
-    <!DOCTYPE html>
-    <html>
-      <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script>
-          if (window.parent !== window) {
-            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-          }
-        </script>
-        <title>React Storybook</title>
-        
-        
-      </head>
-      <body>
-        <div id="root"></div>
-        <div id="error-display"></div>
-        <script src="static/preview.b5270b38a18bc77dc351.bundle.js"></script>
-      </body>
-    </html>
-  

docs/index.html

@@ -1,44 +0,0 @@
-
-    <!DOCTYPE html>
-    <html>
-      <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="storybook-version" content="2.35.3">
-        <title>React Storybook</title>
-        <style>
-          /*
-            When resizing panels, the drag event breaks if the cursor
-            moves over the iframe. Add the 'dragging' class to the body
-            at drag start and remove it when the drag ends.
-           */
-          .dragging iframe {
-            pointer-events: none;
-          }
-
-          /* Styling the fuzzy search box placeholders */
-          .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-            color: #ddd;
-            font-size: 16px;
-          }
-
-          .searchBox::-moz-placeholder { /* Firefox 19+ */
-            color: #ddd;
-            font-size: 16px;
-          }
-
-          .searchBox:focus{
-            border-color: #EEE !important;
-          }
-
-          .btn:hover{
-            background-color: #eee
-          }
-        </style>
-      </head>
-      <body style="margin: 0;">
-        <div id="root"></div>
-        <script src="static/manager.9a120eb2943ac2bf0331.bundle.js"></script>
-      </body>
-    </html>
-  

docs/package.json

@@ -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"
+  }
+}

docs/public/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      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.
+
+      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 Table - A lightweight, fast and extendable datagrid built for React</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`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>

docs/src/App.js

@@ -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}
+      />
+    );
+  }
+}

docs/src/CodeSandbox.js

@@ -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"
+    />
+  );
+};

docs/src/examples/advancedexpandtable/index.js

@@ -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'));

docs/src/examples/checkbox/checkboxHOC.js

@@ -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;
+};

docs/src/examples/checkbox/index.js

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

docs/src/examples/expander/index.js

@@ -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}
+//       />
+//     )
+//   }
+// }

docs/src/examples/foldabletable/FoldableTableCustomState.js

@@ -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>)
+    }
+}

docs/src/examples/foldabletable/FoldableTableWithHeader.js

@@ -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>)
+    }
+}

docs/src/examples/foldabletable/FoldableTableWithoutHeader.js

@@ -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>
+    }
+}

docs/src/examples/foldabletable/index.js

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

docs/src/examples/index.js

@@ -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
+}

docs/src/examples/selecttable/index.js

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

docs/src/examples/selecttreetable/index.js

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

docs/src/examples/treetable/index.js

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

docs/src/examples/treetable/treeTableHOC.js

@@ -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;
+};

docs/src/examples/utils.js

@@ -0,0 +1,35 @@
+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 function makeData(len = 5553) {
+  return range(len).map(d => {
+    return {
+      ...newPerson(),
+      children: range(10).map(newPerson)
+    };
+  });
+}

docs/src/index.css

@@ -0,0 +1,10 @@
+html,
+body,
+#root {
+  height: 100%;
+}
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}

docs/src/index.js

@@ -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"));

docs/src/stories/HOCReadme.js

@@ -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();
+  }
+}

docs/src/stories/Readme.js

@@ -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();
+  }
+}

docs/src/stories/test.js

@@ -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>
+    );
+  }
+}

docs/static/manager.9a120eb2943ac2bf0331.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/manager.9a120eb2943ac2bf0331.bundle.js","sources":["webpack:///static/manager.9a120eb2943ac2bf0331.bundle.js"],"mappings":"AAAA;AAmuDA;AA64DA;AA28DA;AA00DA;AAsvEA;AAuhDA;AAsrDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAoxDA;AAsrDA;AAizDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}

docs/static/preview.b5270b38a18bc77dc351.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.b5270b38a18bc77dc351.bundle.js","sources":["webpack:///static/preview.b5270b38a18bc77dc351.bundle.js"],"mappings":"AAAA;AAmrDA;AA8uCA;AAqoIA;AA2wGA;AA0pPA;AA65CA;AAk2DA;AA88DA;AAg0DA;AAsgEA;AAmlDA;AAgjDA;AA2hDA;AA6+DA;AAslDA;AA4+CA;AAimDA;AA09DA;AAy4DA;AAwxCA;AAknDA;AA+qDA;AA+nEA;AA4yDA;AAwwCA;AA8tDA;AAuqGA;AA65FA;AAg3CA;AA+1CA;AAkqCA;AAqlCA;AAkgDA;AAo2CA;AAsCA;AA+jFA","sourceRoot":""}

examples/100k-rows-aggregation/.gitignore

@@ -0,0 +1,21 @@
+# 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*

examples/100k-rows-aggregation/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "react-table-100k-rows-aggregation",
+  "version": "0.0.7",
+  "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",
+    "lodash": "4.17.4"
+  },
+  "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"
+  }
+}

examples/100k-rows-aggregation/public/index.html

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

examples/100k-rows-aggregation/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "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"
+}

examples/100k-rows-aggregation/sandbox.config.json

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

examples/100k-rows-aggregation/src/Utils.js

@@ -0,0 +1,52 @@
+import React from "react";
+import namor from "namor";
+import "./index.css";
+
+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 function makeData(len = 5553) {
+  return range(len).map(d => {
+    return {
+      ...newPerson(),
+      children: range(10).map(newPerson)
+    };
+  });
+}
+
+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>;

examples/100k-rows-aggregation/src/createServiceWorker.js

@@ -0,0 +1,52 @@
+// 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();
+    });
+  }
+}

examples/100k-rows-aggregation/src/index.css

@@ -0,0 +1,5 @@
+body {
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+  font-weight: 300;
+  font-size: 14px;
+}

examples/100k-rows-aggregation/src/index.js

@@ -0,0 +1,85 @@
+import React from "react";
+import { render } from "react-dom";
+import { makeData, Logo, Tips } from "./Utils";
+import _ from "lodash";
+
+// 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(100000)
+    };
+  }
+  render() {
+    const { data } = this.state;
+    return (
+      <div>
+        <br />
+        <strong>Note: Having the console open will slow performance</strong>
+        <br />
+        <br />
+
+        <ReactTable
+          data={data}
+          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",
+                  aggregate: vals => _.round(_.mean(vals)),
+                  Aggregated: row => {
+                    return (
+                      <span>
+                        {row.value} (avg)
+                      </span>
+                    );
+                  }
+                },
+                {
+                  Header: "Visits",
+                  accessor: "visits",
+                  aggregate: vals => _.sum(vals)
+                }
+              ]
+            }
+          ]}
+          pivotBy={["firstName", "lastName"]}
+          defaultPageSize={10}
+          className="-striped -highlight"
+          SubComponent={row => {
+            return (
+              <div style={{ padding: "20px" }}>
+                <em>Sub Component!</em>
+              </div>
+            );
+          }}
+        />
+        <br />
+        <Tips />
+        <Logo />
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById("root"));

examples/100k-rows-aggregation/src/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "react-table-100k-rows-aggregation",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react-table": "6.5.3",
+    "react-dom": "15.5.3",
+    "react": "15.5.3",
+    "namor": "1.0.1",
+    "lodash": "4.17.4"
+  }
+}

examples/cell-renderers/.gitignore

@@ -0,0 +1,21 @@
+# 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*

examples/cell-renderers/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "react-table-cell-renderers",
+  "version": "0.0.12",
+  "description": null,
+  "keywords": [
+    "react",
+    "react-table",
+    "datagrid",
+    "grid",
+    "table"
+  ],
+  "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"
+  }
+}

examples/cell-renderers/public/index.html

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

examples/cell-renderers/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "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"
+}

examples/cell-renderers/src/Utils.js

@@ -0,0 +1,52 @@
+import React from "react";
+import namor from "namor";
+import "./index.css";
+
+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 function makeData(len = 5553) {
+  return range(len).map(d => {
+    return {
+      ...newPerson(),
+      children: range(10).map(newPerson)
+    };
+  });
+}
+
+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>;

examples/cell-renderers/src/createServiceWorker.js

@@ -0,0 +1,52 @@
+// 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();
+    });
+  }
+}

examples/cell-renderers/src/index.css

@@ -0,0 +1,5 @@
+body {
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+  font-weight: 300;
+  font-size: 14px;
+}

examples/cell-renderers/src/index.js

@@ -1,24 +1,25 @@
-import React from 'react'
-import _ from 'lodash'
-import namor from 'namor'
+import React from "react";
+import { render } from "react-dom";
+import { makeData, Logo, Tips } from "./Utils";
 
-import ReactTable from '../src/index'
+// Import React Table
+import ReactTable from "react-table";
+import "react-table/react-table.css";
 
-class Story extends React.Component {
-  render () {
-    const data = _.map(_.range(5553), d => {
-      const statusChance = Math.random()
-      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
-        progress: Math.floor(Math.random() * 100),
-        status: statusChance > 0.66 ? 'relationship'
-          : statusChance > 0.33 ? 'complicated'
-          : 'single'
-      }
-    })
-
-    const columns = [{
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      data: makeData()
+    };
+  }
+  render() {
+    const { data } = this.state;
+    return (
+      <div>
+        <ReactTable
+          data={data}
+          columns={[{
       Header: 'Name',
       columns: [{
         Header: 'First Name',
@@ -75,34 +76,16 @@ class Story extends React.Component {
           </span>
         )
       }]
-    }]
-
-    return (
-      <div>
-        <div className='table-wrap'>
-          <ReactTable
-            className='-striped -highlight'
-            data={data}
-            columns={columns}
-            defaultPageSize={10}
-          />
-        </div>
-        <div style={{textAlign: 'center'}}>
-          <br />
-          <em>Tip: Hold shift when sorting to multi-sort!</em>
-        </div>
+    }]}
+          defaultPageSize={10}
+          className="-striped -highlight"
+        />
+        <br />
+        <Tips />
+        <Logo />
       </div>
-    )
+    );
   }
 }
 
-// Source Code
-const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./CellRenderers')
-
-export default () => (
-  <div>
-    <Story />
-    <CodeHighlight>{() => source}</CodeHighlight>
-  </div>
-)
+render(<App />, document.getElementById("root"));

examples/cell-renderers/src/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "react-table-cell-renderers",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [
+    "react",
+    "react-table",
+    "datagrid",
+    "grid",
+    "table"
+  ],
+  "main": "index.js",
+  "dependencies": {
+    "react-table": "6.5.3",
+    "react-dom": "15.5.3",
+    "react": "15.5.3",
+    "namor": "1.0.1"
+  }
+}

examples/controlled-table/.gitignore

@@ -0,0 +1,21 @@
+# 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*

examples/controlled-table/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "react-table-controlled-table",
+  "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"
+  }
+}

examples/controlled-table/public/index.html

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

examples/controlled-table/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "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"
+}

examples/controlled-table/src/Utils.js

@@ -0,0 +1,52 @@
+import React from "react";
+import namor from "namor";
+import "./index.css";
+
+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 function makeData(len = 5553) {
+  return range(len).map(d => {
+    return {
+      ...newPerson(),
+      children: range(10).map(newPerson)
+    };
+  });
+}
+
+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>;

examples/controlled-table/src/createServiceWorker.js

@@ -0,0 +1,52 @@
+// 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();
+    });
+  }
+}

examples/controlled-table/src/index.css

@@ -0,0 +1,5 @@
+body {
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+  font-weight: 300;
+  font-size: 14px;
+}

examples/controlled-table/src/index.js

@@ -0,0 +1,97 @@
+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 data = makeData()
+
+const makeDefaultState = () => ({
+  sorted: [],
+  page: 0,
+  pageSize: 10,
+  expanded: {},
+  resized: [],
+  filtered: []
+});
+
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = makeDefaultState();
+    this.resetState = this.resetState.bind(this);
+  }
+  resetState() {
+    this.setState(makeDefaultState());
+  }
+  render() {
+    return (
+      <div>
+        <div>
+          <button onClick={this.resetState}>Reset State</button>
+        </div>
+        <pre>
+          <code>
+            <strong>this.state ===</strong>{" "}
+            {JSON.stringify(this.state, null, 2)}
+          </code>
+        </pre>
+        <ReactTable
+          data={data}
+          columns={[
+            {
+              Header: "Name",
+              columns: [
+                {
+                  Header: "First Name",
+                  accessor: "firstName"
+                },
+                {
+                  Header: "Last Name",
+                  id: "lastName",
+                  accessor: d => d.lastName,
+                  width: 170
+                }
+              ]
+            },
+            {
+              Header: "Info",
+              columns: [
+                {
+                  Header: "Age",
+                  accessor: "age"
+                }
+              ]
+            }
+          ]}
+          pivotBy={["lastName"]}
+          filterable
+          defaultPageSize={10}
+          className="-striped -highlight"
+          // Controlled props
+          sorted={this.state.sorted}
+          page={this.state.page}
+          pageSize={this.state.pageSize}
+          expanded={this.state.expanded}
+          resized={this.state.resized}
+          filtered={this.state.filtered}
+          // Callbacks
+          onSortedChange={sorted => this.setState({ sorted })}
+          onPageChange={page => this.setState({ page })}
+          onPageSizeChange={(pageSize, page) =>
+            this.setState({ page, pageSize })}
+          onExpandedChange={expanded => this.setState({ expanded })}
+          onResizedChange={resized => this.setState({ resized })}
+          onFilteredChange={filtered => this.setState({ filtered })}
+        />
+        <br />
+        <Tips />
+        <Logo />
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById("root"));

examples/controlled-table/src/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "react-table-controlled-table",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react-table": "6.5.3",
+    "react-dom": "15.5.3",
+    "react": "15.5.3",
+    "namor": "1.0.1"
+  }
+}

examples/custom-column-widths/.gitignore

@@ -0,0 +1,21 @@
+# 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*

examples/custom-column-widths/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "react-table-custom-column-widths",
+  "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"
+  }
+}

examples/custom-column-widths/public/index.html

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

examples/custom-column-widths/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "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"
+}

examples/custom-column-widths/src/Utils.js

@@ -0,0 +1,52 @@
+import React from "react";
+import namor from "namor";
+import "./index.css";
+
+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 function makeData(len = 5553) {
+  return range(len).map(d => {
+    return {
+      ...newPerson(),
+      children: range(10).map(newPerson)
+    };
+  });
+}
+
+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>;

examples/custom-column-widths/src/createServiceWorker.js

@@ -0,0 +1,52 @@
+// 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();
+    });
+  }
+}

examples/custom-column-widths/src/index.css

@@ -0,0 +1,5 @@
+body {
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+  font-weight: 300;
+  font-size: 14px;
+}

examples/custom-column-widths/src/index.js

@@ -0,0 +1,61 @@
+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()
+    };
+  }
+  render() {
+    const { data } = this.state;
+    return (
+      <div>
+        <ReactTable
+          data={data}
+          columns={[
+            {
+              Header: "Name",
+              columns: [
+                {
+                  Header: "First Name",
+                  accessor: "firstName",
+                  maxWidth: 200
+                },
+                {
+                  Header: "Last Name",
+                  id: "lastName",
+                  accessor: d => d.lastName,
+                  width: 300
+                }
+              ]
+            },
+            {
+              Header: "Info",
+              columns: [
+                {
+                  Header: "Age",
+                  accessor: "age",
+                  minWidth: 400
+                }
+              ]
+            }
+          ]}
+          defaultPageSize={10}
+          className="-striped -highlight"
+        />
+        <br />
+        <Tips />
+        <Logo />
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById("root"));

examples/custom-column-widths/src/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "react-table-custom-column-widths",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react-table": "6.5.3",
+    "react-dom": "15.5.3",
+    "react": "15.5.3",
+    "namor": "1.0.1"
+  }
+}

examples/custom-component-props/.gitignore

@@ -0,0 +1,21 @@
+# 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*