4.4.0

Bug fix in installation docs

.gitignore

@@ -3,6 +3,3 @@ lib/
 react-table.js
 react-table.css
 *.log
-example/dist/
-
-storybook-static

.storybook/CNAME

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

.storybook/config.js

@@ -11,10 +11,16 @@ 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 CustomWidths from '../stories/CustomWidths.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'
 //
 configure(() => {
   storiesOf('1. Docs')
@@ -30,9 +36,15 @@ configure(() => {
       return <ReadmeCmp />
     })
   storiesOf('2. Demos')
-    .add('Client-side Data', Simple)
+    .add('Simple Table', Simple)
+    .add('Cell Renderers & Custom Components', CellRenderers)
+    .add('Default Sorting', DefaultSorting)
+    .add('Custom Column Widths', CustomWidths)
     .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('Functional Rendering', FunctionalRendering)
+    .add('Custom Expander Position', CustomExpanderPosition)
 }, module)

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <a href="https://github.com/tannerlinsley/react-table"><img src="https://github.com/tannerlinsley/react-table/raw/master/media/Banner.png" alt="React Table Logo" style="width:450px;"/></a>
+  <a href="https://github.com/tannerlinsley/react-table" target="\_parent"><img src="https://github.com/tannerlinsley/react-table/raw/master/media/Banner.png" alt="React Table Logo" style="width:450px;"/></a>
   <br />
   <br />
 
@@ -8,7 +8,22 @@
 # React Table
 `react-table` is a **lightweight, fast and extendable datagrid** built for React
 
-[![Build Status](https://travis-ci.org/tannerlinsley/react-table.svg?branch=master)](https://travis-ci.org/tannerlinsley/react-table) [![npm](https://img.shields.io/npm/dm/react-table.svg)](https://npmjs.com/packag/react-table) [![react-table on Slack](https://img.shields.io/badge/slack-react--table-blue.svg)](https://react-table-slack.herokuapp.com/) [![GitHub stars](https://img.shields.io/github/stars/tannerlinsley/react-table.svg?style=social&label=Star)](https://github.com/tannerlinsley/react-table) [![Twitter Follow](https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow)](https://twitter.com/tannerlinsley)
+
+<a href="https://travis-ci.org/tannerlinsley/react-table" target="\_parent">
+  <img alt="" src="https://travis-ci.org/tannerlinsley/react-table.svg?branch=master" />
+</a>
+<a href="https://npmjs.com/package/react-table" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/react-table.svg" />
+</a>
+<a href="https://react-chat-signup.herokuapp.com/" target="\_parent">
+  <img alt="" src="https://img.shields.io/badge/slack-react--chat-blue.svg" />
+</a>
+<a href="https://github.com/tannerlinsley/react-table" target="\_parent">
+  <img alt="" src="https://img.shields.io/github/stars/tannerlinsley/react-table.svg?style=social&label=Star" />
+</a>
+<a href="https://twitter.com/tannerlinsley" target="\_parent">
+  <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
+</a>
 
 ## Features
 
@@ -18,9 +33,9 @@
 - Column Pivoting & Aggregation
 - Minimal design & easily themeable
 - Fully controllable via optional props and callbacks
-- <a href="https://medium.com/@tannerlinsley/why-i-wrote-react-table-and-the-problems-it-has-solved-for-nozzle-others-445c4e93d4a8#.axza4ixba" target="\_blank">"Why I wrote React Table and the problems it has solved for Nozzle.io</a> by Tanner Linsley
+- <a href="https://medium.com/@tannerlinsley/why-i-wrote-react-table-and-the-problems-it-has-solved-for-nozzle-others-445c4e93d4a8#.axza4ixba" target="\_parent">"Why I wrote React Table and the problems it has solved for Nozzle.io</a> by Tanner Linsley
 
-## <a href="http://react-table.zabapps.com/?selectedKind=2.%20Demos&selectedStory=Client-side%20Data&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel" target="\_blank">Demo</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">Demo</a>
 
 ## Table of Contents
 - [Installation](#installation)
@@ -30,17 +45,36 @@
 - [Columns](#columns)
 - [Styles](#styles)
 - [Header Groups](#header-groups)
-- [Pivoting & Aggregation](#pivoting-aggregation)
-- [Sub Tables & Sub Components](#sub-tables-sub-components)
+- [Pivoting & Aggregation](#pivoting--aggregation)
+- [Sub Tables & Sub Components](#sub-tables--sub-components)
 - [Server-side Data](#server-side-data)
 - [Fully Controlled Component](#fully-controlled-component)
-- [Multi-sort](#multi-sort)
+- [Functional Rendering](#functional-rendering)
+- [Multi-Sort](#multi-sort)
 - [Component Overrides](#component-overrides)
 
 ## Installation
+1. Install React Table as a dependency
 ```bash
 $ npm install react-table
+# or
+$ yarn add react-table
 ```
+2. Import the `react-table` module
+```javascript
+// ES6
+import ReactTable from 'react-table'
+// ES5
+var ReactTable = require('react-table').default
+```
+3. Import styles by including `react-table.css` anywhere on the page
+```javascript
+// JS (Webpack)
+import 'react-table/react-table.css'
+// html
+<link rel="stylesheet" href="node_modules/react-table/react-table.css">
+```
+
 
 ## Example
 ```javascript
@@ -172,7 +206,13 @@ Or just define them on the component per-instance
   sortable: true,
   sort: 'asc' or 'desc', // used to determine the column sorting on init
   show: true, // can be used to hide a column
-  minWidth: 100 // A minimum width for this column. If there is room, columns will flex to fill available space
+  width: undefined, // A hardcoded width for the column. This overrides both min and max width options
+  minWidth: 100 // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set)
+  maxWidth: undefined // A maximum width for this column.
+
+  // Special
+  expander: false // This option will override all data-related options and designates the column to be used
+  // for pivoting and sub-component expansion
 
   // Cell Options
   className: '', // Set the classname of the `td` element of the column
@@ -196,7 +236,12 @@ Or just define them on the component per-instance
 ```
 
 ## Styles
-React-table is built to be dropped into existing applications or styled from the ground up, but if you'd like a decent starting point, you can optionally include our default theme `react-table.css`.  We think it looks great, honestly :)
+React-table ships with a minimal and clean stylesheet to get you on your feet quickly. It's located at `react-table/react-table.css`.
+
+- Adding a `-striped` className to ReactTable will slightly color odd numbered rows for legibility
+- Adding a `-highlight` className to ReactTable will highlight any row as you hover over it
+
+We think the default styles looks great! But, if you prefer a more custom look, all of the included styles are easily overridable. Every single component contains a unique class that makes it super easy to customize. Just go for it!
 
 ## Header Groups
 To group columns with another header column, just nest your columns in a header column like so:
@@ -302,7 +347,7 @@ If you want to handle pagination, and sorting on the server, `react-table` makes
 />
 ```
 
-For a detailed example, take a peek at our [async table mockup](https://github.com/tannerlinsley/react-table/blob/master/example/src/screens/async.js)
+For a detailed example, take a peek at our <a href="https://github.com/tannerlinsley/react-table/blob/master/stories/ServerSide.js" target="\_parent">async table mockup</a>
 
 ## Fully Controlled Component
 React Table by default works fantastically out of the box, but you can achieve even more control and customization if you choose to maintain the state yourself. It is very easy to do, even if you only want to manage *parts* of the state.
@@ -337,6 +382,52 @@ Here are the props and their corresponding callbacks that control the state of t
 />
 ```
 
+## Functional Rendering
+Possibly one of the coolest features of React-Table is its ability to expose internal state for custom render logic. The easiest way to do this is to optionally pass a function as a child of `<ReactTable />`.
+
+The function you pass will be called with the following items:
+- Fully-resolved state of the table
+- The standard table generator
+- The instance of the component
+
+You can then return any JSX or react you want! This turns out to be perfect for:
+- Accessing the internal state of the table before rendering the table
+- Decorating the table with more UI
+- Building your own 100% custom display logic, while utilizing the state and methods of the table component
+
+Example:
+```javascript
+<ReactTable
+  columns={columns}
+  data={data}
+  ...
+>
+  {(state, makeTable, instance) => {
+    // Now you have full access to the state of the table!
+    state.decoratedColumns === [...] // all of the columns (with id's and meta)
+    state.visibleColumns === [...] // all of the columns (with id's and meta)
+    state.visibleColumns === [...] // all of the columns (with id's and meta)
+    // etc.
+
+    // `makeTable` is a function that returns the standard table markup
+    return makeTable()
+
+    // So add some decoration!
+    return (
+      <div>
+        <customPivotBySelect />
+        <customColumnHideShow />
+        <customAnything />
+        {makeTable()}
+      </div>
+    )
+
+    // The possibilities are endless!!!
+
+  }}
+</ReactTable>
+```
+
 ## 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!
 
@@ -368,7 +459,7 @@ Object.assign(ReactTableDefaults, {
   />
 ```
 
-If you choose to change the core components React-Table uses to render, you must make sure your replacement components consume and utilize all of the supplied and inherited props that are needed for that component to function properly. We would suggest investigating [the source](https://github.com/tannerlinsley/react-table/blob/master/src/index.js) for the component you wish to replace.
+If you choose to change the core components React-Table uses to render, you must make sure your replacement components consume and utilize all of the supplied and inherited props that are needed for that component to function properly. We would suggest investigating <a href="https://github.com/tannerlinsley/react-table/blob/master/src/index.js" target="\_parent">the source</a> for the component you wish to replace.
 
 
 ## Contributing
@@ -376,23 +467,22 @@ 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
-- `npm install`
-- `npm run watch`
+- `$ yarn`
+- `$ yarn run storybook`
 - 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
 - Submit PR for review
 
-If you would like to preview your changes, you can link and utilize the example like so:
+#### Scripts
 
-- `npm link`
-- `cd example`
-- `npm install`
-- `npm link react-table`
-- `npm run watch`
-- Make changes to the example in `src/screens/index.js` if needed
-- View changes at `localhost:8000`
+- `$ 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
 
-<a href='https://nozzle.io'>
+<a href='https://nozzle.io' target="\_parent">
   <img src='https://nozzle.io/img/logo-blue.png' alt='Nozzle Logo' style='width:300px;'/>
 </a>

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.9c8139cf3eafea207bb8.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.423cfb5e0df11f89a8ac.bundle.js"></script>
+      </body>
+    </html>
+  

docs/static/manager.423cfb5e0df11f89a8ac.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/manager.423cfb5e0df11f89a8ac.bundle.js","sources":["webpack:///static/manager.423cfb5e0df11f89a8ac.bundle.js"],"mappings":"AAAA;AAkuDA;AA04DA;AA+8DA;AA00DA;AAsyEA;AA89CA;AA8rDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAoxDA;AAsrDA;AAqyDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}

docs/static/preview.9c8139cf3eafea207bb8.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.9c8139cf3eafea207bb8.bundle.js","sources":["webpack:///static/preview.9c8139cf3eafea207bb8.bundle.js"],"mappings":"AAAA;AAkuDA;AA03DA;AAo+CA;AAqvGA;AAu+EA;AA05NA;AAyuGA;AA6lEA;AAywDA;AAozDA;AAk1DA;AA2qDA;AAw7CA;AAy7DA;AA2oDA;AA67CA;AA8pDA;AAolEA;AA60DA;AA+rCA;AA+mDA;AA2lDA;AAkqEA;AAs2DA;AA2zDA;AAo4CA;AAgnFA;AA+tGA;AAsiDA;AA88BA;AA+yDA;AAkhCA;AAqSA;AAk4EA","sourceRoot":""}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -24,7 +24,8 @@
   ],
   "scripts": {
     "build:node": "babel src --out-dir lib --source-maps inline",
-    "build:css": "rm -rf react-table.css && stylus src/index.styl --use ./node_modules/nib/lib/nib.js --compress -o react-table.css",
+    "build:css": "rm -rf react-table.css && stylus src/index.styl --compress -o react-table.css && yarn run css:autoprefix",
+    "css:autoprefix": "postcss --use autoprefixer react-table.css -r",
     "watch": "npm-run-all --parallel watch:*",
     "watch:node": "onchange 'src/**/*.js' -i -- npm run build:node",
     "watch:css": "onchange 'src/**/*.styl' -i -- npm run build:css",
@@ -32,7 +33,7 @@
     "umd": "rm -rf react-table.js && browserify lib/index.js -s reactTable -x react -t babelify -g uglifyify -o react-table.js",
     "prepublish": "npm-run-all build:* && npm run umd",
     "storybook": "start-storybook -p 8000 -c .storybook",
-    "deploy": "build-storybook && zab deploy"
+    "docs": "build-storybook -o docs && cp .storybook/CNAME docs/CNAME"
   },
   "dependencies": {
     "classnames": "^2.2.5"
@@ -42,6 +43,7 @@
   },
   "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",
@@ -53,11 +55,12 @@
     "html-loader": "^0.4.4",
     "markdown-loader": "^0.1.7",
     "namor": "^0.3.0",
-    "nib": "^1.1.2",
     "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",
     "standard": "^8.0.0",
     "stylus": "^0.54.5",
     "uglifyify": "3.0.3"
@@ -73,7 +76,8 @@
       "lib",
       "example",
       "react-table.js",
-      "stories"
+      "stories",
+      "docs"
     ]
   },
   "babel": {

src/index.js

@@ -45,7 +45,7 @@ export const ReactTableDefaults = {
   onTrClick: () => null,
 
   // Classes
-  className: '-striped -highlight',
+  className: '',
   tableClassName: '',
   theadClassName: '',
   tbodyClassName: '',
@@ -170,7 +170,7 @@ export default React.createClass({
       oldState.pivotBy !== newState.pivotBy ||
       oldState.sorting !== newState.sorting
     ) {
-      this.setState(this.getDataModel(nextProps, nextState))
+      this.setStateWithData(this.getDataModel(nextProps, nextState))
     }
   },
 
@@ -178,9 +178,14 @@ export default React.createClass({
     const oldState = this.getResolvedState()
     const newResolvedState = this.getResolvedState({}, newState)
     if (
+      oldState.resolvedData !== newResolvedState.resolvedData ||
       oldState.sorting !== newResolvedState.sorting
     ) {
-      Object.assign(newState, this.getDataModel({}, newState))
+      Object.assign(newState, this.getSortedData({}, newState))
+    }
+    // Calculate pageSize all the time
+    if (newResolvedState.resolvedData) {
+      newState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize)
     }
     return this.setState(newState, cb)
   },
@@ -190,8 +195,7 @@ export default React.createClass({
     const newState = this.getResolvedState(nextProps, nextState)
     // State changes that trigger a render
     if (
-      oldState.sorting !== newState.sorting ||
-      oldState.resolvedData !== newState.resolvedData ||
+      oldState.sortedData !== newState.sortedData ||
       oldState.page !== newState.page ||
       oldState.pageSize !== newState.pageSize ||
       oldState.expandedRows !== newState.expandedRows
@@ -204,6 +208,7 @@ export default React.createClass({
   render () {
     const resolvedProps = this.getResolvedState()
     const {
+      children,
       className,
       style,
       tableClassName,
@@ -230,11 +235,10 @@ export default React.createClass({
       loading,
       pageSize,
       page,
-      sorting,
+      resolvedSorting,
+      pages,
       // Pivoting State
-      pivotBy,
       pivotValKey,
-      pivotIDKey,
       subRowsKey,
       expandedRows,
       onExpandRow,
@@ -250,22 +254,22 @@ export default React.createClass({
       PaginationComponent,
       LoadingComponent,
       SubComponent,
-      columnPercentage,
       // Data model
-      pivotColumn,
       resolvedData,
       allVisibleColumns,
       headerGroups,
-      standardColumns,
-      allDecoratedColumns,
       hasHeaderGroups,
-      pages
+      // Sorted Data
+      sortedData
     } = resolvedProps
 
+    // Determine the flex percentage for each column
+    // const columnPercentage = 100 / allVisibleColumns.length
+
     // Pagination
     const startRow = pageSize * page
     const endRow = startRow + pageSize
-    const pageRows = manual ? resolvedData : resolvedData.slice(startRow, endRow)
+    const pageRows = manual ? resolvedData : sortedData.slice(startRow, endRow)
     const minRows = this.getMinRows()
     const padRows = pages > 1 ? _.range(pageSize - pageRows.length)
       : minRows ? _.range(Math.max(minRows - pageRows.length, 0))
@@ -288,123 +292,145 @@ export default React.createClass({
     const canPrevious = page > 0
     const canNext = page + 1 < pages
 
-    const rowWidth = (SubComponent ? expanderColumnWidth : 0) + _.sum(allVisibleColumns.map(d => d.minWidth))
+    const rowMinWidth = _.sum(allVisibleColumns.map(d => _.getFirstDefined(d.width, d.minWidth)))
 
     let rowIndex = -1
 
-    const makeHeaderGroup = () => (
+    const makeHeaderGroups = () => (
       <TheadComponent
         className={classnames(theadGroupClassName, '-headerGroups')}
         style={Object.assign({}, theadStyle, {
-          minWidth: `${rowWidth}px`
+          minWidth: `${rowMinWidth}px`
         })}
       >
         <TrComponent
           className={trClassName}
           style={trStyle}
         >
-          {pivotBy.length ? (
-            <ThComponent
-              className={classnames(thClassname, 'rt-pivot-header')}
-              style={_.prefixAll({
-                flex: `${columnPercentage} 0 auto`,
-                width: `${pivotColumn.minWidth}px`
-              })}
-            />
-          ) : SubComponent ? (
-            <ThComponent
-              className={classnames(thClassname, 'rt-expander-header')}
-              style={_.prefixAll({
-                flex: `0 0 auto`,
-                width: `${expanderColumnWidth}px`
-              })}
-            />
-          ) : null}
-          {headerGroups.map((column, i) => {
-            return (
-              <ThComponent
-                key={i}
-                className={classnames(thClassname, column.headerClassName)}
-                style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({
-                  flex: `${column.columns.length * columnPercentage} 0 auto`,
-                  width: `${_.sum(column.columns.map(d => d.minWidth))}px`
-                }))}
-              >
-                {typeof column.header === 'function' ? (
-                  <column.header
-                    data={resolvedData}
-                    column={column}
-                  />
-                ) : column.header}
-              </ThComponent>
-            )
-          })}
+          {headerGroups.map(makeHeaderGroup)}
         </TrComponent>
       </TheadComponent>
     )
 
-    const makeHeader = () => {
-      const pivotSort = pivotColumn && sorting.find(d => d.id === pivotColumn.id)
+    const makeHeaderGroup = (column, i) => {
+      const flex = _.sum(column.columns.map(d => d.width ? 0 : d.minWidth))
+      const width = _.sum(column.columns.map(d => _.getFirstDefined(d.width, d.minWidth)))
+      const maxWidth = _.sum(column.columns.map(d => _.getFirstDefined(d.width, d.maxWidth)))
+      if (column.expander) {
+        if (column.pivotColumns) {
+          return (
+            <ThComponent
+              className={classnames(thClassname, 'rt-pivot-header')}
+              style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({
+                flex: `${flex} 0 auto`,
+                width: `${width}px`,
+                maxWidth: `${maxWidth}px`
+              }))}
+            />
+          )
+        }
+        return (
+          <ThComponent
+            className={classnames(thClassname, 'rt-expander-header')}
+            style={_.prefixAll({
+              flex: `0 0 auto`,
+              width: `${expanderColumnWidth}px`
+            })}
+          />
+        )
+      }
+      return (
+        <ThComponent
+          key={i}
+          className={classnames(thClassname, column.headerClassName)}
+          style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({
+            flex: `${flex} 0 auto`,
+            width: `${width}px`,
+            maxWidth: `${maxWidth}px`
+          }))}
+        >
+          {typeof column.header === 'function' ? (
+            <column.header
+              data={sortedData}
+              column={column}
+            />
+          ) : column.header}
+        </ThComponent>
+      )
+    }
+
+    const makeHeaders = () => {
       return (
         <TheadComponent
           className={classnames(theadClassName, '-header')}
           style={Object.assign({}, theadStyle, {
-            minWidth: `${rowWidth}px`
+            minWidth: `${rowMinWidth}px`
           })}
         >
           <TrComponent
             className={trClassName}
             style={trStyle}
           >
-            {pivotBy.length ? (
-              <ThComponent
-                className={classnames(
-                  thClassname,
-                  'rt-pivot-header',
-                  pivotSort ? (pivotSort.asc ? '-sort-asc' : '-sort-desc') : '',
-                  pivotColumn.sortable && '-cursor-pointer'
-                )}
-                style={_.prefixAll({
-                  flex: `${columnPercentage} 0 auto`,
-                  width: `${pivotColumn.minWidth}px`
-                })}
-                toggleSort={(e) => {
-                  pivotColumn.sortable && this.sortColumn(pivotColumn.pivotColumns, e.shiftKey)
-                }}
-              >
-                {pivotColumn.pivotColumns.map((column, i) => {
-                  return (
-                    <span key={column.id}>
-                      {typeof column.header === 'function' ? (
-                        <column.header
-                          data={resolvedData}
-                          column={column}
-                        />
-                      ) : column.header}
-                      {i < pivotColumn.pivotColumns.length - 1 && (
-                        <ExpanderComponent />
-                      )}
-                    </span>
-                  )
-                })}
-              </ThComponent>
-            ) : SubComponent ? (
-              <ThComponent
-                className={classnames(thClassname, 'rt-expander-header')}
-                style={_.prefixAll({
-                  flex: `0 0 auto`,
-                  width: `${expanderColumnWidth}px`
-                })}
-              />
-            ) : null}
-            {standardColumns.map(makeHeaderGroupColumn)}
+            {allVisibleColumns.map(makeHeader)}
           </TrComponent>
         </TheadComponent>
       )
     }
-    const makeHeaderGroupColumn = (column, i) => {
-      const sort = sorting.find(d => d.id === column.id)
+
+    const makeHeader = (column, i) => {
+      const sort = resolvedSorting.find(d => d.id === column.id)
       const show = typeof column.show === 'function' ? column.show() : column.show
+      const width = _.getFirstDefined(column.width, column.minWidth)
+      const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
+      if (column.expander) {
+        if (column.pivotColumns) {
+          const pivotSort = resolvedSorting.find(d => d.id === column.id)
+          return (
+            <ThComponent
+              className={classnames(
+                thClassname,
+                'rt-pivot-header',
+                pivotSort ? (pivotSort.asc ? '-sort-asc' : '-sort-desc') : '',
+                column.sortable && '-cursor-pointer'
+              )}
+              style={_.prefixAll({
+                flex: `${width} 0 auto`,
+                width: `${width}px`,
+                maxWidth: `${maxWidth}px`
+              })}
+              toggleSort={(e) => {
+                column.sortable && this.sortColumn(column.pivotColumns, e.shiftKey)
+              }}
+            >
+              {column.pivotColumns.map((pivotColumn, i) => {
+                return (
+                  <span key={pivotColumn.id}>
+                    {typeof pivotColumn.header === 'function' ? (
+                      <pivotColumn.header
+                        data={sortedData}
+                        column={pivotColumn}
+                      />
+                    ) : pivotColumn.header}
+                    {i < column.pivotColumns.length - 1 && (
+                      <ExpanderComponent />
+                    )}
+                  </span>
+                )
+              })}
+            </ThComponent>
+          )
+        }
+        return (
+          <ThComponent
+            className={classnames(thClassname, 'rt-expander-header')}
+            style={_.prefixAll({
+              flex: `0 0 auto`,
+              width: `${expanderColumnWidth}px`
+            })}
+          />
+        )
+      }
+
       return (
         <ThComponent
           key={i}
@@ -418,8 +444,9 @@ export default React.createClass({
             }
           )}
           style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({
-            flex: `${columnPercentage} 0 auto`,
-            width: `${column.minWidth}px`
+            flex: `${width} 0 auto`,
+            width: `${width}px`,
+            maxWidth: `${maxWidth}px`
           }))}
           toggleSort={(e) => {
             column.sortable && this.sortColumn(column, e.shiftKey)
@@ -427,7 +454,7 @@ export default React.createClass({
         >
           {typeof column.header === 'function' ? (
             <column.header
-              data={resolvedData}
+              data={sortedData}
               column={column}
             />
           ) : column.header}
@@ -447,24 +474,21 @@ export default React.createClass({
         subRows: row[subRowsKey]
       }
       const isExpanded = _.get(expandedRows, rowInfo.nestingPath)
-      const rowPivotColumn = allDecoratedColumns.find(d => d.id === row[pivotIDKey])
-      const PivotCell = rowPivotColumn && rowPivotColumn.pivotRender
       return (
-        <TrGroupComponent key={i}>
+        <TrGroupComponent key={rowInfo.nestingPath.join('_')}>
           <TrComponent
             onClick={event => onTrClick(rowInfo.row, event)}
             className={classnames(trClassName, trClassCallback(rowInfo), row._viewIndex % 2 ? '-even' : '-odd')}
             style={Object.assign({}, trStyle, trStyleCallback(rowInfo))}
           >
-            {(pivotBy.length || SubComponent) && (
-              <TdComponent
-                className={classnames(thClassname, 'rt-pivot')}
-                style={_.prefixAll({
-                  paddingLeft: rowInfo.nestingPath.length === 1 ? undefined : `${30 * (rowInfo.nestingPath.length - 1)}px`,
-                  flex: `${pivotColumn ? columnPercentage : 0} 0 auto`,
-                  width: `${pivotColumn ? pivotColumn.minWidth : expanderColumnWidth}px`
-                })}
-                onClick={(e) => {
+            {allVisibleColumns.map((column, i2) => {
+              const Cell = column.render
+              const show = typeof column.show === 'function' ? column.show() : column.show
+              const width = _.getFirstDefined(column.width, column.minWidth)
+              const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
+
+              if (column.expander) {
+                const onTdClick = (e) => {
                   if (onExpandRow) {
                     return onExpandRow(rowInfo.nestingPath, e)
                   }
@@ -477,39 +501,73 @@ export default React.createClass({
                   return this.setStateWithData({
                     expandedRows: _.set(newExpandedRows, rowInfo.nestingPath, {})
                   })
-                }}
-              >
-                {rowInfo.subRows ? (
-                  <span>
-                    <ExpanderComponent
-                      isExpanded={isExpanded}
-                    />
-                    {rowPivotColumn && rowPivotColumn.pivotRender ? (
-                      <PivotCell
-                        {...rowInfo}
-                        value={rowInfo.rowValues[pivotValKey]}
+                }
+
+                if (column.pivotColumns) {
+                  // Return the pivot expander cell
+                  const PivotCell = column.pivotRender
+                  return (
+                    <TdComponent
+                      className={classnames(thClassname, 'rt-pivot')}
+                      style={_.prefixAll({
+                        paddingLeft: rowInfo.nestingPath.length === 1 ? undefined : `${30 * (rowInfo.nestingPath.length - 1)}px`,
+                        flex: `${width} 0 auto`,
+                        width: `${width}px`,
+                        maxWidth: `${maxWidth}px`
+                      })}
+                      onClick={onTdClick}
+                    >
+                      {rowInfo.subRows ? (
+                        <span>
+                          <ExpanderComponent
+                            isExpanded={isExpanded}
+                          />
+                          {column && column.pivotRender ? (
+                            <PivotCell
+                              {...rowInfo}
+                              value={rowInfo.rowValues[pivotValKey]}
+                            />
+                          ) : <span>{row[pivotValKey]} ({rowInfo.subRows.length})</span>}
+                        </span>
+                      ) : SubComponent ? (
+                        <span>
+                          <ExpanderComponent
+                            isExpanded={isExpanded}
+                          />
+                        </span>
+                      ) : null}
+                    </TdComponent>
+                  )
+                }
+
+                // Return the regular expander cell
+                return (
+                  <TdComponent
+                    className={classnames(column.className, {hidden: !show})}
+                    style={_.prefixAll({
+                      flex: `0 0 auto`,
+                      width: `${expanderColumnWidth}px`
+                    })}
+                    onClick={onTdClick}
+                  >
+                    <span>
+                      <ExpanderComponent
+                        isExpanded={isExpanded}
                       />
-                    ) : <span>{row[pivotValKey]} ({rowInfo.subRows.length})</span>}
-                  </span>
-                ) : SubComponent ? (
-                  <span>
-                    <ExpanderComponent
-                      isExpanded={isExpanded}
-                    />
-                  </span>
-                ) : null}
-              </TdComponent>
-            )}
-            {standardColumns.map((column, i2) => {
-              const Cell = column.render
-              const show = typeof column.show === 'function' ? column.show() : column.show
+                    </span>
+                  </TdComponent>
+                )
+              }
+
+              // Return regular cell
               return (
                 <TdComponent
                   key={i2}
                   className={classnames(column.className, {hidden: !show})}
                   style={Object.assign({}, tdStyle, column.style, _.prefixAll({
-                    flex: `${columnPercentage} 0 auto`,
-                    width: `${column.minWidth}px`
+                    flex: `${width} 0 auto`,
+                    width: `${width}px`,
+                    maxWidth: `${maxWidth}px`
                   }))}
                 >
                   {typeof Cell === 'function' ? (
@@ -535,40 +593,46 @@ export default React.createClass({
 
     const makePadRow = (row, i) => {
       return (
-        <TrComponent
+        <TrGroupComponent
           key={i}
-          className={classnames(trClassName, '-padRow')}
-          style={trStyle}
         >
-          {SubComponent && (
-            <ThComponent
-              className={classnames(thClassname, 'rt-expander-header')}
-              style={_.prefixAll({
-                flex: `0 0 auto`,
-                width: `${expanderColumnWidth}px`
-              })}
-            />
-          )}
-          {standardColumns.map((column, i2) => {
-            const show = typeof column.show === 'function' ? column.show() : column.show
-            return (
-              <TdComponent
-                key={i2}
-                className={classnames(column.className, {hidden: !show})}
-                style={Object.assign({}, tdStyle, column.style, {
-                  flex: `${columnPercentage} 0 auto`,
-                  width: `${column.minWidth}px`
+          <TrComponent
+            className={classnames(trClassName, '-padRow')}
+            style={trStyle}
+          >
+            {SubComponent && (
+              <ThComponent
+                className={classnames(thClassname, 'rt-expander-header')}
+                style={_.prefixAll({
+                  flex: `0 0 auto`,
+                  width: `${expanderColumnWidth}px`
                 })}
-              >
-                &nbsp;
-              </TdComponent>
-            )
-          })}
-        </TrComponent>
+              />
+            )}
+            {allVisibleColumns.map((column, i2) => {
+              const show = typeof column.show === 'function' ? column.show() : column.show
+              const width = _.getFirstDefined(column.width, column.minWidth)
+              const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
+              return (
+                <TdComponent
+                  key={i2}
+                  className={classnames(column.className, {hidden: !show})}
+                  style={Object.assign({}, tdStyle, column.style, {
+                    flex: `${width} 0 auto`,
+                    width: `${width}px`,
+                    maxWidth: `${maxWidth}px`
+                  })}
+                >
+                  &nbsp;
+                </TdComponent>
+              )
+            })}
+          </TrComponent>
+        </TrGroupComponent>
       )
     }
 
-    return (
+    const makeTable = () => (
       <div
         className={classnames(className, 'ReactTable')}
         style={style}
@@ -577,12 +641,12 @@ export default React.createClass({
           className={classnames(tableClassName)}
           style={tableStyle}
         >
-          {hasHeaderGroups && makeHeaderGroup()}
-          {makeHeader()}
+          {hasHeaderGroups && makeHeaderGroups()}
+          {makeHeaders()}
           <TbodyComponent
             className={classnames(tbodyClassName)}
             style={Object.assign({}, tbodyStyle, {
-              minWidth: `${rowWidth}px`
+              minWidth: `${rowMinWidth}px`
             })}
           >
             {pageRows.map((d, i) => makePageRow(d, i))}
@@ -606,6 +670,21 @@ export default React.createClass({
         />
       </div>
     )
+
+    // childProps are optionally passed to a function-as-a-child
+    const childState = {
+      ...resolvedProps,
+      startRow,
+      endRow,
+      pageRows,
+      minRows,
+      padRows,
+      canPrevious,
+      canNext,
+      rowMinWidth
+    }
+
+    return children ? children(childState, makeTable, this) : makeTable()
   },
 
   // Helpers
@@ -617,10 +696,8 @@ export default React.createClass({
       pivotIDKey,
       pivotValKey,
       subRowsKey,
-      manual,
-      sorting,
-      pageSize,
-      pages
+      expanderColumnWidth,
+      SubComponent
     } = this.getResolvedState(nextProps, nextState)
 
     // Determine Header Groups
@@ -636,32 +713,78 @@ export default React.createClass({
     let currentSpan = []
 
     // A convenience function to add a header and reset the currentSpan
-    const addHeader = (columns, column = {}) => {
+    const addHeader = (columns, column = columns[0]) => {
       headerGroups.push(Object.assign({}, column, {
         columns: columns
       }))
       currentSpan = []
     }
 
+    const noSubExpanderColumns = columns.map(col => {
+      return {
+        ...col,
+        columns: col.columns ? col.columns.filter(d => !d.expander) : undefined
+      }
+    })
+
+    let expanderColumnIndex = columns.findIndex(col => col.expander)
+    const needsExpander = (SubComponent || pivotBy.length) && expanderColumnIndex === -1
+    const columnsWithExpander = needsExpander ? [{expander: true}, ...noSubExpanderColumns] : noSubExpanderColumns
+    if (needsExpander) {
+      expanderColumnIndex = 0
+    }
+
+    const makeDecoratedColumn = (column) => {
+      const dcol = Object.assign({}, this.props.column, column)
+
+      if (dcol.expander) {
+        dcol.width = expanderColumnWidth
+        return dcol
+      }
+
+      if (typeof dcol.accessor === 'string') {
+        dcol.id = dcol.id || dcol.accessor
+        const accessorString = dcol.accessor
+        dcol.accessor = row => _.get(row, accessorString)
+        return dcol
+      }
+
+      if (dcol.accessor && !dcol.id) {
+        console.warn(dcol)
+        throw new Error('A column id is required if using a non-string accessor for column above.')
+      }
+
+      if (!dcol.accessor) {
+        dcol.accessor = d => undefined
+      }
+
+      // Ensure minWidth is not greater than maxWidth if set
+      if (dcol.maxWidth < dcol.minWidth) {
+        dcol.minWidth = dcol.maxWidth
+      }
+
+      return dcol
+    }
+
     // Decorate the columns
     const decorateAndAddToAll = (col) => {
-      const decoratedColumn = this.makeDecoratedColumn(col)
+      const decoratedColumn = makeDecoratedColumn(col)
       allDecoratedColumns.push(decoratedColumn)
       return decoratedColumn
     }
     let allDecoratedColumns = []
-    const decoratedColumns = columns.map((column, i) => {
+    const decoratedColumns = columnsWithExpander.map((column, i) => {
       if (column.columns) {
         return {
           ...column,
           columns: column.columns.map(decorateAndAddToAll)
         }
       } else {
-        decorateAndAddToAll(column)
+        return decorateAndAddToAll(column)
       }
     })
 
-    // Build the visible columns and headers and flat column list
+    // Build the visible columns, headers and flat column list
     let visibleColumns = decoratedColumns.slice()
     let allVisibleColumns = []
 
@@ -680,7 +803,23 @@ export default React.createClass({
       return column.columns ? column.columns.length : pivotBy.indexOf(column.id) > -1 ? false : _.getFirstDefined(column.show, true)
     })
 
-    // Build allVisible columns and HeaderGroups
+    // Move the pivot columns into a single column if needed
+    if (pivotBy.length) {
+      const pivotColumns = []
+      for (var i = 0; i < allDecoratedColumns.length; i++) {
+        if (pivotBy.indexOf(allDecoratedColumns[i].id) > -1) {
+          pivotColumns.push(allDecoratedColumns[i])
+        }
+      }
+      const pivotColumn = {
+        ...pivotColumns[0],
+        pivotColumns,
+        expander: true
+      }
+      visibleColumns[expanderColumnIndex] = pivotColumn
+    }
+
+    // Build flast list of allVisibleColumns and HeaderGroups
     visibleColumns.forEach((column, i) => {
       if (column.columns) {
         allVisibleColumns = allVisibleColumns.concat(column.columns)
@@ -697,30 +836,14 @@ export default React.createClass({
       addHeader(currentSpan)
     }
 
-    // Move the pivot columns into a single column if needed
-    if (pivotBy.length) {
-      const pivotColumns = []
-      for (var i = 0; i < allDecoratedColumns.length; i++) {
-        if (pivotBy.indexOf(allDecoratedColumns[i].id) > -1) {
-          pivotColumns.push(allDecoratedColumns[i])
-        }
-      }
-      allVisibleColumns.unshift({
-        ...pivotColumns[0],
-        pivotColumns
-      })
-    }
-
-    // Determine the flex percentage for each column
-    const columnPercentage = 100 / allVisibleColumns.length
-
     // Access the data
-    let accessedData = data.map((d, i) => {
+    let resolvedData = data.map((d, i) => {
       const row = {
         __original: d,
         __index: i
       }
       allDecoratedColumns.forEach(column => {
+        if (column.expander) return
         row[column.id] = column.accessor(d)
       })
       return row
@@ -768,24 +891,33 @@ export default React.createClass({
         })
         return groupedRows
       }
-      accessedData = groupRecursively(accessedData, pivotBy)
+      resolvedData = groupRecursively(resolvedData, pivotBy)
     }
 
+    return {
+      resolvedData,
+      pivotColumn,
+      allVisibleColumns,
+      headerGroups,
+      allDecoratedColumns,
+      hasHeaderGroups
+    }
+  },
+
+  getSortedData (nextProps, nextState) {
+    const {
+      manual,
+      sorting,
+      allDecoratedColumns,
+      resolvedData
+    } = this.getResolvedState(nextProps, nextState)
+
     const resolvedSorting = sorting.length ? sorting : this.getInitSorting(allDecoratedColumns)
 
     // Resolve the data from either manual data or sorted data
-    const resolvedData = manual ? accessedData : this.sortData(accessedData, resolvedSorting)
-
     return {
-      columnPercentage,
-      pivotColumn,
-      resolvedData,
-      allVisibleColumns,
-      headerGroups,
-      standardColumns,
-      allDecoratedColumns,
-      hasHeaderGroups,
-      pages: manual ? pages : Math.ceil(resolvedData.length / pageSize)
+      resolvedSorting,
+      sortedData: manual ? resolvedData : this.sortData(resolvedData, resolvedSorting)
     }
   },
 
@@ -811,10 +943,12 @@ export default React.createClass({
       }
     })
 
-    return initSorting.length ? initSorting : [{
-      id: columns[0].id,
-      asc: true
-    }]
+    return initSorting
+
+    // return initSorting.length ? initSorting : [{
+    //   id: columns.find(d => d.id).id,
+    //   asc: true
+    // }]
   },
   sortData (data, sorting) {
     const sorted = _.sortBy(data, sorting.map(sort => {
@@ -836,27 +970,7 @@ export default React.createClass({
       }
     })
   },
-  makeDecoratedColumn (column) {
-    const dcol = Object.assign({}, this.props.column, column)
 
-    if (typeof dcol.accessor === 'string') {
-      dcol.id = dcol.id || dcol.accessor
-      const accessorString = dcol.accessor
-      dcol.accessor = row => _.get(row, accessorString)
-      return dcol
-    }
-
-    if (dcol.accessor && !dcol.id) {
-      console.warn(dcol)
-      throw new Error('A column id is required if using a non-string accessor for column above.')
-    }
-
-    if (!dcol.accessor) {
-      dcol.accessor = d => undefined
-    }
-
-    return dcol
-  },
   getMinRows () {
     return _.getFirstDefined(this.props.minRows, this.getStateOrProp('pageSize'))
   },
@@ -880,7 +994,7 @@ export default React.createClass({
 
     // Normalize the page to display
     const currentRow = pageSize * page
-    const newPage = Math.floor(currentRow / pageSize)
+    const newPage = Math.floor(currentRow / newPageSize)
 
     if (onPageSizeChange) {
       return onPageSizeChange(newPageSize, newPage)

src/index.styl

@@ -1,5 +1,3 @@
-@import 'nib'
-
 $easeOutQuad = cubic-bezier(0.250, 0.460, 0.450, 0.940)
 $easeOutBack = cubic-bezier(0.175,  0.885, 0.320, 1.275)
 $expandSize = 7px
@@ -108,7 +106,7 @@ $expandSize = 7px
       background: alpha(black, .03)
   &.-highlight
     .rt-tbody
-      .rt-tr:hover
+      .rt-tr:not(.-padRow):hover
         background: alpha(black, .05)
 
   .-pagination

src/utils.js

@@ -135,7 +135,7 @@ function prefixAll (obj) {
 function groupBy (xs, key) {
   return xs.reduce((rv, x, i) => {
     const resKey = typeof key === 'function' ? key(x, i) : x[key]
-    rv[resKey] = rv[resKey] || []
+    rv[resKey] = isArray(rv[resKey]) ? rv[resKey] : []
     rv[resKey].push(x)
     return rv
   }, {})

stories/CellRenderers.js

@@ -0,0 +1,170 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+export default () => {
+  const data = _.map(_.range(5553), d => {
+    const statusChance = Math.random()
+    return {
+      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'
+        : 'single'
+    }
+  })
+
+  const columns = [{
+    header: 'Name',
+    columns: [{
+      header: 'First Name',
+      accessor: 'firstName'
+    }, {
+      header: 'Last Name',
+      id: 'lastName',
+      accessor: d => d.lastName
+    }]
+  }, {
+    header: 'Info',
+    columns: [{
+      header: 'Profile Progress',
+      accessor: 'progress',
+      render: row => (
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#dadada',
+            borderRadius: '2px'
+          }}
+        >
+          <div
+            style={{
+              width: `${row.value}%`,
+              height: '100%',
+              backgroundColor: row.value > 66 ? '#85cc00'
+                : row.value > 33 ? '#ffbf00'
+                : '#ff2e00',
+              borderRadius: '2px',
+              transition: 'all .2s ease-out'
+            }}
+          />
+        </div>
+      )
+    }, {
+      header: 'Status',
+      accessor: 'status',
+      render: row => (
+        <span>
+          <span style={{
+            color: row.value === 'relationship' ? '#ff2e00'
+              : row.value === 'complicated' ? '#ffbf00'
+              : '#57d500',
+            transition: 'all .3s ease'
+          }}>
+            &#x25cf;
+          </span> {
+            row.value === 'relationship' ? 'In a relationship'
+            : row.value === 'complicated' ? `It's complicated`
+            : 'Single'
+          }
+        </span>
+      )
+    }]
+  }]
+
+  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>
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
+import ReactTable from 'react-table'
+
+const columns = [{
+  header: 'Name',
+  columns: [{
+    header: 'First Name',
+    accessor: 'firstName'
+  }, {
+    header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName
+  }]
+}, {
+  header: 'Info',
+  columns: [{
+    header: 'Profile Progress',
+    accessor: 'progress',
+    render: row => (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          backgroundColor: '#dadada',
+          borderRadius: '2px'
+        }}
+      >
+        <div
+          style={{
+            width: \`$\{row.value}%\`,
+            height: '100%',
+            backgroundColor: row.value > 66 ? '#85cc00'
+              : row.value > 33 ? '#ffbf00'
+              : '#ff2e00',
+            borderRadius: '2px',
+            transition: 'all .2s ease-out'
+          }}
+        />
+      </div>
+    )
+  }, {
+    header: 'Status',
+    accessor: 'status',
+    render: row => (
+      <span>
+        <span style={{
+          color: row.value === 'relationship' ? '#ff2e00'
+            : row.value === 'complicated' ? '#ffbf00'
+            : '#57d500',
+          transition: 'all .3s ease'
+        }}>
+          &#x25cf;
+        </span> {
+          row.value === 'relationship' ? 'In a relationship'
+          : row.value === 'complicated' ? \`It's complicated\`
+          : 'Single'
+        }
+      </span>
+    )
+  }]
+}]
+
+return (
+  <ReactTable
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+  />
+)
+  `
+}

stories/CustomExpanderPosition.js

@@ -0,0 +1,108 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+export default () => {
+  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)
+    }
+  })
+
+  const columns = [{
+    header: 'Name',
+    columns: [{
+      header: 'First Name',
+      accessor: 'firstName',
+      render: row => {
+        return <span>{row.aggregated ? '...' : row.value}</span>
+      }
+    }, {
+      header: 'Last Name',
+      id: 'lastName',
+      accessor: d => d.lastName
+    }]
+  }, {
+    expander: true
+  }, {
+    header: 'Info',
+    columns: [{
+      header: 'Age',
+      accessor: 'age',
+      aggregate: vals => _.round(_.mean(vals)),
+      render: row => {
+        return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
+      }
+    }]
+  }]
+
+  return (
+    <div>
+      <div className='table-wrap'>
+        <ReactTable
+          className='-striped -highlight'
+          data={data}
+          columns={columns}
+          defaultPageSize={10}
+          SubComponent={() => <span>Hello</span>}
+          pivotBy={['lastName']}
+        />
+      </div>
+      <div style={{textAlign: 'center'}}>
+        <br />
+        <em>Tip: Hold shift when sorting to multi-sort!</em>
+      </div>
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
+import ReactTable from 'react-table'
+
+// Create some column definitions
+const columns = [{
+  header: 'Name',
+  columns: [{
+    header: 'First Name',
+    accessor: 'firstName',
+    render: row => {
+      return <span>{row.aggregated ? '...' : row.value}</span>
+    }
+  }, {
+    header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName
+  }]
+}, {
+  expander: true
+}, {
+  header: 'Info',
+  columns: [{
+    header: 'Age',
+    accessor: 'age',
+    aggregate: vals => _.round(_.mean(vals)),
+    render: row => {
+      return <span>{row.aggregated ? \`$\{row.value} (avg)\` : row.value}</span>
+    }
+  }]
+}]
+
+return (
+  <ReactTable
+    className='-striped -highlight'
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+    SubComponent={() => <span>Hello</span>}
+    pivotBy={['lastName']}
+  />
+)
+  `
+}

stories/CustomWidths.js

@@ -0,0 +1,91 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+export default () => {
+  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)
+    }
+  })
+
+  const columns = [{
+    header: 'Name',
+    columns: [{
+      header: 'First Name',
+      accessor: 'firstName',
+      maxWidth: 200
+    }, {
+      header: 'Last Name',
+      id: 'lastName',
+      accessor: d => d.lastName,
+      width: 300
+    }]
+  }, {
+    header: 'Info',
+    columns: [{
+      header: 'Age',
+      accessor: 'age',
+      minWidth: 400
+    }]
+  }]
+
+  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>
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
+import ReactTable from 'react-table'
+
+const columns = [{
+  header: 'Name',
+  columns: [{
+    header: 'First Name',
+    accessor: 'firstName',
+    maxWidth: 200
+  }, {
+    header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName,
+    width: 300
+  }]
+}, {
+  header: 'Info',
+  columns: [{
+    header: 'Age',
+    accessor: 'age',
+    minWidth: 400
+  }]
+}]
+
+return (
+  <ReactTable
+    className='-striped -highlight'
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+  />
+)
+  `
+}

stories/DefaultSorting.js

@@ -0,0 +1,87 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+export default () => {
+  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)
+    }
+  })
+
+  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',
+      sort: 'desc'
+    }]
+  }]
+
+  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>
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
+import ReactTable from 'react-table'
+
+// Create some column definitions
+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'
+  }]
+}]
+
+// Display your table!
+return (
+  <ReactTable
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+  />
+)
+  `
+}

stories/FunctionalRendering.js

@@ -0,0 +1,140 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+import JSONTree from 'react-json-tree'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+const JSONtheme = {
+  scheme: 'monokai',
+  author: 'wimer hazenberg (http://www.monokai.nl)',
+  base00: '#272822',
+  base01: '#383830',
+  base02: '#49483e',
+  base03: '#75715e',
+  base04: '#a59f85',
+  base05: '#f8f8f2',
+  base06: '#f5f4f1',
+  base07: '#f9f8f5',
+  base08: '#f92672',
+  base09: '#fd971f',
+  base0A: '#f4bf75',
+  base0B: '#a6e22e',
+  base0C: '#a1efe4',
+  base0D: '#66d9ef',
+  base0E: '#ae81ff',
+  base0F: '#cc6633'
+}
+
+export default () => {
+  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)
+    }
+  })
+
+  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}
+        >
+          {(state, makeTable, instance) => {
+            console.log(state)
+            return (
+              <div>
+                Look! This is the entire table state and component instance at your disposal!
+                <JSONTree
+                  data={Object.assign({}, state, {children: 'function () {...}'})}
+                  theme={JSONtheme}
+                  invertTheme
+                />
+                <br />
+                <br />
+                {makeTable()}
+              </div>
+            )
+          }}
+        </ReactTable>
+      </div>
+      <br />
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
+import ReactTable from 'react-table'
+
+// Create some column definitions
+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'
+  }]
+}]
+
+// Display your table!
+return (
+  <ReactTable
+    className='-striped -highlight'
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+  >
+    {(state, makeTable, instance) => {
+      console.log(state)
+      return (
+        <div>
+          Look! This is the entire table state and component instance at your disposal!
+          <JSONTree
+            data={Object.assign({}, state, {children: 'function () {...}'})}
+            theme={JSONtheme}
+            invertTheme
+          />
+          <br />
+          <br />
+          {makeTable()}
+        </div>
+      )
+    }}
+  </ReactTable>
+)
+  `
+}

stories/OneHundredKRows.js

@@ -0,0 +1,139 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+export default () => {
+  const data = _.map(_.range(100000), d => {
+    return {
+      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)
+    }
+  })
+
+  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',
+      aggregate: vals => _.round(_.mean(vals)),
+      render: row => {
+        return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
+      }
+    }, {
+      header: 'Visits',
+      accessor: 'visits',
+      aggregate: vals => _.sum(vals)
+    }]
+  }]
+
+  return (
+    <div>
+      <div className='table-wrap'>
+        <ReactTable
+          data={data}
+          columns={columns}
+          className='-striped -highlight'
+          defaultPageSize={10}
+          pivotBy={['firstName', 'lastName']}
+          SubComponent={(row) => {
+            return (
+              <div style={{padding: '20px'}}>
+                <em>You can put any component you want here, even another React Table!</em>
+                <br />
+                <br />
+                <ReactTable
+                  data={data}
+                  columns={columns}
+                  defaultPageSize={3}
+                  showPagination={false}
+                  SubComponent={(row) => {
+                    return (
+                      <div style={{padding: '20px'}}>
+                        <em>It even has access to the row data: </em>
+                        <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
+                      </div>
+                    )
+                  }}
+                />
+              </div>
+            )
+          }}
+        />
+      </div>
+      <div style={{textAlign: 'center'}}>
+        <br />
+        <em>Tip: Hold shift when sorting to multi-sort!</em>
+      </div>
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
+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'
+  }]
+}]
+
+export default (
+  <ReactTable
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+    pivotBy={['firstName', 'lastName']}
+    SubComponent={(row) => {
+      return (
+        <div style={{padding: '20px'}}>
+          <em>You can put any component you want here, even another React Table!</em>
+          <br />
+          <br />
+          <ReactTable
+            data={data}
+            columns={columns}
+            defaultPageSize={3}
+            showPagination={false}
+            SubComponent={(row) => {
+              return (
+                <div style={{padding: '20px'}}>
+                  <em>It even has access to the row data: </em>
+                  <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
+                </div>
+              )
+            }}
+          />
+        </div>
+      )
+    }}
+  />
+)
+  `
+}

stories/Pivoting.js

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import namor from 'namor'
 
 import CodeHighlight from './components/codeHighlight'
-import ReactTable from '../lib/index'
+import ReactTable from '../src/index'
 
 export default () => {
   const data = _.map(_.range(10000), d => {
@@ -47,6 +47,7 @@ export default () => {
         <ReactTable
           data={data}
           columns={columns}
+          className='-striped -highlight'
           defaultPageSize={10}
           pivotBy={['firstName', 'lastName']}
           // expandedRows={{

stories/PivotingSubComponents.js

@@ -3,10 +3,10 @@ import _ from 'lodash'
 import namor from 'namor'
 
 import CodeHighlight from './components/codeHighlight'
-import ReactTable from '../lib/index'
+import ReactTable from '../src/index'
 
 export default () => {
-  const data = _.map(_.range(10000), d => {
+  const data = _.map(_.range(1000), d => {
     return {
       firstName: namor.generate({ words: 1, numLen: 0 }),
       lastName: namor.generate({ words: 1, numLen: 0 }),
@@ -48,6 +48,7 @@ export default () => {
           data={data}
           columns={columns}
           defaultPageSize={10}
+          className='-striped -highlight'
           pivotBy={['firstName', 'lastName']}
           SubComponent={(row) => {
             return (

stories/ServerSide.js

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import namor from 'namor'
 
 import CodeHighlight from './components/codeHighlight'
-import ReactTable from '../lib/index'
+import ReactTable from '../src/index'
 
 const rawData = _.map(_.range(3424), d => {
   return {
@@ -68,22 +68,17 @@ const ServerSide = React.createClass({
       <div>
         <div className='table-wrap'>
           <ReactTable
+            className='-striped -highlight'
             columns={[{
-              header: 'Name',
-              columns: [{
-                header: 'First Name',
-                accessor: 'firstName'
-              }, {
-                header: 'Last Name',
-                id: 'lastName',
-                accessor: d => d.lastName
-              }]
+              header: 'First Name',
+              accessor: 'firstName'
             }, {
-              header: 'Info',
-              columns: [{
-                header: 'Age',
-                accessor: 'age'
-              }]
+              header: 'Last Name',
+              id: 'lastName',
+              accessor: d => d.lastName
+            }, {
+              header: 'Age',
+              accessor: 'age'
             }]}
             manual // Forces table not to paginate or sort automatically, so we can handle it server-side
             defaultPageSize={10}
@@ -141,34 +136,26 @@ export default React.createClass({
       })
   },
   render () {
-    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 (
       <ReactTable
-        columns={columns}
-        manual // This forces table not to paginate or sort automatically, so we can handle things server-side
+        columns={[{
+          header: 'First Name',
+          accessor: 'firstName'
+        }, {
+          header: 'Last Name',
+          id: 'lastName',
+          accessor: d => d.lastName
+        }, {
+          header: 'Age',
+          accessor: 'age'
+        }]}
+        manual // Forces table not to paginate or sort automatically, so we can handle it server-side
+        defaultPageSize={10}
         data={this.state.data} // Set the rows to be displayed
         pages={this.state.pages} // Display the total number of pages
         loading={this.state.loading} // Display the loading overlay when we need it
         onChange={this.fetchData} // Request new data when things change
       />
-    )
   }
 })
   `

stories/Simple.js

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import namor from 'namor'
 
 import CodeHighlight from './components/codeHighlight'
-import ReactTable from '../lib/index'
+import ReactTable from '../src/index'
 
 export default () => {
   const data = _.map(_.range(5553), d => {
@@ -36,6 +36,7 @@ export default () => {
     <div>
       <div className='table-wrap'>
         <ReactTable
+          className='-striped -highlight'
           data={data}
           columns={columns}
           defaultPageSize={10}

stories/SubComponents.js

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import namor from 'namor'
 
 import CodeHighlight from './components/codeHighlight'
-import ReactTable from '../lib/index'
+import ReactTable from '../src/index'
 
 export default () => {
   const data = _.map(_.range(5553), d => {
@@ -36,6 +36,7 @@ export default () => {
     <div>
       <div className='table-wrap'>
         <ReactTable
+          className='-striped -highlight'
           data={data}
           columns={columns}
           defaultPageSize={10}

stories/components/Logo.js

@@ -1,14 +0,0 @@
-import React from 'react'
-import banner from '../../media/Banner.png'
-
-export default () => (
-  <div>
-    <div style={{textAlign: 'center'}}>
-      <a href='https://github.com/tannerlinsley/react-table' target='_blank'>
-        <img src={banner} className='logo' />
-      </a>
-      <br />
-      <br />
-    </div>
-  </div>
-)

zab.json

@@ -1,8 +0,0 @@
-{
-  "name": "react-table",
-  "root": "storybook-static",
-  "routes": [{
-    "src": "/**",
-    "dest": "index.html"
-  }]
-}