Fix server-side pagination (#1894 )

Made index.d.ts into a module itself (fix module name) (#1727 )
* Made index.d.ts into a module itself * Removed ts types in favor of @types/react-table
2026-08-19 08:20:30 +00:00 · 2020-02-14 13:15:00 -07:00 · 2019-12-06 16:43:03 -07:00 · 2019-12-05 15:11:05 -05:00 · 2019-12-05 15:07:36 -05:00 · 2019-12-05 14:41:42 -05:00
272 changed files with 73739 additions and 893 deletions
@@ -0,0 +1 @@
+* text=auto
@@ -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.
@@ -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.
@@ -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!
@@ -8,3 +8,5 @@ react-table.css
 *.log
 .idea
 .DS_Store
+.history
+.vscode
@@ -1,47 +1,80 @@
+## 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.
+- 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
+- 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
+- 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
+- Fix Prop types for columns

 ## 6.7.3

 #### Fixes & Optimizations

-* Fix the rest of the proptypes
+- Fix the rest of the proptypes

 ## 6.7.2

 #### Fixes & Optimizations

-* `getPropTypes` proptype check
+- `getPropTypes` proptype check

 ## 6.7.1

 #### Fixes & Optimizations

-* `eslint-config` moved to dev deps
+- `eslint-config` moved to dev deps

 ## 6.7.0

@@ -49,113 +82,113 @@

 #### New Features

-* Expose page/pageSize to rows/cells
-* Supply sort direction to custom sort methods
+- 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
+- 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
+- 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
+- `onClick` proxying and eslint

 ## 6.5.2

 #### New Features

-* Provide onClick handleOriginal function - #406
+- Provide onClick handleOriginal function - #406

 #### Fixes & Optimizations

-* README updates
-* `makePathArray` in utils - #326
-* Various fixes: #294, #376, #398, #415,
+- 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
+- `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.
+- `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 `&nbsp;`
+- `PadRowComponent` - the content rendered inside of a padding row. Defaults to a react component that renders `&nbsp;`

 ## 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.
+- `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`)
-  * `PivotValue` - Custom renderer for Pivot cell values (deprecates the undocumented `pivotRender` option)
-  * `Expander` - Custom renderer for Pivot cell Expander
-* Added custom sorting methods per table via `defaultSortMethod` and per column via `column.sortMethod`
-* Pivot columns are now visibly separate and sorted/filtered independently.
-* Added `column.resizable` to override global table `resizable` option for specific columns.
-* Added `column.sortable` to override global table `sortable` option for specific columns.
-* Added `column.filterable` to override global table `filterable` option for specific columns.
-* Added `defaultExpanded` table option.
-* All callbacks can now be utilized without needing to hoist and manage the piece of state they export. That is what their prop counterparts are for, so now the corresponding prop is used instead of the callback to detect a "fully controlled" state.
-* Prevent transitions while column resizing for a smoother resize effect.
-* Disable text selection while resizing columns.
+- New Renderers:
+  - `Aggregated` - Custom renderer for aggregated cells
+  - `Pivot` - Custom renderer for Pivoted Cells (utilizes `Expander` and `PivotValue`)
+  - `PivotValue` - Custom renderer for Pivot cell values (deprecates the undocumented `pivotRender` option)
+  - `Expander` - Custom renderer for Pivot cell Expander
+- Added custom sorting methods per table via `defaultSortMethod` and per column via `column.sortMethod`
+- Pivot columns are now visibly separate and sorted/filtered independently.
+- Added `column.resizable` to override global table `resizable` option for specific columns.
+- Added `column.sortable` to override global table `sortable` option for specific columns.
+- Added `column.filterable` to override global table `filterable` option for specific columns.
+- Added `defaultExpanded` table option.
+- All callbacks can now be utilized without needing to hoist and manage the piece of state they export. That is what their prop counterparts are for, so now the corresponding prop is used instead of the callback to detect a "fully controlled" state.
+- 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`
-  * `Footer` - deprecates and replaces `footer`
-  * `Filter`- deprecates and replaces `filterRender`
-* Callbacks now provide the destination state as the primary parameter(s). This makes hoisting and controlling the state in redux or component state much easier. eg.
-  * `onSorting` no longer requires you to build your own toggle logic
-  * `onResize` no longer requires you to build your own resize logic
-* Renamed `onChange` callback -> `onFetchData` which will always fire when a new data model needs to be fetched (or if not using `manual`, when new data is materialized internally).
-* Renamed `filtering` -> `filtered`
-* Renamed `sorting` -> `sorted`
-* Renamed `expandedRows` -> `expanded`
-* Renamed `resizing` -> `resized`
-* Renamed `defaultResizing` -> `defaultResized`
-* Renamed `defaultFiltering` -> `defaultFiltered`
-* Renamed `defaultSorting` -> `defaultSorted`
-* Renamed `onSortingChange` -> `onSortedChange`
-* Renamed `onFilteringChange` -> `onFilteredChange`
-* Renamed `onResize` -> `onResizedChange`
-* Renamed `onExpandRow` -> `onExpandedChange`
-* Renamed `showFilters` -> `filterable`
-* Renamed `hideFilter` -> `filterable` (Column option. Note the true/false value is now flipped.)
-* `cellInfo.row` and `rowInfo.row` now reference the materialize data for the table. To reference the original row, use `cellInfo.original` and `rowInfo.original`
-* Removed `pivotRender` column option. You can now control how the value is displayed by overriding the `PivotValueComponent` or the individual column's `PivotValue` renderer. See [Pivoting Options Story](https://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Pivoting%20Options&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for a reference on how to customize pivot column rendering.
+- New Renderers:
+  - `Cell` - deprecates and replaces `render`
+  - `Header` - deprecates and replaces `header`
+  - `Footer` - deprecates and replaces `footer`
+  - `Filter`- deprecates and replaces `filterRender`
+- Callbacks now provide the destination state as the primary parameter(s). This makes hoisting and controlling the state in redux or component state much easier. eg.
+  - `onSorting` no longer requires you to build your own toggle logic
+  - `onResize` no longer requires you to build your own resize logic
+- Renamed `onChange` callback -> `onFetchData` which will always fire when a new data model needs to be fetched (or if not using `manual`, when new data is materialized internally).
+- Renamed `filtering` -> `filtered`
+- Renamed `sorting` -> `sorted`
+- Renamed `expandedRows` -> `expanded`
+- Renamed `resizing` -> `resized`
+- Renamed `defaultResizing` -> `defaultResized`
+- Renamed `defaultFiltering` -> `defaultFiltered`
+- Renamed `defaultSorting` -> `defaultSorted`
+- Renamed `onSortingChange` -> `onSortedChange`
+- Renamed `onFilteringChange` -> `onFilteredChange`
+- Renamed `onResize` -> `onResizedChange`
+- Renamed `onExpandRow` -> `onExpandedChange`
+- Renamed `showFilters` -> `filterable`
+- Renamed `hideFilter` -> `filterable` (Column option. Note the true/false value is now flipped.)
+- `cellInfo.row` and `rowInfo.row` now reference the materialize data for the table. To reference the original row, use `cellInfo.original` and `rowInfo.original`
+- Removed `pivotRender` column option. You can now control how the value is displayed by overriding the `PivotValueComponent` or the individual column's `PivotValue` renderer. See [Pivoting Options Story](https://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Pivoting%20Options&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for a reference on how to customize pivot column rendering.
@@ -1,18 +0,0 @@
-## What version of React-Table are you using?
-
-Your bug may already be fixed in the latest release. Run `yarn upgrade react-table`!
-Place your version here...
-
-## What bug are you experiencing, or what feature are you proposing?
-
-Please include a detailed explanation here...
-
-## Use https://codesandbox.io/s/X6npLXPRW (by clicking the "Fork" button) to reproduce the issue.
-
-Then paste a link to your newly forked codesandbox here...
-
-## What are the steps to reproduce the issue?
-
-1.  list the steps
-2.  to reproduce
-3.  the issue
@@ -1,69 +1,72 @@
 /* eslint-disable */

-import React from "react";
+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 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 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: 'Readme', component: Readme },
+  { name: 'HOC Readme', component: HOCReadme },

  // { name: 'Tester', component: Test },
-  { name: "Simple Table", component: CodeSandbox("X6npLXPRW") },
+  { name: 'Simple Table', component: CodeSandbox('X6npLXPRW') },
  {
-    name: "Cell Renderers & Custom Components",
-    component: CodeSandbox("OyRL04Z4Y")
+    name: 'Cell Renderers & Custom Components',
+    component: CodeSandbox('OyRL04Z4Y')
  },
-  { name: "Default Sorting", component: CodeSandbox("gLwmmjzA3") },
+  { name: 'Default Sorting', component: CodeSandbox('gLwmmjzA3') },
  {
-    name: "Custom Sorting",
-    component: CodeSandbox("VGx67J35")
+    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: '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: 'Pivoting & Aggregation w/ Sub Components',
+    component: CodeSandbox('p0kEVBgQ')
  },
  {
-    name: "100k Rows w/ Pivoting & Sub Components",
-    component: CodeSandbox("DRmKj0XyK")
+    name: '100k Rows w/ Pivoting & Sub Components',
+    component: CodeSandbox('DRmKj0XyK')
  },
-  { name: "Pivoting Options", component: CodeSandbox("kZKmNBK6r") },
-  { name: "Functional Rendering", component: CodeSandbox("VPZ0Bzv8X") },
+  { name: 'Pivoting Options', component: CodeSandbox('kZKmNBK6r') },
+  { name: 'Functional Rendering', component: CodeSandbox('VPZ0Bzv8X') },
  {
-    name: "Custom Expander Position",
-    component: CodeSandbox("1jj2XrPEV")
+    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: '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: 'Fixed Header w/ Vertical Scroll',
+    component: CodeSandbox('7LY0gjA8O')
  },
  {
-    name: "Multiple Pagers (Top and Bottom)",
-    component: CodeSandbox("VEZ8OgvX")
+    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: '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 {
@@ -71,41 +74,41 @@ export default class App extends React.Component {
    return (
      <ReactStory
        style={{
-          display: "block",
-          width: "100%",
-          height: "100%"
+          display: 'block',
+          width: '100%',
+          height: '100%'
        }}
        pathPrefix="story/"
        StoryWrapper={props => (
          <defaultProps.StoryWrapper
            css={{
              padding: 0,
-              display: "flex",
-              flexDirection: "column"
+              display: 'flex',
+              flexDirection: 'column'
            }}
          >
            <a
              href="//github.com/react-tools/react-table"
              style={{
-                display: "block",
-                textAlign: "center",
-                borderBottom: "solid 3px #cccccc"
+                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"
+                  width: '150px',
+                  padding: '10px'
                }}
              />
            </a>
            <div
              {...props}
              style={{
-                flex: "1 0 auto",
-                position: "relative"
+                flex: '1 0 auto',
+                position: 'relative'
              }}
            />
          </defaultProps.StoryWrapper>
@@ -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'));
@@ -47,7 +47,7 @@ export default class ComponentTest extends React.component {
 //     const rtProps = {
 //       data,
 //       columns,
-//       // ExpanderComponent: (props)=><ExpanderComponent {...props} />,
+//       // ExpanderComponent: (props, closeExpanded)=><ExpanderComponent {...props, closeExpanded} />,
 //       // SubComponent: (props)=><SubComponent {...props} />,
 //       // multiSort: false,
 //     }
@@ -0,0 +1,110 @@
+import React from 'react'
+import ReactTable from '../../../../lib/index'
+import FoldableTableHOC from '../../../../lib/hoc/foldableTable'
+import selectTableHOC from '../../../../lib/hoc/selectTable'
+
+const FoldableTable = FoldableTableHOC(selectTableHOC(ReactTable))
+
+export default class FoldableTableCustomState extends React.Component {
+    constructor(props, context) {
+        super(props, context)
+
+        this.state = { folded: {}, seleted: {}, selectedAll: false }
+    }
+
+    getData = () => [{
+        id: 1,
+        first_name: 'Jeanette',
+        'last_name': 'Penddreth',
+        email: 'jpenddreth0@census.gov',
+        'gender': 'Female',
+        ip_address: '26.58.193.2',
+    }, {
+        'id': 2,
+        'first_name': 'Giavani',
+        last_name: 'Frediani',
+        'email': 'gfrediani1@senate.gov',
+        'gender': 'Male',
+        'ip_address': '229.179.4.212',
+    }, {
+        'id': 3,
+        first_name: 'Noell',
+        last_name: 'Bea',
+        'email': 'nbea2@imageshack.us',
+        gender: 'Female',
+        ip_address: '180.66.162.255',
+    }, {
+        'id': 4,
+        'first_name': 'Willard',
+        'last_name': 'Valek',
+        email: 'wvalek3@vk.com',
+        'gender': 'Male',
+        ip_address: '67.76.188.26',
+    }];
+
+    toggleSelection = (key, shift, row) => {
+        const { selected } = this.state
+        let newSelected = Object.assign({}, selected)
+        newSelected[key] = !newSelected[key]
+        this.setState(p => ({ selected: newSelected }))
+    };
+
+    toggleAll = () => {
+        const { selectedAll } = this.state
+
+        if (selectedAll) { this.setState(p => { return { selectedAll: false, seleted: {} } }); }
+        else {
+            const data = this.getData()
+
+            let newSelected = {}
+            data.forEach(d => newSelected[d.id] = true)
+            this.setState(p => ({ selectedAll: true, seleted: newSelected }))
+        }
+    }
+
+    isSelected = key => this.state.seleted[key];
+
+    render() {
+        return (<FoldableTable
+            //SelectTable props
+            keyField='id'
+            toggleSelection={this.toggleSelection}
+            toggleAll={this.toggleAll}
+            isSelected={this.isSelected}
+            selectAll={this.state.selectedAll}
+            selectType='checkbox'
+
+            onFoldChange={newFolded => this.setState(p => { return { folded: newFolded } })}
+            folded={this.state.folded}
+
+            data={this.getData()}
+            columns={[{
+                Header: "Name",
+                foldable: true,
+                columns: [
+                    {
+                        Header: "First Name",
+                        accessor: "first_name"
+                    },
+                    {
+                        Header: "Last Name",
+                        accessor: "last_name"
+                    }
+                ]
+            }, {
+                Header: "Info",
+                foldable: true,
+                columns: [
+                    {
+                        Header: "Email",
+                        accessor: "email"
+                    },
+                    {
+                        Header: "Gender",
+                        accessor: "gender"
+                    }
+                ]
+            }]
+            }></FoldableTable>)
+    }
+}
@@ -0,0 +1,71 @@
+import React from 'react'
+import ReactTable from '../../../../lib/index'
+import FoldableTableHOC from '../../../../lib/hoc/foldableTable'
+
+const FoldableTable = FoldableTableHOC(ReactTable)
+
+export default class FoldableTableWithHeader extends React.Component {
+
+    getData = () => [{
+        id: 1,
+        first_name: 'Jeanette',
+        last_name: 'Penddreth',
+        'email': 'jpenddreth0@census.gov',
+        gender: 'Female',
+        'ip_address': '26.58.193.2',
+    }, {
+        'id': 2,
+        first_name: 'Giavani',
+        last_name: 'Frediani',
+        email: 'gfrediani1@senate.gov',
+        gender: 'Male',
+        'ip_address': '229.179.4.212',
+    }, {
+        'id': 3,
+        'first_name': 'Noell',
+        last_name: 'Bea',
+        'email': 'nbea2@imageshack.us',
+        'gender': 'Female',
+        ip_address: '180.66.162.255',
+    }, {
+        'id': 4,
+        'first_name': 'Willard',
+        'last_name': 'Valek',
+        email: 'wvalek3@vk.com',
+        'gender': 'Male',
+        ip_address: '67.76.188.26',
+    }];
+
+    render() {
+        return (<FoldableTable
+            data={this.getData()}
+            columns={[{
+                Header: "Name",
+                foldable: true,
+                columns: [
+                    {
+                        Header: "First Name",
+                        accessor: "first_name"
+                    },
+                    {
+                        Header: "Last Name",
+                        accessor: "last_name"
+                    }
+                ]
+            }, {
+                Header: "Info",
+                foldable: true,
+                columns: [
+                    {
+                        Header: "Email",
+                        accessor: "email"
+                    },
+                    {
+                        Header: "Gender",
+                        accessor: "gender"
+                    }
+                ]
+            }]
+            }></FoldableTable>)
+    }
+}
@@ -0,0 +1,64 @@
+import React from 'react';
+import ReactTable from '../../../../lib/index';
+import FoldableTableHOC from '../../../../lib/hoc/foldableTable';
+
+const FoldableTable = FoldableTableHOC(ReactTable);
+
+export default class FoldableTableWithoutHeader extends React.Component {
+
+    getData = () => [{
+        "id": 1,
+        "first_name": "Jeanette",
+        "last_name": "Penddreth",
+        "email": "jpenddreth0@census.gov",
+        "gender": "Female",
+        "ip_address": "26.58.193.2"
+    }, {
+        "id": 2,
+        "first_name": "Giavani",
+        "last_name": "Frediani",
+        "email": "gfrediani1@senate.gov",
+        "gender": "Male",
+        "ip_address": "229.179.4.212"
+    }, {
+        "id": 3,
+        "first_name": "Noell",
+        "last_name": "Bea",
+        "email": "nbea2@imageshack.us",
+        "gender": "Female",
+        "ip_address": "180.66.162.255"
+    }, {
+        "id": 4,
+        "first_name": "Willard",
+        "last_name": "Valek",
+        "email": "wvalek3@vk.com",
+        "gender": "Male",
+        "ip_address": "67.76.188.26"
+    }];
+
+    render() {
+        return <FoldableTable
+            data={this.getData()}
+            columns={[
+                {
+                    Header: "First Name",
+                    accessor: "first_name"
+                },
+                {
+                    Header: "Last Name",
+                    accessor: "last_name",
+                    foldable: true,
+                },
+                {
+                    Header: "Email",
+                    accessor: "email",
+                    foldable: true,
+                },
+                {
+                    Header: "Gender",
+                    accessor: "gender",
+                    foldable: true,
+                }
+            ]}></FoldableTable>
+    }
+}
@@ -0,0 +1,30 @@
+
+import React from 'react'
+import '../../../../react-table.css'
+
+import FoldableTableWithHeader from './FoldableTableWithHeader'
+import FoldableTableWithoutHeader from './FoldableTableWithoutHeader'
+import FoldableTableCustomState from './FoldableTableCustomState'
+
+class FaldableComponentTest extends React.Component {
+    render() {
+
+        return (
+            <div>
+                <p>- Sample With Header Columns</p>
+                <br />
+                <FoldableTableWithHeader />
+                <br /> <br />
+                <p>- Sample With Normal Columns</p>
+                <br />
+                <FoldableTableWithoutHeader />
+                <br /> <br />
+                <p>- Custom State and selectedTable</p>
+                <br />
+                <FoldableTableCustomState />
+            </div >
+        )
+    }
+}
+
+export default FaldableComponentTest
@@ -1,7 +1,13 @@
 /* eslint-disable */

-import TreeTable from "./treetable";
-import SelectTable from "./selecttable";
-import SelectTreeTable from "./selecttreetable";
+import TreeTable from './treetable'
+import SelectTable from './selecttable'
+import SelectTreeTable from './selecttreetable'
+import FoldableTable from './foldabletable';

-export { TreeTable, SelectTable, SelectTreeTable };
+export {
+  TreeTable,
+  SelectTable,
+  SelectTreeTable,
+  FoldableTable
+}
@@ -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*
@@ -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"
+  }
+}
@@ -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>
@@ -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"
+}
@@ -0,0 +1,5 @@
+{
+  "infiniteLoopProtection": false,
+  "hardReloadOnChange": false,
+  "view": "browser"
+}
@@ -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>;
@@ -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();
+    });
+  }
+}
@@ -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;
+}
@@ -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"));
@@ -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"
+  }
+}
@@ -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*
@@ -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"
+  }
+}
@@ -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>
@@ -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"
+}
@@ -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>;
@@ -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();
+    });
+  }
+}
@@ -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;
+}
@@ -0,0 +1,91 @@
+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'
+      }, {
+        Header: 'Last Name',
+        id: 'lastName',
+        accessor: d => d.lastName
+      }]
+    }, {
+      Header: 'Info',
+      columns: [{
+        Header: 'Profile Progress',
+        accessor: 'progress',
+        Cell: row => (
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              backgroundColor: '#dadada',
+              borderRadius: '2px'
+            }}
+          >
+            <div
+              style={{
+                width: `${row.value}%`,
+                height: '100%',
+                backgroundColor: row.value > 66 ? '#85cc00'
+                  : row.value > 33 ? '#ffbf00'
+                  : '#ff2e00',
+                borderRadius: '2px',
+                transition: 'all .2s ease-out'
+              }}
+            />
+          </div>
+        )
+      }, {
+        Header: 'Status',
+        accessor: 'status',
+        Cell: row => (
+          <span>
+            <span style={{
+              color: row.value === 'relationship' ? '#ff2e00'
+                : row.value === 'complicated' ? '#ffbf00'
+                : '#57d500',
+              transition: 'all .3s ease'
+            }}>
+              &#x25cf;
+            </span> {
+              row.value === 'relationship' ? 'In a relationship'
+              : row.value === 'complicated' ? `It's complicated`
+              : 'Single'
+            }
+          </span>
+        )
+      }]
+    }]}
+          defaultPageSize={10}
+          className="-striped -highlight"
+        />
+        <br />
+        <Tips />
+        <Logo />
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById("root"));
@@ -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"
+  }
+}
@@ -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*
@@ -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"
+  }
+}
@@ -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>
@@ -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"
+}
@@ -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>;
@@ -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();
+    });
+  }
+}
@@ -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;
+}
@@ -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"));
@@ -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"
+  }
+}
@@ -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*
@@ -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"
+  }
+}
@@ -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>
@@ -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"
+}
@@ -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>;
@@ -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();
+    });
+  }
+}
@@ -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;
+}
@@ -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"));
@@ -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"
+  }
+}
@@ -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*
@@ -0,0 +1,22 @@
+{
+  "name": "react-table-custom-component-props",
+  "version": "0.0.3",
+  "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"
+  }
+}
@@ -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>
@@ -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"
+}
@@ -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>;
@@ -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();
+    });
+  }
+}
@@ -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;
+}
@@ -0,0 +1,87 @@
+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>
+        <br />
+        <strong>Open your console and hover over some cells!</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"
+                },
+                {
+                  Header: "Status",
+                  accessor: "status"
+                }
+              ]
+            },
+            {
+              Header: "Stats",
+              columns: [
+                {
+                  Header: "Visits",
+                  accessor: "visits"
+                }
+              ]
+            }
+          ]}
+          getTdProps={(state, rowInfo, column, instance) => {
+            return {
+              onMouseEnter: e =>
+                console.log("Cell - onMouseEnter", {
+                  state,
+                  rowInfo,
+                  column,
+                  instance,
+                  event: e
+                })
+            };
+          }}
+          defaultPageSize={10}
+          className="-striped -highlight"
+        />
+        <br />
+        <Tips />
+        <Logo />
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById("root"));
@@ -0,0 +1,13 @@
+{
+  "name": "react-table-custom-component-props",
+  "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"
+  }
+}
@@ -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*
@@ -0,0 +1,22 @@
+{
+  "name": "react-table-custom-expander-position",
+  "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"
+  }
+}
@@ -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>
@@ -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"
+}
@@ -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>;
@@ -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();
+    });
+  }
+}
@@ -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;
+}
@@ -0,0 +1,87 @@
+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",
+                  Footer: () =>
+                    <div style={{ textAlign: "center" }}>First Name</div>
+                },
+                {
+                  Header: "Last Name",
+                  accessor: "lastName",
+                  Footer: () =>
+                    <div style={{ textAlign: "center" }}>Last Name</div>
+                }
+              ]
+            },
+            {
+              Header: "Info",
+              columns: [
+                {
+                  Header: "Age",
+                  accessor: "age",
+                  Footer: () => <div style={{ textAlign: "center" }}>Age</div>
+                }
+              ]
+            },
+            {
+              Header: "Expand",
+              columns: [
+                {
+                  expander: true,
+                  Header: () => <strong>More</strong>,
+                  width: 65,
+                  Expander: ({ isExpanded, ...rest }) =>
+                    <div>
+                      {isExpanded
+                        ? <span>&#x2299;</span>
+                        : <span>&#x2295;</span>}
+                    </div>,
+                  style: {
+                    cursor: "pointer",
+                    fontSize: 25,
+                    padding: "0",
+                    textAlign: "center",
+                    userSelect: "none"
+                  },
+                  Footer: () => <span>&hearts;</span>
+                }
+              ]
+            }
+          ]}
+          defaultPageSize={10}
+          className="-striped -highlight"
+          SubComponent={() => <div style={{padding: '10px'}}>Hello</div>}
+        />
+        <br />
+        <Tips />
+        <Logo />
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById("root"));
@@ -0,0 +1,13 @@
+{
+  "name": "react-table-custom-expander-position",
+  "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"
+  }
+}
@@ -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*
@@ -0,0 +1,23 @@
+{
+  "name": "react-table-custom-filtering",
+  "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",
+    "match-sorter": "1.8.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"
+  }
+}
@@ -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>
@@ -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"
+}
@@ -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>;
@@ -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();
+    });
+  }
+}
@@ -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;
+}
@@ -0,0 +1,93 @@
+import React from "react";
+import { render } from "react-dom";
+import { makeData, Logo, Tips } from "./Utils";
+import matchSorter from 'match-sorter'
+
+// 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}
+          filterable
+          defaultFilterMethod={(filter, row) =>
+            String(row[filter.id]) === filter.value}
+          columns={[
+            {
+              Header: "Name",
+              columns: [
+                {
+                  Header: "First Name",
+                  accessor: "firstName",
+                  filterMethod: (filter, row) =>
+                    row[filter.id].startsWith(filter.value) &&
+                    row[filter.id].endsWith(filter.value)
+                },
+                {
+                  Header: "Last Name",
+                  id: "lastName",
+                  accessor: d => d.lastName,
+                  filterMethod: (filter, rows) =>
+                    matchSorter(rows, filter.value, { keys: ["lastName"] }),
+                  filterAll: true
+                }
+              ]
+            },
+            {
+              Header: "Info",
+              columns: [
+                {
+                  Header: "Age",
+                  accessor: "age"
+                },
+                {
+                  Header: "Over 21",
+                  accessor: "age",
+                  id: "over",
+                  Cell: ({ value }) => (value >= 21 ? "Yes" : "No"),
+                  filterMethod: (filter, row) => {
+                    if (filter.value === "all") {
+                      return true;
+                    }
+                    if (filter.value === "true") {
+                      return row[filter.id] >= 21;
+                    }
+                    return row[filter.id] < 21;
+                  },
+                  Filter: ({ filter, onChange }) =>
+                    <select
+                      onChange={event => onChange(event.target.value)}
+                      style={{ width: "100%" }}
+                      value={filter ? filter.value : "all"}
+                    >
+                      <option value="all">Show All</option>
+                      <option value="true">Can Drink</option>
+                      <option value="false">Can't Drink</option>
+                    </select>
+                }
+              ]
+            }
+          ]}
+          defaultPageSize={10}
+          className="-striped -highlight"
+        />
+        <br />
+        <Tips />
+        <Logo />
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById("root"));
@@ -0,0 +1,14 @@
+{
+  "name": "react-table-custom-filtering",
+  "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",
+    "match-sorter": "1.8.1"
+  }
+}
@@ -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*
@@ -0,0 +1,22 @@
+{
+  "name": "react-table-custom-no-data-text",
+  "version": "0.0.3",
+  "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"
+  }
+}
@@ -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>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Andrew Kang-GandGitHub	f003ba3e94	Fix server-side pagination (#1894 )	2020-02-14 13:15:00 -07:00
Gabriel CangussuandTanner Linsley	2479b568dc	Made index.d.ts into a module itself (fix module name) (#1727 ) * Made index.d.ts into a module itself * Removed ts types in favor of @types/react-table	2019-12-06 16:43:03 -07:00
Tanner Linsley	9d14f2635c	v6.11.4	2019-12-05 15:11:05 -05:00
Tanner Linsley	652a366efc	v6.11.3	2019-12-05 15:07:36 -05:00
Tanner Linsley	476bddfcad	Merge branch 'v6' of https://github.com/react-tools/react-table into v6	2019-12-05 14:41:42 -05:00
Tanner Linsley	249bf509b5	Fix regression	2019-12-05 14:41:26 -05:00
Yurui ZhangandTanner Linsley	f8563affb5	properly initialize state in lifecycle.js (#1707 )	2019-12-05 14:40:51 -05:00
Yurui ZhangandTanner Linsley	22c703391c	[v6] fixes broken lifecycle.js (#1699 ) * resumes broken lifecycle.js * add back componentDidMount in lifecycle.js	2019-12-03 22:27:25 -07:00
Tanner LinsleyandGitHub	3107517226	Update README.md	2019-11-21 20:24:15 -07:00
Henry Q. DineenandTanner Linsley	f2e62a13f2	v6: prefer components in normalizeComponent (#1609 ) * prefer components in normalizeComponent * move react-is to direct dep	2019-11-20 08:47:06 -07:00
Roman KomarovandTanner Linsley	fb134462ff	Added index.d.ts to the package.json (#1599 )	2019-11-05 14:37:41 -07:00
Yurui ZhangandTanner Linsley	da5e9d7d27	v6: avoid calling `setState` in constructor from lifecycle.js (#1621 ) * avoid calling setState in constructor from lifecycle.js * fixes lint errors	2019-10-30 04:57:12 +01:00
Roman KomarovandTanner Linsley	3e464faf8c	Changing the name to react-table-v6 (#1584 ) Also adds the corresponding changes to the documentation and adds TypeScript definitions.	2019-10-10 06:54:10 -06:00
Tanner LinsleyandGitHub	0fde1ed8d6	Update package.json	2019-09-23 11:35:48 -06:00
Yurui ZhangandTanner Linsley	e1690ea151	fixes deprecated lifecycle method warnings in v6 (#1536 ) * try to migrate all the UNSAFE lifecycle methods * fixes lifecycle.js * fixes foldableTable * changes how to reset state in pagination	2019-09-22 15:41:01 -06:00
tannerlinsley	6584dbdad2	Update package.json	2019-09-09 07:52:41 -06:00
tannerlinsley	e4d1b8ac47	Update CHANGELOG.md	2019-09-09 07:51:20 -06:00
tannerlinsley	9b2fc7680a	Update utils.js	2019-09-09 07:50:39 -06:00
tannerlinsley	6bc2389ab3	Update CHANGELOG.md	2019-09-06 11:00:49 -06:00
tannerlinsley	872304da17	v6.10.2	2019-09-06 10:59:48 -06:00
Dan OttandTanner Linsley	5875f80089	use getPrototypeOf instead of .prototype (#1503 )	2019-09-06 10:58:41 -06:00
tannerlinsley	d05e54dee8	v6.10.1	2019-09-06 08:22:14 -06:00
Thomas RichandTanner Linsley	ab12816799	Fix 6.10 remounting/double click issue (#1499 ) Fixes https://github.com/tannerlinsley/react-table/issues/1336 (or at least fixes my issue with double click not working)	2019-09-05 14:45:03 -06:00
Christian KellnerandTanner Linsley	8ea48576b8	Fixing react warnings (#1495 ) * fixing react warnings * changing forgotten names to UNSAFE_	2019-09-04 09:07:44 -06:00
Vitali NedzvedzandTanner Linsley	5730544d35	fix: replace 'outline: none' with 'outline-width: 0' (#1474 )	2019-08-22 14:55:42 -06:00
David HandTanner Linsley	e2f03ef2f2	* fixed docs: "getTfootThProps" does not exist in code, but "getTfootTdProps" does (#1399 ) * added `column` argument to getTfootTdProps function (match getTheadThProps and other prop getters in that scope)	2019-07-16 13:21:43 -06:00
VojtechPandTanner Linsley	7a38d1fdb3	Fix components prop types (#1390 )	2019-07-15 11:26:19 -06:00
JayChungandTanner Linsley	36666e19d2	Fix deprecated getThProps function in doc (#1387 )	2019-07-15 11:25:56 -06:00
Rohit Rajat ChattopadhyayandTanner Linsley	50b03b7ec6	Added Gold sponsors (#1375 ) * Added Gold sponsors * Broken link fix zappi.com -> zaippi.io	2019-06-22 06:45:38 -06:00
Jessica ChouandTanner Linsley	79ba413db2	Fix spelling on word “receive”. (#1351 )	2019-05-30 06:33:04 -06:00
Jon PortellaandTanner Linsley	4c68975cf0	fix typo (#1350 )	2019-05-30 06:32:44 -06:00
Elie KhouryandTanner Linsley	0070d60d42	Fix initial state (#1348 )	2019-05-30 06:32:18 -06:00
Matthew LancellottiandTanner Linsley	1621bcb0c3	Resolve issue #1320 (#1324 ) Resolve issue #1320	2019-04-28 19:49:35 -06:00
tannerlinsley	4a4d2245fd	6.10.0	2019-04-23 17:01:28 -06:00
mike391andtannerlinsley	2c2d2aa092	Add cellInfo to onExpandedChange handler. (#1299 )	2019-04-23 16:52:03 -06:00
Tanner Linsley	92321b6d0a	Move HOC docs to readme	2019-04-23 16:51:28 -06:00
Andrue Andersonandtannerlinsley	0c15308d7a	fix: use isNaN for IE11 support (#1313 )	2019-04-23 16:50:33 -06:00
Bojan Bedracandtannerlinsley	8cde0cafbf	Typo (#1307 ) - fixes a typo in documentation	2019-04-23 16:50:33 -06:00
mike391andtannerlinsley	afab8a34cc	Add cellInfo to onExpandedChange handler. (#1299 )	2019-04-23 16:50:33 -06:00
Paul Vogelandtannerlinsley	969407254f	TravisCI badge: Use correct link (#1291 ) And correct branch	2019-04-23 16:50:33 -06:00
Michael Quinnandtannerlinsley	a5a49709d4	Fix #1275 minResizeWidth not working when using functional accessor and column id (#1276 )	2019-04-23 16:50:33 -06:00
Tanner Linsley	71c25f571b	Update README.md	2019-04-23 16:50:33 -06:00
andreaciandtannerlinsley	b75055ef38	BUG in resize columns (#1271 ) * BUG in resize columns * rows shorter than 100 chars... * Revert "rows shorter than 100 chars..." This reverts commit b32f17a2fe8736fe276b5026997837e6f02ec909.	2019-04-23 16:50:33 -06:00
Tanner Linsley	1079914996	Add links to old codesandbox examples	2019-04-23 16:50:33 -06:00
Tanner Linsley	5301355192	Move HOC docs to readme	2019-04-23 16:50:33 -06:00
Tanner Linsley	4c7e493f41	Create _redirects	2019-04-23 16:50:33 -06:00
Tanner Linsley	928233713e	Update README.md	2019-04-23 16:50:33 -06:00
Tanner Linsley	feda66196e	Update README.md	2019-04-23 16:50:33 -06:00
Josh McCulloughandtannerlinsley	c1b399d603	cleanup all but one linting issue (#1232 )	2019-04-23 16:50:32 -06:00
Jannik Keyeandtannerlinsley	d59d7e4fba	feature: allow minResizeWidth to be set (#1135 ) * feature: allow minResizeWidth to be set * fix: add minResizeWidth propType	2019-04-23 16:48:54 -06:00
Josh McCulloughandTanner Linsley	168a8e3f93	update fireFetchData to use current state for select value (#1231 )	2019-01-31 10:09:28 -07:00
Josh McCulloughandTanner Linsley	221164484f	cleanup all but one linting issue (#1232 )	2019-01-31 10:08:31 -07:00
Andrej GajdosandTanner Linsley	c7d2c36454	adding position prop into pagination component (#1205 ) - adding isTop prop into pagination component, which allows differentiate if pagination is on top or bottom of the table	2019-01-31 10:08:06 -07:00
Laurent PandTanner Linsley	26961d0994	[fix] filter data on all available columns not just visible one (#1148 )	2019-01-31 10:07:06 -07:00
Devin ClarkandTanner Linsley	de6389cafc	Adding IDs for select table, fixing backwards compatibility on floating left checkbox (#1208 ) * Adding IDs for select all and individual row checkboxes * Using keyfield const	2019-01-31 10:06:47 -07:00
Rahul VermaandTanner Linsley	e0f9d98819	♿ Adds aria-label prop to checkboxes (#1191 )	2019-01-31 10:05:15 -07:00
Grzegorz RozdzialikandTanner Linsley	0365057446	Extract pagination elements renderers to pagination props (#1176 ) Pagination elements are now customizable without having to create a new Pagination component, that would mostly mimic the existing one in terms of functionality.	2019-01-31 10:03:27 -07:00
StevenandTanner Linsley	ec25bfbb5a	fixed the sanbox code issue (#1174 ) * fixed the sabox code issue * add --copy-files flag to copy ti svg files to lib folder	2019-01-31 10:02:41 -07:00
Evan BrodieandTanner Linsley	0a1c12faca	Adds import instructions to the HOC README (#1168 ) * Adds import instructions to the HOC README Also fixes up some language and remove other import instructions. It's better to just have the import instructions in just one place. * Better visualizes a list of functions	2019-01-31 10:02:12 -07:00
AndyandTanner Linsley	1fddb1b97d	Example code fixed with missing return statement (#1154 )	2019-01-31 10:01:58 -07:00
Tanner Linsley	1e04377de7	Update README.md	2019-01-28 14:55:32 -07:00
Tanner Linsley	555c4fae9d	Update README.md	2019-01-28 14:35:05 -07:00
Tanner Linsley	0d8ca53b76	Update README.md	2019-01-28 14:34:04 -07:00
Tanner Linsley	64db8e09d4	Update .gitignore	2019-01-28 13:47:31 -07:00
Tanner LinsleyandGitHub	c5233c4404	Update README.md	2019-01-16 08:56:50 -07:00
Tanner LinsleyandGitHub	d0d862f1e8	Add files via upload	2019-01-16 08:55:42 -07:00
Tanner LinsleyandGitHub	dd3f30b099	Update bug_report.md	2018-10-04 14:55:20 -06:00
Tanner LinsleyandGitHub	d5fc894dd7	Delete ISSUE_TEMPLATE.md	2018-10-04 14:54:16 -06:00
Tanner Linsley	dc771ff25f	Update issue templates	2018-10-04 14:53:51 -06:00
simjohandTanner Linsley	d38021d4b0	Updated ReadMe with some more Props (#1142 ) I found the added Props by looking into the defaultProps.js when I could not find a way change the styling of the filter row. Custom Props Built-in Components Every single built-in component's props can be dynamically extended using any one of these prop-callbacks: <ReactTable getProps={fn} getTableProps={fn} getTheadGroupProps={fn} getTheadGroupTrProps={fn} getTheadGroupThProps={fn} getTheadProps={fn} getTheadTrProps={fn} getTheadThProps={fn} +getTheadFilterProps={fn} +getTheadFilterTrProps={fn} +getTheadFilterThProps={fn}	2018-10-04 14:51:28 -06:00
Jannik KeyeandTanner Linsley	06648b2577	feature: allow minResizeWidth to be set (#1135 ) * feature: allow minResizeWidth to be set * fix: add minResizeWidth propType	2018-10-04 14:49:11 -06:00
Leonardo MerzaandTanner Linsley	836f256031	added closeExpanded function to subComponent callback (#1121 )	2018-10-04 14:48:18 -06:00
Colton ColcleasureandTanner Linsley	188fc51336	Fixed defaultProps.selectType. (#1129 ) Changed defaultProps.selectType from "check" to "checkbox".	2018-10-04 14:47:49 -06:00
tragessereandTanner Linsley	474244ce41	Pagination accessibility (#1127 ) * Add aria-label attributes to pagination jump and row count selector with a new prop to specify different text. * Add new text props for labels to README	2018-10-04 14:47:30 -06:00
Jakub ŻurawskiandTanner Linsley	b6074a9ab1	Accesibility improvement - add role to tr in treeTable (#1114 )	2018-10-04 14:45:40 -06:00
Mohamed NimirandTanner Linsley	3278e1b05e	Update README.md (#1086 ) Fixed server-side data bad example link to point to https://react-table.js.org/#/story/server-side-data instead of 404 link https://github.com/react-tools/react-table/blob/master/stories/ServerSide.js Fixes #929	2018-10-04 14:44:15 -06:00
Alec ReserandTanner Linsley	2352cac4b8	Added placeholder to filter input. (#1087 ) * Added placeholder to filter input. * Changed package.json version.	2018-10-04 14:42:59 -06:00
Robin PhamandTanner Linsley	d94f59a5fa	only update state if page prop changes (#1082 )	2018-10-04 14:42:37 -06:00
Jeremy LibermanandTanner Linsley	7876a3876c	Resolve "cannot call class as a function" error (#1050 ) When rendering a class component using the `class extends React.Component {}` syntax, you would get an error `TypeError: Cannot call a class as a function` because the check to determine whether a component was a class component was insufficient. It seems pointless to even have a check, however, because the JSX syntax can render both class and functional components.	2018-10-04 14:42:16 -06:00
maxime romaandTanner Linsley	02e65b4388	fix linter , update selectTable hoc (#1073 ) * fix lint on foldable file add options to choose postion of checkbox column * (update hoc): selecttable options parameters position	2018-10-04 14:41:24 -06:00
Shubham KanodiaandTanner Linsley	d9d49fa3de	Adds "prop-types" as a peerDependency (#1069 ) * Adds "prop-types" as a peerDependency * Removed trailling comma	2018-10-04 14:40:13 -06:00
Kyle HallemanandTanner Linsley	41784cd52d	allow rest props from getTfootProps for TfootComponent (#1035 )	2018-10-04 14:39:48 -06:00
Mayank JethvaandTanner Linsley	9048835bcc	ReactTable HOC: advancedExpandTable (#1000 ) * initial commit * update readme * update examples and src * edit readme * use single instance of advancedExpandTable * add in hoc codesandbox to docs, run eslint on new source file	2018-10-04 14:39:07 -06:00
Bret IkeharaandTanner Linsley	b12fc8fc88	remove space in Logo name (#1033 )	2018-10-04 14:38:33 -06:00
Krzysztof KaczmarczykandTanner Linsley	76fde77b0f	Add additional column's renderers in TreeTable HOC (#1029 ) Pass Expander, PivotValue and Pivot renderers to to column constructor in TreeTable HOC	2018-10-04 14:37:44 -06:00
smoleniuchandTanner Linsley	f50b0a47cf	SelectTable - Make input component type defaults to checkbox (#1021 )	2018-10-04 14:37:19 -06:00
Don PflasterandTanner Linsley	ac8b497671	Tree uses accessor or ID and always shows pivot cells (#1011 ) * Also check ID field when finding pivot col in treeTableHOC * Pass the ID if you've got one on treeTableHOC * An expandable cell should never be hidden	2018-10-04 14:36:46 -06:00
Rebekah Heacock JonesandTanner Linsley	c79806090a	Fix propTypes validation for getFooterProps (#1007 ) This should be a function (like the other getXProps), not an object	2018-10-04 14:36:20 -06:00
Tanner Linsley	f55ce62041	Merge branch 'master' of https://github.com/react-tools/react-table	2018-05-29 10:56:34 -06:00
Mario ViensandTanner Linsley	4c9b44ab48	documentation formatting fix (#986 )	2018-05-28 01:11:35 -06:00
Tanner Linsley	48869a65e7	Better issue template	2018-05-24 17:00:17 -06:00
emyarodandTanner Linsley	3246336120	Add cross-env package (#873 ) * Fix typo * Edit link to working codesandbox Fix '100k Rows w/ Pivoting & Sub Components' example Closes #870 * Add cross-env to remove environment variable errors on Windows	2018-05-24 16:36:37 -06:00
Efim PasianidiandTanner Linsley	b12238d535	Add defaultPage prop (#941 ) * add defaultPage prop * fix defaultPage in manual mode	2018-05-24 16:36:19 -06:00
Mark McDonaldandTanner Linsley	1f92ed8d4f	Add more documentation for overriding props (#975 ) I think this is the most common way of setting columns or expanderDefaults. I had to find issue #565 and then follow it to issue #394 to see explanations on how to do this.	2018-05-24 16:35:22 -06:00
TerryLeeandTanner Linsley	cf59c644b4	Just correct names of parameters for onFilteredChanged (#967 )	2018-05-24 16:33:09 -06:00
Steve SharpandTanner Linsley	a7e8e26c00	Update README.md (#973 ) Fixes typo	2018-05-24 16:32:50 -06:00
StevenandTanner Linsley	dd4c1e2df6	add FoldableTable (#937 ) I have used this library to develop a big application for my company and had been required to make the columns are foldable. I saw that feature is useful and would like to share with everybody. Especially to all developers who developed this great component. Let me know if any issues with My component. I will fix it accordingly.	2018-05-24 16:32:34 -06:00
Anthon FredrikssonandTanner Linsley	621c3bf092	Fixed text mismatch when doing SSR (#957 ) * fixed a mismatch issue when doing ssr. made some windows-specific changes to ease contributing * remove accidentally committed file	2018-05-24 16:27:57 -06:00
Bill FienbergandTanner Linsley	72afabbd03	Fix README: `defaultSortMethod` doesn't match code (#910 ) Updating the `defaultSortMethod` in the README to match the [code](https://github.com/react-tools/react-table/blob/3a8a037ee68b11e329c581a8d61a37db276a0dbf/src/defaultProps.js#L46)	2018-05-24 16:25:57 -06:00
Stuart CasarottoandTanner Linsley	4aa07c33da	Typo (#899 ) arra -> array	2018-05-24 16:25:41 -06:00
Frank NguyenandTanner Linsley	d430d51888	Added react-dom as a peer dependency (#889 )	2018-05-24 16:25:28 -06:00
AndrewandTanner Linsley	4824b4c8cc	Remove header focus outline. Fixes react-tools/react-table#685 (#881 )	2018-05-24 16:24:54 -06:00
Richard AandTanner Linsley	60766cf261	Add prefix to key of pad rows (#828 ) Add prefix to key of pad rows so it doesn't conflict with keys of page rows. Duplicate keys are causing rendering issues with preact.	2018-05-24 16:23:53 -06:00
Tanner Linsley	fcdc3d88bc	v6.8.6	2018-05-24 10:24:29 -06:00