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-21 09:20:22 +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
321 changed files with 41656 additions and 5029 deletions
@@ -1,11 +0,0 @@
 {
  "presets": [
    [
      "@babel/env",
      {
        "modules": false
      }
    ],
    "@babel/react"
  ]
 }
@@ -1,15 +0,0 @@
 {
  "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
  }
 }
@@ -0,0 +1,3 @@
 module.exports = {
  extends: 'react-tools',
 }
@@ -4,14 +4,6 @@ about: Create a report to help us improve
 ---
 # Using v6?
 v6 is now considered feature complete to its current abilities and limitations. We are not actively working to fix any issues for v6 any more. We will, however, merge any non-breaking pull requests submitted to fix anything in v6.
 # Using v7?
 Thanks for using the alpha version of React Table v7! We're very excited about it.
 **Describe the bug**
 A clear and concise description of what the bug is.
@@ -26,7 +18,7 @@ Steps to reproduce the behavior:
 A clear and concise description of what you expected to happen.
 **Codesandbox!**
-Use a new [react-table codesandbox](https://codesandbox.io/s/m5lxzzpz69) to reproduce the issue.
+Use a new [react-table codesandbox](codesandbox.io/s/X6npLXPRW) to reproduce the issue.
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
@@ -4,6 +4,14 @@ about: Suggest an idea for this project
 ---
-# STOP
+**Is your feature request related to a problem? Please describe.**
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-We do not track feature requests through Github. Please use the [Spectrum React Table Forum](https://spectrum.chat/react-table) to talk about new ideas and features.
+**Describe the solution you'd like**
 A clear and concise description of what you want to happen.
 **Describe alternatives you've considered**
 A clear and concise description of any alternative solutions or features you've considered.
 **Additional context**
 Add any other context or screenshots about the feature request here.
@@ -4,8 +4,8 @@ about: Looking for help? Need a question answered?
 ---
-# STOP
+STOP!!!
-We do not use Github to track general support. Please use our public support forum at https://spectrum.chat/react-table.
+Github issues is no place for general support. We encourage you to use our public support forum at https://spectrum.chat/react-table.
 NOTE: If a support/help/question issue is opened, it will be closed immediately and be redirected to the forum. Thanks for helping us keep our issues clean and productive!
@@ -1,6 +1,5 @@
 node_modules/
 lib/
 dist/
 es/
 docs/build
 react-table.js
@@ -10,3 +9,4 @@ react-table.css
 .idea
 .DS_Store
 .history
 .vscode
@@ -1,7 +1,4 @@
 language: node_js
 node_js:
-  - "10"
+  - "6"
 cache: yarn
 script: npm test
@@ -1,59 +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.
+- 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.
+- 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)
+- Now passes `column` to `getResizerProps` (#667)
-* NOTE: `getResizerProps` is now only called if the column is resizable
+- NOTE: `getResizerProps` is now only called if the column is resizable
-* Fixes the `className` ordering in defaultProps for ThComponent (#673)
+- Fixes the `className` ordering in defaultProps for ThComponent (#673)
-* NOTE: user supplied classNames now come at the end so they can extend the defaults
+- 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
@@ -61,113 +82,113 @@
 #### New Features
-* Expose page/pageSize to rows/cells
+- Expose page/pageSize to rows/cells
-* Supply sort direction to custom sort methods
+- Supply sort direction to custom sort methods
 #### Fixes & Optimizations
-* README updates
+- README updates
-* Linter cleanup
+- Linter cleanup
-* Added PropTypes node module
+- Added PropTypes node module
-* Deps, linting and style upgrades
+- Deps, linting and style upgrades
 ## 6.6.0
 #### Fixes & Optimizations
-* moved repo to react-tools
+- moved repo to react-tools
-* Doc examples moved to codesandbox.io
+- Doc examples moved to codesandbox.io
-* README updates
+- README updates
-* CSS refacting for rt-tfoot to match rt-thead
+- CSS refacting for rt-tfoot to match rt-thead
-* CSS more specific for input and select
+- 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
+- README updates
-* `makePathArray` in utils - #326
+- `makePathArray` in utils - #326
-* Various fixes: #294, #376, #398, #415,
+- Various fixes: #294, #376, #398, #415,
 ## 6.5.1
 #### Fixes & Optimizations
-* `defaultExpanded` now works correctly - #372
+- `defaultExpanded` now works correctly - #372
-* `column.getProps().rest` props are now applied correctly
+- `column.getProps().rest` props are now applied correctly
-* `makeTemplateComponent` now supports `displayName` - #289
+- `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.
+- `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.
+- `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:
+- New Renderers:
-  * `Aggregated` - Custom renderer for aggregated cells
+  - `Aggregated` - Custom renderer for aggregated cells
-  * `Pivot` - Custom renderer for Pivoted Cells (utilizes `Expander` and `PivotValue`)
+  - `Pivot` - Custom renderer for Pivoted Cells (utilizes `Expander` and `PivotValue`)
-  * `PivotValue` - Custom renderer for Pivot cell values (deprecates the undocumented `pivotRender` option)
+  - `PivotValue` - Custom renderer for Pivot cell values (deprecates the undocumented `pivotRender` option)
-  * `Expander` - Custom renderer for Pivot cell Expander
+  - `Expander` - Custom renderer for Pivot cell Expander
-* Added custom sorting methods per table via `defaultSortMethod` and per column via `column.sortMethod`
+- Added custom sorting methods per table via `defaultSortMethod` and per column via `column.sortMethod`
-* Pivot columns are now visibly separate and sorted/filtered independently.
+- Pivot columns are now visibly separate and sorted/filtered independently.
-* Added `column.resizable` to override global table `resizable` option for specific columns.
+- 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.sortable` to override global table `sortable` option for specific columns.
-* Added `column.filterable` to override global table `filterable` option for specific columns.
+- Added `column.filterable` to override global table `filterable` option for specific columns.
-* Added `defaultExpanded` table option.
+- 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.
+- 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.
+- Prevent transitions while column resizing for a smoother resize effect.
-* Disable text selection while resizing columns.
+- Disable text selection while resizing columns.
 ##### Breaking API Changes
-* New Renderers:
+- New Renderers:
-  * `Cell` - deprecates and replaces `render`
+  - `Cell` - deprecates and replaces `render`
-  * `Header` - deprecates and replaces `header`
+  - `Header` - deprecates and replaces `header`
-  * `Footer` - deprecates and replaces `footer`
+  - `Footer` - deprecates and replaces `footer`
-  * `Filter`- deprecates and replaces `filterRender`
+  - `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.
+- 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
+  - `onSorting` no longer requires you to build your own toggle logic
-  * `onResize` no longer requires you to build your own resize 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 `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 `filtering` -> `filtered`
-* Renamed `sorting` -> `sorted`
+- Renamed `sorting` -> `sorted`
-* Renamed `expandedRows` -> `expanded`
+- Renamed `expandedRows` -> `expanded`
-* Renamed `resizing` -> `resized`
+- Renamed `resizing` -> `resized`
-* Renamed `defaultResizing` -> `defaultResized`
+- Renamed `defaultResizing` -> `defaultResized`
-* Renamed `defaultFiltering` -> `defaultFiltered`
+- Renamed `defaultFiltering` -> `defaultFiltered`
-* Renamed `defaultSorting` -> `defaultSorted`
+- Renamed `defaultSorting` -> `defaultSorted`
-* Renamed `onSortingChange` -> `onSortedChange`
+- Renamed `onSortingChange` -> `onSortedChange`
-* Renamed `onFilteringChange` -> `onFilteredChange`
+- Renamed `onFilteringChange` -> `onFilteredChange`
-* Renamed `onResize` -> `onResizedChange`
+- Renamed `onResize` -> `onResizedChange`
-* Renamed `onExpandRow` -> `onExpandedChange`
+- Renamed `onExpandRow` -> `onExpandedChange`
-* Renamed `showFilters` -> `filterable`
+- Renamed `showFilters` -> `filterable`
-* Renamed `hideFilter` -> `filterable` (Column option. Note the true/false value is now flipped.)
+- 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`
+- `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.
+- 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,22 +0,0 @@
 {
  "name": "react-table-simple-table",
  "version": "0.0.1",
  "description": null,
  "keywords": [],
  "main": "index.js",
  "dependencies": {
    "react-table": "6.7.0-alpha-0",
    "react-dom": "15.5.3",
    "react": "15.5.3",
    "namor": "1.0.1"
  },
  "devDependencies": {
    "react-scripts": "1.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
 }
@@ -1,107 +0,0 @@
 import React from "react";
 import { render } from "react-dom";
 import { makeData, Logo, Tips } from "./Utils";
 // Import React Table
 import ReactTable from "react-table";
 import "react-table/react-table.css";
 class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: makeData(),
      key: 0,
      columns: [
        {
          Header: "Name",
          columns: [
            {
              Header: "First Name",
              accessor: "firstName",
              show: true
            },
            {
              Header: "Last Name",
              id: "lastName",
              accessor: d => d.lastName
            }
          ]
        },
        {
          Header: "Info",
          columns: [
            {
              Header: "Age",
              accessor: "age"
            },
            {
              Header: "Status",
              accessor: "status"
            }
          ]
        },
        {
          Header: "Stats",
          columns: [
            {
              Header: "Visits",
              accessor: "visits"
            }
          ]
        }
      ]
    };
  }
  chnageColumnsAndKey = () => {
    const { columns } = this.state;
    let updatedColumns = columns;
    // this style of update is technically considered a mutation
    updatedColumns[0].columns[0].show = false;
    this.setState(state => {
      // But, by returning a new array instead of utilizing the old one, we can skirt the issue.
      return { columns: [...updatedColumns], key: state.key + 1 };
    });
  };
  changeColumns = () => {
    const { columns } = this.state;
    let updatedColumns = columns;
    // this style of update is technically considered a mutation.
    updatedColumns[0].columns[0].show = false;
    this.setState(state => {
      // But, by returning a new array instead of utilizing the old one, we can skirt the issue.
      return { columns: [...updatedColumns] };
    });
  };
  render() {
    const { data, columns, key } = this.state;
    return (
      <div>
        <button onClick={this.changeColumns}>Hide firstname (broken)</button>
        <button onClick={this.chnageColumnsAndKey}>
          hide firstname (hacky fix)
        </button>
        <ReactTable
          key={key}
          data={data}
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
 }
 render(<App />, document.getElementById("root"));
@@ -1,13 +0,0 @@
 {
  "name": "react-table-simple-table",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "index.js",
  "dependencies": {
    "react-table": "6.7.0-alpha-0",
    "react-dom": "15.5.3",
    "react": "15.5.3",
    "namor": "1.0.1"
  }
 }
@@ -1,21 +0,0 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 # dependencies
 /node_modules
 # testing
 /coverage
 # production
 /build
 # misc
 .DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
@@ -1,38 +0,0 @@
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <!--
    manifest.json provides metadata used when your web app is added to the
    homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
  -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <!--
    Notice the use of %PUBLIC_URL% in the tags above.
    It will be replaced with the URL of the `public` folder during the build.
    Only files inside the `public` folder can be referenced from the HTML.
    Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
    work correctly both with client-side routing and a non-root public URL.
    Learn how to configure a non-root public URL by running `npm run build`.
  -->
  <title>React App</title>
 </head>
 <body>
  <div id="root"></div>
  <!--
    This HTML file is a template.
    If you open it directly in the browser, you will see an empty page.
    You can add webfonts, meta tags, or analytics to this file.
    The build step will place the bundled scripts into the <body> tag.
    To begin the development, run `npm start` or `yarn start`.
    To create a production bundle, use `npm run build` or `yarn build`.
  -->
 </body>
 </html>
@@ -1,15 +0,0 @@
 {
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
 }
@@ -1,52 +0,0 @@
 // In production, we register a service worker to serve assets from local cache.
 // This lets the app load faster on subsequent visits in production, and gives
 // it offline capabilities. However, it also means that developers (and users)
 // will only see deployed updates on the "N+1" visit to a page, since previously
 // cached resources are updated in the background.
 // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 // This link also includes instructions on opting out of this behavior.
 export default function register() {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
      navigator.serviceWorker
        .register(swUrl)
        .then(registration => {
          // eslint-disable-next-line no-param-reassign
          registration.onupdatefound = () => {
            const installingWorker = registration.installing;
            installingWorker.onstatechange = () => {
              if (installingWorker.state === 'installed') {
                if (navigator.serviceWorker.controller) {
                  // At this point, the old content will have been purged and
                  // the fresh content will have been added to the cache.
                  // It's the perfect time to display a "New content is
                  // available; please refresh." message in your web app.
                  console.log('New content is available; please refresh.'); // eslint-disable-line no-console
                } else {
                  // At this point, everything has been precached.
                  // It's the perfect time to display a
                  // "Content is cached for offline use." message.
                  console.log('Content is cached for offline use.'); // eslint-disable-line no-console
                }
              }
            };
          };
        })
        .catch(error => {
          console.error('Error during service worker registration:', error);
        });
    });
  }
 }
 export function unregister() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(registration => {
      registration.unregister();
    });
  }
 }
@@ -1,5 +0,0 @@
 body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  font-size: 14px;
 }
@@ -0,0 +1,77 @@
 module.exports = {
  parserOptions: {
    ecmaVersion: 8,
    ecmaFeatures: {
      experimentalObjectRestSpread: true,
      jsx: true,
      node: false,
      classes: true
    },
    sourceType: 'module'
  },
  parser: 'babel-eslint',
  extends: ['standard'],
  plugins: ['react'],
  rules: {
    // Nozzle
    'jsx-quotes': [2, 'prefer-single'],
    'comma-dangle': [2, 'always-multiline'],
    // // React
    'react/jsx-boolean-value': 2,
    'react/jsx-curly-spacing': [2, 'never'],
    'react/jsx-equals-spacing': [2, 'never'],
    // 'react/jsx-indent': 2,
    'react/jsx-indent-props': [2, 2],
    'react/jsx-no-duplicate-props': 2,
    'react/jsx-no-undef': 2,
    'react/jsx-tag-spacing': [
      2,
      {
        closingSlash: 'never',
        beforeSelfClosing: 'always',
        afterOpening: 'never'
      }
    ],
    'react/jsx-uses-react': 2,
    'react/jsx-uses-vars': 2,
    'react/self-closing-comp': 2,
    'react/jsx-no-bind': [
      2,
      {
        allowArrowFunctions: true,
        allowBind: false,
        ignoreRefs: true
      }
    ],
    'react/no-did-update-set-state': 2,
    'react/no-unknown-property': 2,
    'react/react-in-jsx-scope': 2,
    'react/jsx-closing-bracket-location': [0, 'tag-aligned'],
    'react/jsx-tag-spacing': [2, { beforeSelfClosing: 'always' }],
    'react/jsx-wrap-multilines': 2,
    'react/self-closing-comp': 2,
    'react/jsx-key': 2,
    'react/jsx-no-comment-textnodes': 2,
    'react/jsx-no-duplicate-props': 2,
    'react/jsx-no-target-blank': 2,
    'react/jsx-no-undef': 2,
    'react/jsx-uses-react': 2,
    'react/jsx-uses-vars': 2,
    'react/no-danger-with-children': 2,
    'react/no-deprecated': 2,
    'react/no-direct-mutation-state': 2,
    'react/no-find-dom-node': 2,
    'react/no-is-mounted': 2,
    'react/no-render-return-value': 2,
    'react/no-string-refs': 2,
    'react/no-unknown-property': 2,
    'react/react-in-jsx-scope': 2,
    'react/require-render-return': 2
    // 'react/jsx-max-props-per-line': [2, { maximum: 1 }]
  }
 }
@@ -0,0 +1 @@
 react-table.js.org
@@ -5,88 +5,83 @@ You can find the most recent version of this guide [here](https://github.com/fac
 ## Table of Contents
- [Updating to New Releases](#updating-to-new-releases)
+* [Updating to New Releases](#updating-to-new-releases)
- [Sending Feedback](#sending-feedback)
+* [Sending Feedback](#sending-feedback)
- [Folder Structure](#folder-structure)
+* [Folder Structure](#folder-structure)
- [Available Scripts](#available-scripts)
+* [Available Scripts](#available-scripts)
-  - [npm start](#npm-start)
+  * [npm start](#npm-start)
-  - [npm test](#npm-test)
+  * [npm test](#npm-test)
-  - [npm run build](#npm-run-build)
+  * [npm run build](#npm-run-build)
-  - [npm run eject](#npm-run-eject)
+  * [npm run eject](#npm-run-eject)
- [Supported Language Features and Polyfills](#supported-language-features-and-polyfills)
+* [Supported Language Features and Polyfills](#supported-language-features-and-polyfills)
- [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
+* [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
- [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
+* [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
- [Debugging in the Editor](#debugging-in-the-editor)
+* [Debugging in the Editor](#debugging-in-the-editor)
- [Changing the Page `<title>`](#changing-the-page-title)
+* [Changing the Page `<title>`](#changing-the-page-title)
- [Installing a Dependency](#installing-a-dependency)
+* [Installing a Dependency](#installing-a-dependency)
- [Importing a Component](#importing-a-component)
+* [Importing a Component](#importing-a-component)
- [Code Splitting](#code-splitting)
+* [Adding a Stylesheet](#adding-a-stylesheet)
- [Adding a Stylesheet](#adding-a-stylesheet)
+* [Post-Processing CSS](#post-processing-css)
- [Post-Processing CSS](#post-processing-css)
+* [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc)
- [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc)
+* [Adding Images and Fonts](#adding-images-and-fonts)
- [Adding Images, Fonts, and Files](#adding-images-fonts-and-files)
+* [Using the `public` Folder](#using-the-public-folder)
- [Using the `public` Folder](#using-the-public-folder)
+  * [Changing the HTML](#changing-the-html)
-  - [Changing the HTML](#changing-the-html)
+  * [Adding Assets Outside of the Module System](#adding-assets-outside-of-the-module-system)
-  - [Adding Assets Outside of the Module System](#adding-assets-outside-of-the-module-system)
+  * [When to Use the `public` Folder](#when-to-use-the-public-folder)
-  - [When to Use the `public` Folder](#when-to-use-the-public-folder)
+* [Using Global Variables](#using-global-variables)
- [Using Global Variables](#using-global-variables)
+* [Adding Bootstrap](#adding-bootstrap)
- [Adding Bootstrap](#adding-bootstrap)
+  * [Using a Custom Theme](#using-a-custom-theme)
-  - [Using a Custom Theme](#using-a-custom-theme)
+* [Adding Flow](#adding-flow)
- [Adding Flow](#adding-flow)
+* [Adding Custom Environment Variables](#adding-custom-environment-variables)
- [Adding Custom Environment Variables](#adding-custom-environment-variables)
+  * [Referencing Environment Variables in the HTML](#referencing-environment-variables-in-the-html)
-  - [Referencing Environment Variables in the HTML](#referencing-environment-variables-in-the-html)
+  * [Adding Temporary Environment Variables In Your Shell](#adding-temporary-environment-variables-in-your-shell)
-  - [Adding Temporary Environment Variables In Your Shell](#adding-temporary-environment-variables-in-your-shell)
+  * [Adding Development Environment Variables In `.env`](#adding-development-environment-variables-in-env)
-  - [Adding Development Environment Variables In `.env`](#adding-development-environment-variables-in-env)
+* [Can I Use Decorators?](#can-i-use-decorators)
- [Can I Use Decorators?](#can-i-use-decorators)
+* [Integrating with an API Backend](#integrating-with-an-api-backend)
- [Integrating with an API Backend](#integrating-with-an-api-backend)
+  * [Node](#node)
-  - [Node](#node)
+  * [Ruby on Rails](#ruby-on-rails)
-  - [Ruby on Rails](#ruby-on-rails)
+* [Proxying API Requests in Development](#proxying-api-requests-in-development)
- [Proxying API Requests in Development](#proxying-api-requests-in-development)
+* [Using HTTPS in Development](#using-https-in-development)
-  - [Configuring the Proxy Manually](#configuring-the-proxy-manually)
+* [Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server)
- [Using HTTPS in Development](#using-https-in-development)
+* [Pre-Rendering into Static HTML Files](#pre-rendering-into-static-html-files)
- [Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server)
+* [Injecting Data from the Server into the Page](#injecting-data-from-the-server-into-the-page)
- [Pre-Rendering into Static HTML Files](#pre-rendering-into-static-html-files)
+* [Running Tests](#running-tests)
- [Injecting Data from the Server into the Page](#injecting-data-from-the-server-into-the-page)
+  * [Filename Conventions](#filename-conventions)
- [Running Tests](#running-tests)
+  * [Command Line Interface](#command-line-interface)
-  - [Filename Conventions](#filename-conventions)
+  * [Version Control Integration](#version-control-integration)
-  - [Command Line Interface](#command-line-interface)
+  * [Writing Tests](#writing-tests)
-  - [Version Control Integration](#version-control-integration)
+  * [Testing Components](#testing-components)
-  - [Writing Tests](#writing-tests)
+  * [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries)
-  - [Testing Components](#testing-components)
+  * [Initializing Test Environment](#initializing-test-environment)
-  - [Using Third Party Assertion Libraries](#using-third-party-assertion-libraries)
+  * [Focusing and Excluding Tests](#focusing-and-excluding-tests)
-  - [Initializing Test Environment](#initializing-test-environment)
+  * [Coverage Reporting](#coverage-reporting)
-  - [Focusing and Excluding Tests](#focusing-and-excluding-tests)
+  * [Continuous Integration](#continuous-integration)
-  - [Coverage Reporting](#coverage-reporting)
+  * [Disabling jsdom](#disabling-jsdom)
-  - [Continuous Integration](#continuous-integration)
+  * [Snapshot Testing](#snapshot-testing)
-  - [Disabling jsdom](#disabling-jsdom)
+  * [Editor Integration](#editor-integration)
-  - [Snapshot Testing](#snapshot-testing)
+* [Developing Components in Isolation](#developing-components-in-isolation)
-  - [Editor Integration](#editor-integration)
+* [Making a Progressive Web App](#making-a-progressive-web-app)
- [Developing Components in Isolation](#developing-components-in-isolation)
+* [Deployment](#deployment)
- [Making a Progressive Web App](#making-a-progressive-web-app)
+  * [Static Server](#static-server)
-  - [Offline-First Considerations](#offline-first-considerations)
+  * [Other Solutions](#other-solutions)
-  - [Progressive Web App Metadata](#progressive-web-app-metadata)
+  * [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing)
- [Deployment](#deployment)
+  * [Building for Relative Paths](#building-for-relative-paths)
-  - [Static Server](#static-server)
+  * [Azure](#azure)
-  - [Other Solutions](#other-solutions)
+  * [Firebase](#firebase)
-  - [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing)
+  * [GitHub Pages](#github-pages)
-  - [Building for Relative Paths](#building-for-relative-paths)
+  * [Heroku](#heroku)
-  - [Azure](#azure)
+  * [Modulus](#modulus)
-  - [Firebase](#firebase)
+  * [Netlify](#netlify)
-  - [GitHub Pages](#github-pages)
+  * [Now](#now)
-  - [Heroku](#heroku)
+  * [S3 and CloudFront](#s3-and-cloudfront)
-  - [Modulus](#modulus)
+  * [Surge](#surge)
-  - [Netlify](#netlify)
+* [Advanced Configuration](#advanced-configuration)
-  - [Now](#now)
+* [Troubleshooting](#troubleshooting)
-  - [S3 and CloudFront](#s3-and-cloudfront)
+  * [`npm start` doesn’t detect changes](#npm-start-doesnt-detect-changes)
-  - [Surge](#surge)
+  * [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra)
- [Advanced Configuration](#advanced-configuration)
+  * [`npm run build` silently fails](#npm-run-build-silently-fails)
- [Troubleshooting](#troubleshooting)
+  * [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku)
-  - [`npm start` doesn’t detect changes](#npm-start-doesnt-detect-changes)
+* [Something Missing?](#something-missing)
  - [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra)
  - [`npm run build` silently fails](#npm-run-build-silently-fails)
  - [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku)
  - [Moment.js locales are missing](#momentjs-locales-are-missing)
 - [Something Missing?](#something-missing)
 ## Updating to New Releases
@@ -191,7 +186,6 @@ In addition to [ES6](https://github.com/lukehoban/es6features) syntax features,
 * [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016).
 * [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017).
 * [Object Rest/Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread) (stage 3 proposal).
 * [Dynamic import()](https://github.com/tc39/proposal-dynamic-import) (stage 3 proposal)
 * [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (stage 2 proposal).
 * [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) and [Flow](https://flowtype.org/) syntax.
@@ -213,32 +207,56 @@ To configure the syntax highlighting in your favorite text editor, head to the [
 ## Displaying Lint Output in the Editor
->Note: this feature is available with `react-scripts@0.2.0` and higher.<br>
+> Note: this feature is available with `react-scripts@0.2.0` and higher.
 >It also only works with npm 3 or higher.
 Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
 They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do.
-You would need to install an ESLint plugin for your editor first. Then, add a file called `.eslintrc` to the project root:
+You would need to install an ESLint plugin for your editor first.
 > **A note for Atom `linter-eslint` users**
 > If you are using the Atom `linter-eslint` plugin, make sure that **Use global ESLint installation** option is checked:
 > <img src="http://i.imgur.com/yVNNHJM.png" width="300">
 > **For Visual Studio Code users**
 > VS Code ESLint plugin automatically detects Create React App's configuration file. So you do not need to create `eslintrc.json` at the root directory, except when you want to add your own rules. In that case, you should include CRA's config by adding this line:
 > ```js
 > {
 >   // ...
 >   "extends": "react-app"
 > }
 > ```
 ````
 Then add this block to the `package.json` file of your project:
 ```js
 {
  // ...
  "eslintConfig": {
    "extends": "react-app"
  }
 }
 ````
 Finally, you will need to install some packages _globally_:
 ```sh
 npm install -g eslint-config-react-app@0.3.0 eslint@3.8.1 babel-eslint@7.0.0 eslint-plugin-react@6.4.1 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-flowtype@2.21.0
 ```
-Now your editor should report the linting warnings.
+We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already [working on a solution to this](https://github.com/eslint/eslint/issues/3458) so this may become unnecessary in a couple of months.
 Note that even if you edit your `.eslintrc` file further, these changes will **only affect the editor integration**. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.
 If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules.
 ## Debugging in the Editor
 **This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) editor.**
-Visual Studio Code supports debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools.
+Visual Studio Code supports live-editing and debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools.
 You would need to have the latest version of [VS Code](https://code.visualstudio.com) and VS Code [Chrome Debugger Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed.
@@ -247,7 +265,8 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco
 ```json
 {
  "version": "0.2.0",
-  "configurations": [{
+  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
@@ -257,7 +276,8 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
-  }]
+    }
  ]
 }
 ```
@@ -291,7 +311,7 @@ For example:
 ### `Button.js`
 ```js
-import React, { Component } from 'react';
+import React, { Component } from "react";
 class Button extends Component {
  render() {
@@ -304,10 +324,9 @@ export default Button; // Don’t forget to use export default!
 ### `DangerButton.js`
 ```js
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import Button from './Button'; // Import a component from another file
+import Button from "./Button"; // Import a component from another file
 class DangerButton extends Component {
  render() {
@@ -330,56 +349,9 @@ Learn more about ES6 modules:
 * [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
 * [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)
 ## Code Splitting
 Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.
 This project setup supports code splitting via [dynamic `import()`](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand). Its [proposal](https://github.com/tc39/proposal-dynamic-import) is in stage 3. The `import()` function-like form takes the module name as an argument and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which always resolves to the namespace object of the module.
 Here is an example:
 ### `moduleA.js`
 ```js
 const moduleA = 'Hello';
 export { moduleA };
 ```
 ### `App.js`
 ```js
 import React, { Component } from 'react';
 class App extends Component {
  handleClick = () => {
    import('./moduleA')
      .then(({ moduleA }) => {
        // Use moduleA
      })
      .catch(err => {
        // Handle failure
      });
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Load</button>
      </div>
    );
  }
 }
 export default App;
 ```
 This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button.
 You can also use it with `async` / `await` syntax if you prefer it.
 ## Adding a Stylesheet
-This project setup uses [Webpack](https://webpack.js.org/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
+This project setup uses [Webpack](https://webpack.github.io/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
 ### `Button.css`
@@ -392,8 +364,8 @@ This project setup uses [Webpack](https://webpack.js.org/) for handling all asse
 ### `Button.js`
 ```js
-import React, { Component } from 'react';
+import React, { Component } from "react";
-import './Button.css'; // Tell Webpack that Button.js uses these styles
+import "./Button.css"; // Tell Webpack that Button.js uses these styles
 class Button extends Component {
  render() {
@@ -451,14 +423,15 @@ Following this rule often makes CSS preprocessors less useful, as features like
 First, let’s install the command-line interface for Sass:
 ```
-npm install node-sass-chokidar --save-dev
+npm install node-sass --save-dev
 ```
 Then in `package.json`, add the following lines to `scripts`:
 ```diff
   "scripts": {
-+    "build-css": "node-sass-chokidar src/ -o src/",
+    "build-css": "node-sass src/ -o src/",
-+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
+    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
@@ -482,8 +455,8 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
 ```diff
   "scripts": {
-     "build-css": "node-sass-chokidar src/ -o src/",
+     "build-css": "node-sass src/ -o src/",
-     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
+     "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
 -    "start": "react-scripts start",
 -    "build": "react-scripts build",
 +    "start-js": "react-scripts start",
@@ -494,33 +467,19 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c
   }
 ```
-Now running `npm start` and `npm run build` also builds Sass files.
+Now running `npm start` and `npm run build` also builds Sass files. Note that `node-sass` seems to have an [issue recognizing newly created files on some systems](https://github.com/sass/node-sass/issues/1891) so you might need to restart the watcher when you create a file until it’s resolved.
-**Why `node-sass-chokidar`?**
+## Adding Images and Fonts
 `node-sass` has been reported as having the following issues:
 - `node-sass --watch` has been reported to have *performance issues* in certain conditions when used in a virtual machine or with docker.
 - Infinite styles compiling [#1939](https://github.com/facebookincubator/create-react-app/issues/1939)
 - `node-sass` has been reported as having issues with detecting new files in a directory [#1891](https://github.com/sass/node-sass/issues/1891)
 `node-sass-chokidar` is used here as it addresses these issues.
 ## Adding Images, Fonts, and Files
 With Webpack, using static assets like images and fonts works similarly to CSS.
-You can **`import` a file right in a JavaScript module**. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF.
+You can **`import` an image right in a JavaScript module**. This tells Webpack to include that image in the bundle. Unlike CSS imports, importing an image or a font gives you a string value. This value is the final image path you can reference in your code.
 To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to [#1153](https://github.com/facebookincubator/create-react-app/issues/1153).
 Here is an example:
 ```js
-import React from 'react';
+import React from "react";
-import logo from './logo.png'; // Tell Webpack this JS file uses this image
+import logo from "./logo.png"; // Tell Webpack this JS file uses this image
 console.log(logo); // /logo.84287d09.png
@@ -638,19 +597,19 @@ npm install react-bootstrap --save
 npm install bootstrap@3 --save
 ```
-Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your ```src/index.js``` file:
+Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your `src/index.js` file:
 ```js
-import 'bootstrap/dist/css/bootstrap.css';
+import "bootstrap/dist/css/bootstrap.css";
-import 'bootstrap/dist/css/bootstrap-theme.css';
+import "bootstrap/dist/css/bootstrap-theme.css";
 // Put any other imports below so that CSS from your
 // components takes precedence over default styles.
 ```
-Import required React Bootstrap components within ```src/App.js``` file or your custom component files:
+Import required React Bootstrap components within `src/App.js` file or your custom component files:
 ```js
-import { Navbar, Jumbotron, Button } from 'react-bootstrap';
+import { Navbar, Jumbotron, Button } from "react-bootstrap";
 ```
 Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/gaearon/85d8c067f6af1e56277c82d19fd4da7b/raw/6158dd991b67284e9fc8d70b9d973efe87659d72/App.js) redone using React Bootstrap.
@@ -741,7 +700,7 @@ a `.env` file. Both of these ways are described in the next few sections.
 Having access to the `NODE_ENV` is also useful for performing actions conditionally:
 ```js
-if (process.env.NODE_ENV !== 'production') {
+if (process.env.NODE_ENV !== "production") {
  analytics.disable();
 }
 ```
@@ -792,28 +751,11 @@ To define permanent environment variables, create a file called `.env` in the ro
 REACT_APP_SECRET_CODE=abcdef
 ```
 `.env` files **should be** checked into source control (with the exclusion of `.env*.local`).
 What other `.env` files are can be used?
 >Note: this feature is available with `react-scripts@1.0.0` and higher.
 * `.env` - Default
 * `.env.development`, `.env.test`, `.env.production` - Environment-specific settings.
 * `.env.local` - Local overrides. This file is loaded for all environments except test.
 * `.env.development.local`, `.env.test.local`, `.env.production.local` - Local overrides of environment-specific settings.
 File priority, from left to right:
 * npm test - `.env.test.local`, `env.test`, `.env.local`, `.env`
 * npm run build - `.env.production.local`, `env.production`, `.env.local`, `.env`
 * npm start - `.env.development.local`, `env.development`, `.env.local`, `.env`
 These variables will act as the defaults if the machine does not explicitly set them.<br>
 Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.
 > Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
-these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).
+> these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).
 ## Can I Use Decorators?
@@ -838,6 +780,7 @@ These tutorials will help you to integrate your app with an API backend running
 using `fetch()` to access it.
 ### Node
 Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/).
 You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo).
@@ -880,68 +823,9 @@ Keep in mind that `proxy` only has effect in development (with `npm start`), and
 The `proxy` option supports HTTP, HTTPS and WebSocket connections.<br>
 If the `proxy` option is **not** flexible enough for you, alternatively you can:
 * [Configure the proxy yourself](#configuring-the-proxy-manually)
 * Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
 * Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.
 ### Configuring the Proxy Manually
 >Note: this feature is available with `react-scripts@1.0.0` and higher.
 If the `proxy` option is **not** flexible enough for you, you can specify an object in the following form (in `package.json`).<br>
 You may also specify any configuration value [`http-proxy-middleware`](https://github.com/chimurai/http-proxy-middleware#options) or [`http-proxy`](https://github.com/nodejitsu/node-http-proxy#options) supports.
 ```js
 {
  // ...
  "proxy": {
    "/api": {
      "target": "<url>",
      "ws": true
      // ...
    }
  }
  // ...
 }
 ```
 All requests matching this path will be proxies, no exceptions. This includes requests for `text/html`, which the standard `proxy` option does not proxy.
 If you need to specify multiple proxies, you may do so by specifying additional entries.
 You may also narrow down matches using `*` and/or `**`, to match the path exactly or any subpath.
 ```js
 {
  // ...
  "proxy": {
    // Matches any request starting with /api
    "/api": {
      "target": "<url_1>",
      "ws": true
      // ...
    },
    // Matches any request starting with /foo
    "/foo": {
      "target": "<url_2>",
      "ssl": true,
      "pathRewrite": {
        "^/foo": "/foo/beta"
      }
      // ...
    },
    // Matches /bar/abc.html but not /bar/sub/def.html
    "/bar/*.html": {
      "target": "<url_3>",
      // ...
    },
    // Matches /bar/abc.html and /bar/sub/def.html
    "/baz/**/*.html": {
      "target": "<url_4>"
      // ...
    }
  }
  // ...
 }
 ```
 ## Using HTTPS in Development
 > Note: this feature is available with `react-scripts@0.4.0` and higher.
@@ -1009,8 +893,7 @@ Then, on the server, you can replace `__SERVER_DATA__` with a JSON of real data
 ## Running Tests
->Note: this feature is available with `react-scripts@0.3.0` and higher.<br>
+> Note: this feature is available with `react-scripts@0.3.0` and higher.<br> >[Read the migration guide to learn how to enable it in older projects!](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030)
 >[Read the migration guide to learn how to enable it in older projects!](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030)
 Create React App uses [Jest](https://facebook.github.io/jest/) as its test runner. To prepare for this integration, we did a [major revamp](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try.
@@ -1055,9 +938,9 @@ To create tests, add `it()` (or `test()`) blocks with the name of the test and i
 Jest provides a built-in `expect()` global function for making assertions. A basic test could look like this:
 ```js
-import sum from './sum';
+import sum from "./sum";
-it('sums numbers', () => {
+it("sums numbers", () => {
  expect(sum(1, 2)).toEqual(3);
  expect(sum(2, 2)).toEqual(4);
 });
@@ -1073,12 +956,12 @@ There is a broad spectrum of component testing techniques. They range from a “
 Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating simple smoke tests for your components:
 ```js
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import App from './App';
+import App from "./App";
-it('renders without crashing', () => {
+it("renders without crashing", () => {
-  const div = document.createElement('div');
+  const div = document.createElement("div");
  ReactDOM.render(<App />, div);
 });
 ```
@@ -1090,15 +973,15 @@ When you encounter bugs caused by changing components, you will gain a deeper in
 If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). You can write a smoke test with it too:
 ```sh
-npm install --save-dev enzyme react-test-renderer
+npm install --save-dev enzyme react-addons-test-utils
 ```
 ```js
-import React from 'react';
+import React from "react";
-import { shallow } from 'enzyme';
+import { shallow } from "enzyme";
-import App from './App';
+import App from "./App";
-it('renders without crashing', () => {
+it("renders without crashing", () => {
  shallow(<App />);
 });
 ```
@@ -1110,11 +993,11 @@ You can read the [Enzyme documentation](http://airbnb.io/enzyme/) for more testi
 Here is an example from Enzyme documentation that asserts specific output, rewritten to use Jest matchers:
 ```js
-import React from 'react';
+import React from "react";
-import { shallow } from 'enzyme';
+import { shallow } from "enzyme";
-import App from './App';
+import App from "./App";
-it('renders welcome message', () => {
+it("renders welcome message", () => {
  const wrapper = shallow(<App />);
  const welcome = <h2>Welcome to React</h2>;
  // expect(wrapper.contains(welcome)).to.equal(true);
@@ -1128,21 +1011,20 @@ Nevertheless you can use a third-party assertion library like [Chai](http://chai
 Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written simpler with jest-enzyme.
 ```js
-expect(wrapper).toContainReact(welcome)
+expect(wrapper).toContainReact(welcome);
 ```
-To setup jest-enzyme with Create React App, follow the instructions for [initializing your test environment](#initializing-test-environment) to import `jest-enzyme`. **Note that currently only version 2.x is compatible with Create React App.**
+To setup jest-enzyme with Create React App, follow the instructions for [initializing your test environment](#initializing-test-environment) to import `jest-enzyme`.
 ```sh
-npm install --save-dev jest-enzyme@2.x
+npm install --save-dev jest-enzyme
 ```
 ```js
 // src/setupTests.js
-import 'jest-enzyme';
+import "jest-enzyme";
 ```
 ### Using Third Party Assertion Libraries
 We recommend that you use `expect()` for assertions and `jest.fn()` for spies. If you are having issues with them please [file those against Jest](https://github.com/facebook/jest/issues/new), and we’ll fix them. We intend to keep making them better for React, supporting, for example, [pretty-printing React elements as JSX](https://github.com/facebook/jest/pull/1566).
@@ -1150,8 +1032,8 @@ We recommend that you use `expect()` for assertions and `jest.fn()` for spies. I
 However, if you are used to other libraries, such as [Chai](http://chaijs.com/) and [Sinon](http://sinonjs.org/), or if you have existing code using them that you’d like to port over, you can import them normally like this:
 ```js
-import sinon from 'sinon';
+import sinon from "sinon";
-import { expect } from 'chai';
+import { expect } from "chai";
 ```
 and then use them in your tests like you normally do.
@@ -1165,13 +1047,14 @@ If your app uses a browser API that you need to mock in your tests or if you jus
 For example:
 #### `src/setupTests.js`
 ```js
 const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn()
 };
-global.localStorage = localStorageMock
+global.localStorage = localStorageMock;
 ```
 ### Focusing and Excluding Tests
@@ -1197,10 +1080,12 @@ When creating a build of your application with `npm run build` linter warnings a
 Popular CI servers already set the environment variable `CI` by default but you can do this yourself too:
 ### On CI servers
 #### Travis CI
 1.  Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis. You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
 1.  Add a `.travis.yml` file to your git repository.
 ```
 language: node_js
 node_js:
@@ -1213,10 +1098,12 @@ script:
  - npm test
  - npm run build
 ```
 1.  Trigger your first build with a git push.
 1.  [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed.
 ### On your own environment
 ##### Windows (cmd.exe)
 ```cmd
@@ -1319,108 +1206,12 @@ Learn more about React Storybook:
 * Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook)
 * [GitHub Repo](https://github.com/kadirahq/react-storybook)
-* [Documentation](https://storybooks.js.org/docs/react-storybook/basics/introduction/)
+* [Documentation](https://getstorybook.io/docs)
 * [Snapshot Testing](https://github.com/kadirahq/storyshots) with React Storybook
 ## Making a Progressive Web App
-By default, the production build is a fully functional, offline-first
+You can turn your React app into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) by following the steps in [this repository](https://github.com/jeffposnick/create-react-pwa).
 [Progressive Web App](https://developers.google.com/web/progressive-web-apps/).
 Progressive Web Apps are faster and more reliable than traditional web pages, and provide an engaging mobile experience:
 * All static site assets are cached so that your page loads fast on subsequent visits, regardless of network connectivity (such as 2G or 3G). Updates are downloaded in the background.
 * Your app will work regardless of network state, even if offline. This means your users will be able to use your app at 10,000 feet and on the Subway.
 * On mobile devices, your app can be added directly to the user's home screen, app icon and all. You can also re-engage users using web **push notifications**. This eliminates the need for the app store.
 The [`sw-precache-webpack-plugin`](https://github.com/goldhand/sw-precache-webpack-plugin)
 is integrated into production configuration,
 and it will take care of generating a service worker file that will automatically
 precache all of your local assets and keep them up to date as you deploy updates.
 The service worker will use a [cache-first strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network)
 for handling all requests for local assets, including the initial HTML, ensuring
 that you web app is reliably fast, even on a slow or unreliable network.
 If you would prefer not to enable service workers prior to your initial
 production deployment, then remove the call to `serviceWorkerRegistration.register()`
 from [`src/index.js`](src/index.js).
 If you had previously enabled service workers in your production deployment and
 have decided that you would like to disable them for all your existing users,
 you can swap out the call to `serviceWorkerRegistration.register()` in
 [`src/index.js`](src/index.js) with a call to `serviceWorkerRegistration.unregister()`.
 After the user visits a page that has `serviceWorkerRegistration.unregister()`,
 the service worker will be uninstalled.
 ### Offline-First Considerations
 1. Service workers [require HTTPS](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#you_need_https),
 although to facilitate local testing, that policy
 [does not apply to `localhost`](http://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385).
 If your production web server does not support HTTPS, then the service worker
 registration will fail, but the rest of your web app will remain functional.
 1. Service workers are [not currently supported](https://jakearchibald.github.io/isserviceworkerready/)
 in all web browsers. Service worker registration [won't be attempted](src/service-worker-registration.js)
 on browsers that lack support.
 1. The service worker is only enabled in the [production environment](#deployment),
 e.g. the output of `npm run build`. It's recommended that you do not enable an
 offline-first service worker in a development environment, as it can lead to
 frustration when previously cached assets are used and do not include the latest
 changes you've made locally.
 1. If you *need* to test your offline-first service worker locally, build
 the application (using `npm run build`) and run a simple http server from your
 build directory. After running the build script, `create-react-app` will give
 instructions for one way to test your production build locally and the [deployment instructions](#deployment) have
 instructions for using other methods. *Be sure to always use an
 incognito window to avoid complications with your browser cache.*
 1. If possible,configure your production environment to serve the generated
 `service-worker.js` [with HTTP caching disabled](http://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours).
 If that's not possible—[GitHub Pages](#github-pages), for instance, does not
 allow you to change the default 10 minute HTTP cache lifetime—then be aware
 that if you visit your production site, and then revisit again before
 `service-worker.js` has expired from your HTTP cache, you'll continue to get
 the previously cached assets from the service worker. If you have an immediate
 need to view your updated production deployment, performing a shift-refresh
 will temporarily disable the service worker and retrieve all assets from the
 network.
 1. Users aren't always familiar with offline-first web apps. It can be useful to
 [let the user know](https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux#inform_the_user_when_the_app_is_ready_for_offline_consumption)
 when the service worker has finished populating your caches (showing a "This web
 app works offline!" message) and also let them know when the service worker has
 fetched the latest updates that will be available the next time they load the
 page (showing a "New content is available; please refresh." message). Showing
 this messages is currently left as an exercise to the developer, but as a
 starting point, you can make use of the logic included in [`src/service-worker-registration.js`](src/service-worker-registration.js), which
 demonstrates which service worker lifecycle events to listen for to detect each
 scenario, and which as a default, just logs appropriate messages to the
 JavaScript console.
 1. By default, the generated service worker file will not intercept or cache any
 cross-origin traffic, like HTTP [API requests](#integrating-with-an-api-backend),
 images, or embeds loaded from a different domain. If you would like to use a
 runtime caching strategy for those requests, you can [`eject`](#npm-run-eject)
 and then configure the
 [`runtimeCaching`](https://github.com/GoogleChrome/sw-precache#runtimecaching-arrayobject)
 option in the `SWPrecacheWebpackPlugin` section of
 [`webpack.config.prod.js`](../config/webpack.config.prod.js).
 ### Progressive Web App Metadata
 The default configuration includes a web app manifest located at
 [`public/manifest.json`](public/manifest.json), that you can customize with
 details specific to your web application.
 When a user adds a web app to their homescreen using Chrome or Firefox on
 Android, the metadata in [`manifest.json`](public/manifest.json) determines what
 icons, names, and branding colors to use when the web app is displayed.
 [The Web App Manifest guide](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/)
 provides more context about what each field means, and how your customizations
 will affect your users' experience.
 ## Deployment
@@ -1450,14 +1241,14 @@ You don’t necessarily need a static server in order to run a Create React App
 Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/):
 ```javascript
-const express = require('express');
+const express = require("express");
-const path = require('path');
+const path = require("path");
 const app = express();
-app.use(express.static(path.join(__dirname, 'build')));
+app.use(express.static("./build"));
-app.get('/', function (req, res) {
+app.get("/", function(req, res) {
-  res.sendFile(path.join(__dirname, 'build', 'index.html'));
+  res.sendFile(path.join(__dirname, "./build", "index.html"));
 });
 app.listen(9000);
@@ -1476,11 +1267,11 @@ If you use routers that use the HTML5 [`pushState` history API](https://develope
 This is because when there is a fresh page load for a `/todos/42`, the server looks for the file `build/todos/42` and does not find it. The server needs to be configured to respond to a request to `/todos/42` by serving `index.html`. For example, we can amend our Express example above to serve `index.html` for any unknown paths:
 ```diff
- app.use(express.static(path.join(__dirname, 'build')));
+ app.use(express.static('./build'));
 -app.get('/', function (req, res) {
 +app.get('/*', function (req, res) {
-   res.sendFile(path.join(__dirname, 'build', 'index.html'));
+   res.sendFile(path.join(__dirname, './build', 'index.html'));
 });
 ```
@@ -1497,15 +1288,6 @@ It will get copied to the `build` folder when you run `npm run build`.
 Now requests to `/todos/42` will be handled correctly both in development and in production.
 On a production build, and in a browser that supports [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers),
 the service worker will automatically handle all navigation requests, like for
 `/todos/42`, by serving the cached copy of your `index.html`. This
 service worker navigation routing can be configured or disabled by
 [`eject`ing](#npm-run-eject) and then modifying the
 [`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string)
 and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp)
 options of the `SWPreachePlugin` [configuration](../config/webpack.config.prod.js).
 ### Building for Relative Paths
 By default, Create React App produces a build assuming your app is hosted at the server root.<br>
@@ -1701,7 +1483,7 @@ In this case, ensure that the file is there with the proper lettercase and that
 See the [Modulus blog post](http://blog.modulus.io/deploying-react-apps-on-modulus) on how to deploy your react app to Modulus.
-### Netlify
+## Netlify
 **To do a manual deploy to Netlify’s CDN:**
@@ -1741,7 +1523,7 @@ When you build the project, Create React App will place the `public` folder cont
 3.  Add this line to `scripts` in `package.json`:
    ```
-    "now-start": "serve -s build/",
+    "now-start": "serve build/",
    ```
 4.  Run `now` from your project directory. You will see a **now.sh** URL in your output like this:
@@ -1760,12 +1542,21 @@ See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-t
 ### Surge
-Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account.
+Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account. You just need to specify the _build_ folder and your custom domain, and you are done.
 When asked about the project path, make sure to specify the `build` folder, for example:
 ```sh
              email: email@domain.com
           password: ********
       project path: /path/to/project/build
               size: 7 files, 1.8 MB
             domain: create-react-app.surge.sh
             upload: [====================] 100%, eta: 0.0s
   propagate on CDN: [====================] 100%
               plan: Free
              users: email@domain.com
         IP Address: X.X.X.X
    Success! Project is published and running at create-react-app.surge.sh
 ```
 Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).
@@ -1774,14 +1565,14 @@ Note that in order to support routers that use HTML5 `pushState` API, you may wa
 You can adjust various development and production settings by setting environment variables in your shell or with [.env](#adding-development-environment-variables-in-env).
-Variable | Development | Production | Usage
+| Variable   |      Development       |     Production     | Usage                                                                                                                                                                                                                                                                                                                                                                                                                      |
-:--- | :---: | :---: | :---
+| :--------- | :--------------------: | :----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-BROWSER | :white_check_mark: | :x: | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension.
+| BROWSER    |   :white_check_mark:   |        :x:         | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely.                                                                                                                                                                                         |
-HOST | :white_check_mark: | :x: | By default, the development web server binds to `localhost`. You may use this variable to specify a different host.
+| HOST       |   :white_check_mark:   |        :x:         | By default, the development web server binds to `localhost`. You may use this variable to specify a different host.                                                                                                                                                                                                                                                                                                        |
-PORT | :white_check_mark: | :x: | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port.
+| PORT       |   :white_check_mark:   |        :x:         | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port.                                                                                                                                                                                                                                        |
-HTTPS | :white_check_mark: | :x: | When set to `true`, Create React App will run the development server in `https` mode.
+| HTTPS      |   :white_check_mark:   |        :x:         | When set to `true`, Create React App will run the development server in `https` mode.                                                                                                                                                                                                                                                                                                                                      |
-PUBLIC_URL | :x: | :white_check_mark: | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.
+| PUBLIC_URL |          :x:           | :white_check_mark: | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. |
-CI | :large_orange_diamond: | :white_check_mark: | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.
+| CI         | :large_orange_diamond: | :white_check_mark: | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.                                                                                                                                                                                                                                                              |
 ## Troubleshooting
@@ -1792,7 +1583,7 @@ If this doesn’t happen, try one of the following workarounds:
 * If your project is in a Dropbox folder, try moving it out.
 * If the watcher doesn’t see a file called `index.js` and you’re referencing it by the folder name, you [need to restart the watcher](https://github.com/facebookincubator/create-react-app/issues/1164) due to a Webpack bug.
-* Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in [“Adjusting Your Text Editor”](https://webpack.js.org/guides/development/#adjusting-your-text-editor).
+* Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in [“Working with editors supporting safe write”](https://webpack.github.io/docs/webpack-dev-server.html#working-with-editors-ides-supporting-safe-write).
 * If your project path contains parentheses, try moving the project to a path without them. This is caused by a [Webpack watcher bug](https://github.com/webpack/watchpack/issues/42).
 * On Linux and macOS, you might need to [tweak system settings](https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers) to allow more watchers.
 * If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an `.env` file in your project directory if it doesn’t exist, and add `CHOKIDAR_USEPOLLING=true` to it. This ensures that the next time you run `npm start`, the watcher uses the polling mode, as necessary inside a VM.
@@ -1821,7 +1612,7 @@ You can find [other installation methods](https://facebook.github.io/watchman/do
 If this still doesn’t help, try running `launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist`.
-There are also reports that *uninstalling* Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
+There are also reports that _uninstalling_ Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
 ### `npm run build` silently fails
@@ -1832,32 +1623,6 @@ It is reported that `npm run build` can fail on machines with no swap space, whi
 This may be a problem with case sensitive filenames.
 Please refer to [this section](#resolving-heroku-deployment-errors).
 ### Moment.js locales are missing
 If you use a [Moment.js](https://momentjs.com/), you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of [all the locales provided by Moment.js](https://momentjs.com/#multiple-locale-support).
 To add a specific Moment.js locale to your bundle, you need to import it explicitly.<br>
 For example:
 ```js
 import moment from 'moment';
 import 'moment/locale/fr';
 ```
 If import multiple locales this way, you can later switch between them by calling `moment.locale()` with the locale name:
 ```js
 import moment from 'moment';
 import 'moment/locale/fr';
 import 'moment/locale/es';
 // ...
 moment.locale('fr');
 ```
 This will only work for locales that have been explicitly imported before.
 ## Something Missing?
 If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md)
@@ -0,0 +1,53 @@
 {
  "name": "new",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "autoprefixer": "^6.7.0",
    "babel-cli": "6.14.0",
    "babel-eslint": "6.1.2",
    "babel-preset-es2015": "6.14.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-stage-2": "6.13.0",
    "eslint": "^4.1.1",
    "eslint-config-standard": "^10.2.1",
    "eslint-plugin-class-property": "^1.0.6",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-node": "^5.2.1",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-react": "^7.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "html-element-attributes": "^1.3.0",
    "match-sorter": "^1.8.0",
    "npm-run-all": "^3.1.1",
    "onchange": "^3.0.2",
    "postcss-cli": "^2.6.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-json-tree": "^0.10.9",
    "rimraf": "^2.6.1",
    "standard": "^10.0.2",
    "stylus": "^0.54.5"
  },
  "dependencies": {
    "eslint-config-react-tools": "^1.0.10",
    "github-markdown-css": "^2.6.0",
    "marked": "^0.3.6",
    "namor": "^1.0.1",
    "raw-loader": "^0.5.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-json-tree": "^0.10.9",
    "react-script": "^2.0.5",
    "react-scripts": "^0.9.5",
    "react-story": "^0.0.10",
    "shortid": "^2.2.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
 }
@@ -0,0 +1,31 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tag above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React Table - A lightweight, fast and extendable datagrid built for React</title>
  </head>
  <body>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
      To begin the development, run `npm start`.
      To create a production bundle, use `npm run build`.
    -->
  </body>
 </html>
@@ -0,0 +1,120 @@
 /* eslint-disable */
 import React from 'react';
 //
 import ReactStory, { defaultProps } from 'react-story';
 import CodeSandbox from './CodeSandbox.js';
 import './stories/utils/prism.css';
 import '../../react-table.css';
 import Readme from './stories/Readme.js';
 import HOCReadme from './stories/HOCReadme.js';
 // import Test from './stories/test.js'
 // import Tester from './examples/expander';
 const stories = [
  { name: 'Readme', component: Readme },
  { name: 'HOC Readme', component: HOCReadme },
  // { name: 'Tester', component: Test },
  { name: 'Simple Table', component: CodeSandbox('X6npLXPRW') },
  {
    name: 'Cell Renderers & Custom Components',
    component: CodeSandbox('OyRL04Z4Y')
  },
  { name: 'Default Sorting', component: CodeSandbox('gLwmmjzA3') },
  {
    name: 'Custom Sorting',
    component: CodeSandbox('VGx67J35')
  },
  { name: 'Custom Column Widths', component: CodeSandbox('o2OORXNXN') },
  { name: 'Custom Component Props', component: CodeSandbox('nZW3L0wp4') },
  { name: 'Server-side Data', component: CodeSandbox('wjrn8wy3R') },
  { name: 'Sub Components', component: CodeSandbox('n2gqAxl7') },
  { name: 'Pivoting & Aggregation', component: CodeSandbox('oNY9z8xN') },
  {
    name: 'Pivoting & Aggregation w/ Sub Components',
    component: CodeSandbox('p0kEVBgQ')
  },
  {
    name: '100k Rows w/ Pivoting & Sub Components',
    component: CodeSandbox('DRmKj0XyK')
  },
  { name: 'Pivoting Options', component: CodeSandbox('kZKmNBK6r') },
  { name: 'Functional Rendering', component: CodeSandbox('VPZ0Bzv8X') },
  {
    name: 'Custom Expander Position',
    component: CodeSandbox('1jj2XrPEV')
  },
  { name: 'Custom "No Data" Text', component: CodeSandbox('RgRpRDv80') },
  { name: 'Footers', component: CodeSandbox('KOqQXn3p8') },
  { name: 'Custom Filtering', component: CodeSandbox('5Eyxxxyx') },
  { name: 'Controlled Component', component: CodeSandbox('r7XEZRK2') },
  { name: 'Editable Table', component: CodeSandbox('n5r19gzQP') },
  {
    name: 'Fixed Header w/ Vertical Scroll',
    component: CodeSandbox('7LY0gjA8O')
  },
  {
    name: 'Multiple Pagers (Top and Bottom)',
    component: CodeSandbox('VEZ8OgvX')
  },
  { name: 'Tree Table (HOC)', component: CodeSandbox('lxmr4wynzq') },
  { name: 'Select Table (HOC)', component: CodeSandbox('7yq5ylw09j') },
  { name: 'Select Tree Table (HOC)', component: CodeSandbox('2p7jp4klwp') },
  { name: 'Foldable Table (HOC)', component: CodeSandbox('8pkrj5yorl') },
  { name: 'Advanced Expand Table (HOC)', component: CodeSandbox('y2m39jz8v1') }
 ];
 export default class App extends React.Component {
  render() {
    return (
      <ReactStory
        style={{
          display: 'block',
          width: '100%',
          height: '100%'
        }}
        pathPrefix="story/"
        StoryWrapper={props => (
          <defaultProps.StoryWrapper
            css={{
              padding: 0,
              display: 'flex',
              flexDirection: 'column'
            }}
          >
            <a
              href="//github.com/react-tools/react-table"
              style={{
                display: 'block',
                textAlign: 'center',
                borderBottom: 'solid 3px #cccccc'
              }}
            >
              <img
                src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
                alt="React Table Logo"
                style={{
                  width: '150px',
                  padding: '10px'
                }}
              />
            </a>
            <div
              {...props}
              style={{
                flex: '1 0 auto',
                position: 'relative'
              }}
            />
          </defaultProps.StoryWrapper>
        )}
        stories={stories}
      />
    );
  }
 }
@@ -0,0 +1,21 @@
 import React from "react";
 export default id => () => {
  return (
    <iframe
      src={`https://codesandbox.io/embed/${id}?autoresize=1&hidenavigation=1&view=${
        global.innerWidth < 1000 ? "preview" : "split"
      }`}
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        width: `100%`,
        height: `100%`,
        border: 0,
        overflow: `hidden`
      }}
      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
    />
  );
 };
@@ -0,0 +1,116 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { makeData, Logo, Tips } from './Utils';
 import { advancedExpandTableHOC } from '../../../../lib/hoc/advancedExpandTable';
 // Import React Table
 import ReactTable from 'react-table';
 import 'react-table/react-table.css';
 const columns = [
  {
    Header: 'First Name',
    accessor: 'firstName',
    Cell: props => {
      const {
        // react table props
        columnProps: { rest: { showRowSubComponent } },
        nestingPath
      } = props;
      return (
        <div>
          <button
            onClick={e => showRowSubComponent({ nestingPath: nestingPath }, e)}
          >
            SHOW SUBCOMPONENT {props.value}
          </button>
        </div>
      );
    }
  },
  {
    Header: 'Last Name',
    id: 'lastName',
    accessor: d => d.lastName
  },
  {
    Header: 'Info',
    columns: [
      {
        Header: 'Age',
        accessor: 'age',
        Cell: props => {
          const {
            // react table props
            columnProps: { rest: { toggleRowSubComponent } },
            nestingPath
          } = props;
          return (
            <div>
              <button
                onClick={e =>
                  toggleRowSubComponent({ nestingPath: nestingPath }, e)
                }
              >
                TOGGLE SUBCOMPONENT {props.value}
              </button>
            </div>
          );
        }
      },
      {
        Header: 'Status',
        accessor: 'status'
      }
    ]
  },
  {
    Header: 'Stats',
    columns: [
      {
        Header: 'Visits',
        accessor: 'visits'
      }
    ]
  }
 ];
 const AdvancedExpandReactTable = advancedExpandTableHOC(ReactTable);
 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: makeData()
    };
  }
  render() {
    const { data } = this.state;
    return (
      <div>
        <AdvancedExpandReactTable
          data={data}
          columns={columns}
          defaultPageSize={10}
          className='-striped -highlight'
          SubComponent={({ row, nestingPath, toggleRowSubComponent }) => {
            return (
              <div style={{ padding: '20px' }}>
                <button
                  onClick={e => toggleRowSubComponent({ nestingPath }, e)}
                >
                  CLOSE SUBCOMPONENT {row.firstName} {row.lastName}
                </button>
              </div>
            );
          }}
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
 }
 render(<App />, document.getElementById('root'));
@@ -0,0 +1,94 @@
 import React from "react";
 export default Component => {
  const wrapper = class RTCheckboxTable extends React.Component {
    // we only need a Component so we can get the 'ref' - pure components can't get a 'ref'
    rowSelector = row => {
      if (!row || !row.hasOwnProperty(this.props.keyField)) return null;
      const checked = this.props.isSelected(row[this.props.keyField]);
      return (
        <input
          type="checkbox"
          checked={checked}
          onClick={e => {
            const { shiftKey } = e;
            e.stopPropagation();
            this.props.toggleSelection(row[this.props.keyField], shiftKey, row);
          }}
          onChange={() => {}}
          value=""
        />
      );
    };
    headSelector = row => {
      const checked = this.props.selectAll;
      return (
        <input
          type="checkbox"
          checked={checked}
          onClick={e => {
            e.stopPropagation();
            this.props.toggleAll();
          }}
          onChange={() => {}}
          value=""
        />
      );
    };
    // this is so we can expose the underlying ReactTable to get at the sortedData for selectAll
    getWrappedInstance = () => this.wrappedInstance;
    render() {
      const {
        columns: originalCols,
        isSelected,
        toggleSelection,
        toggleAll,
        keyField,
        selectAll,
        ...rest
      } = this.props;
      const { rowSelector, headSelector } = this;
      const select = {
        id: "_selector",
        accessor: () => "x", // this value is not important
        Header: headSelector,
        Cell: ci => {
          return rowSelector(ci.original);
        },
        width: 30,
        filterable: false,
        sortable: false,
        resizable: false,
        style: { textAlign: "center" }
      };
      const columns = [select, ...originalCols];
      const extra = {
        columns
      };
      return (
        <Component {...rest} {...extra} ref={r => (this.wrappedInstance = r)} />
      );
    }
  };
  wrapper.displayName = "RTCheckboxTable";
  wrapper.defaultProps = {
    keyField: "_id",
    isSelected: key => {
      console.log("No isSelected handler provided:", { key });
    },
    selectAll: false,
    toggleSelection: (key, shift, row) => {
      console.log("No toggleSelection handler provided:", { key, shift, row });
    },
    toggleAll: () => {
      console.log("No toggleAll handler provided.");
    }
  };
  return wrapper;
 };
@@ -0,0 +1,148 @@
 import React from "react";
 import shortid from "shortid";
 import ReactTable from "../../../../lib/index";
 import "../../../../react-table.css";
 import checkboxTableHOC from "./checkboxHOC";
 const CheckboxTable = checkboxTableHOC(ReactTable);
 async function getData() {
  const result = await (await fetch("/au_500_tree.json")).json();
  // we are adding a unique ID to the data for tracking the selected records
  return result.map(item => {
    const _id = shortid.generate();
    return {
      _id,
      ...item
    };
  });
 }
 function getColumns(data) {
  const columns = [];
  const sample = data[0];
  for (let key in sample) {
    if (key === "_id") continue;
    columns.push({
      accessor: key,
      Header: key
    });
  }
  return columns;
 }
 export class ComponentTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      columns: null,
      selection: [],
      selectAll: false
    };
  }
  componentDidMount() {
    getData().then(data => {
      const columns = getColumns(data);
      this.setState({ data, columns });
    });
  }
  toggleSelection = (key, shift, row) => {
    /*
      Implementation of how to manage the selection state is up to the developer.
      This implementation uses an array stored in the component state.
      Other implementations could use object keys, a Javascript Set, or Redux... etc.
    */
    // start off with the existing state
    let selection = [...this.state.selection];
    const keyIndex = selection.indexOf(key);
    // check to see if the key exists
    if (keyIndex >= 0) {
      // it does exist so we will remove it using destructing
      selection = [
        ...selection.slice(0, keyIndex),
        ...selection.slice(keyIndex + 1)
      ];
    } else {
      // it does not exist so add it
      selection.push(key);
    }
    // update the state
    this.setState({ selection });
  };
  toggleAll = () => {
    /*
      'toggleAll' is a tricky concept with any filterable table
      do you just select ALL the records that are in your data?
      OR
      do you only select ALL the records that are in the current filtered data?
      The latter makes more sense because 'selection' is a visual thing for the user.
      This is especially true if you are going to implement a set of external functions
      that act on the selected information (you would not want to DELETE the wrong thing!).
      So, to that end, access to the internals of ReactTable are required to get what is
      currently visible in the table (either on the current page or any other page).
      The HOC provides a method call 'getWrappedInstance' to get a ref to the wrapped
      ReactTable and then get the internal state and the 'sortedData'. 
      That can then be iterrated to get all the currently visible records and set
      the selection state.
    */
    const selectAll = this.state.selectAll ? false : true;
    const selection = [];
    if (selectAll) {
      // we need to get at the internals of ReactTable
      const wrappedInstance = this.checkboxTable.getWrappedInstance();
      // the 'sortedData' property contains the currently accessible records based on the filter and sort
      const currentRecords = wrappedInstance.getResolvedState().sortedData;
      // we just push all the IDs onto the selection array
      currentRecords.forEach(item => {
        selection.push(item._original._id);
      });
    }
    this.setState({ selectAll, selection });
  };
  isSelected = key => {
    /*
      Instead of passing our external selection state we provide an 'isSelected'
      callback and detect the selection state ourselves. This allows any implementation
      for selection (either an array, object keys, or even a Javascript Set object).
    */
    return this.state.selection.includes(key);
  };
  logSelection = () => {
    console.log("selection:", this.state.selection);
  };
  render() {
    const { toggleSelection, toggleAll, isSelected, logSelection } = this;
    const { data, columns, selectAll } = this.state;
    const extraProps = {
      selectAll,
      isSelected,
      toggleAll,
      toggleSelection
    };
    return (
      <div style={{ padding: "10px" }}>
        <h1>react-table - Checkbox Table</h1>
        <button onClick={logSelection}>Log Selection to Console</button>
        {` (${this.state.selection.length}) selected`}
        {data ? (
          <CheckboxTable
            data={data}
            columns={columns}
            ref={r => (this.checkboxTable = r)}
            className="-striped -highlight"
            {...extraProps}
          />
        ) : null}
      </div>
    );
  }
 }
 // export default treeTableHOC(ComponentTest);
 export default ComponentTest;
@@ -0,0 +1,60 @@
 import React from "react";
 export default class ComponentTest extends React.component {
  render() {
    return <div>Bozo</div>;
  }
 }
 // import ReactTable from '../../../../lib/index'
 // import '../../../../react-table.css'
 //
 // console.log('ReactTable:',ReactTable)
 //
 // const data = [
 //   {one:"1.1",two:"1.2"},
 //   {one:"2.1",two:"2.2"},
 //   {one:"3.1",two:"3.2"},
 //   {one:"4.1",two:"4.2"},
 // ]
 //
 // const columns = [
 //   {accessor:'one', Header: 'One'},
 //   {accessor:'two', Header: 'Two'},
 // ]
 //
 // class ExpanderComponent extends React.Component {
 //   render()
 //   {
 //     return (
 //       <div className={`rt-expander ${this.props.isExpanded ? '-open' : ''}`}>
 //         &bull;
 //       </div>
 //     )
 //   }
 // }
 //
 // class SubComponent extends React.Component {
 //   render()
 //   {
 //     return <div>Nothing</div>
 //   }
 // }
 //
 // export default class ComponentTest extends React.Component {
 //   render()
 //   {
 //     const rtProps = {
 //       data,
 //       columns,
 //       // ExpanderComponent: (props, closeExpanded)=><ExpanderComponent {...props, closeExpanded} />,
 //       // SubComponent: (props)=><SubComponent {...props} />,
 //       // multiSort: false,
 //     }
 //     return (
 //       <ReactTable
 //         {...rtProps}
 //       />
 //     )
 //   }
 // }
@@ -0,0 +1,110 @@
 import React from 'react'
 import ReactTable from '../../../../lib/index'
 import FoldableTableHOC from '../../../../lib/hoc/foldableTable'
 import selectTableHOC from '../../../../lib/hoc/selectTable'
 const FoldableTable = FoldableTableHOC(selectTableHOC(ReactTable))
 export default class FoldableTableCustomState extends React.Component {
    constructor(props, context) {
        super(props, context)
        this.state = { folded: {}, seleted: {}, selectedAll: false }
    }
    getData = () => [{
        id: 1,
        first_name: 'Jeanette',
        'last_name': 'Penddreth',
        email: 'jpenddreth0@census.gov',
        'gender': 'Female',
        ip_address: '26.58.193.2',
    }, {
        'id': 2,
        'first_name': 'Giavani',
        last_name: 'Frediani',
        'email': 'gfrediani1@senate.gov',
        'gender': 'Male',
        'ip_address': '229.179.4.212',
    }, {
        'id': 3,
        first_name: 'Noell',
        last_name: 'Bea',
        'email': 'nbea2@imageshack.us',
        gender: 'Female',
        ip_address: '180.66.162.255',
    }, {
        'id': 4,
        'first_name': 'Willard',
        'last_name': 'Valek',
        email: 'wvalek3@vk.com',
        'gender': 'Male',
        ip_address: '67.76.188.26',
    }];
    toggleSelection = (key, shift, row) => {
        const { selected } = this.state
        let newSelected = Object.assign({}, selected)
        newSelected[key] = !newSelected[key]
        this.setState(p => ({ selected: newSelected }))
    };
    toggleAll = () => {
        const { selectedAll } = this.state
        if (selectedAll) { this.setState(p => { return { selectedAll: false, seleted: {} } }); }
        else {
            const data = this.getData()
            let newSelected = {}
            data.forEach(d => newSelected[d.id] = true)
            this.setState(p => ({ selectedAll: true, seleted: newSelected }))
        }
    }
    isSelected = key => this.state.seleted[key];
    render() {
        return (<FoldableTable
            //SelectTable props
            keyField='id'
            toggleSelection={this.toggleSelection}
            toggleAll={this.toggleAll}
            isSelected={this.isSelected}
            selectAll={this.state.selectedAll}
            selectType='checkbox'
            onFoldChange={newFolded => this.setState(p => { return { folded: newFolded } })}
            folded={this.state.folded}
            data={this.getData()}
            columns={[{
                Header: "Name",
                foldable: true,
                columns: [
                    {
                        Header: "First Name",
                        accessor: "first_name"
                    },
                    {
                        Header: "Last Name",
                        accessor: "last_name"
                    }
                ]
            }, {
                Header: "Info",
                foldable: true,
                columns: [
                    {
                        Header: "Email",
                        accessor: "email"
                    },
                    {
                        Header: "Gender",
                        accessor: "gender"
                    }
                ]
            }]
            }></FoldableTable>)
    }
 }
@@ -0,0 +1,71 @@
 import React from 'react'
 import ReactTable from '../../../../lib/index'
 import FoldableTableHOC from '../../../../lib/hoc/foldableTable'
 const FoldableTable = FoldableTableHOC(ReactTable)
 export default class FoldableTableWithHeader extends React.Component {
    getData = () => [{
        id: 1,
        first_name: 'Jeanette',
        last_name: 'Penddreth',
        'email': 'jpenddreth0@census.gov',
        gender: 'Female',
        'ip_address': '26.58.193.2',
    }, {
        'id': 2,
        first_name: 'Giavani',
        last_name: 'Frediani',
        email: 'gfrediani1@senate.gov',
        gender: 'Male',
        'ip_address': '229.179.4.212',
    }, {
        'id': 3,
        'first_name': 'Noell',
        last_name: 'Bea',
        'email': 'nbea2@imageshack.us',
        'gender': 'Female',
        ip_address: '180.66.162.255',
    }, {
        'id': 4,
        'first_name': 'Willard',
        'last_name': 'Valek',
        email: 'wvalek3@vk.com',
        'gender': 'Male',
        ip_address: '67.76.188.26',
    }];
    render() {
        return (<FoldableTable
            data={this.getData()}
            columns={[{
                Header: "Name",
                foldable: true,
                columns: [
                    {
                        Header: "First Name",
                        accessor: "first_name"
                    },
                    {
                        Header: "Last Name",
                        accessor: "last_name"
                    }
                ]
            }, {
                Header: "Info",
                foldable: true,
                columns: [
                    {
                        Header: "Email",
                        accessor: "email"
                    },
                    {
                        Header: "Gender",
                        accessor: "gender"
                    }
                ]
            }]
            }></FoldableTable>)
    }
 }
@@ -0,0 +1,64 @@
 import React from 'react';
 import ReactTable from '../../../../lib/index';
 import FoldableTableHOC from '../../../../lib/hoc/foldableTable';
 const FoldableTable = FoldableTableHOC(ReactTable);
 export default class FoldableTableWithoutHeader extends React.Component {
    getData = () => [{
        "id": 1,
        "first_name": "Jeanette",
        "last_name": "Penddreth",
        "email": "jpenddreth0@census.gov",
        "gender": "Female",
        "ip_address": "26.58.193.2"
    }, {
        "id": 2,
        "first_name": "Giavani",
        "last_name": "Frediani",
        "email": "gfrediani1@senate.gov",
        "gender": "Male",
        "ip_address": "229.179.4.212"
    }, {
        "id": 3,
        "first_name": "Noell",
        "last_name": "Bea",
        "email": "nbea2@imageshack.us",
        "gender": "Female",
        "ip_address": "180.66.162.255"
    }, {
        "id": 4,
        "first_name": "Willard",
        "last_name": "Valek",
        "email": "wvalek3@vk.com",
        "gender": "Male",
        "ip_address": "67.76.188.26"
    }];
    render() {
        return <FoldableTable
            data={this.getData()}
            columns={[
                {
                    Header: "First Name",
                    accessor: "first_name"
                },
                {
                    Header: "Last Name",
                    accessor: "last_name",
                    foldable: true,
                },
                {
                    Header: "Email",
                    accessor: "email",
                    foldable: true,
                },
                {
                    Header: "Gender",
                    accessor: "gender",
                    foldable: true,
                }
            ]}></FoldableTable>
    }
 }
@@ -0,0 +1,30 @@
 import React from 'react'
 import '../../../../react-table.css'
 import FoldableTableWithHeader from './FoldableTableWithHeader'
 import FoldableTableWithoutHeader from './FoldableTableWithoutHeader'
 import FoldableTableCustomState from './FoldableTableCustomState'
 class FaldableComponentTest extends React.Component {
    render() {
        return (
            <div>
                <p>- Sample With Header Columns</p>
                <br />
                <FoldableTableWithHeader />
                <br /> <br />
                <p>- Sample With Normal Columns</p>
                <br />
                <FoldableTableWithoutHeader />
                <br /> <br />
                <p>- Custom State and selectedTable</p>
                <br />
                <FoldableTableCustomState />
            </div >
        )
    }
 }
 export default FaldableComponentTest
@@ -0,0 +1,13 @@
 /* eslint-disable */
 import TreeTable from './treetable'
 import SelectTable from './selecttable'
 import SelectTreeTable from './selecttreetable'
 import FoldableTable from './foldabletable';
 export {
  TreeTable,
  SelectTable,
  SelectTreeTable,
  FoldableTable
 }
@@ -0,0 +1,173 @@
 import React from "react";
 import shortid from "shortid";
 import ReactTable from "../../../../lib/index";
 import "../../../../react-table.css";
 import selectTableHOC from "../../../../lib/hoc/selectTable";
 const SelectTable = selectTableHOC(ReactTable);
 async function getData() {
  const result = await (await fetch("/au_500_tree.json")).json();
  // we are adding a unique ID to the data for tracking the selected records
  return result.map(item => {
    const _id = shortid.generate();
    return {
      _id,
      ...item
    };
  });
 }
 function getColumns(data) {
  const columns = [];
  const sample = data[0];
  for (let key in sample) {
    if (key === "_id") continue;
    columns.push({
      accessor: key,
      Header: key
    });
  }
  return columns;
 }
 export class ComponentTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      columns: null,
      selection: [],
      selectAll: false,
      selectType: "checkbox"
    };
  }
  componentDidMount() {
    getData().then(data => {
      const columns = getColumns(data);
      this.setState({ data, columns });
    });
  }
  toggleSelection = (key, shift, row) => {
    /*
      Implementation of how to manage the selection state is up to the developer.
      This implementation uses an array stored in the component state.
      Other implementations could use object keys, a Javascript Set, or Redux... etc.
    */
    // start off with the existing state
    if (this.state.selectType === "radio") {
      let selection = [];
      if (selection.indexOf(key) < 0) selection.push(key);
      this.setState({ selection });
    } else {
      let selection = [...this.state.selection];
      const keyIndex = selection.indexOf(key);
      // check to see if the key exists
      if (keyIndex >= 0) {
        // it does exist so we will remove it using destructing
        selection = [
          ...selection.slice(0, keyIndex),
          ...selection.slice(keyIndex + 1)
        ];
      } else {
        // it does not exist so add it
        selection.push(key);
      }
      // update the state
      this.setState({ selection });
    }
  };
  toggleAll = () => {
    /*
      'toggleAll' is a tricky concept with any filterable table
      do you just select ALL the records that are in your data?
      OR
      do you only select ALL the records that are in the current filtered data?
      The latter makes more sense because 'selection' is a visual thing for the user.
      This is especially true if you are going to implement a set of external functions
      that act on the selected information (you would not want to DELETE the wrong thing!).
      So, to that end, access to the internals of ReactTable are required to get what is
      currently visible in the table (either on the current page or any other page).
      The HOC provides a method call 'getWrappedInstance' to get a ref to the wrapped
      ReactTable and then get the internal state and the 'sortedData'. 
      That can then be iterrated to get all the currently visible records and set
      the selection state.
    */
    const selectAll = this.state.selectAll ? false : true;
    const selection = [];
    if (selectAll) {
      // we need to get at the internals of ReactTable
      const wrappedInstance = this.selectTable.getWrappedInstance();
      // the 'sortedData' property contains the currently accessible records based on the filter and sort
      const currentRecords = wrappedInstance.getResolvedState().sortedData;
      // we just push all the IDs onto the selection array
      currentRecords.forEach(item => {
        if (item._original) {
          selection.push(item._original._id);
        }
      });
    }
    this.setState({ selectAll, selection });
  };
  isSelected = key => {
    /*
      Instead of passing our external selection state we provide an 'isSelected'
      callback and detect the selection state ourselves. This allows any implementation
      for selection (either an array, object keys, or even a Javascript Set object).
    */
    return this.state.selection.includes(key);
  };
  logSelection = () => {
    console.log("selection:", this.state.selection);
  };
  toggleType = () => {
    this.setState({
      selectType: this.state.selectType === "radio" ? "checkbox" : "radio",
      selection: [],
      selectAll: false
    });
  };
  render() {
    const {
      toggleSelection,
      toggleAll,
      isSelected,
      logSelection,
      toggleType
    } = this;
    const { data, columns, selectAll, selectType } = this.state;
    const extraProps = {
      selectAll,
      isSelected,
      toggleAll,
      toggleSelection,
      selectType
    };
    return (
      <div style={{ padding: "10px" }}>
        <h1>react-table - Select Table</h1>
        <button onClick={toggleType}>
          Select Type: <strong>{selectType}</strong>
        </button>
        <button onClick={logSelection}>Log Selection to Console</button>
        {` (${this.state.selection.length}) selected`}
        {data ? (
          <SelectTable
            data={data}
            columns={columns}
            ref={r => (this.selectTable = r)}
            className="-striped -highlight"
            {...extraProps}
          />
        ) : null}
      </div>
    );
  }
 }
 export default ComponentTest;
@@ -0,0 +1,238 @@
 import React from "react";
 import shortid from "shortid";
 import ReactTable from "../../../../lib/index";
 import "../../../../react-table.css";
 import selectTableHOC from "../../../../lib/hoc/selectTable";
 import treeTableHOC from "../../../../lib/hoc/treeTable";
 const SelectTreeTable = selectTableHOC(treeTableHOC(ReactTable));
 async function getData() {
  const result = await (await fetch("/au_500_tree.json")).json();
  // we are adding a unique ID to the data for tracking the selected records
  return result.map(item => {
    const _id = shortid.generate();
    return {
      _id,
      ...item
    };
  });
 }
 function getColumns(data) {
  const columns = [];
  const sample = data[0];
  for (let key in sample) {
    if (key === "_id") continue;
    columns.push({
      accessor: key,
      Header: key
    });
  }
  return columns;
 }
 function getNodes(data, node = []) {
  data.forEach(item => {
    if (item.hasOwnProperty("_subRows") && item._subRows) {
      node = getNodes(item._subRows, node);
    } else {
      node.push(item._original);
    }
  });
  return node;
 }
 export class ComponentTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      columns: null,
      selection: [],
      selectAll: false,
      selectType: "checkbox"
    };
  }
  componentDidMount() {
    getData().then(data => {
      const columns = getColumns(data);
      const pivotBy = ["state", "post"];
      this.setState({ data, columns, pivotBy });
    });
  }
  toggleSelection = (key, shift, row) => {
    /*
      Implementation of how to manage the selection state is up to the developer.
      This implementation uses an array stored in the component state.
      Other implementations could use object keys, a Javascript Set, or Redux... etc.
    */
    // start off with the existing state
    if (this.state.selectType === "radio") {
      let selection = [];
      if (selection.indexOf(key) < 0) selection.push(key);
      this.setState({ selection });
    } else {
      let selection = [...this.state.selection];
      const keyIndex = selection.indexOf(key);
      // check to see if the key exists
      if (keyIndex >= 0) {
        // it does exist so we will remove it using destructing
        selection = [
          ...selection.slice(0, keyIndex),
          ...selection.slice(keyIndex + 1)
        ];
      } else {
        // it does not exist so add it
        selection.push(key);
      }
      // update the state
      this.setState({ selection });
    }
  };
  toggleAll = () => {
    /*
      'toggleAll' is a tricky concept with any filterable table
      do you just select ALL the records that are in your data?
      OR
      do you only select ALL the records that are in the current filtered data?
      The latter makes more sense because 'selection' is a visual thing for the user.
      This is especially true if you are going to implement a set of external functions
      that act on the selected information (you would not want to DELETE the wrong thing!).
      So, to that end, access to the internals of ReactTable are required to get what is
      currently visible in the table (either on the current page or any other page).
      The HOC provides a method call 'getWrappedInstance' to get a ref to the wrapped
      ReactTable and then get the internal state and the 'sortedData'. 
      That can then be iterrated to get all the currently visible records and set
      the selection state.
    */
    const selectAll = this.state.selectAll ? false : true;
    const selection = [];
    if (selectAll) {
      // we need to get at the internals of ReactTable
      const wrappedInstance = this.selectTable.getWrappedInstance();
      // the 'sortedData' property contains the currently accessible records based on the filter and sort
      const currentRecords = wrappedInstance.getResolvedState().sortedData;
      // we need to get all the 'real' (original) records out to get at their IDs
      const nodes = getNodes(currentRecords);
      // we just push all the IDs onto the selection array
      nodes.forEach(item => {
        selection.push(item._id);
      });
    }
    this.setState({ selectAll, selection });
  };
  isSelected = key => {
    /*
      Instead of passing our external selection state we provide an 'isSelected'
      callback and detect the selection state ourselves. This allows any implementation
      for selection (either an array, object keys, or even a Javascript Set object).
    */
    return this.state.selection.includes(key);
  };
  logSelection = () => {
    console.log("selection:", this.state.selection);
  };
  toggleType = () => {
    this.setState({
      selectType: this.state.selectType === "radio" ? "checkbox" : "radio",
      selection: [],
      selectAll: false
    });
  };
  toggleTree = () => {
    if (this.state.pivotBy.length) {
      this.setState({ pivotBy: [], expanded: {} });
    } else {
      this.setState({ pivotBy: ["state", "post"], expanded: {} });
    }
  };
  onExpandedChange = expanded => {
    this.setState({ expanded });
  };
  render() {
    const {
      toggleSelection,
      toggleAll,
      isSelected,
      logSelection,
      toggleType,
      toggleTree,
      onExpandedChange
    } = this;
    const {
      data,
      columns,
      selectAll,
      selectType,
      pivotBy,
      expanded
    } = this.state;
    const extraProps = {
      selectAll,
      isSelected,
      toggleAll,
      toggleSelection,
      selectType,
      pivotBy,
      expanded,
      onExpandedChange,
      pageSize: 5
    };
    return (
      <div style={{ padding: "10px" }}>
        <h1>react-table - Select Tree Table</h1>
        <p>
          This example combines two HOCs (the TreeTable and the SelectTable) to
          make a composite component.
        </p>
        <p>We'll call it SelectTreeTable!</p>
        <p>Here is what the buttons do:</p>
        <ul>
          <li>
            <strong>Toggle Tree:</strong> enables or disabled the pivotBy on the
            table.
          </li>
          <li>
            <strong>Select Type:</strong> changes from 'checkbox' to 'radio' and
            back again.
          </li>
          <li>
            <strong>Log Selection to Console:</strong> open your console to see
            what has been selected.
          </li>
        </ul>
        <p>
          <strong>NOTE:</strong> the selection is maintained when toggling the
          tree on and off but is cleared when switching between select types
          (radio, checkbox).
        </p>
        <button onClick={toggleTree}>
          Toggle Tree [{pivotBy && pivotBy.length ? pivotBy.join(", ") : ""}]
        </button>
        <button onClick={toggleType}>
          Select Type: <strong>{selectType}</strong>
        </button>
        <button onClick={logSelection}>Log Selection to Console</button>
        {` (${this.state.selection.length}) selected`}
        {data ? (
          <SelectTreeTable
            data={data}
            columns={columns}
            ref={r => (this.selectTable = r)}
            className="-striped -highlight"
            freezeWhenExpanded={true}
            {...extraProps}
          />
        ) : null}
      </div>
    );
  }
 }
 export default ComponentTest;
@@ -0,0 +1,70 @@
 import React from "react";
 import ReactTable from "../../../../lib/index";
 import "../../../../react-table.css";
 import treeTableHOC from "../../../../lib/hoc/treeTable";
 async function getData() {
  const result = await (await fetch("/au_500_tree.json")).json();
  return result;
 }
 function getColumns(data, pivotBy) {
  const columns = [];
  const sample = data[0];
  for (let key in sample) {
    columns.push({
      accessor: key,
      Header: key
    });
  }
  return columns;
 }
 export class ComponentTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      columns: null,
      pivotBy: null // ["firstName", "lastName"],
    };
  }
  componentDidMount() {
    getData().then(data => {
      // console.log('cwm data:',data);
      const pivotBy = ["state", "post", "city"];
      const columns = getColumns(data, pivotBy);
      // console.log('cwm cols:',columns);
      this.setState({ data, columns, pivotBy });
    });
  }
  showState = () => {
    console.log("state:", this.reactTable.getResolvedState());
  };
  render() {
    const { data, columns, pivotBy } = this.state;
    const extraProps = {
      data,
      columns,
      pivotBy
    };
    const TreeTable = treeTableHOC(ReactTable);
    return (
      <div style={{ padding: "10px" }}>
        <h1>react-table - Tree Table</h1>
        {data ? (
          <TreeTable
            ref={r => (this.reactTable = r)}
            className="-striped -highlight"
            defaultPageSize={5}
            {...extraProps}
          />
        ) : null}
      </div>
    );
  }
 }
 export default ComponentTest;
@@ -0,0 +1,53 @@
 import React from "react";
 export default Component => {
  const wrapper = componentProps => {
    const TrComponent = props => {
      const { ri, ...rest } = props;
      if (ri && ri.groupedByPivot) {
        const cell = props.children[ri.level];
        cell.props.style.flex = "unset";
        cell.props.style.width = "100%";
        cell.props.style.maxWidth = "unset";
        cell.props.style.paddingLeft = `${componentProps.treeTableIndent *
          ri.level}px`;
        cell.props.style.backgroundColor = "#DDD";
        cell.props.style.borderBottom = "1px solid rgba(128,128,128,0.2)";
        return <div {...rest}>{cell}</div>;
      }
      return <Component.defaultProps.TrComponent {...rest} />;
    };
    const getTrProps = (state, ri, ci, instance) => {
      return { ri };
    };
    const { columns, ...rest } = componentProps;
    const extra = {
      columns: columns.map(col => {
        let column = col;
        if (rest.pivotBy && rest.pivotBy.includes(col.accessor)) {
          column = {
            accessor: col.accessor,
            width: `${componentProps.treeTableIndent}px`,
            show: false,
            Header: ""
          };
        }
        return column;
      }),
      TrComponent,
      getTrProps
    };
    return <Component {...rest} {...extra} />;
  };
  wrapper.displayName = "RTTreeTable";
  wrapper.defaultProps = {
    treeTableRowBackground: "#EEE",
    treeTableIndent: 10
  };
  return wrapper;
 };
@@ -1,6 +1,4 @@
 import React from "react";
 import namor from "namor";
 import "./index.css";
 const range = len => {
  const arr = [];
@@ -21,7 +19,9 @@ const newPerson = () => {
    status:
      statusChance > 0.66
        ? "relationship"
-        : statusChance > 0.33 ? "complicated" : "single"
+        : statusChance > 0.33
          ? "complicated"
          : "single"
  };
 };
@@ -33,20 +33,3 @@ export function makeData(len = 5553) {
    };
  });
 }
 export const Logo = () =>
  <div style={{ margin: '1rem auto', display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center'}}>
    For more examples, visit {''}
  <br />
    <a href="https://github.com/react-tools/react-table" target="_blank">
      <img
        src="https://github.com/react-tools/media/raw/master/logo-react-table.png"
        style={{ width: `150px`, margin: ".5em auto .3em" }}
      />
    </a>
  </div>;
 export const Tips = () =>
  <div style={{ textAlign: "center" }}>
    <em>Tip: Hold shift when sorting to multi-sort!</em>
  </div>;
@@ -0,0 +1,10 @@
 html,
 body,
 #root {
  height: 100%;
 }
 body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
 }
@@ -0,0 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 //
 import "./index.css";
 import App from "./App.js";
 ReactDOM.render(<App />, document.getElementById("root"));
@@ -0,0 +1,23 @@
 /* eslint-disable  */
 import React from "react";
 import marked from "marked";
 //
 import HOCReadme from "!raw!../../../src/hoc/README.md";
 import "github-markdown-css/github-markdown.css";
 import "./utils/prism.js";
 export default class HOCStory extends React.Component {
  render() {
    return (
      <div style={{ padding: "10px" }}>
        <span
          className="markdown-body"
          dangerouslySetInnerHTML={{ __html: marked(HOCReadme) }}
        />
      </div>
    );
  }
  componentDidMount() {
    global.Prism && global.Prism.highlightAll();
  }
 }
@@ -0,0 +1,23 @@
 /* eslint-disable import/no-webpack-loader-syntax */
 import React from "react";
 import marked from "marked";
 //
 import Readme from "!raw!../../../README.md";
 import "github-markdown-css/github-markdown.css";
 import "./utils/prism.js";
 export default class Story extends React.Component {
  render() {
    return (
      <div style={{ padding: "10px" }}>
        <span
          className="markdown-body"
          dangerouslySetInnerHTML={{ __html: marked(Readme) }}
        />
      </div>
    );
  }
  componentDidMount() {
    global.Prism && global.Prism.highlightAll();
  }
 }
@@ -0,0 +1,27 @@
 import React from "react";
 import ReactTable from "../../../lib/index";
 import "../../../react-table.css";
 const data = [
  { one: "1.1", two: "1.2" },
  { one: "2.1", two: "2.2" },
  { one: "3.1", two: "3.2" },
  { one: "4.1", two: "4.2" }
 ];
 const columns = [
  { accessor: "one", Header: "One" },
  { accessor: "two", Header: "Two" }
 ];
 export default class Story extends React.Component {
  render() {
    return (
      <div>
        Test
        <ReactTable data={data} columns={columns} />
      </div>
    );
  }
 }
@@ -0,0 +1,138 @@
 /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
 /**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
 code[class*="language-"],
 pre[class*="language-"] {
 	color: black;
 	background: none;
 	text-shadow: 0 1px white;
 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 	text-align: left;
 	white-space: pre;
 	word-spacing: normal;
 	word-break: normal;
 	word-wrap: normal;
 	line-height: 1.5;
 	-moz-tab-size: 4;
 	-o-tab-size: 4;
 	tab-size: 4;
 	-webkit-hyphens: none;
 	-moz-hyphens: none;
 	-ms-hyphens: none;
 	hyphens: none;
 }
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 	text-shadow: none;
 	background: #b3d4fc;
 }
 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
 	text-shadow: none;
 	background: #b3d4fc;
 }
@media print {
 	code[class*="language-"],
 	pre[class*="language-"] {
 		text-shadow: none;
 	}
 }
 /* Code blocks */
 pre[class*="language-"] {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
 }
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
 	background: #f5f2f0;
 }
 /* Inline code */
 :not(pre) > code[class*="language-"] {
 	padding: .1em;
 	border-radius: .3em;
 	white-space: normal;
 }
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
 	color: slategray;
 }
 .token.punctuation {
 	color: #999;
 }
 .namespace {
 	opacity: .7;
 }
 .token.property,
 .token.tag,
 .token.boolean,
 .token.number,
 .token.constant,
 .token.symbol,
 .token.deleted {
 	color: #905;
 }
 .token.selector,
 .token.attr-name,
 .token.string,
 .token.char,
 .token.builtin,
 .token.inserted {
 	color: #690;
 }
 .token.operator,
 .token.entity,
 .token.url,
 .language-css .token.string,
 .style .token.string {
 	color: #a67f59;
 	background: hsla(0, 0%, 100%, .5);
 }
 .token.atrule,
 .token.attr-value,
 .token.keyword {
 	color: #07a;
 }
 .token.function {
 	color: #DD4A68;
 }
 .token.regex,
 .token.important,
 .token.variable {
 	color: #e90;
 }
 .token.important,
 .token.bold {
 	font-weight: bold;
 }
 .token.italic {
 	font-style: italic;
 }
 .token.entity {
 	cursor: help;
 }
--- 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