6.0.3

* Fixed issue #210 - Ignore filters on hidden columns.

* Fixed issue #210 - Ignore filters on hidden columns

.gitignore

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

.storybook/config.js

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

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/?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>
+- <a href="http://react-table.js.org/#/story/simple-table" target="\_parent">Storybook</a>
 
 ## Table of Contents
 - [Installation](#installation)
@@ -210,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',
@@ -801,7 +801,7 @@ Accessing internal state and wrapping with more UI:
 The possibilities are endless!
 
 ## Sorting
-Sorting comes built in with React-Table. Click column header to sort by its column. Click it again to reverse the sort. 
+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!
@@ -821,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 = a === 'string' ? a.toLowerCase() : a
-  b = b === 'string' ? b.toLowerCase() : b
+  a = typeof a === 'string' ? a.toLowerCase() : a
+  b = typeof b === 'string' ? b.toLowerCase() : b
   // Return either 1 or -1 to indicate a sort priority
   if (a > b) {
     return 1
@@ -846,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/?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.
+See <a href="http://react-table.js.org/#/story/custom-filtering" 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:
@@ -891,19 +891,18 @@ 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
-- `$ yarn`
-- `$ yarn run storybook`
+- Install dependencies with `$ yarn`
+- Auto-build files as you edit with `$ yarn run watch`
 - Implement your changes to files in the `src/` directory
-- 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
+- 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`,
 - Submit PR for review
 
 #### Scripts
 
-- `$ yarn run storybook` Runs the storybook server
+- `$ yarn run watch` Watches files and builds via babel
+- `$ yarn run docs` 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

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

docs/iframe.html

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

docs/index.html

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

docs/package.json

@@ -0,0 +1,23 @@
+{
+  "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",
+    "raw-loader": "^0.5.1",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-story": "^0.0.6"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}

docs/public/index.html

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

docs/src/App.js

@@ -0,0 +1,108 @@
+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'
+
+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 }
+        ]}
+      />
+    )
+  }
+}

docs/src/index.css

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

docs/src/index.js

@@ -0,0 +1,10 @@
+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/CellRenderers.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(5553), d => {
       const statusChance = Math.random()
@@ -98,7 +99,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./CellRenderers')
+const source = require('!raw!./CellRenderers')
 
 export default () => (
   <div>

docs/src/stories/ControlledTable.js

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

docs/src/stories/CustomComponentProps.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
@@ -65,7 +66,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./CustomComponentProps')
+const source = require('!raw!./CustomComponentProps')
 
 export default () => (
   <div>

docs/src/stories/CustomExpanderPosition.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
@@ -70,7 +71,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./CustomExpanderPosition')
+const source = require('!raw!./CustomExpanderPosition')
 
 export default () => (
   <div>

docs/src/stories/CustomSorting.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
@@ -67,7 +68,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./CustomSorting')
+const source = require('!raw!./CustomSorting')
 
 export default () => (
   <div>

docs/src/stories/CustomWidths.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
@@ -56,7 +57,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./CustomWidths')
+const source = require('!raw!./CustomWidths')
 
 export default () => (
   <div>

docs/src/stories/DefaultSorting.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
@@ -57,7 +58,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./DefaultSorting')
+const source = require('!raw!./DefaultSorting')
 
 export default () => (
   <div>

docs/src/stories/EditableTable.js

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

docs/src/stories/Filtering.js

@@ -1,12 +1,13 @@
+/* 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 '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   constructor (props) {
     super(props)
 
@@ -87,7 +88,7 @@ class Story extends React.Component {
 
     return (
       <div>
-        <div style={{float: 'left'}}>
+        <div>
           <h1>Table Options</h1>
           <table>
             <tbody>
@@ -111,7 +112,7 @@ class Story extends React.Component {
             </tbody>
           </table>
         </div>
-        <div className='table-wrap' style={{paddingLeft: 240}}>
+        <div className='table-wrap'>
           <ReactTable
             className='-striped -highlight'
             data={this.state.data}
@@ -183,7 +184,7 @@ class Story extends React.Component {
 }
 
 // Source Code
-const source = require('!raw-loader!./Filtering')
+const source = require('!raw!./Filtering')
 
 export default () => (
   <div>

docs/src/stories/FixedHeader.js

@@ -0,0 +1,81 @@
+/* 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, 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, numLen: 0 }),
+            lastName: namor.generate({ words: 1, numLen: 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/Footers.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
@@ -81,7 +82,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./Footers')
+const source = require('!raw!./Footers')
 
 export default () => (
   <div>

docs/src/stories/FunctionalRendering.js

@@ -1,9 +1,10 @@
+/* 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 '../src/index'
+import ReactTable from '../../../lib/index'
 
 const JSONtheme = {
   scheme: 'monokai',
@@ -26,7 +27,7 @@ const JSONtheme = {
   base0F: '#cc6633'
 }
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
@@ -126,7 +127,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./FunctionalRendering')
+const source = require('!raw!./FunctionalRendering')
 
 export default () => (
   <div>

docs/src/stories/NoDataText.js

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

docs/src/stories/OneHundredKRows.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(100000), d => {
       return {
@@ -86,7 +87,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./OneHundredKRows')
+const source = require('!raw!./OneHundredKRows')
 
 export default () => (
   <div>

docs/src/stories/Pivoting.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(1000), d => {
       return {
@@ -63,7 +64,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./Pivoting')
+const source = require('!raw!./Pivoting')
 
 export default () => (
   <div>

docs/src/stories/PivotingOptions.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(1000), d => {
       return {
@@ -121,7 +122,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./PivotingOptions')
+const source = require('!raw!./PivotingOptions')
 
 export default () => (
   <div>

docs/src/stories/PivotingSubComponents.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(1000), d => {
       return {
@@ -89,7 +90,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./PivotingSubComponents')
+const source = require('!raw!./PivotingSubComponents')
 
 export default () => (
   <div>

docs/src/stories/Readme.js

@@ -0,0 +1,15 @@
+/* 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/ServerSide.js

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

docs/src/stories/Simple.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(5553), d => {
       return {
@@ -59,7 +60,7 @@ class Story extends React.Component {
 }
 
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./Simple')
+const source = require('!raw!./Simple')
 
 export default () => (
   <div>

docs/src/stories/SubComponents.js

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

docs/src/stories/SubRows.js

@@ -1,10 +1,11 @@
+/* eslint-disable import/no-webpack-loader-syntax */
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import ReactTable from '../src/index'
+import ReactTable from '../../../lib/index'
 
-class Story extends React.Component {
+class Story extends React.PureComponent {
   render () {
     const data = _.map(_.range(5553), d => {
       const children = _.map(_.range(10), d => {
@@ -67,7 +68,7 @@ class Story extends React.Component {
 
 // Source Code
 const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw-loader!./SubRows')
+const source = require('!raw!./SubRows')
 
 export default () => (
   <div>

docs/src/stories/components/codeHighlight.js

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

docs/static/manager.4dc6928017acc8856e42.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/manager.4dc6928017acc8856e42.bundle.js","sources":["webpack:///static/manager.4dc6928017acc8856e42.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;AAkzDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAo0EA","sourceRoot":""}

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

@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.b8deff9f16f0debf5b04.bundle.js","sources":["webpack:///static/preview.b8deff9f16f0debf5b04.bundle.js"],"mappings":"AAAA;AAsnDA;AAg2EA;AA48EA;AA2lFA;AAmhQA;AA2/DA;AAguDA;AA8kEA;AA4xDA;AAo2DA;AAkwDA;AAunDA;AAsiDA;AA84DA;AA+nDA;AA69CA;AAunDA;AAqlEA;AA48DA;AAqgCA;AA+uDA;AAwmDA;AAiqEA;AA80DA;AAg2DA;AAwxCA;AAwqFA;AAmjGA;AA+mDA;AAk9CA;AA0xCA;AA60CA;AA8tCA;AAmmDA;AAiiBA;AAWA;AAmsEA;AAwEA;AAq9BA","sourceRoot":""}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -34,18 +34,16 @@
     "build": "npm-run-all build:*",
     "prepublish": "npm run build && npm run umd",
     "postpublish": "git push --tags",
-    "storybook": "start-storybook -p 8000 -c .storybook",
-    "docs": "build-storybook -o docs && cp .storybook/CNAME docs/CNAME"
+    "docs": "cd docs && yarn && yarn start",
+    "docs:build": "cd docs && yarn && yarn run build"
   },
   "dependencies": {
-    "classnames": "^2.2.5",
-    "raw-loader": "^0.5.1"
+    "classnames": "^2.2.5"
   },
   "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",
@@ -59,11 +57,12 @@
     "npm-run-all": "^3.1.1",
     "onchange": "^3.0.2",
     "postcss-cli": "^2.6.0",
+    "raw-loader": "^0.5.1",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-json-tree": "^0.10.1",
     "rimraf": "^2.6.1",
-    "standard": "^8.0.0",
+    "standard": "^10.0.2",
     "storybook": "^0.0.0",
     "stylus": "^0.54.5",
     "webpack": "^2.4.1"

src/index.js

@@ -509,15 +509,11 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                 } else {
                   newExpanded = _.set(newExpanded, cellInfo.nestingPath, {})
                 }
-                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
+                }, () => {
+                  onExpandedChange && onExpandedChange(newExpanded, cellInfo.nestingPath, e)
                 })
               }
 
@@ -638,7 +634,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
             className={classnames(
               '-padRow',
               (pageRows.length + i) % 2 ? '-even' : '-odd',
-              trProps.className,
+              trProps.className
             )}
             style={trProps.style || {}}
           >

src/index.styl

@@ -4,10 +4,13 @@ $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
@@ -16,6 +19,7 @@ $expandSize = 7px
     overflow: auto
 
   .rt-thead
+    flex: 1 0 auto
     display: flex
     flex-direction: column
     -webkit-user-select: none;
@@ -91,8 +95,10 @@ $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)
@@ -105,10 +111,12 @@ $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
@@ -191,7 +199,7 @@ $expandSize = 7px
       appearance:none
       display:block
       width:100%
-      height: 100%
+      height:100%
       border: 0
       border-radius: 3px
       padding: 6px

src/lifecycle.js

@@ -1,5 +1,4 @@
 export default Base => class extends Base {
-
   componentWillMount () {
     this.setStateWithData(this.getDataModel(this.getResolvedState()))
   }

src/methods.js

@@ -323,12 +323,7 @@ export default Base => class extends Base {
             (row) => {
               let column
 
-              column = allVisibleColumns.find(x => x.id === nextFilter.id || (x.pivotColumns && x.pivotColumns.some(y => y.id === nextFilter.id)))
-
-              // Could possibly be in pivotColumns
-              if (column.id !== nextFilter.id && column.pivotColumns) {
-                column = column.pivotColumns.find(x => x.id === nextFilter.id)
-              }
+              column = allVisibleColumns.find(x => x.id === nextFilter.id)
 
               // Don't filter hidden columns or columns that have had their filters disabled
               if (!column || column.filterable === false) {
@@ -403,17 +398,13 @@ export default Base => class extends Base {
   // User actions
   onPageChange (page) {
     const {onPageChange, collapseOnPageChange} = this.props
-    onPageChange && onPageChange(page)
-    // If controlled, do not keep track of state
-    if (typeof this.props.page !== 'undefined') {
-      this.fireFetchData()
-      return
-    }
+
     const newState = {page}
     if (collapseOnPageChange) {
       newState.expanded = {}
     }
     this.setStateWithData(newState, () => {
+      onPageChange && onPageChange(page)
       this.fireFetchData()
     })
   }
@@ -426,16 +417,11 @@ export default Base => class extends Base {
     const currentRow = pageSize * page
     const newPage = Math.floor(currentRow / newPageSize)
 
-    onPageSizeChange && onPageSizeChange(newPageSize, newPage)
-    if (typeof this.props.page !== 'undefined') {
-      this.fireFetchData()
-      return
-    }
-
     this.setStateWithData({
       pageSize: newPageSize,
       page: newPage
     }, () => {
+      onPageSizeChange && onPageSizeChange(newPageSize, newPage)
       this.fireFetchData()
     })
   }
@@ -528,16 +514,12 @@ export default Base => class extends Base {
         }
       }
     }
-    // If controlled, do not keep track of state
-    onSortedChange && onSortedChange(newSorted, column, additive)
-    if (typeof this.props.sorted !== 'undefined') {
-      this.fireFetchData()
-      return
-    }
+
     this.setStateWithData({
       page: ((!sorted.length && newSorted.length) || !additive) ? 0 : this.state.page,
       sorted: newSorted
     }, () => {
+      onSortedChange && onSortedChange(newSorted, column, additive)
       this.fireFetchData()
     })
   }
@@ -560,17 +542,10 @@ export default Base => class extends Base {
       })
     }
 
-    onFilteredChange && onFilteredChange(newFiltering, column, value)
-
-    // If filters is being controlled, do not manage state internally
-    if (this.props.filtered) {
-      this.fireFetchData()
-      return
-    }
-
     this.setStateWithData({
       filtered: newFiltering
     }, () => {
+      onFilteredChange && onFilteredChange(newFiltering, column, value)
       this.fireFetchData()
     })
   }
@@ -653,14 +628,10 @@ export default Base => class extends Base {
       value: newWidth
     })
 
-    onResizedChange && onResizedChange(newResized, event)
-
-    if (this.props.resized) {
-      return
-    }
-
     this.setStateWithData({
       resized: newResized
+    }, () => {
+      onResizedChange && onResizedChange(newResized, event)
     })
   }
 }