Remove unused prop from readme.

.eslintrc.js

@@ -1,74 +0,0 @@
-module.exports = {
-  parserOptions: {
-    ecmaVersion: 8,
-    ecmaFeatures: {
-      experimentalObjectRestSpread: true,
-      jsx: true,
-      node: false
-    },
-    sourceType: 'module'
-  },
-
-  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': [2, '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 }]
-  }
-}

.gitignore

@@ -1,6 +1,5 @@
 node_modules/
 lib/
-docs/build
 react-table.js
 react-table.css
 *.log

.storybook/CNAME

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

.storybook/config.js

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

.storybook/fonts.css

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

.storybook/layout.css

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

.storybook/reset.css

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

.storybook/webpack.config.js

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

CHANGELOG.md

@@ -1,8 +1,3 @@
-## 6.3.0
-##### New Features
-- `defaultSortDesc` - allows you to set the default sorting direction for all columns to descending.
-- `column.defaultSortDesc` - allows you to set the default sorting direction for a specific column. Falls back to the global `defaultSortDesc` when not set at all.
-
 ## 6.0.0
 
 ##### New Features

README.md

@@ -46,7 +46,7 @@ Previous versions:
 
 ## Demos and examples
 - <a href="http://codepen.io/tannerlinsley/pen/QpeZBa?editors=0010" target="\_blank">Codepen</a>
-- <a href="http://react-table.js.org/#/story/simple-table" target="\_parent">Storybook</a>
+- <a href="http://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Client-side%20Data&full=0&down=0&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel" target="\_parent">Storybook</a>
 
 ## Table of Contents
 - [Installation](#installation)
@@ -155,12 +155,9 @@ These are all of the available props (and their default values) for the main `<R
   data: [],
   loading: false,
   showPagination: true,
-  showPaginationTop: false,
-  showPaginationBottom: true
   showPageSizeOptions: true,
   pageSizeOptions: [5, 10, 20, 25, 50, 100],
   defaultPageSize: 20,
-  minRows: undefined,
   showPageJump: true,
   collapseOnSortingChange: true,
   collapseOnPageChange: true,
@@ -169,7 +166,6 @@ These are all of the available props (and their default values) for the main `<R
   sortable: true,
   resizable: true,
   filterable: false,
-  defaultSortDesc: false,
   defaultSorted: [],
   defaultFiltered: [],
   defaultResized: [],
@@ -214,7 +210,7 @@ These are all of the available props (and their default values) for the main `<R
 
   // Pivoting
   pivotBy: undefined,
-
+  
   // Key Constants
   pivotValKey: '_pivotVal',
   pivotIDKey: '_pivotID',
@@ -287,8 +283,7 @@ These are all of the available props (and their default values) for the main `<R
     footerStyle: {},
     getFooterProps: () => ({}),
     filterMethod: undefined,
-    sortMethod: undefined,
-    defaultSortDesc: undefined,
+    sortMethod: undefined
   },
 
   // Global Expander Column Defaults
@@ -734,7 +729,7 @@ Here are the props and their corresponding callbacks that control the state of t
   // Props
   page={0} // the index of the page you wish to display
   pageSize={20} // the number of rows per page to be displayed
-  sorted={[{ // the sorting model for the table
+  sorting={[{ // the sorting model for the table
       id: 'lastName',
       desc: true
     }, {
@@ -806,11 +801,7 @@ Accessing internal state and wrapping with more UI:
 The possibilities are endless!
 
 ## Sorting
-Sorting comes built in with React-Table.
-- Click a column header to sort by its accessor.
-- Click it again to reverse the sort.
-- Set `defaultSortDesc` property to `true` to make the first sort direction default to descending.
-- Override a specific column's default sort direction by using the same `defaultSortDesc` property on a column, set to `true`
+Sorting comes built in with React-Table. Click column header to sort by its column. Click it again to reverse the sort. 
 
 ## Multi-Sort
 When clicking on a column header, hold shift to multi-sort! You can toggle `ascending` `descending` and `none` for multi-sort columns. Clicking on a header without holding shift will clear the multi-sort and replace it with the single sort of that column. It's quite handy!
@@ -830,8 +821,8 @@ defaultSortMethod = (a, b) => {
   a = (a === null || a === undefined) ? -Infinity : a
   b = (b === null || b === undefined) ? -Infinity : b
   // force any string values to lowercase
-  a = typeof a === 'string' ? a.toLowerCase() : a
-  b = typeof b === 'string' ? b.toLowerCase() : b
+  a = a === 'string' ? a.toLowerCase() : a
+  b = b === 'string' ? b.toLowerCase() : b
   // Return either 1 or -1 to indicate a sort priority
   if (a > b) {
     return 1
@@ -855,7 +846,7 @@ If you want to override a particular column's filtering method, you can set the
 
 To completely override the filter that is shown, you can set the `Filter` column option. Using this option you can specify the JSX that is shown. The option is passed an `onChange` method which must be called with the the value that you wan't to pass to the `filterMethod` option whenever the filter has changed.
 
-See <a href="http://react-table.js.org/#/story/custom-filtering" target="\_parent">Custom Filtering</a> demo for examples.
+See <a href="http://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Custom%20Filtering&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel" target="\_parent">Custom Filtering</a> demo for examples.
 
 ## Component Overrides
 Though we confidently stand by the markup and architecture behind it, `react-table` does offer the ability to change the core componentry it uses to render everything. You can extend or override these internal components by passing a react component to it's corresponding prop on either the global props or on a one-off basis like so:
@@ -900,18 +891,19 @@ To suggest a feature, create an issue if it does not already exist.
 If you would like to help develop a suggested feature follow these steps:
 
 - Fork this repo
-- Install dependencies with `$ yarn`
-- Auto-build files as you edit with `$ yarn run watch`
+- `$ yarn`
+- `$ yarn run storybook`
 - Implement your changes to files in the `src/` directory
-- Run the <a href="https://github.com/tannerlinsley/react-story">React Story</a> locally with `$ yarn run docs`
-- View changes as you edit `docs/src`,
+- View changes as you code via our <a href="https://github.com/storybooks/react-storybook" target="\_parent">React Storybook</a> `localhost:8000`
+- Make changes to stories in `/stories`, or create a new one if needed
 - Submit PR for review
 
 #### Scripts
 
-- `$ yarn run watch` Watches files and builds via babel
-- `$ yarn run docs` Runs the storybook server
+- `$ yarn run storybook` Runs the storybook server
 - `$ yarn run test` Runs the test suite
+- `$ yarn run prepublish` Builds the distributable bundle
+- `$ yarn run docs` Builds the website/docs from the storybook for github pages
 
 ## Used By
 

docs/CNAME

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

docs/iframe.html

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

docs/index.html

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

docs/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "new",
-  "version": "0.1.0",
-  "private": true,
-  "devDependencies": {
-    "react-scripts": "0.9.5",
-    "standard": "^10.0.2"
-  },
-  "dependencies": {
-    "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-story": "^0.0.10"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
-}

docs/public/index.html

@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tag above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React Table - A lightweight, fast and extendable datagrid built for React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start`.
-      To create a production bundle, use `npm run build`.
-    -->
-  </body>
-</html>

docs/src/App.js

@@ -1,110 +0,0 @@
-import React from 'react'
-//
-import ReactStory, { defaultProps } from 'react-story'
-
-import './stories/utils/prism.css'
-import '../../react-table.css'
-
-import Readme from './stories/Readme.js'
-import Simple from './stories/Simple.js'
-import CellRenderers from './stories/CellRenderers.js'
-import DefaultSorting from './stories/DefaultSorting.js'
-import CustomSorting from './stories/CustomSorting.js'
-import CustomWidths from './stories/CustomWidths.js'
-import CustomComponentProps from './stories/CustomComponentProps.js'
-import ServerSide from './stories/ServerSide.js'
-import SubComponents from './stories/SubComponents.js'
-import Pivoting from './stories/Pivoting.js'
-import PivotingSubComponents from './stories/PivotingSubComponents.js'
-import OneHundredKRows from './stories/OneHundredKRows.js'
-import FunctionalRendering from './stories/FunctionalRendering.js'
-import CustomExpanderPosition from './stories/CustomExpanderPosition.js'
-import NoDataText from './stories/NoDataText.js'
-import Footers from './stories/Footers.js'
-import Filtering from './stories/Filtering.js'
-import ControlledTable from './stories/ControlledTable.js'
-import PivotingOptions from './stories/PivotingOptions.js'
-import EditableTable from './stories/EditableTable.js'
-import FixedHeader from './stories/FixedHeader.js'
-import MultiplePagers from './stories/MultiplePagers';
-
-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
-            }}
-          >
-            <a
-              href="//github.com/tannerlinsley/react-table"
-              style={{
-                display: 'block',
-                textAlign: 'center',
-                borderBottom: 'solid 3px #cccccc'
-              }}
-            >
-              <img
-                src="//npmcdn.com/react-table/media/Banner.png"
-                alt="React Table Logo"
-                style={{
-                  width: '100px'
-                }}
-              />
-            </a>
-            <div
-              {...props}
-              style={{
-                padding: '10px'
-              }}
-            />
-          </defaultProps.StoryWrapper>
-        )}
-        stories={[
-          { name: 'Readme', component: Readme },
-          { name: 'Simple Table', component: Simple },
-          {
-            name: 'Cell Renderers & Custom Components',
-            component: CellRenderers
-          },
-          { name: 'Default Sorting', component: DefaultSorting },
-          { name: 'Custom Sorting', component: CustomSorting },
-          { name: 'Custom Column Widths', component: CustomWidths },
-          { name: 'Custom Component Props', component: CustomComponentProps },
-          { name: 'Server-side Data', component: ServerSide },
-          { name: 'Sub Components', component: SubComponents },
-          { name: 'Pivoting & Aggregation', component: Pivoting },
-          {
-            name: 'Pivoting & Aggregation w/ Sub Components',
-            component: PivotingSubComponents
-          },
-          {
-            name: '100k Rows w/ Pivoting & Sub Components',
-            component: OneHundredKRows
-          },
-          { name: 'Pivoting Options', component: PivotingOptions },
-          { name: 'Functional Rendering', component: FunctionalRendering },
-          {
-            name: 'Custom Expander Position',
-            component: CustomExpanderPosition
-          },
-          { name: 'Custom "No Data" Text', component: NoDataText },
-          { name: 'Footers', component: Footers },
-          { name: 'Custom Filtering', component: Filtering },
-          { name: 'Controlled Component', component: ControlledTable },
-          { name: 'Editable Table', component: EditableTable },
-          { name: 'Fixed Header w/ Vertical Scroll', component: FixedHeader },
-          { name: 'Multiple Pagers (Top and Bottom)', component: MultiplePagers}
-        ]}
-      />
-    )
-  }
-}

docs/src/index.css

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

docs/src/index.js

@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-//
-import './index.css'
-import App from './App.js'
-
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-)

docs/src/stories/FixedHeader.js

@@ -1,81 +0,0 @@
-/* eslint-disable import/no-webpack-loader-syntax */
-import React from 'react'
-import _ from 'lodash'
-import namor from 'namor'
-
-import ReactTable from '../../../lib/index'
-
-class Story extends React.PureComponent {
-  render() {
-    const data = _.map(_.range(5553), d => {
-      return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
-        age: Math.floor(Math.random() * 30),
-        children: _.map(_.range(10), d => {
-          return {
-            firstName: namor.generate({ words: 1, numbers: 0 }),
-            lastName: namor.generate({ words: 1, numbers: 0 }),
-            age: Math.floor(Math.random() * 30)
-          }
-        })
-      }
-    })
-
-    const columns = [
-      {
-        Header: 'Name',
-        columns: [
-          {
-            Header: 'First Name',
-            accessor: 'firstName'
-          },
-          {
-            Header: 'Last Name',
-            id: 'lastName',
-            accessor: d => d.lastName
-          }
-        ]
-      },
-      {
-        Header: 'Info',
-        columns: [
-          {
-            Header: 'Age',
-            accessor: 'age'
-          }
-        ]
-      }
-    ]
-
-    return (
-      <div>
-        <div className="table-wrap">
-          <ReactTable
-            className="-striped -highlight"
-            data={data}
-            columns={columns}
-            defaultPageSize={20}
-            style={{
-              height: '400px' // This will force the table body to overflow and scroll, since there is not enough room
-            }}
-          />
-        </div>
-        <div style={{ textAlign: 'center' }}>
-          <br />
-          <em>Tip: Hold shift when sorting to multi-sort!</em>
-        </div>
-      </div>
-    )
-  }
-}
-
-const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./Simple')
-
-export default () => (
-  <div>
-    <Story />
-    <CodeHighlight>{() => source}</CodeHighlight>
-  </div>
-)

docs/src/stories/Readme.js

@@ -1,20 +0,0 @@
-/* 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'
-
-export default class Story extends React.Component {
-  render() {
-    return (
-      <span
-        className="markdown-body"
-        dangerouslySetInnerHTML={{ __html: marked(Readme) }}
-      />
-    )
-  }
-  componentDidMount() {
-    global.Prism.highlightAll()
-  }
-}

docs/src/stories/Simple.js

@@ -1,77 +0,0 @@
-/* eslint-disable import/no-webpack-loader-syntax */
-import React from 'react'
-import _ from 'lodash'
-import namor from 'namor'
-
-import ReactTable from '../../../lib/index'
-
-class Story extends React.PureComponent {
-  render() {
-    const data = _.map(_.range(5553), d => {
-      return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
-        age: Math.floor(Math.random() * 30),
-        children: _.map(_.range(10), d => {
-          return {
-            firstName: namor.generate({ words: 1, numbers: 0 }),
-            lastName: namor.generate({ words: 1, numbers: 0 }),
-            age: Math.floor(Math.random() * 30)
-          }
-        })
-      }
-    })
-
-    const columns = [
-      {
-        Header: 'Name',
-        columns: [
-          {
-            Header: 'First Name',
-            accessor: 'firstName'
-          },
-          {
-            Header: 'Last Name',
-            id: 'lastName',
-            accessor: d => d.lastName
-          }
-        ]
-      },
-      {
-        Header: 'Info',
-        columns: [
-          {
-            Header: 'Age',
-            accessor: 'age'
-          }
-        ]
-      }
-    ]
-
-    return (
-      <div>
-        <div className="table-wrap">
-          <ReactTable
-            className="-striped -highlight"
-            data={data}
-            columns={columns}
-            defaultPageSize={10}
-          />
-        </div>
-        <div style={{ textAlign: 'center' }}>
-          <br />
-          <em>Tip: Hold shift when sorting to multi-sort!</em>
-        </div>
-      </div>
-    )
-  }
-}
-
-const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./Simple')
-
-export default () =>
-  <div>
-    <Story />
-    <CodeHighlight>{() => source}</CodeHighlight>
-  </div>

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

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

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

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "6.3.0",
+  "version": "6.0.0",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -34,32 +34,39 @@
     "build": "npm-run-all build:*",
     "prepublish": "npm run build && npm run umd",
     "postpublish": "git push --tags",
-    "docs": "yarn watch & cd docs && yarn && yarn start",
-    "docs:build": "yarn build && cd docs && yarn && yarn run build"
+    "storybook": "start-storybook -p 8000 -c .storybook",
+    "docs": "build-storybook -o docs && cp .storybook/CNAME docs/CNAME"
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "react-json-tree": "^0.10.9"
+    "raw-loader": "^0.5.1"
   },
   "peerDependencies": {
     "react": "^15.x.x"
   },
   "devDependencies": {
+    "@kadira/storybook": "^2.35.1",
     "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",
+    "github-markdown-css": "^2.4.1",
+    "html-loader": "^0.4.4",
+    "markdown-loader": "^0.1.7",
+    "namor": "^0.3.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.1",
     "rimraf": "^2.6.1",
-    "standard": "^10.0.2",
+    "standard": "^8.0.0",
+    "storybook": "^0.0.0",
     "stylus": "^0.54.5",
-    "webpack": "^2.5.1"
+    "webpack": "^2.4.1"
   },
   "standard": {
     "parser": "babel-eslint",

src/defaultProps.js

@@ -11,8 +11,6 @@ export default {
   data: [],
   loading: false,
   showPagination: true,
-  showPaginationTop: false,
-  showPaginationBottom: true,
   showPageSizeOptions: true,
   pageSizeOptions: [5, 10, 20, 25, 50, 100],
   defaultPageSize: 20,
@@ -24,24 +22,21 @@ export default {
   sortable: true,
   resizable: true,
   filterable: false,
-  defaultSortDesc: false,
   defaultSorted: [],
   defaultFiltered: [],
   defaultResized: [],
   defaultExpanded: {},
   defaultFilterMethod: (filter, row, column) => {
     const id = filter.pivotId || filter.id
-    return row[id] !== undefined
-      ? String(row[id]).startsWith(filter.value)
-      : true
+    return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
   },
   defaultSortMethod: (a, b) => {
     // force null and undefined to the bottom
-    a = a === null || a === undefined ? '' : a
-    b = b === null || b === undefined ? '' : b
+    a = (a === null || a === undefined) ? -Infinity : a
+    b = (b === null || b === undefined) ? -Infinity : b
     // force any string values to lowercase
-    a = typeof a === 'string' ? a.toLowerCase() : a
-    b = typeof b === 'string' ? b.toLowerCase() : b
+    a = a === 'string' ? a.toLowerCase() : a
+    b = b === 'string' ? b.toLowerCase() : b
     // Return either 1 or -1 to indicate a sort priority
     if (a > b) {
       return 1
@@ -145,7 +140,7 @@ export default {
     footerStyle: {},
     getFooterProps: emptyObj,
     filterMethod: undefined,
-    sortMethod: undefined,
+    sortMethod: undefined
   },
 
   // Global Expander Column Defaults
@@ -153,7 +148,7 @@ export default {
     sortable: false,
     resizable: false,
     filterable: false,
-    width: 35,
+    width: 35
   },
 
   pivotDefaults: {
@@ -175,7 +170,7 @@ export default {
   TbodyComponent: _.makeTemplateComponent('rt-tbody'),
   TrGroupComponent: _.makeTemplateComponent('rt-tr-group'),
   TrComponent: _.makeTemplateComponent('rt-tr'),
-  ThComponent: ({ toggleSort, className, children, ...rest }) => {
+  ThComponent: ({toggleSort, className, children, ...rest}) => {
     return (
       <div
         className={classnames(className, 'rt-th')}
@@ -190,45 +185,51 @@ export default {
   },
   TdComponent: _.makeTemplateComponent('rt-td'),
   TfootComponent: _.makeTemplateComponent('rt-tfoot'),
-  FilterComponent: ({ filter, onChange }) =>
-    <input
-      type='text'
+  FilterComponent: ({filter, onChange}) => (
+    <input type='text'
       style={{
-        width: '100%',
+        width: '100%'
       }}
       value={filter ? filter.value : ''}
-      onChange={event => onChange(event.target.value)}
-    />,
-  ExpanderComponent: ({ isExpanded }) =>
+      onChange={(event) => onChange(event.target.value)}
+    />
+  ),
+  ExpanderComponent: ({isExpanded}) => (
     <div className={classnames('rt-expander', isExpanded && '-open')}>
       &bull;
-    </div>,
-  PivotValueComponent: ({ subRows, value }) =>
-    <span>{value} {subRows && `(${subRows.length})`}</span>,
-  AggregatedComponent: ({ subRows, column }) => {
+    </div>
+  ),
+  PivotValueComponent: ({subRows, value}) => (
+    <span>{value} {subRows && `(${subRows.length})`}</span>
+  ),
+  AggregatedComponent: ({subRows, column}) => {
     const previewValues = subRows
       .filter(d => typeof d[column.id] !== 'undefined')
-      .map((row, i) =>
-        <span key={i}>
-          {row[column.id]}{i < subRows.length - 1 ? ', ' : ''}
-        </span>
-      )
-    return <span>{previewValues}</span>
+      .map((row, i) => (
+        <span key={i}>{row[column.id]}{i < subRows.length - 1 ? ', ' : ''}</span>
+      ))
+    return (
+      <span>{previewValues}</span>
+    )
   },
   PivotComponent: undefined, // this is a computed default generated using
   // the ExpanderComponent and PivotValueComponent at run-time in methods.js
   PaginationComponent: Pagination,
   PreviousComponent: undefined,
   NextComponent: undefined,
-  LoadingComponent: ({ className, loading, loadingText, ...rest }) =>
-    <div
-      className={classnames('-loading', { '-active': loading }, className)}
+  LoadingComponent: ({className, loading, loadingText, ...rest}) => (
+    <div className={classnames(
+      '-loading',
+      {'-active': loading},
+      className
+    )}
       {...rest}
     >
       <div className='-loading-inner'>
         {loadingText}
       </div>
-    </div>,
+    </div>
+  ),
   NoDataComponent: _.makeTemplateComponent('rt-noData'),
-  ResizerComponent: _.makeTemplateComponent('rt-resizer'),
+  ResizerComponent: _.makeTemplateComponent('rt-resizer')
 }

src/index.js

@@ -11,7 +11,7 @@ export const ReactTableDefaults = defaultProps
 export default class ReactTable extends Methods(Lifecycle(Component)) {
   static defaultProps = defaultProps
 
-  constructor(props) {
+  constructor (props) {
     super()
 
     this.getResolvedState = this.getResolvedState.bind(this)
@@ -43,7 +43,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
     }
   }
 
-  render() {
+  render () {
     const resolvedState = this.getResolvedState()
     const {
       children,
@@ -72,8 +72,6 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       getNoDataProps,
       getResizerProps,
       showPagination,
-      showPaginationTop,
-      showPaginationBottom,
       manual,
       loadingText,
       noDataText,
@@ -148,11 +146,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
           }
           const newPath = path.concat([i])
           if (rowWithViewIndex[subRowsKey] && _.get(expanded, newPath)) {
-            ;[rowWithViewIndex[subRowsKey], index] = recurseRowsViewIndex(
-              rowWithViewIndex[subRowsKey],
-              newPath,
-              index
-            )
+            [rowWithViewIndex[subRowsKey], index] = recurseRowsViewIndex(rowWithViewIndex[subRowsKey], newPath, index)
           }
           return rowWithViewIndex
         }),
@@ -160,17 +154,15 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       ]
     }
 
-    ;[pageRows] = recurseRowsViewIndex(pageRows)
+    [pageRows] = recurseRowsViewIndex(pageRows)
 
     const canPrevious = page > 0
     const canNext = page + 1 < pages
 
-    const rowMinWidth = _.sum(
-      allVisibleColumns.map(d => {
-        const resizedColumn = resized.find(x => x.id === d.id) || {}
-        return _.getFirstDefined(resizedColumn.value, d.width, d.minWidth)
-      })
-    )
+    const rowMinWidth = _.sum(allVisibleColumns.map(d => {
+      const resizedColumn = resized.find(x => x.id === d.id) || {}
+      return _.getFirstDefined(resizedColumn.value, d.width, d.minWidth)
+    }))
 
     let rowIndex = -1
 
@@ -190,12 +182,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
     // Visual Components
 
     const makeHeaderGroups = () => {
-      const theadGroupProps = _.splitProps(
-        getTheadGroupProps(finalState, undefined, undefined, this)
-      )
-      const theadGroupTrProps = _.splitProps(
-        getTheadGroupTrProps(finalState, undefined, undefined, this)
-      )
+      const theadGroupProps = _.splitProps(getTheadGroupProps(finalState, undefined, undefined, this))
+      const theadGroupTrProps = _.splitProps(getTheadGroupTrProps(finalState, undefined, undefined, this))
       return (
         <TheadComponent
           className={classnames('-headerGroups', theadGroupProps.className)}
@@ -217,30 +205,13 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
     }
 
     const makeHeaderGroup = (column, i) => {
-      const resizedValue = col =>
-        (resized.find(x => x.id === col.id) || {}).value
-      const flex = _.sum(
-        column.columns.map(
-          col => (col.width || resizedValue(col) ? 0 : col.minWidth)
-        )
-      )
-      const width = _.sum(
-        column.columns.map(col =>
-          _.getFirstDefined(resizedValue(col), col.width, col.minWidth)
-        )
-      )
-      const maxWidth = _.sum(
-        column.columns.map(col =>
-          _.getFirstDefined(resizedValue(col), col.width, col.maxWidth)
-        )
-      )
+      const resizedValue = col => (resized.find(x => x.id === col.id) || {}).value
+      const flex = _.sum(column.columns.map(col => col.width || resizedValue(col) ? 0 : col.minWidth))
+      const width = _.sum(column.columns.map(col => _.getFirstDefined(resizedValue(col), col.width, col.minWidth)))
+      const maxWidth = _.sum(column.columns.map(col => _.getFirstDefined(resizedValue(col), col.width, col.maxWidth)))
 
-      const theadGroupThProps = _.splitProps(
-        getTheadGroupThProps(finalState, undefined, column, this)
-      )
-      const columnHeaderProps = _.splitProps(
-        column.getHeaderProps(finalState, undefined, column, this)
-      )
+      const theadGroupThProps = _.splitProps(getTheadGroupThProps(finalState, undefined, column, this))
+      const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
 
       const classes = [
         column.headerClassName,
@@ -268,7 +239,9 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       return (
         <ThComponent
           key={i + '-' + column.id}
-          className={classnames(classes)}
+          className={classnames(
+            classes
+          )}
           style={{
             ...styles,
             ...flexStyles
@@ -284,12 +257,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
     }
 
     const makeHeaders = () => {
-      const theadProps = _.splitProps(
-        getTheadProps(finalState, undefined, undefined, this)
-      )
-      const theadTrProps = _.splitProps(
-        getTheadTrProps(finalState, undefined, undefined, this)
-      )
+      const theadProps = _.splitProps(getTheadProps(finalState, undefined, undefined, this))
+      const theadTrProps = _.splitProps(getTheadTrProps(finalState, undefined, undefined, this))
       return (
         <TheadComponent
           className={classnames('-header', theadProps.className)}
@@ -313,25 +282,11 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
     const makeHeader = (column, i) => {
       const resizedCol = resized.find(x => x.id === column.id) || {}
       const sort = sorted.find(d => d.id === column.id)
-      const show = typeof column.show === 'function'
-        ? column.show()
-        : column.show
-      const width = _.getFirstDefined(
-        resizedCol.value,
-        column.width,
-        column.minWidth
-      )
-      const maxWidth = _.getFirstDefined(
-        resizedCol.value,
-        column.width,
-        column.maxWidth
-      )
-      const theadThProps = _.splitProps(
-        getTheadThProps(finalState, undefined, column, this)
-      )
-      const columnHeaderProps = _.splitProps(
-        column.getHeaderProps(finalState, undefined, column, this)
-      )
+      const show = typeof column.show === 'function' ? column.show() : column.show
+      const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
+      const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
+      const theadThProps = _.splitProps(getTheadThProps(finalState, undefined, column, this))
+      const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
 
       const classes = [
         column.headerClassName,
@@ -351,13 +306,14 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       }
 
       const isResizable = _.getFirstDefined(column.resizable, resizable, false)
-      const resizer = isResizable
-        ? <ResizerComponent
-            onMouseDown={e => this.resizeColumnStart(column, e, false)}
-            onTouchStart={e => this.resizeColumnStart(column, e, true)}
-            {...resizerProps}
-          />
-        : null
+      const resizer = isResizable ? (
+        <ResizerComponent
+          onMouseDown={e => this.resizeColumnStart(column, e, false)}
+          onTouchStart={e => this.resizeColumnStart(column, e, true)}
+
+          {...resizerProps}
+        />
+      ) : null
 
       const isSortable = _.getFirstDefined(column.sortable, sortable, false)
 
@@ -370,9 +326,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
             sort ? (sort.desc ? '-sort-desc' : '-sort-asc') : '',
             isSortable && '-cursor-pointer',
             !show && '-hidden',
-            pivotBy &&
-              pivotBy.slice(0, -1).includes(column.id) &&
-              'rt-header-pivot'
+            pivotBy && pivotBy.slice(0, -1).includes(column.id) && 'rt-header-pivot'
           )}
           style={{
             ...styles,
@@ -380,12 +334,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
             width: `${width}px`,
             maxWidth: `${maxWidth}px`
           }}
-          toggleSort={e => {
+          toggleSort={(e) => {
             isSortable && this.sortColumn(column, e.shiftKey)
           }}
           {...rest}
         >
-          <div className="rt-resizable-header-content">
+          <div className='rt-resizable-header-content'>
             {_.normalizeComponent(column.Header, {
               data: sortedData,
               column: column
@@ -397,12 +351,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
     }
 
     const makeFilters = () => {
-      const theadFilterProps = _.splitProps(
-        getTheadFilterProps(finalState, undefined, undefined, this)
-      )
-      const theadFilterTrProps = _.splitProps(
-        getTheadFilterTrProps(finalState, undefined, undefined, this)
-      )
+      const theadFilterProps = _.splitProps(getTheadFilterProps(finalState, undefined, undefined, this))
+      const theadFilterTrProps = _.splitProps(getTheadFilterTrProps(finalState, undefined, undefined, this))
       return (
         <TheadComponent
           className={classnames('-filters', theadFilterProps.className)}
@@ -425,22 +375,10 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
 
     const makeFilter = (column, i) => {
       const resizedCol = resized.find(x => x.id === column.id) || {}
-      const width = _.getFirstDefined(
-        resizedCol.value,
-        column.width,
-        column.minWidth
-      )
-      const maxWidth = _.getFirstDefined(
-        resizedCol.value,
-        column.width,
-        column.maxWidth
-      )
-      const theadFilterThProps = _.splitProps(
-        getTheadFilterThProps(finalState, undefined, column, this)
-      )
-      const columnHeaderProps = _.splitProps(
-        column.getHeaderProps(finalState, undefined, column, this)
-      )
+      const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
+      const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
+      const theadFilterThProps = _.splitProps(getTheadFilterThProps(finalState, undefined, column, this))
+      const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
 
       const classes = [
         column.headerClassName,
@@ -463,16 +401,14 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
 
       const ResolvedFilterComponent = column.Filter || FilterComponent
 
-      const isFilterable = _.getFirstDefined(
-        column.filterable,
-        filterable,
-        false
-      )
+      const isFilterable = _.getFirstDefined(column.filterable, filterable, false)
 
       return (
         <ThComponent
           key={i + '-' + column.id}
-          className={classnames(classes)}
+          className={classnames(
+            classes
+          )}
           style={{
             ...styles,
             flex: `${width} 0 auto`,
@@ -481,17 +417,16 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
           }}
           {...rest}
         >
-          {isFilterable
-            ? _.normalizeComponent(
-                ResolvedFilterComponent,
-                {
-                  column,
-                  filter,
-                  onChange: value => this.filterColumn(column, value)
-                },
-                defaultProps.column.Filter
-              )
-            : null}
+          {isFilterable ? (
+            _.normalizeComponent(ResolvedFilterComponent,
+              {
+                column,
+                filter,
+                onChange: (value) => (this.filterColumn(column, value))
+              },
+              defaultProps.column.Filter
+            )
+          ) : null}
         </ThComponent>
       )
     }
@@ -510,11 +445,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       }
       const isExpanded = _.get(expanded, rowInfo.nestingPath)
       const trGroupProps = getTrGroupProps(finalState, rowInfo, undefined, this)
-      const trProps = _.splitProps(
-        getTrProps(finalState, rowInfo, undefined, this)
-      )
+      const trProps = _.splitProps(getTrProps(finalState, rowInfo, undefined, this))
       return (
-        <TrGroupComponent key={rowInfo.nestingPath.join('_')} {...trGroupProps}>
+        <TrGroupComponent
+          key={rowInfo.nestingPath.join('_')}
+          {...trGroupProps}
+        >
           <TrComponent
             className={classnames(
               trProps.className,
@@ -525,25 +461,11 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
           >
             {allVisibleColumns.map((column, i2) => {
               const resizedCol = resized.find(x => x.id === column.id) || {}
-              const show = typeof column.show === 'function'
-                ? column.show()
-                : column.show
-              const width = _.getFirstDefined(
-                resizedCol.value,
-                column.width,
-                column.minWidth
-              )
-              const maxWidth = _.getFirstDefined(
-                resizedCol.value,
-                column.width,
-                column.maxWidth
-              )
-              const tdProps = _.splitProps(
-                getTdProps(finalState, rowInfo, column, this)
-              )
-              const columnProps = _.splitProps(
-                column.getProps(finalState, rowInfo, column, this)
-              )
+              const show = typeof column.show === 'function' ? column.show() : column.show
+              const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
+              const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
+              const tdProps = _.splitProps(getTdProps(finalState, rowInfo, column, this))
+              const columnProps = _.splitProps(column.getProps(finalState, rowInfo, column, this))
 
               const classes = [
                 tdProps.className,
@@ -560,7 +482,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
               const cellInfo = {
                 ...rowInfo,
                 isExpanded,
-                column: { ...column },
+                column: {...column},
                 value: rowInfo.row[column.id],
                 pivoted: column.pivoted,
                 expander: column.expander,
@@ -580,49 +502,41 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
               let isBranch
               let isPreview
 
-              const onExpanderClick = e => {
+              const onExpanderClick = (e) => {
                 let newExpanded = _.clone(expanded)
                 if (isExpanded) {
                   newExpanded = _.set(newExpanded, cellInfo.nestingPath, false)
                 } else {
                   newExpanded = _.set(newExpanded, cellInfo.nestingPath, {})
                 }
-
-                return this.setStateWithData(
-                  {
-                    expanded: newExpanded
-                  },
-                  () => {
-                    onExpandedChange &&
-                      onExpandedChange(newExpanded, cellInfo.nestingPath, e)
-                  }
-                )
+                if (onExpandedChange) {
+                  onExpandedChange(newExpanded, cellInfo.nestingPath, e)
+                }
+                // If expanded is being controlled, don't manage internal state
+                if (this.props.expanded) {
+                  return
+                }
+                return this.setStateWithData({
+                  expanded: newExpanded
+                })
               }
 
               // Default to a standard cell
-              let resolvedCell = _.normalizeComponent(
-                column.Cell,
-                cellInfo,
-                value
-              )
+              let resolvedCell = _.normalizeComponent(column.Cell, cellInfo, value)
 
               // Resolve Renderers
-              const ResolvedAggregatedComponent =
-                column.Aggregated ||
-                (!column.aggregate ? AggregatedComponent : column.Cell)
-              const ResolvedExpanderComponent =
-                column.Expander || ExpanderComponent
-              const ResolvedPivotValueComponent =
-                column.PivotValue || PivotValueComponent
-              const DefaultResolvedPivotComponent =
-                PivotComponent ||
-                (props =>
-                  <div>
-                    <ResolvedExpanderComponent {...props} />
-                    <ResolvedPivotValueComponent {...props} />
-                  </div>)
-              const ResolvedPivotComponent =
-                column.Pivot || DefaultResolvedPivotComponent
+              const ResolvedAggregatedComponent = column.Aggregated || (!column.aggregate ? AggregatedComponent : column.Cell)
+              const ResolvedExpanderComponent = column.Expander || ExpanderComponent
+              const ResolvedPivotValueComponent = column.PivotValue || PivotValueComponent
+              const DefaultResolvedPivotComponent = PivotComponent || (
+                  props => (
+                    <div>
+                      <ResolvedExpanderComponent {...props} />
+                      <ResolvedPivotValueComponent {...props} />
+                    </div>
+                  )
+                )
+              const ResolvedPivotComponent = column.Pivot || DefaultResolvedPivotComponent
 
               // Is this cell expandable?
               if (cellInfo.pivoted || cellInfo.expander) {
@@ -644,47 +558,30 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
 
               if (cellInfo.pivoted) {
                 // Is this column a branch?
-                isBranch =
-                  rowInfo.row[pivotIDKey] === column.id && cellInfo.subRows
+                isBranch = rowInfo.row[pivotIDKey] === column.id &&
+                  cellInfo.subRows
                 // Should this column be blank?
-                isPreview =
-                  pivotBy.indexOf(column.id) >
-                    pivotBy.indexOf(rowInfo.row[pivotIDKey]) && cellInfo.subRows
+                isPreview = pivotBy.indexOf(column.id) > pivotBy.indexOf(rowInfo.row[pivotIDKey]) &&
+                  cellInfo.subRows
                 // Pivot Cell Render Override
                 if (isBranch) {
                   // isPivot
-                  resolvedCell = _.normalizeComponent(
-                    ResolvedPivotComponent,
-                    {
-                      ...cellInfo,
-                      value: row[pivotValKey]
-                    },
-                    row[pivotValKey]
-                  )
+                  resolvedCell = _.normalizeComponent(ResolvedPivotComponent, {
+                    ...cellInfo,
+                    value: row[pivotValKey]
+                  }, row[pivotValKey])
                 } else if (isPreview) {
                   // Show the pivot preview
-                  resolvedCell = _.normalizeComponent(
-                    ResolvedAggregatedComponent,
-                    cellInfo,
-                    value
-                  )
+                  resolvedCell = _.normalizeComponent(ResolvedAggregatedComponent, cellInfo, value)
                 } else {
                   resolvedCell = null
                 }
               } else if (cellInfo.aggregated) {
-                resolvedCell = _.normalizeComponent(
-                  ResolvedAggregatedComponent,
-                  cellInfo,
-                  value
-                )
+                resolvedCell = _.normalizeComponent(ResolvedAggregatedComponent, cellInfo, value)
               }
 
               if (cellInfo.expander) {
-                resolvedCell = _.normalizeComponent(
-                  ResolvedExpanderComponent,
-                  cellInfo,
-                  row[pivotValKey]
-                )
+                resolvedCell = _.normalizeComponent(ResolvedExpanderComponent, cellInfo, row[pivotValKey])
                 if (pivotBy) {
                   if (cellInfo.groupedByPivot) {
                     resolvedCell = null
@@ -719,36 +616,29 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
               )
             })}
           </TrComponent>
-          {rowInfo.subRows &&
+          {(
+            rowInfo.subRows &&
             isExpanded &&
-            rowInfo.subRows.map((d, i) =>
-              makePageRow(d, i, rowInfo.nestingPath)
-            )}
-          {SubComponent &&
-            !rowInfo.subRows &&
-            isExpanded &&
-            SubComponent(rowInfo)}
+            rowInfo.subRows.map((d, i) => makePageRow(d, i, rowInfo.nestingPath))
+          )}
+          {SubComponent && !rowInfo.subRows && isExpanded && SubComponent(rowInfo)}
         </TrGroupComponent>
       )
     }
 
     const makePadRow = (row, i) => {
-      const trGroupProps = getTrGroupProps(
-        finalState,
-        undefined,
-        undefined,
-        this
-      )
-      const trProps = _.splitProps(
-        getTrProps(finalState, undefined, undefined, this)
-      )
+      const trGroupProps = getTrGroupProps(finalState, undefined, undefined, this)
+      const trProps = _.splitProps(getTrProps(finalState, undefined, undefined, this))
       return (
-        <TrGroupComponent key={i} {...trGroupProps}>
+        <TrGroupComponent
+          key={i}
+          {...trGroupProps}
+        >
           <TrComponent
             className={classnames(
               '-padRow',
               (pageRows.length + i) % 2 ? '-even' : '-odd',
-              trProps.className
+              trProps.className,
             )}
             style={trProps.style || {}}
           >
@@ -760,26 +650,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
 
     const makePadColumn = (column, i) => {
       const resizedCol = resized.find(x => x.id === column.id) || {}
-      const show = typeof column.show === 'function'
-        ? column.show()
-        : column.show
-      let width = _.getFirstDefined(
-        resizedCol.value,
-        column.width,
-        column.minWidth
-      )
+      const show = typeof column.show === 'function' ? column.show() : column.show
+      let width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
       let flex = width
-      let maxWidth = _.getFirstDefined(
-        resizedCol.value,
-        column.width,
-        column.maxWidth
-      )
-      const tdProps = _.splitProps(
-        getTdProps(finalState, undefined, column, this)
-      )
-      const columnProps = _.splitProps(
-        column.getProps(finalState, undefined, column, this)
-      )
+      let maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
+      const tdProps = _.splitProps(getTdProps(finalState, undefined, column, this))
+      const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this))
 
       const classes = [
         tdProps.className,
@@ -796,7 +672,10 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       return (
         <TdComponent
           key={i + '-' + column.id}
-          className={classnames(classes, !show && 'hidden')}
+          className={classnames(
+            classes,
+            !show && 'hidden'
+          )}
           style={{
             ...styles,
             flex: `${flex} 0 auto`,
@@ -804,15 +683,15 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
             maxWidth: `${maxWidth}px`
           }}
           {...tdProps.rest}
-        />
+        >
+          &nbsp;
+        </TdComponent>
       )
     }
 
     const makeColumnFooters = () => {
       const tFootProps = getTfootProps(finalState, undefined, undefined, this)
-      const tFootTrProps = _.splitProps(
-        getTfootTrProps(finalState, undefined, undefined, this)
-      )
+      const tFootTrProps = _.splitProps(getTfootTrProps(finalState, undefined, undefined, this))
       return (
         <TfootComponent
           className={tFootProps.className}
@@ -823,7 +702,9 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
           {...tFootProps.rest}
         >
           <TrComponent
-            className={classnames(tFootTrProps.className)}
+            className={classnames(
+              tFootTrProps.className
+            )}
             style={tFootTrProps.style}
             {...tFootTrProps.rest}
           >
@@ -835,28 +716,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
 
     const makeColumnFooter = (column, i) => {
       const resizedCol = resized.find(x => x.id === column.id) || {}
-      const show = typeof column.show === 'function'
-        ? column.show()
-        : column.show
-      const width = _.getFirstDefined(
-        resizedCol.value,
-        column.width,
-        column.minWidth
-      )
-      const maxWidth = _.getFirstDefined(
-        resizedCol.value,
-        column.width,
-        column.maxWidth
-      )
-      const tFootTdProps = _.splitProps(
-        getTfootTdProps(finalState, undefined, undefined, this)
-      )
-      const columnProps = _.splitProps(
-        column.getProps(finalState, undefined, column, this)
-      )
-      const columnFooterProps = _.splitProps(
-        column.getFooterProps(finalState, undefined, column, this)
-      )
+      const show = typeof column.show === 'function' ? column.show() : column.show
+      const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
+      const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
+      const tFootTdProps = _.splitProps(getTfootTdProps(finalState, undefined, undefined, this))
+      const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this))
+      const columnFooterProps = _.splitProps(column.getFooterProps(finalState, undefined, column, this))
 
       const classes = [
         tFootTdProps.className,
@@ -875,7 +740,10 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       return (
         <TdComponent
           key={i + '-' + column.id}
-          className={classnames(classes, !show && 'hidden')}
+          className={classnames(
+            classes,
+            !show && 'hidden'
+          )}
           style={{
             ...styles,
             flex: `${width} 0 auto`,
@@ -894,95 +762,78 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       )
     }
 
-    const makePagination = () => {
-      const paginationProps = _.splitProps(
-        getPaginationProps(finalState, undefined, undefined, this)
-      )
-      return (
-        <PaginationComponent
-          {...resolvedState}
-          pages={pages}
-          canPrevious={canPrevious}
-          canNext={canNext}
-          onPageChange={this.onPageChange}
-          onPageSizeChange={this.onPageSizeChange}
-          className={paginationProps.className}
-          style={paginationProps.style}
-          {...paginationProps.rest}
-        />
-      )
-    }
-
-    const rootProps = _.splitProps(
-      getProps(finalState, undefined, undefined, this)
-    )
-    const tableProps = _.splitProps(
-      getTableProps(finalState, undefined, undefined, this)
-    )
-    const tBodyProps = _.splitProps(
-      getTbodyProps(finalState, undefined, undefined, this)
-    )
+    const rootProps = _.splitProps(getProps(finalState, undefined, undefined, this))
+    const tableProps = _.splitProps(getTableProps(finalState, undefined, undefined, this))
+    const tBodyProps = _.splitProps(getTbodyProps(finalState, undefined, undefined, this))
+    const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
     const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
     const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
     const resizerProps = getResizerProps(finalState, undefined, undefined, this)
 
-    const makeTable = () => {
-      const pagination = makePagination()
-      return (
-        <div
-          className={classnames('ReactTable', className, rootProps.className)}
-          style={{
-            ...style,
-            ...rootProps.style
-          }}
-          {...rootProps.rest}
+    const makeTable = () => (
+      <div
+        className={classnames(
+          'ReactTable',
+          className,
+          rootProps.className
+        )}
+        style={{
+          ...style,
+          ...rootProps.style
+        }}
+        {...rootProps.rest}
+      >
+        <TableComponent
+          className={classnames(
+            tableProps.className,
+            currentlyResizing ? 'rt-resizing' : ''
+          )}
+          style={tableProps.style}
+          {...tableProps.rest}
         >
-          {showPagination && showPaginationTop
-            ? <div className="pagination-top">
-                {pagination}
-              </div>
-            : null}
-          <TableComponent
-            className={classnames(
-              tableProps.className,
-              currentlyResizing ? 'rt-resizing' : ''
-            )}
-            style={tableProps.style}
-            {...tableProps.rest}
+          {hasHeaderGroups ? makeHeaderGroups() : null}
+          {makeHeaders()}
+          {hasFilters ? makeFilters() : null}
+          <TbodyComponent
+            className={classnames(tBodyProps.className)}
+            style={{
+              ...tBodyProps.style,
+              minWidth: `${rowMinWidth}px`
+            }}
+            {...tBodyProps.rest}
           >
-            {hasHeaderGroups ? makeHeaderGroups() : null}
-            {makeHeaders()}
-            {hasFilters ? makeFilters() : null}
-            <TbodyComponent
-              className={classnames(tBodyProps.className)}
-              style={{
-                ...tBodyProps.style,
-                minWidth: `${rowMinWidth}px`
-              }}
-              {...tBodyProps.rest}
-            >
-              {pageRows.map((d, i) => makePageRow(d, i))}
-              {padRows.map(makePadRow)}
-            </TbodyComponent>
-            {hasColumnFooter ? makeColumnFooters() : null}
-          </TableComponent>
-          {showPagination && showPaginationBottom
-            ? <div className="pagination-bottom">
-                {pagination}
-              </div>
-            : null}
-          {!pageRows.length &&
-            <NoDataComponent {...noDataProps}>
-              {_.normalizeComponent(noDataText)}
-            </NoDataComponent>}
-          <LoadingComponent
-            loading={loading}
-            loadingText={loadingText}
-            {...loadingProps}
+            {pageRows.map((d, i) => makePageRow(d, i))}
+            {padRows.map(makePadRow)}
+          </TbodyComponent>
+          {hasColumnFooter ? makeColumnFooters() : null}
+        </TableComponent>
+        {showPagination ? (
+          <PaginationComponent
+            {...resolvedState}
+            pages={pages}
+            canPrevious={canPrevious}
+            canNext={canNext}
+            onPageChange={this.onPageChange}
+            onPageSizeChange={this.onPageSizeChange}
+            className={paginationProps.className}
+            style={paginationProps.style}
+            {...paginationProps.rest}
           />
-        </div>
-      )
-    }
+        ) : null}
+        {!pageRows.length && (
+          <NoDataComponent
+            {...noDataProps}
+          >
+            {_.normalizeComponent(noDataText)}
+          </NoDataComponent>
+        )}
+        <LoadingComponent
+          loading={loading}
+          loadingText={loadingText}
+          {...loadingProps}
+        />
+      </div>
+    )
 
     // childProps are optionally passed to a function-as-a-child
     return children ? children(finalState, makeTable, this) : makeTable()

src/index.styl

@@ -4,13 +4,10 @@ $expandSize = 7px
 
 .ReactTable
   position:relative
-  display: flex
-  flex-direction: column
   border: 1px solid alpha(black, .1)
   *
     box-sizing: border-box
   .rt-table
-    flex: 1
     display: flex
     flex-direction: column
     align-items: stretch
@@ -19,9 +16,7 @@ $expandSize = 7px
     overflow: auto
 
   .rt-thead
-    flex: 1 0 auto
     display: flex
-    // overflow-y: scroll
     flex-direction: column
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -96,10 +91,8 @@ $expandSize = 7px
       margin-top: -10px
 
   .rt-tbody
-    flex: 99999 1 auto
     display: flex
     flex-direction: column
-    overflow: auto
     // z-index:0
     .rt-tr-group
       border-bottom: solid 1px alpha(black, .05)
@@ -112,12 +105,10 @@ $expandSize = 7px
     .rt-expandable
       cursor: pointer
   .rt-tr-group
-    flex: 1 0 auto
     display: flex
     flex-direction: column
     align-items: stretch
   .rt-tr
-    flex: 1 0 auto
     display: inline-flex
   .rt-th
   .rt-td
@@ -200,7 +191,7 @@ $expandSize = 7px
       appearance:none
       display:block
       width:100%
-      height:100%
+      height: 100%
       border: 0
       border-radius: 3px
       padding: 6px
@@ -305,8 +296,6 @@ $expandSize = 7px
   input:not([type="checkbox"]):not([type="radio"])
   select
     appearance: none
-    &::-ms-expand
-      display: none
 
   .select-wrap
     position:relative

src/lifecycle.js

@@ -1,118 +1,101 @@
-export default Base =>
-  class extends Base {
-    componentWillMount () {
-      this.setStateWithData(this.getDataModel(this.getResolvedState()))
-    }
+export default Base => class extends Base {
 
-    componentDidMount () {
-      this.fireFetchData()
-    }
+  componentWillMount () {
+    this.setStateWithData(this.getDataModel(this.getResolvedState()))
+  }
 
-    componentWillReceiveProps (nextProps, nextState) {
-      const oldState = this.getResolvedState()
-      const newState = this.getResolvedState(nextProps, nextState)
+  componentDidMount () {
+    this.fireFetchData()
+  }
 
-      // Do a deep compare of new and old `defaultOption` and
-      // if they are different reset `option = defaultOption`
-      const defaultableOptions = ['sorted', 'filtered', 'resized', 'expanded']
-      defaultableOptions.forEach(x => {
-        const defaultName = `default${x.charAt(0).toUpperCase() + x.slice(1)}`
-        if (
-          JSON.stringify(oldState[defaultName]) !==
-          JSON.stringify(newState[defaultName])
-        ) {
-          newState[x] = newState[defaultName]
-        }
-      })
+  componentWillReceiveProps (nextProps, nextState) {
+    const oldState = this.getResolvedState()
+    const newState = this.getResolvedState(nextProps, nextState)
 
-      // If they change these table options, we need to reset defaults
-      // or else we could get into a state where the user has changed the UI
-      // and then disabled the ability to change it back.
-      // e.g. If `filterable` has changed, set `filtered = defaultFiltered`
-      const resettableOptions = ['sortable', 'filterable', 'resizable']
-      resettableOptions.forEach(x => {
-        if (oldState[x] !== newState[x]) {
-          const baseName = x.replace('able', '')
-          const optionName = `${baseName}ed`
-          const defaultName = `default${optionName.charAt(0).toUpperCase() +
-            optionName.slice(1)}`
-          newState[optionName] = newState[defaultName]
-        }
-      })
-
-      // Props that trigger a data update
-      if (
-        oldState.data !== newState.data ||
-        oldState.columns !== newState.columns ||
-        oldState.pivotBy !== newState.pivotBy ||
-        oldState.sorted !== newState.sorted ||
-        oldState.filtered !== newState.filtered
-      ) {
-        this.setStateWithData(this.getDataModel(newState))
+    // Do a deep compare of new and old `defaultOption` and
+    // if they are different reset `option = defaultOption`
+    const defaultableOptions = ['sorted', 'filtered', 'resized', 'expanded']
+    defaultableOptions.forEach(x => {
+      const defaultName = `default${x.charAt(0).toUpperCase() + x.slice(1)}`
+      if (JSON.stringify(oldState[defaultName]) !== JSON.stringify(newState[defaultName])) {
+        newState[x] = newState[defaultName]
       }
-    }
+    })
 
-    setStateWithData (newState, cb) {
-      const oldState = this.getResolvedState()
-      const newResolvedState = this.getResolvedState({}, newState)
-      const { freezeWhenExpanded } = newResolvedState
-
-      // Default to unfrozen state
-      newResolvedState.frozen = false
-
-      // If freezeWhenExpanded is set, check for frozen conditions
-      if (freezeWhenExpanded) {
-        // if any rows are expanded, freeze the existing data and sorting
-        const keys = Object.keys(newResolvedState.expanded)
-        for (var i = 0; i < keys.length; i++) {
-          if (newResolvedState.expanded[keys[i]]) {
-            newResolvedState.frozen = true
-            break
-          }
-        }
+    // If they change these table options, we need to reset defaults
+    // or else we could get into a state where the user has changed the UI
+    // and then disabled the ability to change it back.
+    // e.g. If `filterable` has changed, set `filtered = defaultFiltered`
+    const resettableOptions = ['sortable', 'filterable', 'resizable']
+    resettableOptions.forEach(x => {
+      if (oldState[x] !== newState[x]) {
+        const baseName = x.replace('able', '')
+        const optionName = `${baseName}ed`
+        const defaultName = `default${optionName.charAt(0).toUpperCase() + optionName.slice(1)}`
+        newState[optionName] = newState[defaultName]
       }
+    })
 
-      // If the data isn't frozen and either the data or
-      // sorting model has changed, update the data
-      if (
-        (oldState.frozen && !newResolvedState.frozen) ||
-        oldState.sorted !== newResolvedState.sorted ||
-        oldState.filtered !== newResolvedState.filtered ||
-        oldState.showFilters !== newResolvedState.showFilters ||
-        (!newResolvedState.frozen &&
-          oldState.resolvedData !== newResolvedState.resolvedData)
-      ) {
-        // Handle collapseOnsortedChange & collapseOnDataChange
-        if (
-          (oldState.sorted !== newResolvedState.sorted &&
-            this.props.collapseOnSortingChange) ||
-          oldState.filtered !== newResolvedState.filtered ||
-          oldState.showFilters !== newResolvedState.showFilters ||
-          (!newResolvedState.frozen &&
-            oldState.resolvedData !== newResolvedState.resolvedData &&
-            this.props.collapseOnDataChange)
-        ) {
-          newResolvedState.expanded = {}
-        }
-
-        Object.assign(newResolvedState, this.getSortedData(newResolvedState))
-      }
-
-      // Calculate pageSize all the time
-      if (newResolvedState.sortedData) {
-        newResolvedState.pages = newResolvedState.manual
-          ? newResolvedState.pages
-          : Math.ceil(
-              newResolvedState.sortedData.length / newResolvedState.pageSize
-            )
-        newResolvedState.page = Math.max(
-          newResolvedState.page >= newResolvedState.pages
-            ? newResolvedState.pages - 1
-            : newResolvedState.page,
-          0
-        )
-      }
-
-      return this.setState(newResolvedState, cb)
+    // Props that trigger a data update
+    if (
+      oldState.data !== newState.data ||
+      oldState.columns !== newState.columns ||
+      oldState.pivotBy !== newState.pivotBy ||
+      oldState.sorted !== newState.sorted ||
+      oldState.filtered !== newState.filtered
+    ) {
+      this.setStateWithData(this.getDataModel(newState))
     }
   }
+
+  setStateWithData (newState, cb) {
+    const oldState = this.getResolvedState()
+    const newResolvedState = this.getResolvedState({}, newState)
+    const {freezeWhenExpanded} = newResolvedState
+
+    // Default to unfrozen state
+    newResolvedState.frozen = false
+
+    // If freezeWhenExpanded is set, check for frozen conditions
+    if (freezeWhenExpanded) {
+      // if any rows are expanded, freeze the existing data and sorting
+      const keys = Object.keys(newResolvedState.expanded)
+      for (var i = 0; i < keys.length; i++) {
+        if (newResolvedState.expanded[keys[i]]) {
+          newResolvedState.frozen = true
+          break
+        }
+      }
+    }
+
+    // If the data isn't frozen and either the data or
+    // sorting model has changed, update the data
+    if (
+      (oldState.frozen && !newResolvedState.frozen) ||
+      oldState.sorted !== newResolvedState.sorted ||
+      oldState.filtered !== newResolvedState.filtered ||
+      oldState.showFilters !== newResolvedState.showFilters ||
+      (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
+    ) {
+      // Handle collapseOnsortedChange & collapseOnDataChange
+      if (
+        (oldState.sorted !== newResolvedState.sorted && this.props.collapseOnSortingChange) ||
+        (oldState.filtered !== newResolvedState.filtered) ||
+        (oldState.showFilters !== newResolvedState.showFilters) ||
+        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnDataChange)
+      ) {
+        newResolvedState.expanded = {}
+      }
+
+      Object.assign(newResolvedState, this.getSortedData(newResolvedState))
+    }
+
+    // Calculate pageSize all the time
+    if (newResolvedState.sortedData) {
+      newResolvedState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.sortedData.length / newResolvedState.pageSize)
+      newResolvedState.page = Math.max(newResolvedState.page >= newResolvedState.pages ? newResolvedState.pages - 1 : newResolvedState.page, 0)
+    }
+
+    return this.setState(newResolvedState, cb)
+  }
+}

src/pagination.js

@@ -3,8 +3,9 @@ import classnames from 'classnames'
 //
 // import _ from './utils'
 
-const defaultButton = props =>
+const defaultButton = (props) => (
   <button type='button' {...props} className='-btn'>{props.children}</button>
+)
 
 export default class ReactTablePagination extends Component {
   constructor (props) {
@@ -15,12 +16,12 @@ export default class ReactTablePagination extends Component {
     this.applyPage = this.applyPage.bind(this)
 
     this.state = {
-      page: props.page,
+      page: props.page
     }
   }
 
   componentWillReceiveProps (nextProps) {
-    this.setState({ page: nextProps.page })
+    this.setState({page: nextProps.page})
   }
 
   getSafePage (page) {
@@ -32,7 +33,7 @@ export default class ReactTablePagination extends Component {
 
   changePage (page) {
     page = this.getSafePage(page)
-    this.setState({ page })
+    this.setState({page})
     if (this.props.page !== page) {
       this.props.onPageChange(page)
     }
@@ -59,7 +60,7 @@ export default class ReactTablePagination extends Component {
       onPageSizeChange,
       className,
       PreviousComponent = defaultButton,
-      NextComponent = defaultButton,
+      NextComponent = defaultButton
     } = this.props
 
     return (
@@ -69,7 +70,7 @@ export default class ReactTablePagination extends Component {
       >
         <div className='-previous'>
           <PreviousComponent
-            onClick={e => {
+            onClick={(e) => {
               if (!canPrevious) return
               this.changePage(page - 1)
             }}
@@ -80,51 +81,53 @@ export default class ReactTablePagination extends Component {
         </div>
         <div className='-center'>
           <span className='-pageInfo'>
-            {this.props.pageText}{' '}
-            {showPageJump
-              ? <div className='-pageJump'>
-                  <input
-                    type={this.state.page === '' ? 'text' : 'number'}
-                    onChange={e => {
-                      const val = e.target.value
-                      const page = val - 1
-                      if (val === '') {
-                        return this.setState({ page: val })
-                      }
-                      this.setState({ page: this.getSafePage(page) })
-                    }}
-                    value={this.state.page === '' ? '' : this.state.page + 1}
-                    onBlur={this.applyPage}
-                    onKeyPress={e => {
-                      if (e.which === 13 || e.keyCode === 13) {
-                        this.applyPage()
-                      }
-                    }}
-                  />
-                </div>
-              : <span className='-currentPage'>{page + 1}</span>}{' '}
-            {this.props.ofText}{' '}
-            <span className='-totalPages'>{pages || 1}</span>
+            {this.props.pageText} {showPageJump ? (
+              <div className='-pageJump'>
+                <input
+                  type={this.state.page === '' ? 'text' : 'number'}
+                  onChange={e => {
+                    const val = e.target.value
+                    const page = val - 1
+                    if (val === '') {
+                      return this.setState({page: val})
+                    }
+                    this.setState({page: this.getSafePage(page)})
+                  }}
+                  value={this.state.page === '' ? '' : this.state.page + 1}
+                  onBlur={this.applyPage}
+                  onKeyPress={e => {
+                    if (e.which === 13 || e.keyCode === 13) {
+                      this.applyPage()
+                    }
+                  }}
+                />
+              </div>
+            ) : (
+              <span className='-currentPage'>{page + 1}</span>
+            )} {this.props.ofText} <span className='-totalPages'>{pages}</span>
           </span>
-          {showPageSizeOptions &&
+          {showPageSizeOptions && (
             <span className='select-wrap -pageSizeOptions'>
               <select
-                onChange={e => onPageSizeChange(Number(e.target.value))}
+                onChange={(e) => onPageSizeChange(Number(e.target.value))}
                 value={pageSize}
               >
                 {pageSizeOptions.map((option, i) => {
                   return (
-                    <option key={i} value={option}>
+                    <option
+                      key={i}
+                      value={option}>
                       {option} {this.props.rowsText}
                     </option>
                   )
                 })}
               </select>
-            </span>}
+            </span>
+          )}
         </div>
         <div className='-next'>
           <NextComponent
-            onClick={e => {
+            onClick={(e) => {
               if (!canNext) return
               this.changePage(page + 1)
             }}

src/utils.js

@@ -18,7 +18,7 @@ export default {
   splitProps,
   compactObject,
   isSortingDesc,
-  normalizeComponent,
+  normalizeComponent
 }
 
 function get (obj, path, def) {
@@ -94,14 +94,12 @@ function remove (a, b) {
 
 function clone (a) {
   try {
-    return JSON.parse(
-      JSON.stringify(a, (key, value) => {
-        if (typeof value === 'function') {
-          return value.toString()
-        }
-        return value
-      })
-    )
+    return JSON.parse(JSON.stringify(a, (key, value) => {
+      if (typeof value === 'function') {
+        return value.toString()
+      }
+      return value
+    }))
   } catch (e) {
     return a
   }
@@ -122,10 +120,14 @@ function sum (arr) {
 }
 
 function makeTemplateComponent (compClass) {
-  return ({ children, className, ...rest }) =>
-    <div className={classnames(compClass, className)} {...rest}>
+  return ({children, className, ...rest}) => (
+    <div
+      className={classnames(compClass, className)}
+      {...rest}
+    >
       {children}
     </div>
+  )
 }
 
 function groupBy (xs, key) {
@@ -147,10 +149,10 @@ function isArray (a) {
 
 function makePathArray (obj) {
   return flattenDeep(obj)
-    .join('.')
-    .replace('[', '.')
-    .replace(']', '')
-    .split('.')
+      .join('.')
+      .replace('[', '.')
+      .replace(']', '')
+      .split('.')
 }
 
 function flattenDeep (arr, newArr = []) {
@@ -164,22 +166,18 @@ function flattenDeep (arr, newArr = []) {
   return newArr
 }
 
-function splitProps ({ className, style, ...rest }) {
+function splitProps ({className, style, ...rest}) {
   return {
     className,
     style,
-    rest,
+    rest
   }
 }
 
 function compactObject (obj) {
   const newObj = {}
   for (var key in obj) {
-    if (
-      obj.hasOwnProperty(key) &&
-      obj[key] !== undefined &&
-      typeof obj[key] !== 'undefined'
-    ) {
+    if (obj.hasOwnProperty(key) && obj[key] !== undefined && typeof obj[key] !== 'undefined') {
       newObj[key] = obj[key]
     }
   }
@@ -191,9 +189,11 @@ function isSortingDesc (d) {
 }
 
 function normalizeComponent (Comp, params = {}, fallback = Comp) {
-  return typeof Comp === 'function'
-    ? Object.getPrototypeOf(Comp).isReactComponent
-      ? <Comp {...params} />
-      : Comp(params)
-    : fallback
+  return typeof Comp === 'function' ? (
+    Object.getPrototypeOf(Comp).isReactComponent ? (
+      <Comp
+        {...params}
+      />
+    ) : Comp(params)
+  ) : fallback
 }

stories/CellRenderers.js

@@ -1,17 +1,16 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(5553), d => {
       const statusChance = Math.random()
       return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
         progress: Math.floor(Math.random() * 100),
         status: statusChance > 0.66 ? 'relationship'
           : statusChance > 0.33 ? 'complicated'
@@ -99,7 +98,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./CellRenderers')
+const source = require('!raw-loader!./CellRenderers')
 
 export default () => (
   <div>

stories/ControlledTable.js

@@ -1,14 +1,13 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
 const data = _.map(_.range(5553), d => {
   return {
-    firstName: namor.generate({ words: 1, numbers: 0 }),
-    lastName: namor.generate({ words: 1, numbers: 0 }),
+    firstName: namor.generate({ words: 1, numLen: 0 }),
+    lastName: namor.generate({ words: 1, numLen: 0 }),
     age: Math.floor(Math.random() * 30)
   }
 })
@@ -31,7 +30,7 @@ const columns = [{
   }]
 }]
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   constructor () {
     super()
     this.state = {
@@ -79,7 +78,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./ControlledTable')
+const source = require('!raw-loader!./ControlledTable')
 
 export default () => (
   <div>

stories/CustomComponentProps.js

@@ -1,16 +1,15 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
         age: Math.floor(Math.random() * 30)
       }
     })
@@ -66,7 +65,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./CustomComponentProps')
+const source = require('!raw-loader!./CustomComponentProps')
 
 export default () => (
   <div>

stories/CustomExpanderPosition.js

@@ -1,16 +1,15 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
-        firstName: namor.generate({words: 1, numbers: 0}),
-        lastName: namor.generate({words: 1, numbers: 0}),
+        firstName: namor.generate({words: 1, numLen: 0}),
+        lastName: namor.generate({words: 1, numLen: 0}),
         age: Math.floor(Math.random() * 30)
       }
     })
@@ -71,7 +70,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./CustomExpanderPosition')
+const source = require('!raw-loader!./CustomExpanderPosition')
 
 export default () => (
   <div>

stories/CustomSorting.js

@@ -1,16 +1,15 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
         age: Math.floor(Math.random() * 30)
       }
     })
@@ -68,7 +67,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./CustomSorting')
+const source = require('!raw-loader!./CustomSorting')
 
 export default () => (
   <div>

stories/CustomWidths.js

@@ -1,16 +1,15 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
         age: Math.floor(Math.random() * 30)
       }
     })
@@ -57,7 +56,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./CustomWidths')
+const source = require('!raw-loader!./CustomWidths')
 
 export default () => (
   <div>

stories/DefaultSorting.js

@@ -1,16 +1,15 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
         age: Math.floor(Math.random() * 30)
       }
     })
@@ -58,7 +57,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./DefaultSorting')
+const source = require('!raw-loader!./DefaultSorting')
 
 export default () => (
   <div>

stories/EditableTable.js

@@ -1,9 +1,8 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   constructor (props, context) {
     super(props, context)
     this.renderEditable = this.renderEditable.bind(this)
@@ -60,7 +59,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./EditableTable')
+const source = require('!raw-loader!./EditableTable')
 
 export default () => (
   <div>

stories/Filtering.js

@@ -1,20 +1,19 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
 import CodeHighlight from './components/codeHighlight'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   constructor (props) {
     super(props)
 
     const data = _.map(_.range(5553), d => {
       return {
-        firstName: namor.generate({words: 1, numbers: 0}),
-        lastName: namor.generate({words: 1, numbers: 0}),
+        firstName: namor.generate({words: 1, numLen: 0}),
+        lastName: namor.generate({words: 1, numLen: 0}),
         age: Math.floor(Math.random() * 30)
       }
     })
@@ -88,7 +87,7 @@ class Story extends React.PureComponent {
 
     return (
       <div>
-        <div>
+        <div style={{float: 'left'}}>
           <h1>Table Options</h1>
           <table>
             <tbody>
@@ -112,7 +111,7 @@ class Story extends React.PureComponent {
             </tbody>
           </table>
         </div>
-        <div className='table-wrap'>
+        <div className='table-wrap' style={{paddingLeft: 240}}>
           <ReactTable
             className='-striped -highlight'
             data={this.state.data}
@@ -184,7 +183,7 @@ class Story extends React.PureComponent {
 }
 
 // Source Code
-const source = require('!raw!./Filtering')
+const source = require('!raw-loader!./Filtering')
 
 export default () => (
   <div>

stories/Footers.js

@@ -1,16 +1,15 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
         age: Math.floor(Math.random() * 30)
       }
     })
@@ -82,7 +81,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./Footers')
+const source = require('!raw-loader!./Footers')
 
 export default () => (
   <div>

stories/FunctionalRendering.js

@@ -1,10 +1,9 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 import JSONTree from 'react-json-tree'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
 const JSONtheme = {
   scheme: 'monokai',
@@ -27,12 +26,12 @@ const JSONtheme = {
   base0F: '#cc6633'
 }
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
         age: Math.floor(Math.random() * 30)
       }
     })
@@ -127,7 +126,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./FunctionalRendering')
+const source = require('!raw-loader!./FunctionalRendering')
 
 export default () => (
   <div>

stories/NoDataText.js

@@ -1,9 +1,8 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const columns = [{
       Header: 'Name',
@@ -47,7 +46,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./NoDataText')
+const source = require('!raw-loader!./NoDataText')
 
 export default () => (
   <div>

stories/OneHundredKRows.js

@@ -1,16 +1,15 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(100000), d => {
       return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
         age: Math.floor(Math.random() * 30),
         visits: Math.floor(Math.random() * 100)
       }
@@ -87,7 +86,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./OneHundredKRows')
+const source = require('!raw-loader!./OneHundredKRows')
 
 export default () => (
   <div>

stories/Pivoting.js

@@ -1,16 +1,15 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(1000), d => {
       return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
         age: Math.floor(Math.random() * 30),
         visits: Math.floor(Math.random() * 100)
       }
@@ -64,7 +63,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./Pivoting')
+const source = require('!raw-loader!./Pivoting')
 
 export default () => (
   <div>

stories/PivotingOptions.js

@@ -1,16 +1,15 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(1000), d => {
       return {
-        firstName: namor.generate({words: 1, numbers: 0}),
-        lastName: namor.generate({words: 1, numbers: 0}),
+        firstName: namor.generate({words: 1, numLen: 0}),
+        lastName: namor.generate({words: 1, numLen: 0}),
         age: Math.floor(Math.random() * 30),
         visits: Math.floor(Math.random() * 100)
       }
@@ -122,7 +121,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./PivotingOptions')
+const source = require('!raw-loader!./PivotingOptions')
 
 export default () => (
   <div>

stories/PivotingSubComponents.js

@@ -1,16 +1,15 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(1000), d => {
       return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
         age: Math.floor(Math.random() * 30),
         visits: Math.floor(Math.random() * 100)
       }
@@ -90,7 +89,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./PivotingSubComponents')
+const source = require('!raw-loader!./PivotingSubComponents')
 
 export default () => (
   <div>

stories/ServerSide.js

@@ -1,14 +1,13 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
 const rawData = _.map(_.range(3424), d => {
   return {
-    firstName: namor.generate({ words: 1, numbers: 0 }),
-    lastName: namor.generate({ words: 1, numbers: 0 }),
+    firstName: namor.generate({ words: 1, numLen: 0 }),
+    lastName: namor.generate({ words: 1, numLen: 0 }),
     age: Math.floor(Math.random() * 30)
   }
 })
@@ -49,7 +48,7 @@ const requestData = (pageSize, page, sorted, filtered) => {
   })
 }
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   constructor () {
     super()
     this.state = {
@@ -111,7 +110,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./ServerSide')
+const source = require('!raw-loader!./ServerSide')
 
 export default () => (
   <div>

stories/Simple.js

@@ -1,21 +1,20 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
         age: Math.floor(Math.random() * 30),
         children: _.map(_.range(10), d => {
           return {
-            firstName: namor.generate({ words: 1, numbers: 0 }),
-            lastName: namor.generate({ words: 1, numbers: 0 }),
+            firstName: namor.generate({ words: 1, numLen: 0 }),
+            lastName: namor.generate({ words: 1, numLen: 0 }),
             age: Math.floor(Math.random() * 30)
           }
         })
@@ -48,9 +47,6 @@ class Story extends React.PureComponent {
             data={data}
             columns={columns}
             defaultPageSize={10}
-            showPagination
-            showPaginationTop
-            showPaginationBottom
           />
         </div>
         <div style={{textAlign: 'center'}}>
@@ -63,7 +59,7 @@ class Story extends React.PureComponent {
 }
 
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./MultiplePagers')
+const source = require('!raw-loader!./Simple')
 
 export default () => (
   <div>

stories/SubComponents.js

@@ -1,18 +1,17 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   constructor (props) {
     super(props)
 
     const data = _.map(_.range(5553), d => {
       return {
-        firstName: namor.generate({words: 1, numbers: 0}),
-        lastName: namor.generate({words: 1, numbers: 0}),
+        firstName: namor.generate({words: 1, numLen: 0}),
+        lastName: namor.generate({words: 1, numLen: 0}),
         age: Math.floor(Math.random() * 30)
       }
     })
@@ -57,7 +56,7 @@ class Story extends React.PureComponent {
 
     return (
       <div>
-        <div>
+        <div style={{float: 'left'}}>
           <h1>Table Options</h1>
           <table>
             <tbody>
@@ -81,7 +80,7 @@ class Story extends React.PureComponent {
             </tbody>
           </table>
         </div>
-        <div className='table-wrap'>
+        <div className='table-wrap' style={{paddingLeft: 240}}>
           <ReactTable
             className='-striped -highlight'
             data={this.state.data}
@@ -136,7 +135,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./SubComponents')
+const source = require('!raw-loader!./SubComponents')
 
 export default () => (
   <div>

stories/SubRows.js

@@ -1,11 +1,10 @@
-/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../../../lib/index'
+import ReactTable from '../src/index'
 
-class Story extends React.PureComponent {
+class Story extends React.Component {
   render () {
     const data = _.map(_.range(5553), d => {
       const children = _.map(_.range(10), d => {
@@ -15,13 +14,13 @@ class Story extends React.PureComponent {
           }
         })
         return {
-          firstName: namor.generate({ words: 1, numbers: 0 }),
+          firstName: namor.generate({ words: 1, numLen: 0 }),
           age: Math.floor(Math.random() * 30),
           children: grandChildren
         }
       })
       return {
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
         firstName: children.map(d => d.firstName),
         age: Math.floor(Math.random() * 30),
         children
@@ -68,7 +67,7 @@ class Story extends React.PureComponent {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./SubRows')
+const source = require('!raw-loader!./SubRows')
 
 export default () => (
   <div>

stories/components/codeHighlight.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import '../utils/prism'
 
-export default class CodeHighlight extends React.Component {
+export default React.createClass({
   render () {
     const { language, children } = this.props
     return (
@@ -11,11 +11,11 @@ export default class CodeHighlight extends React.Component {
         </code>
       </pre>
     )
-  }
+  },
   componentDidMount () {
     window.Prism.highlightAll()
-  }
+  },
   componentDidUpdate () {
     window.Prism.highlightAll()
   }
-}
+})