4.4.1

Bug fix in installation docs

.gitignore

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

.storybook/config.js

@@ -11,11 +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')
@@ -31,10 +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

@@ -15,8 +15,8 @@
 <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-table-slack.herokuapp.com/" target="\_parent">
-  <img alt="" src="https://img.shields.io/badge/slack-react--table-blue.svg" />
+<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" />
@@ -35,7 +35,7 @@
 - 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="\_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="\_parent">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)
@@ -49,13 +49,32 @@
 - [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
@@ -187,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
@@ -211,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:
@@ -352,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!
 
@@ -391,17 +467,19 @@ To suggest a feature, create an issue if it does not already exist.
 If you would like to help develop a suggested feature follow these steps:
 
 - Fork this repo
-- `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 as you develop, you can link and utilize our <a href="https://github.com/storybooks/react-storybook" target="\_parent">React Storybook</a> like so:
+#### Scripts
 
-- `npm install`
-- `run storybook` (or run them in separate tabs)
-- Make changes to stories in `/stories`, or create a new one 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
 

docs/CNAME

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

docs/iframe.html

@@ -16,7 +16,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.30adfa2464622c0f1904.bundle.js"></script>
+        <script src="static/preview.eaae7b0eec1fc944fd56.bundle.js"></script>
       </body>
     </html>
   

docs/index.html

@@ -4,7 +4,7 @@
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="storybook-version" content="2.35.2">
+        <meta name="storybook-version" content="2.35.3">
         <title>React Storybook</title>
         <style>
           /*
@@ -38,7 +38,7 @@
       </head>
       <body style="margin: 0;">
         <div id="root"></div>
-        <script src="static/manager.32cbfa2b6d56d1f8fbac.bundle.js"></script>
+        <script src="static/manager.1ef8adb8615e5a688f5d.bundle.js"></script>
       </body>
     </html>
   

docs/static/manager.1ef8adb8615e5a688f5d.bundle.js.map

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

docs/static/manager.32cbfa2b6d56d1f8fbac.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/manager.32cbfa2b6d56d1f8fbac.bundle.js","sources":["webpack:///static/manager.32cbfa2b6d56d1f8fbac.bundle.js"],"mappings":"AAAA;AA4zDA;AAg4DA;AAwgEA;AAqiEA;AAk0EA;AA67CA;AA0qDA;AAy4DA;AA8lDA;AA4hDA;AA62DA;AA+/DA;AA6mDA;AAsyCA;AA2gDA;AA+2DA;AA+jEA;AAixDA;AA6lDA;AA+nDA;AA0qEA;AAinDA;AAs3DA;AA80GA;AAhvCA;AAuqGA;AAuqEA;AA6wEA;AAleA;AA+gEA;AA+mCA","sourceRoot":""}

docs/static/preview.30adfa2464622c0f1904.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.30adfa2464622c0f1904.bundle.js","sources":["webpack:///static/preview.30adfa2464622c0f1904.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AAo9DA;AA24DA;AAg3CA;AAkoIA;AAgwGA;AA+sPA;AAk6CA;AAq4DA;AA4gDA;AAmpDA;AA05DA;AAkoDA;AAu+CA;AA0rDA;AAiqEA;AAyoDA;AA8xCA;AAmnDA;AAqzDA;AAqhEA;AAqwDA;AAk7DA;AAw1CA;AAisFA;AAw3GA;AAo/CA;AAikCA;AA29BA;AA+vBA;AAy1CA","sourceRoot":""}

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

@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.eaae7b0eec1fc944fd56.bundle.js","sources":["webpack:///static/preview.eaae7b0eec1fc944fd56.bundle.js"],"mappings":"AAAA;AAkuDA;AA2vDA;AAs2CA;AAqoIA;AA2wGA;AA0pPA;AAs8CA;AA4/DA;AA6tDA;AA+7DA;AA6nDA;AAwtDA;AA47CA;AAk/DA;AA2lDA;AA4+CA;AAwmDA;AAq9DA;AA84DA;AAywCA;AAyoDA;AAwxDA;AAo8DA;AAk3DA;AAmxDA;AA4sCA;AAysGA;AA65FA;AAmgDA;AAq+BA;AAwzDA;AAkhCA;AAgQA;AA84EA","sourceRoot":""}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "4.2.4",
+  "version": "4.4.1",
   "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",
-    "docs": "build-storybook -o docs"
+    "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"

src/index.js

@@ -28,7 +28,7 @@ export const ReactTableDefaults = {
   onSortingChange: undefined,
 
   // Pivoting
-  pivotBy: [],
+  pivotBy: undefined,
   pivotColumnWidth: 200,
   pivotValKey: '_pivotVal',
   pivotIDKey: '_pivotID',
@@ -45,7 +45,7 @@ export const ReactTableDefaults = {
   onTrClick: () => null,
 
   // Classes
-  className: '-striped -highlight',
+  className: '',
   tableClassName: '',
   theadClassName: '',
   tbodyClassName: '',
@@ -208,6 +208,7 @@ export default React.createClass({
   render () {
     const resolvedProps = this.getResolvedState()
     const {
+      children,
       className,
       style,
       tableClassName,
@@ -234,12 +235,10 @@ export default React.createClass({
       loading,
       pageSize,
       page,
-      sorting,
+      resolvedSorting,
       pages,
       // Pivoting State
-      pivotBy,
       pivotValKey,
-      pivotIDKey,
       subRowsKey,
       expandedRows,
       onExpandRow,
@@ -255,19 +254,18 @@ export default React.createClass({
       PaginationComponent,
       LoadingComponent,
       SubComponent,
-      columnPercentage,
       // Data model
-      pivotColumn,
       resolvedData,
       allVisibleColumns,
       headerGroups,
-      standardColumns,
-      allDecoratedColumns,
       hasHeaderGroups,
       // 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
@@ -294,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={sortedData}
-                    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={sortedData}
-                          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}
@@ -424,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)
@@ -453,8 +474,6 @@ 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={rowInfo.nestingPath.join('_')}>
           <TrComponent
@@ -462,15 +481,14 @@ export default React.createClass({
             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)
                   }
@@ -483,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' ? (
@@ -557,15 +609,18 @@ export default React.createClass({
                 })}
               />
             )}
-            {standardColumns.map((column, i2) => {
+            {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: `${columnPercentage} 0 auto`,
-                    width: `${column.minWidth}px`
+                    flex: `${width} 0 auto`,
+                    width: `${width}px`,
+                    maxWidth: `${maxWidth}px`
                   })}
                 >
                   &nbsp;
@@ -577,7 +632,7 @@ export default React.createClass({
       )
     }
 
-    return (
+    const makeTable = () => (
       <div
         className={classnames(className, 'ReactTable')}
         style={style}
@@ -586,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))}
@@ -615,17 +670,34 @@ 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
   getDataModel (nextProps, nextState) {
     const {
       columns,
-      pivotBy,
+      pivotBy = [],
       data,
       pivotIDKey,
       pivotValKey,
-      subRowsKey
+      subRowsKey,
+      expanderColumnWidth,
+      SubComponent
     } = this.getResolvedState(nextProps, nextState)
 
     // Determine Header Groups
@@ -641,21 +713,67 @@ 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,
@@ -666,7 +784,7 @@ export default React.createClass({
       }
     })
 
-    // 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 = []
 
@@ -685,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)
@@ -702,23 +836,6 @@ 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 resolvedData = data.map((d, i) => {
       const row = {
@@ -726,6 +843,7 @@ export default React.createClass({
         __index: i
       }
       allDecoratedColumns.forEach(column => {
+        if (column.expander) return
         row[column.id] = column.accessor(d)
       })
       return row
@@ -778,11 +896,9 @@ export default React.createClass({
 
     return {
       resolvedData,
-      columnPercentage,
       pivotColumn,
       allVisibleColumns,
       headerGroups,
-      standardColumns,
       allDecoratedColumns,
       hasHeaderGroups
     }
@@ -800,6 +916,7 @@ export default React.createClass({
 
     // Resolve the data from either manual data or sorted data
     return {
+      resolvedSorting,
       sortedData: manual ? resolvedData : this.sortData(resolvedData, resolvedSorting)
     }
   },
@@ -826,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 => {
@@ -851,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'))
   },

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

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,107 @@
+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
+    }]
+  }, {
+    header: 'Info',
+    columns: [{
+      header: 'Age',
+      accessor: 'age',
+      aggregate: vals => _.round(_.mean(vals)),
+      render: row => {
+        return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
+      }
+    }]
+  }, {
+    expander: true
+  }]
+
+  return (
+    <div>
+      <div className='table-wrap'>
+        <ReactTable
+          className='-striped -highlight'
+          data={data}
+          columns={columns}
+          defaultPageSize={10}
+          SubComponent={() => <span>Hello</span>}
+        />
+      </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

@@ -47,6 +47,7 @@ export default () => {
         <ReactTable
           data={data}
           columns={columns}
+          className='-striped -highlight'
           defaultPageSize={10}
           pivotBy={['firstName', 'lastName']}
           SubComponent={(row) => {

stories/Pivoting.js

@@ -47,6 +47,7 @@ export default () => {
         <ReactTable
           data={data}
           columns={columns}
+          className='-striped -highlight'
           defaultPageSize={10}
           pivotBy={['firstName', 'lastName']}
           // expandedRows={{

stories/PivotingSubComponents.js

@@ -48,6 +48,7 @@ export default () => {
           data={data}
           columns={columns}
           defaultPageSize={10}
+          className='-striped -highlight'
           pivotBy={['firstName', 'lastName']}
           SubComponent={(row) => {
             return (

stories/ServerSide.js

@@ -68,6 +68,7 @@ const ServerSide = React.createClass({
       <div>
         <div className='table-wrap'>
           <ReactTable
+            className='-striped -highlight'
             columns={[{
               header: 'First Name',
               accessor: 'firstName'
@@ -135,42 +136,18 @@ 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={[{
-          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}

stories/Simple.js

@@ -36,6 +36,7 @@ export default () => {
     <div>
       <div className='table-wrap'>
         <ReactTable
+          className='-striped -highlight'
           data={data}
           columns={columns}
           defaultPageSize={10}

stories/SubComponents.js

@@ -36,6 +36,7 @@ export default () => {
     <div>
       <div className='table-wrap'>
         <ReactTable
+          className='-striped -highlight'
           data={data}
           columns={columns}
           defaultPageSize={10}