Used a spread on the path.

Minor final fix - replace .filter with .forEach
useSimpleLayout integration
2026-08-19 08:20:30 +00:00 · 2019-04-28 23:39:50 +09:00 · 2019-04-28 23:29:07 +09:00 · 2019-04-28 23:20:22 +09:00 · 2019-04-28 19:10:22 +09:00 · 2019-04-26 22:28:25 -06:00
281 changed files with 51255 additions and 4233 deletions
@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "modules": false
+      }
+    ],
+    "@babel/react"
+  ]
+}
@@ -0,0 +1,15 @@
+{
+  "parser": "babel-eslint",
+  "extends": ["standard", "standard-react"],
+  "env": {
+    "es6": true
+  },
+  "plugins": ["react"],
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "rules": {
+    "space-before-function-paren": 0,
+    "react/jsx-boolean-value": 0
+  }
+}
@@ -1,3 +0,0 @@
-module.exports = {
-  extends: 'react-tools',
-}
@@ -1,5 +1,6 @@
 node_modules/
 lib/
+dist/
 es/
 docs/build
 react-table.js
@@ -1,4 +1,7 @@
 language: node_js
 node_js:
-  - "6"
+  - "10"
+
+cache: yarn
+
 script: npm test
@@ -21,7 +21,18 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
 <br />
 <br />

-⚠️ Version 7 is under active development and is currently in an alpha state. If you are looking for [React Table v6, click here](https://github.com/tannerlinsley/react-table/tree/v6)
+## ⚠️ Version 7
+
+This documentation is for Version 7, which is under active development and currently in an alpha state.
+
+## Version 6
+
+Looking for v6 information?
+
+- [Documentation](https://github.com/tannerlinsley/react-table/tree/v6)
+- [HOC Documentation](https://github.com/tannerlinsley/react-table/tree/v6#hoc-extensions)
+- [Examples](https://github.com/tannerlinsley/react-table/tree/v6#codesandbox-examples)
+- [HOC Examples](https://github.com/tannerlinsley/react-table/tree/v6/docs/src/examples)

 ## Features

@@ -78,8 +89,8 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
        </a>
      </td>
      <td align="center" valign="middle">
-        <a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
-          <img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/gold-placeholder.png">
+        <a href="https://zappi.com/web" target="_blank">
+          <img width="300" src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/sponsor-zappi.png">
        </a>
      </td>
    </tr>
@@ -95,17 +106,17 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
        </a>
      </td>
      <td align="center" valign="middle">
-        <a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
+        <a href="https://patreon.com/tannerlinsley" target="_blank">
          <img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver-placeholder.png">
        </a>
      </td>
      <td align="center" valign="middle">
-        <a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
+        <a href="https://patreon.com/tannerlinsley" target="_blank">
          <img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver-placeholder.png">
        </a>
      </td>
      <td align="center" valign="middle">
-        <a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=react_table" target="_blank">
+        <a href="https://patreon.com/tannerlinsley" target="_blank">
          <img src="https://raw.githubusercontent.com/tannerlinsley/files/master/images/patreon/silver-placeholder.png">
        </a>
      </td>
@@ -116,7 +127,7 @@ Hooks for building **lightweight, fast and extendable datagrids** for React
 ## Table of Contents

 - [Installation](#installation)
- [Example](#example)
+- [Example](#examples)
 - [Contributing](#contributing)

 ## Installation
@@ -134,7 +145,7 @@ $ npm install react-table
 2.  Import the `react-table` module

 ```javascript
-import { useReactTable } from "react-table";
+import { useReactTable } from 'react-table'
 ```

 ## Examples
@@ -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>
@@ -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,65 @@
+import React from "react";
+import { render } from "react-dom";
+import { Logo, Tips } from "./Utils";
+
+// Import React Table
+import ReactTable from "react-table";
+import "react-table/react-table.css";
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <ReactTable
+          data={[]}
+          noDataText="Oh Noes!"
+          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"
+                }
+              ]
+            }
+          ]}
+          defaultPageSize={10}
+          className="-striped -highlight"
+        />
+        <br />
+        <Tips />
+        <Logo />
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById("root"));
@@ -0,0 +1,13 @@
+{
+  "name": "react-table-custom-no-data-text",
+  "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-sorting",
+  "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>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Gary Menzel	932f529105	Used a spread on the path.	2019-04-28 23:39:50 +09:00
Gary Menzel	bc35e3262d	Minor final fix - replace .filter with .forEach	2019-04-28 23:29:07 +09:00
Gary Menzel	1a6056859a	useSimpleLayout integration	2019-04-28 23:20:22 +09:00
Gary Menzel	834ab4b4a7	Install useSimpleLayout and adjust useTable and useRows as required.	2019-04-28 19:10:22 +09:00
tannerlinsley	8c81a31aa6	Update README.md	2019-04-26 22:28:25 -06:00
tannerlinsley	8e4601fa83	Move row and cell generation to useTable. Add warnings for unprepared rows	2019-04-25 16:33:00 -06:00
tannerlinsley	7c6076908d	Merge branch 'master' of https://github.com/react-tools/react-table	2019-04-23 15:47:26 -06:00
tannerlinsley	ab3252bc32	Remove unnecessary flex layout inline styles	2019-04-23 15:47:22 -06:00
Jose Manuel Vergara FlorezandTanner Linsley	085957f3c4	Fix Example link on ReadMe (#1308 )	2019-04-23 15:26:43 -06:00
Bojan BedracandTanner Linsley	fd5d9ddecd	Broken 100k rows aggregation (#1283 ) * Broken codesandbox example * Delete file in wrong location	2019-04-23 15:22:36 -06:00
Paul VogelandTanner Linsley	4e3fa751dc	TravisCI: Cache yarn files (#1289 ) Like it is recommended by https://docs.travis-ci.com/user/caching/#yarn-cache	2019-03-12 11:08:24 -06:00
Paul VogelandTanner Linsley	3453ac5a76	TravisCI: Use node version 10 (#1288 ) Since it's the active LTS according to https://nodejs.org/en/about/releases/	2019-03-12 09:00:46 -06:00
Gary MenzelandTanner Linsley	a9971e66af	Fixes for useExtended in useTable plus small bug (#1279 ) * undefined error in GroupBy row specific hooks and correct pathing for nested rows * Ensuring correct git user	2019-02-27 08:06:47 -08:00
Tanner LinsleyandGitHub	33f30c7b7f	Update README.md	2019-02-18 10:13:41 -07:00
Tanner LinsleyandGitHub	91d758711d	Update README.md	2019-02-14 15:06:47 -07:00
Tanner LinsleyandGitHub	b2498b0430	Update README.md	2019-02-14 14:51:07 -07:00
Tanner LinsleyandGitHub	d599952e89	Update README.md	2019-02-14 14:48:57 -07:00
Tanner Linsley	3ee410bd05	Create _redirects	2019-02-11 13:19:27 -07:00
Tanner Linsley	8b07b2c84e	Unzip old react-table examples in archives	2019-02-11 13:14:36 -07:00
Tanner Linsley	a0495f6858	Rename hook files	2019-02-11 09:33:34 -07:00
Tanner Linsley	2d31d3bac9	v7.0.0-alpha.2	2019-02-06 16:23:02 -07:00