4.2.5

.storybook/config.js

@@ -11,8 +11,12 @@ import '../react-table.css'
 import Readme from '../README.md'
 //
 import Simple from '../stories/Simple.js'
+import CellRenderers from '../stories/CellRenderers.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'
 //
 configure(() => {
   storiesOf('1. Docs')
@@ -28,7 +32,11 @@ configure(() => {
       return <ReadmeCmp />
     })
   storiesOf('2. Demos')
-    .add('Client-side Data', Simple)
+    .add('Simple Table', Simple)
+    .add('Cell Renderers & Custom Components', CellRenderers)
     .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)
 }, 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,17 +8,34 @@
 # 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-table-slack.herokuapp.com/" target="\_parent">
+  <img alt="" src="https://img.shields.io/badge/slack-react--table-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
 
-- Lightweight at 4kb (and just 2kb more for styles)
-- Fully customizable JSX and callbacks for everything
-- Supports both Client-side & Server-side pagination and sorting
+- Lightweight at 7kb (and just 2kb more for styles)
+- Fully customizable JSX templating
+- Supports both Client-side & Server-side pagination and multi-sorting
+- Column Pivoting & Aggregation
 - Minimal design & easily themeable
-- <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
+- 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="\_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)
@@ -28,7 +45,8 @@
 - [Columns](#columns)
 - [Styles](#styles)
 - [Header Groups](#header-groups)
-- [Sub Tables & Components](#sub-tables-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)
@@ -128,9 +146,9 @@ These are all of the available props (and their default values) for the main `<R
   page: undefined,
   pageSize: undefined,
   sorting: undefined,
-  visibleSubComponents: undefined,
+  expandedRows: undefined,
   // Controlled Callbacks
-  onExpand: undefined,
+  onExpandRow: undefined,
   onPageChange: undefined,
   onPageSizeChange: undefined,
 }
@@ -155,7 +173,7 @@ Or just define them on the component per-instance
   defaultPageSize={10}
   minRows={3}
   // etc...
-  />
+/>
 ```
 
 ## Columns
@@ -213,7 +231,37 @@ const columns = [{
 }]
 ```
 
-## Sub Tables & Components
+## Pivoting & Aggregation
+Pivoting the table will group records together based on their accessed values and allow the rows in that group to be expanded underneath it.
+To pivot, pass an array of `columnID`'s to `pivotBy`. Remember, a column's `id` is either the one that you assign it (when using a custom accessors) or its `accessor` string.
+```javascript
+<ReactTable
+  ...
+  pivotBy={['lastName', 'age']}
+/>
+```
+
+Naturally when grouping rows together, you may want to aggregate the rows inside it into the grouped column. No aggregation is done by default, however, it is very simple to aggregate any pivoted columns:
+```javascript
+// In this example, we use lodash to sum and average the values, but you can use whatever you want to aggregate.
+const columns = [{
+  header: 'Age',
+  accessor: 'age',
+  aggregate: (values, rows) => _.round(_.mean(values)),
+  render: row => {
+    // You can even render the cell differently if it's an aggregated cell
+    return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
+  }
+}, {
+  header: 'Visits',
+  accessor: 'visits',
+  aggregate: (values, rows) => _.sum(values)
+}]
+```
+
+Pivoted columns can be sorted just like regular columns, but not independently of each other.  For instance, if you click to sort the pivot column in ascending order, it will sort by each pivot recursively in ascending order together.
+
+## Sub Tables & Sub Components
 By adding a `SubComponent` props, you can easily add an expansion level to all root-level rows:
 ```javascript
 <ReactTable
@@ -269,7 +317,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.
@@ -287,13 +335,20 @@ Here are the props and their corresponding callbacks that control the state of t
       id: 'firstName',
       asc: true
   }]} // the sorting model for the table
-  visibleSubComponents={[1,4,5]} // The row indexes on the current page that should appear expanded
+  expandedRows={{
+    1: true,
+    4: true,
+    5: {
+      2: true,
+      3: true
+    }
+  }} // The nested row indexes on the current page that should appear expanded
 
   // Callbacks
   onPageChange={(pageIndex) => {...}} // Called when the page index is changed by the user
   onPageSizeChange={(pageSize, pageIndex) => {...}} // Called when the pageSize is changed by the user. The resolve page is also sent to maintain approximate position in the data
-  onSortingChange={(column, shiftKey) => {...}} // Called when a sortable column header is clicked with the column itself and if the shiftkey was held.
-  onExpand={(index, event) => {...}} // Called when an expander is clicked. Use this to manage `visibleSubComponents`
+  onSortingChange={(column, shiftKey) => {...}} // Called when a sortable column header is clicked with the column itself and if the shiftkey was held. If the column is a pivoted column, `column` will be an array of columns
+  onExpandRow={(index, event) => {...}} // Called when an expander is clicked. Use this to manage `expandedRows`
 />
 ```
 
@@ -328,7 +383,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
@@ -341,18 +396,15 @@ If you would like to help develop a suggested feature follow these steps:
 - Implement your changes to files in the `src/` directory
 - Submit PR for review
 
-If you would like to preview your changes, you can link and utilize the example like so:
+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:
 
-- `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
+- `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`
 
 ## 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.6255f53218a1ea5fdea0.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.2">
+        <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.7351266fe8166602d73f.bundle.js"></script>
+      </body>
+    </html>
+  

docs/static/manager.7351266fe8166602d73f.bundle.js.map

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

docs/static/preview.6255f53218a1ea5fdea0.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.6255f53218a1ea5fdea0.bundle.js","sources":["webpack:///static/preview.6255f53218a1ea5fdea0.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AAuuDA;AA46EA;AA2lGA;AAmpIA;AAnwOA;AAsweA;AA8zDA;AA0nEA;AAqkDA;AAq+CA;AAuiEA;AAupDA;AA68CA;AAioDA;AAqsEA;AAmpDA;AAgvCA;AA6oDA;AAwkDA;AAypEA;AAu2DA;AAgpDA;AAwkDA;AAm5EA;AA0mHA;AAyqDA;AAskCA;AAyyCA;AA0aA;AAo8CA","sourceRoot":""}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "4.1.1",
+  "version": "4.2.5",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -32,7 +32,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"
   },
   "dependencies": {
     "classnames": "^2.2.5"
@@ -73,7 +73,8 @@
       "lib",
       "example",
       "react-table.js",
-      "stories"
+      "stories",
+      "docs"
     ]
   },
   "babel": {

src/index.styl

@@ -56,6 +56,8 @@ $expandSize = 7px
       border-right:1px solid alpha(black, .02)
       &:last-child
         border-right:0
+    .rt-pivot
+      cursor: pointer
   .rt-tr-group
     display: flex
     flex-direction: column
@@ -79,29 +81,35 @@ $expandSize = 7px
       border:0 !important
       opacity: 0 !important
 
-  .rt-expander-wrap
-    display:flex
-    align-items: center
-    justify-content: center
-    cursor: pointer
-
   .rt-expander
-    width: 0
-    height: 0
-    border-left: ($expandSize * .72) solid transparent
-    border-right: ($expandSize * .72) solid transparent
-    border-top: $expandSize solid alpha(black, .8)
-    transition: all .3s $easeOutBack
-    transform: rotate(-90deg)
-    &.-open
-      transform: rotate(0deg)
+    display: inline-block
+    position:relative
+    margin: 0
+    color: transparent
+    margin: 0 10px
+    &:after
+      content: ''
+      position: absolute
+      width: 0
+      height: 0
+      top:50%
+      left:50%
+      transform: translate(-50%, -50%) rotate(-90deg)
+      border-left: ($expandSize * .72) solid transparent
+      border-right: ($expandSize * .72) solid transparent
+      border-top: $expandSize solid alpha(black, .8)
+      transition: all .3s $easeOutBack
+      cursor: pointer
+    &.-open:after
+        transform: translate(-50%, -50%) rotate(0deg)
 
   &.-striped
-    .rt-tr-group:nth-child(even)
+    .rt-tr.-odd
       background: alpha(black, .03)
   &.-highlight
-    .rt-tr-group:hover
-      background: alpha(black, .05)
+    .rt-tbody
+      .rt-tr:not(.-padRow):hover
+        background: alpha(black, .05)
 
   .-pagination
     z-index: 1

src/pagination.js

@@ -17,7 +17,7 @@ export default React.createClass({
     this.setState({page: nextProps.page})
   },
   getSafePage (page) {
-    return Math.min(Math.max(page, 0), this.props.pagesLength - 1)
+    return Math.min(Math.max(page, 0), this.props.pages - 1)
   },
   changePage (page) {
     page = this.getSafePage(page)
@@ -32,7 +32,7 @@ export default React.createClass({
   render () {
     const {
       // Computed
-      pagesLength,
+      pages,
       // Props
       page,
       showPageSizeOptions,
@@ -85,7 +85,7 @@ export default React.createClass({
               </form>
             ) : (
               <span className='-currentPage'>{page + 1}</span>
-            )} {this.props.ofText} <span className='-totalPages'>{pagesLength}</span>
+            )} {this.props.ofText} <span className='-totalPages'>{pages}</span>
           </span>
           {showPageSizeOptions && (
             <span className='select-wrap -pageSizeOptions'>

src/utils.js

@@ -3,41 +3,45 @@ import classnames from 'classnames'
 //
 export default {
   get,
+  set,
   takeRight,
   last,
-  orderBy,
+  sortBy,
   range,
-  clone,
   remove,
+  clone,
   getFirstDefined,
   sum,
   makeTemplateComponent,
-  prefixAll
+  prefixAll,
+  groupBy,
+  isArray
 }
 
-function remove (a, b) {
-  return a.filter(function (o, i) {
-    var r = b(o)
-    if (r) {
-      a.splice(i, 1)
-      return true
-    }
-    return false
-  })
-}
-
-function get (a, b) {
-  if (isArray(b)) {
-    b = b.join('.')
+function get (obj, path, def) {
+  if (!path) {
+    return obj
   }
-  return b
-    .replace('[', '.').replace(']', '')
-    .split('.')
-    .reduce(
-      function (obj, property) {
-        return obj[property]
-      }, a
-    )
+  const pathObj = makePathArray(path)
+  let val
+  try {
+    val = pathObj.reduce((current, pathPart) => current[pathPart], obj)
+  } catch (e) {}
+  return typeof val !== 'undefined' ? val : def
+}
+
+function set (obj = {}, path, value) {
+  const keys = makePathArray(path)
+  let keyPart
+  let cursor = obj
+  while ((keyPart = keys.shift()) && keys.length) {
+    if (!cursor[keyPart]) {
+      cursor[keyPart] = {}
+    }
+    cursor = cursor[keyPart]
+  }
+  cursor[keyPart] = value
+  return obj
 }
 
 function takeRight (arr, n) {
@@ -57,7 +61,7 @@ function range (n) {
   return arr
 }
 
-function orderBy (arr, funcs, dirs) {
+function sortBy (arr, funcs, dirs) {
   return arr.sort((a, b) => {
     for (let i = 0; i < funcs.length; i++) {
       const comp = funcs[i]
@@ -75,21 +79,28 @@ function orderBy (arr, funcs, dirs) {
   })
 }
 
-function clone (a) {
-  return JSON.parse(JSON.stringify(a, function (key, value) {
-    if (typeof value === 'function') {
-      return value.toString()
+function remove (a, b) {
+  return a.filter(function (o, i) {
+    var r = b(o)
+    if (r) {
+      a.splice(i, 1)
+      return true
     }
-    return value
-  }))
+    return false
+  })
 }
 
-// ########################################################################
-// Helpers
-// ########################################################################
-
-function isArray (a) {
-  return Array.isArray(a)
+function clone (a) {
+  try {
+    return JSON.parse(JSON.stringify(a, (key, value) => {
+      if (typeof value === 'function') {
+        return value.toString()
+      }
+      return value
+    }))
+  } catch (e) {
+    return a
+  }
 }
 
 function getFirstDefined (...args) {
@@ -120,3 +131,39 @@ function makeTemplateComponent (compClass) {
 function prefixAll (obj) {
   return obj
 }
+
+function groupBy (xs, key) {
+  return xs.reduce((rv, x, i) => {
+    const resKey = typeof key === 'function' ? key(x, i) : x[key]
+    rv[resKey] = isArray(rv[resKey]) ? rv[resKey] : []
+    rv[resKey].push(x)
+    return rv
+  }, {})
+}
+
+function isArray (a) {
+  return Array.isArray(a)
+}
+
+// ########################################################################
+// Non-exported Helpers
+// ########################################################################
+
+function makePathArray (obj) {
+  return flattenDeep(obj)
+      .join('.')
+      .replace('[', '.')
+      .replace(']', '')
+      .split('.')
+}
+
+function flattenDeep (arr, newArr = []) {
+  if (!isArray(arr)) {
+    newArr.push(arr)
+  } else {
+    for (var i = 0; i < arr.length; i++) {
+      flattenDeep(arr[i], newArr)
+    }
+  }
+  return newArr
+}

stories/CellRenderers.js

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

@@ -0,0 +1,138 @@
+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}
+          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

@@ -0,0 +1,120 @@
+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(10000), 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}
+          defaultPageSize={10}
+          pivotBy={['firstName', 'lastName']}
+          // expandedRows={{
+          //   2: true,
+          //   3: {
+          //     2: true
+          //   }
+          // }}
+        />
+      </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}
+    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/PivotingSubComponents.js

@@ -0,0 +1,138 @@
+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(1000), 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}
+          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/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 {
@@ -48,6 +48,7 @@ const ServerSide = React.createClass({
     }
   },
   fetchData (state, instance) {
+    console.log(state, instance)
     // Whenever the table model changes, or the user sorts or changes pages, this method gets called and passed the current table model.
     // You can set the `loading` prop of the table to true to use the built-in one or show you're own loading bar if you want.
     this.setState({loading: true})
@@ -68,21 +69,15 @@ const ServerSide = React.createClass({
         <div className='table-wrap'>
           <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}
@@ -140,34 +135,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 => {

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 => {

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"
-  }]
-}