5.6.0

* Convert expander column to be more like a regular column.

* Update story.

* Simplify setting render on defaultExpander.

* Add more control over expander and pivot columns using the  column.

* Fix default filtering on pivot column.

* Add comments.

.storybook/config.js

@@ -25,6 +25,8 @@ import CustomExpanderPosition from '../stories/CustomExpanderPosition.js'
 import NoDataText from '../stories/NoDataText.js'
 import Footers from '../stories/Footers.js'
 import Filtering from '../stories/Filtering.js'
+import ControlledTable from '../stories/ControlledTable.js'
+import PivotingOptions from '../stories/PivotingOptions.js'
 //
 configure(() => {
   storiesOf('1. Docs')
@@ -50,9 +52,11 @@ configure(() => {
     .add('Pivoting & Aggregation', Pivoting)
     .add('Pivoting & Aggregation w/ Sub Components', PivotingSubComponents)
     .add('100k Rows w/ Pivoting & Sub Components', OneHundredKRows)
+    .add('Pivoting Options', PivotingOptions)
     .add('Functional Rendering', FunctionalRendering)
     .add('Custom Expander Position', CustomExpanderPosition)
     .add('Custom "No Data" Text', NoDataText)
     .add('Footers', Footers)
     .add('Custom Filtering', Filtering)
+    .add('Controlled Component', ControlledTable)
 }, module)

.storybook/fonts.css

@@ -14,4 +14,5 @@ h1 {
 
 p {
   margin-bottom: 15px;
+  line-height: 22px;
 }

ISSUE_TEMPLATE.md

@@ -1,15 +1,15 @@
 ## Problem Description
 include a detailed explanation of the problem here...
 
-## Code Snippet(s)
+## Code Snippet(s) or Codepen (http://codepen.io/tannerlinsley/pen/QpeZBa?editors=0010)
 
 ## Steps to Reproduce
-1. list the steps 
+1. list the steps
 2. to reproduce the issue
 
 ## System Information
-**Browser & Browser Version:**
-**Node Version:**
-**OS Version:**
-**NPM Version:**
-**Yarn Version:**
+* **Browser & Browser Version:**
+* **Node Version:**
+* **OS Version:**
+* **NPM Version:**
+* **Yarn Version:**

README.md

@@ -38,7 +38,9 @@
 - 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.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>
+## Demos and examples
+- <a href="http://codepen.io/tannerlinsley/pen/QpeZBa?editors=0010" target="\_blank">Codepen</a>
+- <a href="http://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Client-side%20Data&full=0&down=0&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel" target="\_parent">Storybook</a>
 
 ## Table of Contents
 - [Installation](#installation)
@@ -66,8 +68,6 @@
 ## Installation
 1. Install React Table as a dependency
 ```bash
-$ npm install react-table
-# or
 $ yarn add react-table
 ```
 2. Import the `react-table` module
@@ -77,50 +77,64 @@ import ReactTable from 'react-table'
 // ES5
 var ReactTable = require('react-table').default
 ```
-3. Import styles by including `react-table.css` anywhere on the page
+3. Import styles by including `react-table.css`
 ```javascript
 // JS (Webpack)
 import 'react-table/react-table.css'
-// html
+// Old-school
 <link rel="stylesheet" href="node_modules/react-table/react-table.css">
 ```
+##### CDN
+```html
+  <!-- CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">
+
+  <!-- JS -->
+  <script src="https://unpkg.com/react-table@latest/react-table.js"></script>
+
+  <script>
+    var ReactTable = window.ReactTable.default
+  </script>
+```
 
 
 ## Example
 ```javascript
 import ReactTable from 'react-table'
 
-const data = [{
-  name: 'Tanner Linsley',
-  age: 26,
-  friend: {
-    name: 'Jason Maurer',
-    age: 23,
-  }
-},{
-  ...
-}]
+render() {
+  const data = [{
+    name: 'Tanner Linsley',
+    age: 26,
+    friend: {
+      name: 'Jason Maurer',
+      age: 23,
+    }
+  },{
+    ...
+  }]
 
-const columns = [{
-  header: 'Name',
-  accessor: 'name' // String-based value accessors!
-}, {
-  header: 'Age',
-  accessor: 'age',
-  render: props => <span className='number'>{props.value}</span> // Custom cell components!
-}, {
-  id: 'friendName', // Required because our accessor is not a string
-  header: 'Friend Name',
-  accessor: d => d.friend.name // Custom value accessors!
-}, {
-  header: props => <span>Friend Age</span>, // Custom header components!
-  accessor: 'friend.age'
-}]
+  const columns = [{
+    header: 'Name',
+    accessor: 'name' // String-based value accessors!
+  }, {
+    header: 'Age',
+    accessor: 'age',
+    render: props => <span className='number'>{props.value}</span> // Custom cell components!
+  }, {
+    id: 'friendName', // Required because our accessor is not a string
+    header: 'Friend Name',
+    accessor: d => d.friend.name // Custom value accessors!
+  }, {
+    header: props => <span>Friend Age</span>, // Custom header components!
+    accessor: 'friend.age'
+  }]
 
-<ReactTable
-  data={data}
-  columns={columns}
-/>
+  <ReactTable
+    data={data}
+    columns={columns}
+  />
+}
 ```
 
 ## Data
@@ -139,7 +153,6 @@ These are all of the available props (and their default values) for the main `<R
   pageSizeOptions: [5, 10, 20, 25, 50, 100],
   defaultPageSize: 20,
   showPageJump: true,
-  expanderColumnWidth: 35,
   collapseOnSortingChange: true,
   collapseOnPageChange: true,
   collapseOnDataChange: true,
@@ -151,11 +164,13 @@ These are all of the available props (and their default values) for the main `<R
     const id = filter.pivotId || filter.id
     return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
   },
+  resizable: true,
+  defaultResizing: [],
 
   // Controlled State Overrides (see Fully Controlled Component section)
   page: undefined,
   pageSize: undefined,
-  sorting: undefined
+  sorting: undefined,
 
   // Controlled State Callbacks
   onExpandSubComponent: undefined,
@@ -163,6 +178,7 @@ These are all of the available props (and their default values) for the main `<R
   onPageSizeChange: undefined,
   onSortingChange: undefined,
   onFilteringChange: undefined,
+  onResize: undefined,
 
   // Pivoting
   pivotBy: undefined,
@@ -207,6 +223,7 @@ These are all of the available props (and their default values) for the main `<R
   getPaginationProps: () => ({}),
   getLoadingProps: () => ({}),
   getNoDataProps: () => ({}),
+  getResizerProps: () => ({}),
 
   // Global Column Defaults
   column: {
@@ -229,7 +246,29 @@ These are all of the available props (and their default values) for the main `<R
     footerStyle: {},
     getFooterProps: () => ({}),
     filterMethod: undefined,
-    hideFilter: false
+    hideFilter: false,
+    filterRender: ({filter, onFilterChange}) => (
+      <input type='text'
+        style={{
+          width: '100%'
+        }}
+        value={filter ? filter.value : ''}
+        onChange={(event) => onFilterChange(event.target.value)}
+      />
+    )
+  },
+  
+  // Global Expander Column Defaults
+  expanderDefaults: {
+    sortable: false,
+    width: 35,
+    hideFilter: true
+    // render: will be overriden in methods.js to display ExpanderComponent
+  },
+
+  // Global Pivot Column Defaults
+  pivotDefaults: {
+    // render: will be overriden in methods.js to display ExpanderComponent
   },
 
   // Text
@@ -280,8 +319,13 @@ Or just define them as props
   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
+  // Turns this column into a special column for specifying expander and pivot column options.
+  // If this option is true and there is NOT a pivot column, the `expanderDefaults` options will be applied on top of the column options.
+  // If this option is true and there IS a pivot column, the `pivotDefaults` options will be applied on top of the column options.
+  // Adding a column with the `expander` option set will allow you to rearrange expander and pivot column orderings in the table.
+  // It will also let you specify rendering of the header (and header group if this special column is placed in the `columns` option of another column) and
+  // the rendering of the expander itself.
+  expander: false, 
 
   // Cell Options
   className: '', // Set the classname of the `td` element of the column
@@ -303,7 +347,7 @@ Or just define them as props
   columns: [...], // See Header Groups section below
 
   // Footer
-  footer: 'Header Name' or JSX eg. ({data, column}) => <div>Header Name</div>,
+  footer: 'Footer Name' or JSX eg. ({data, column}) => <div>Footer Name</div>,
   footerClassName: '', // Set the classname of the `td` element of the column's footer
   footerStyle: {}, // Set the style of the `td` element of the column's footer
   getFooterProps: (state, rowInfo, column, instance) => ({}), // A function that returns props to decorate the `td` element of the column's footer
@@ -313,7 +357,8 @@ Or just define them as props
     // filter == an object specifying which filter is being applied. Format: {id: [the filter column's id], value: [the value the user typed in the filter field], pivotId: [if filtering on a pivot column, the pivotId will be set to the pivot column's id and the `id` field will be set to the top level pivoting column]}
     // row == the row of data supplied to the table
     // column == the column that the filter is on
-  hideFilter: false // If `showFilters` is set on the table, this option will let you selectively hide the filter on a particular row
+  hideFilter: false, // If `showFilters` is set on the table, this option will let you selectively hide the filter on a particular row
+  filterRender: JSX // eg. ({filter, onFilterChange}) => <select onChange={event => onFilterChange(event.target.value)} value={filter ? filter.value : ''}></select> // The value passed to onFilterChange will be the value passed to filter.value of the filterMethod
 }]
 ```
 
@@ -437,6 +482,8 @@ Every single built-in component's props can be dynamically extended using any on
   getTdProps={fn}
   getPaginationProps={fn}
   getLoadingProps={fn}
+  getNoDataProps: {fn},
+  getResizerProps: {fn}
 />
 ```
 
@@ -622,7 +669,8 @@ Here are the props and their corresponding callbacks that control the state of t
   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. 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`
-  onFilteringChange={(column, event) => {...}} // Called when a user enters a value into a filter input field. The event is the onChange event of the input field.
+  onFilteringChange={(column, value) => {...}} // Called when a user enters a value into a filter input field or the value passed to the onFilterChange handler by the filterRender option.
+  onResize={(column, event, isTouch) => {...}} // Called when a user clicks on a resizing component (the right edge of a column header)
 />
 ```
 
@@ -675,6 +723,8 @@ By default the table tries to filter by checking if the row's value starts with
 
 If you want to override a particular column's filtering method, you can set the `filterMethod` option on a column.
 
+To completely override the filter that is shown, you can set the `filterRender` column option. Using this option you can specify the JSX that is shown. The option is passed an `onFilterChange` method which must be called with the the value that you wan't to pass to the `filterMethod` option whenever the filter has changed.
+
 See <a href="http://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Custom%20Filtering&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel" target="\_parent">Custom Filtering</a> demo for examples.
 
 ## Component Overrides
@@ -697,6 +747,7 @@ Object.assign(ReactTableDefaults, {
   NextComponent: undefined,
   LoadingComponent: component,
   NoDataComponent: component,
+  ResizerComponent: component
 })
 
 // Or change per instance

docs/iframe.html

@@ -16,7 +16,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.1bf8468d20ff1a92c704.bundle.js"></script>
+        <script src="static/preview.5f0262046fdd8adfb130.bundle.js"></script>
       </body>
     </html>
   

docs/index.html

@@ -38,7 +38,7 @@
       </head>
       <body style="margin: 0;">
         <div id="root"></div>
-        <script src="static/manager.064c8fe6b78907f0a142.bundle.js"></script>
+        <script src="static/manager.2e7b063c56eb89efa1fe.bundle.js"></script>
       </body>
     </html>
   

docs/static/manager.064c8fe6b78907f0a142.bundle.js.map

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

docs/static/manager.2e7b063c56eb89efa1fe.bundle.js.map

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

docs/static/preview.1bf8468d20ff1a92c704.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.1bf8468d20ff1a92c704.bundle.js","sources":["webpack:///static/preview.1bf8468d20ff1a92c704.bundle.js"],"mappings":"AAAA;AAkuDA;AAm/DA;AA+qFA;AAmmFA;AA07OA;AAuwFA;AAwtDA;AA+jEA;AA4uDA;AAi8DA;AA+lDA;AA4yDA;AA28CA;AAw7DA;AAooDA;AA67CA;AAiqDA;AAynEA;AAwxDA;AA+rCA;AA+mDA;AA2lDA;AAkqEA;AAs2DA;AA2zDA;AAo4CA;AAosFA;AAmjGA;AA6sDA;AAw2CA;AAkoCA;AAq8CA;AAu8CA;AAoDA;AA+jFA","sourceRoot":""}

docs/static/preview.5f0262046fdd8adfb130.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.5f0262046fdd8adfb130.bundle.js","sources":["webpack:///static/preview.5f0262046fdd8adfb130.bundle.js"],"mappings":"AAAA;AAkuDA;AAmgEA;AA2jFA;AAinFA;AAgsPA;AA+6EA;AAytDA;AA+jEA;AAixDA;AAuzDA;AAk1DA;AA6pDA;AA2+CA;AA+4DA;AAqpDA;AA89CA;AA0nDA;AA2jEA;AA03DA;AA6gCA;AA80DA;AAooDA;AA2nEA;AAw1DA;AA64DA;AAixCA;AAyrFA;AAmjGA;AA4lDA;AA+zCA;AA8vCA;AAshCA;AAwpDA;AA+rCA;AAsCA;AA+jFA","sourceRoot":""}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "5.4.1",
+  "version": "5.6.0",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -30,8 +30,10 @@
     "watch:node": "onchange 'src/**/*.js' -i -- npm run build:node",
     "watch:css": "onchange 'src/**/*.styl' -i -- npm run build:css",
     "test": "standard",
-    "umd": "rimraf 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",
+    "umd": "rimraf react-table.js && webpack --config umd.webpack.js",
+    "build": "npm-run-all build:*",
+    "prepublish": "npm run build && npm run umd",
+    "postpublish": "git push --tags",
     "storybook": "start-storybook -p 8000 -c .storybook",
     "docs": "build-storybook -o docs && cp .storybook/CNAME docs/CNAME"
   },
@@ -49,8 +51,6 @@
     "babel-preset-es2015": "6.14.0",
     "babel-preset-react": "6.11.1",
     "babel-preset-stage-2": "6.13.0",
-    "babelify": "^7.3.0",
-    "browserify": "13.1.0",
     "github-markdown-css": "^2.4.1",
     "html-loader": "^0.4.4",
     "markdown-loader": "^0.1.7",
@@ -65,10 +65,7 @@
     "standard": "^8.0.0",
     "storybook": "^0.0.0",
     "stylus": "^0.54.5",
-    "uglifyify": "3.0.3"
-  },
-  "browserify-shim": {
-    "react": "global:React"
+    "webpack": "^2.4.1"
   },
   "standard": {
     "parser": "babel-eslint",

src/defaultProps.js

@@ -15,7 +15,6 @@ export default {
   pageSizeOptions: [5, 10, 20, 25, 50, 100],
   defaultPageSize: 20,
   showPageJump: true,
-  expanderColumnWidth: 35,
   collapseOnSortingChange: true,
   collapseOnPageChange: true,
   collapseOnDataChange: true,
@@ -27,6 +26,8 @@ export default {
     const id = filter.pivotId || filter.id
     return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
   },
+  resizable: true,
+  defaultResizing: [],
 
   // Controlled State Overrides
   // page: undefined,
@@ -39,6 +40,7 @@ export default {
   onPageSizeChange: undefined,
   onSortingChange: undefined,
   onFilteringChange: undefined,
+  onResize: undefined,
 
   // Pivoting
   pivotBy: undefined,
@@ -82,6 +84,7 @@ export default {
   getPaginationProps: emptyObj,
   getLoadingProps: emptyObj,
   getNoDataProps: emptyObj,
+  getResizerProps: emptyObj,
 
   // Global Column Defaults
   column: {
@@ -104,7 +107,29 @@ export default {
     footerStyle: {},
     getFooterProps: emptyObj,
     filterMethod: undefined,
-    hideFilter: false
+    hideFilter: false,
+    filterRender: ({filter, onFilterChange}) => (
+      <input type='text'
+        style={{
+          width: '100%'
+        }}
+        value={filter ? filter.value : ''}
+        onChange={(event) => onFilterChange(event.target.value)}
+      />
+    )
+  },
+
+  // Global Expander Column Defaults
+  expanderDefaults: {
+    sortable: false,
+    width: 35,
+    hideFilter: true
+    // render: will be overriden in methods.js to display ExpanderComponent
+  },
+
+  // Global Pivot Column Defaults
+  pivotDefaults: {
+    // render: will be overriden in methods.js to display ExpanderComponent
   },
 
   // Text
@@ -137,12 +162,11 @@ export default {
   },
   TdComponent: _.makeTemplateComponent('rt-td'),
   TfootComponent: _.makeTemplateComponent('rt-tfoot'),
-  ExpanderComponent: ({isExpanded, ...rest}) => {
+  ExpanderComponent: ({isExpanded}) => {
     return (
-      <div
-        className={classnames('rt-expander', isExpanded && '-open')}
-        {...rest}
-      >&bull;</div>
+      <div className={classnames('rt-expander', isExpanded && '-open')}>
+        &bull;
+      </div>
     )
   },
   PaginationComponent: Pagination,
@@ -161,5 +185,6 @@ export default {
       </div>
     </div>
   ),
-  NoDataComponent: _.makeTemplateComponent('rt-noData')
+  NoDataComponent: _.makeTemplateComponent('rt-noData'),
+  ResizerComponent: _.makeTemplateComponent('rt-resizer')
 }

src/index.js

@@ -1,16 +1,47 @@
-import React from 'react'
+import React, { Component } from 'react'
 import classnames from 'classnames'
 //
 import _ from './utils'
-import lifecycle from './lifecycle'
-import methods from './methods'
-import defaults from './defaultProps'
+import Lifecycle from './lifecycle'
+import Methods from './methods'
+import defaultProps from './defaultProps'
 
-export const ReactTableDefaults = defaults
+export const ReactTableDefaults = defaultProps
 
-export default React.createClass({
-  ...lifecycle,
-  ...methods,
+export default class ReactTable extends Methods(Lifecycle(Component)) {
+  static defaultProps = defaultProps
+
+  constructor (props) {
+    super()
+
+    this.getResolvedState = this.getResolvedState.bind(this)
+    this.getDataModel = this.getDataModel.bind(this)
+    this.getSortedData = this.getSortedData.bind(this)
+    this.fireOnChange = this.fireOnChange.bind(this)
+    this.getPropOrState = this.getPropOrState.bind(this)
+    this.getStateOrProp = this.getStateOrProp.bind(this)
+    this.filterData = this.filterData.bind(this)
+    this.sortData = this.sortData.bind(this)
+    this.getMinRows = this.getMinRows.bind(this)
+    this.onPageChange = this.onPageChange.bind(this)
+    this.onPageSizeChange = this.onPageSizeChange.bind(this)
+    this.sortColumn = this.sortColumn.bind(this)
+    this.filterColumn = this.filterColumn.bind(this)
+    this.resizeColumnStart = this.resizeColumnStart.bind(this)
+    this.resizeColumnEnd = this.resizeColumnEnd.bind(this)
+    this.resizeColumnMoving = this.resizeColumnMoving.bind(this)
+
+    this.state = {
+      page: 0,
+      pageSize: props.defaultPageSize || 10,
+      sorting: props.defaultSorting,
+      expandedRows: {},
+      filtering: props.defaultFiltering,
+      resizing: props.defaultResizing,
+      currentlyResizing: undefined,
+      skipNextSort: false
+    }
+  }
 
   render () {
     const resolvedState = this.getResolvedState()
@@ -39,18 +70,20 @@ export default React.createClass({
       getPaginationProps,
       getLoadingProps,
       getNoDataProps,
+      getResizerProps,
       showPagination,
-      expanderColumnWidth,
       manual,
       loadingText,
       noDataText,
       showFilters,
+      resizable,
       // State
       loading,
       pageSize,
       page,
       sorting,
       filtering,
+      resizing,
       pages,
       // Pivoting State
       pivotValKey,
@@ -66,11 +99,11 @@ export default React.createClass({
       ThComponent,
       TdComponent,
       TfootComponent,
-      ExpanderComponent,
       PaginationComponent,
       LoadingComponent,
       SubComponent,
       NoDataComponent,
+      ResizerComponent,
       // Data model
       resolvedData,
       allVisibleColumns,
@@ -83,30 +116,39 @@ export default React.createClass({
     // Pagination
     const startRow = pageSize * page
     const endRow = startRow + pageSize
-    const pageRows = manual ? resolvedData : sortedData.slice(startRow, endRow)
+    let pageRows = manual ? resolvedData : sortedData.slice(startRow, endRow)
     const minRows = this.getMinRows()
     const padRows = _.range(Math.max(minRows - pageRows.length, 0))
 
     const hasColumnFooter = allVisibleColumns.some(d => d.footer)
 
     const recurseRowsViewIndex = (rows, path = [], index = -1) => {
-      rows.forEach((row, i) => {
-        index++
-        row._viewIndex = index
-        const newPath = path.concat([i])
-        if (row[subRowsKey] && _.get(expandedRows, newPath)) {
-          index = recurseRowsViewIndex(row[subRowsKey], newPath, index)
-        }
-      })
-      return index
+      return [
+        rows.map((row, i) => {
+          index++
+          const rowWithViewIndex = {
+            ...row,
+            _viewIndex: index
+          }
+          const newPath = path.concat([i])
+          if (rowWithViewIndex[subRowsKey] && _.get(expandedRows, newPath)) {
+            [rowWithViewIndex[subRowsKey], index] = recurseRowsViewIndex(rowWithViewIndex[subRowsKey], newPath, index)
+          }
+          return rowWithViewIndex
+        }),
+        index
+      ]
     }
 
-    recurseRowsViewIndex(pageRows)
+    [pageRows] = recurseRowsViewIndex(pageRows)
 
     const canPrevious = page > 0
     const canNext = page + 1 < pages
 
-    const rowMinWidth = _.sum(allVisibleColumns.map(d => _.getFirstDefined(d.width, d.minWidth)))
+    const rowMinWidth = _.sum(allVisibleColumns.map(d => {
+      const resized = resizing.find(x => x.id === d.id) || {}
+      return _.getFirstDefined(resized.value, d.width, d.minWidth)
+    }))
 
     let rowIndex = -1
 
@@ -149,9 +191,18 @@ export default React.createClass({
     }
 
     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)))
+      const flex = _.sum(column.columns.map(d => {
+        const resized = resizing.find(x => x.id === d.id) || {}
+        return d.width || resized.value ? 0 : d.minWidth
+      }))
+      const width = _.sum(column.columns.map(d => {
+        const resized = resizing.find(x => x.id === d.id) || {}
+        return _.getFirstDefined(resized.value, d.width, d.minWidth)
+      }))
+      const maxWidth = _.sum(column.columns.map(d => {
+        const resized = resizing.find(x => x.id === d.id) || {}
+        return _.getFirstDefined(resized.value, d.width, d.maxWidth)
+      }))
       const theadGroupThProps = _.splitProps(getTheadGroupThProps(finalState, undefined, column, this))
       const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
 
@@ -178,39 +229,6 @@ export default React.createClass({
         maxWidth: `${maxWidth}px`
       }
 
-      if (column.expander) {
-        if (column.pivotColumns) {
-          return (
-            <ThComponent
-              key={i}
-              className={classnames(
-                'rt-pivot-header',
-                classes
-              )}
-              style={{
-                ...styles,
-                ...flexStyles
-              }}
-              {...rest}
-            />
-          )
-        }
-        return (
-          <ThComponent
-            key={i}
-            className={classnames(
-              'rt-expander-header',
-              classes
-            )}
-            style={{
-              ...styles,
-              flex: `0 0 auto`,
-              width: `${expanderColumnWidth}px`
-            }}
-            {...rest}
-          />
-        )
-      }
       return (
         <ThComponent
           key={i}
@@ -255,10 +273,11 @@ export default React.createClass({
     }
 
     const makeHeader = (column, i) => {
+      const resized = resizing.find(x => x.id === column.id) || {}
       const sort = sorting.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)
+      const width = _.getFirstDefined(resized.value, column.width, column.minWidth)
+      const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth)
       const theadThProps = _.splitProps(getTheadThProps(finalState, undefined, column, this))
       const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
 
@@ -279,6 +298,14 @@ export default React.createClass({
         ...columnHeaderProps.rest
       }
 
+      const resizer = resizable ? (
+        <ResizerComponent
+          onMouseDown={e => this.resizeColumnStart(column, e, false)}
+          onTouchStart={e => this.resizeColumnStart(column, e, true)}
+          {...resizerProps}
+        />
+      ) : null
+
       if (column.expander) {
         if (column.pivotColumns) {
           const pivotSort = sorting.find(d => d.id === column.id)
@@ -287,6 +314,7 @@ export default React.createClass({
               key={i}
               className={classnames(
                 'rt-pivot-header',
+                'rt-resizable-header',
                 column.sortable && '-cursor-pointer',
                 classes,
                 pivotSort ? (pivotSort.desc ? '-sort-desc' : '-sort-asc') : ''
@@ -302,37 +330,28 @@ export default React.createClass({
               }}
               {...rest}
             >
-              {column.pivotColumns.map((pivotColumn, i) => {
-                return (
-                  <span key={pivotColumn.id}>
-                    {_.normalizeComponent(pivotColumn.header, {
-                      data: sortedData,
-                      column: column
-                    })}
-                    {i < column.pivotColumns.length - 1 && (
-                      <ExpanderComponent />
-                    )}
-                  </span>
-                )
-              })}
+              <div className='rt-resizable-header-content'>
+                {column.pivotColumns.map((pivotColumn, i) => {
+                  return (
+                    <span key={pivotColumn.id}>
+                      {_.normalizeComponent(pivotColumn.header, {
+                        data: sortedData,
+                        column: column
+                      })}
+                      {i < column.pivotColumns.length - 1 && (
+                        _.normalizeComponent(column.render, {
+                          data: sortedData,
+                          column: column
+                        })
+                      )}
+                    </span>
+                  )
+                })}
+              </div>
+              {resizer}
             </ThComponent>
           )
         }
-        return (
-          <ThComponent
-            key={i}
-            className={classnames(
-              'rt-expander-header',
-              classes
-            )}
-            style={{
-              ...styles,
-              flex: `0 0 auto`,
-              width: `${expanderColumnWidth}px`
-            }}
-            {...rest}
-          />
-        )
       }
 
       return (
@@ -340,6 +359,7 @@ export default React.createClass({
           key={i}
           className={classnames(
             classes,
+            'rt-resizable-header',
             sort ? (sort.desc ? '-sort-desc' : '-sort-asc') : '',
             column.sortable && '-cursor-pointer',
             !show && '-hidden',
@@ -355,10 +375,13 @@ export default React.createClass({
           }}
           {...rest}
         >
-          {_.normalizeComponent(column.header, {
-            data: sortedData,
-            column: column
-          })}
+          <div className='rt-resizable-header-content'>
+            {_.normalizeComponent(column.header, {
+              data: sortedData,
+              column: column
+            })}
+          </div>
+          {resizer}
         </ThComponent>
       )
     }
@@ -387,8 +410,9 @@ export default React.createClass({
     }
 
     const makeFilter = (column, i) => {
-      const width = _.getFirstDefined(column.width, column.minWidth)
-      const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
+      const resized = resizing.find(x => x.id === column.id) || {}
+      const width = _.getFirstDefined(resized.value, column.width, column.minWidth)
+      const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth)
       const theadFilterThProps = _.splitProps(getTheadFilterThProps(finalState, undefined, column, this))
       const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
 
@@ -417,21 +441,29 @@ export default React.createClass({
             const filter = filtering.find(filter => filter.id === column.id && filter.pivotId === col.id)
             pivotCols.push(
               <span key={col.id}
-                style={{display: 'flex', alignContent: 'flex-end', flex: 1}}>
+                style={{flex: 1}}>
                 {!col.hideFilter ? (
-                  <input type='text'
-                    style={{
-                      flex: 1,
-                      width: 20
-                    }}
-                    value={filter ? filter.value : ''}
-                    onChange={(event) => this.filterColumn(column, event, col)}
-                  />
+                  _.normalizeComponent(col.filterRender,
+                    {
+                      col,
+                      filter,
+                      onFilterChange: (value) => (this.filterColumn(column, value, col))
+                    },
+                    defaultProps.column.filterRender
+                  )
                 ) : null}
               </span>
             )
             if (i < column.pivotColumns.length - 1) {
-              pivotCols.push(<ExpanderComponent key={col.id + '-' + i} />)
+              pivotCols.push(
+                _.normalizeComponent(column.filterRender,
+                  {
+                    column,
+                    filter,
+                    key: col.id + '-' + i
+                  },
+                  defaultProps.column.filterRender
+                ))
             }
           }
           return (
@@ -455,21 +487,6 @@ export default React.createClass({
             </ThComponent>
           )
         }
-        return (
-          <ThComponent
-            key={i}
-            className={classnames(
-              'rt-expander-header',
-              classes
-            )}
-            style={{
-              ...styles,
-              flex: `0 0 auto`,
-              width: `${expanderColumnWidth}px`
-            }}
-            {...rest}
-          />
-        )
       }
 
       const filter = filtering.find(filter => filter.id === column.id)
@@ -489,13 +506,14 @@ export default React.createClass({
           {...rest}
         >
           {!column.hideFilter ? (
-            <input type='text'
-              style={{
-                width: `100%`
-              }}
-              value={filter ? filter.value : ''}
-              onChange={(event) => this.filterColumn(column, event)}
-            />
+            _.normalizeComponent(column.filterRender,
+              {
+                column,
+                filter,
+                onFilterChange: (value) => (this.filterColumn(column, value))
+              },
+              defaultProps.column.filterRender
+            )
           ) : null}
         </ThComponent>
       )
@@ -529,9 +547,10 @@ export default React.createClass({
             {...trProps.rest}
           >
             {allVisibleColumns.map((column, i2) => {
+              const resized = resizing.find(x => x.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)
+              const width = _.getFirstDefined(resized.value, column.width, column.minWidth)
+              const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth)
               const tdProps = _.splitProps(getTdProps(finalState, rowInfo, column, this))
               const columnProps = _.splitProps(column.getProps(finalState, rowInfo, column, this))
 
@@ -547,6 +566,8 @@ export default React.createClass({
                 ...columnProps.style
               }
 
+              const extraProps = {}
+
               if (column.expander) {
                 const onTdClick = (e) => {
                   if (onExpandRow) {
@@ -563,6 +584,8 @@ export default React.createClass({
                   })
                 }
 
+                extraProps['onClick'] = onTdClick
+
                 if (column.pivotColumns) {
                   // Return the pivot expander cell
                   const PivotCell = column.pivotRender
@@ -585,49 +608,30 @@ export default React.createClass({
                     >
                       {rowInfo.subRows ? (
                         <span>
-                          <ExpanderComponent
-                            isExpanded={isExpanded}
-                          />
+                          {_.normalizeComponent(column.render, {
+                            ...rowInfo,
+                            value: rowInfo.rowValues[column.id],
+                            isExpanded
+                          }, rowInfo.rowValues[column.id])}
                           {column && column.pivotRender ? (
                             <PivotCell
                               {...rowInfo}
                               value={rowInfo.rowValues[pivotValKey]}
                             />
-                            ) : <span>{row[pivotValKey]} ({rowInfo.subRows.length})</span>}
+                          ) : <span>{row[pivotValKey]} ({rowInfo.subRows.length})</span>}
                         </span>
-                        ) : SubComponent ? (
-                          <span>
-                            <ExpanderComponent
-                              isExpanded={isExpanded}
-                            />
-                          </span>
-                          ) : null}
+                      ) : SubComponent ? (
+                        <span>
+                          {_.normalizeComponent(column.render, {
+                            ...rowInfo,
+                            value: rowInfo.rowValues[column.id],
+                            isExpanded
+                          }, rowInfo.rowValues[column.id])}
+                        </span>
+                      ) : null}
                     </TdComponent>
                   )
                 }
-
-                // Return the regular expander cell
-                return (
-                  <TdComponent
-                    key={i2}
-                    className={classnames(
-                      classes,
-                      {hidden: !show}
-                    )}
-                    style={{
-                      ...styles,
-                      flex: `0 0 auto`,
-                      width: `${expanderColumnWidth}px`
-                    }}
-                    onClick={onTdClick}
-                  >
-                    <span>
-                      <ExpanderComponent
-                        isExpanded={isExpanded}
-                      />
-                    </span>
-                  </TdComponent>
-                )
               }
 
               // Return regular cell
@@ -645,10 +649,12 @@ export default React.createClass({
                     maxWidth: `${maxWidth}px`
                   }}
                   {...tdProps.rest}
+                  {...extraProps}
                 >
                   {_.normalizeComponent(column.render, {
                     ...rowInfo,
-                    value: rowInfo.rowValues[column.id]
+                    value: rowInfo.rowValues[column.id],
+                    isExpanded
                   }, rowInfo.rowValues[column.id])}
                 </TdComponent>
               )
@@ -680,9 +686,10 @@ export default React.createClass({
             style={trProps.style || {}}
           >
             {allVisibleColumns.map((column, i2) => {
+              const resized = resizing.find(x => x.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)
+              const width = _.getFirstDefined(resized.value, column.width, column.minWidth)
+              const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth)
               const tdProps = _.splitProps(getTdProps(finalState, undefined, column, this))
               const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this))
 
@@ -742,9 +749,10 @@ export default React.createClass({
             {...tFootTrProps.rest}
           >
             {allVisibleColumns.map((column, i2) => {
+              const resized = resizing.find(x => x.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)
+              const width = _.getFirstDefined(resized.value, column.width, column.minWidth)
+              const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth)
               const tFootTdProps = _.splitProps(getTfootTdProps(finalState, undefined, undefined, this))
               const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this))
               const columnFooterProps = _.splitProps(column.getFooterProps(finalState, undefined, column, this))
@@ -786,22 +794,6 @@ export default React.createClass({
                     </TdComponent>
                   )
                 }
-
-                // Return the regular expander cell
-                return (
-                  <TdComponent
-                    key={i2}
-                    className={classnames(
-                      classes,
-                      {hidden: !show}
-                    )}
-                    style={{
-                      ...styles,
-                      flex: `0 0 auto`,
-                      width: `${expanderColumnWidth}px`
-                    }}
-                  />
-                )
               }
 
               // Return regular cell
@@ -840,6 +832,7 @@ export default React.createClass({
     const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
     const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
     const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
+    const resizerProps = getResizerProps(finalState, undefined, undefined, this)
 
     const makeTable = () => (
       <div
@@ -887,7 +880,7 @@ export default React.createClass({
             style={paginationProps.style}
             {...paginationProps.rest}
           />
-          ) : null}
+        ) : null}
         {!pageRows.length && (
           <NoDataComponent
             {...noDataProps}
@@ -906,4 +899,4 @@ export default React.createClass({
     // childProps are optionally passed to a function-as-a-child
     return children ? children(finalState, makeTable, this) : makeTable()
   }
-})
+}

src/index.styl

@@ -18,6 +18,11 @@ $expandSize = 7px
   .rt-thead
     display: flex
     flex-direction: column
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
     &.-headerGroups
       background: alpha(black, .03)
       border-bottom: 1px solid alpha(black, .05)
@@ -36,6 +41,9 @@ $expandSize = 7px
 
     .rt-th
     .rt-td
+      padding: 5px 5px
+      line-height: normal
+      position: relative
       border-right: 1px solid alpha(black, .05)
       transition box-shadow .3s $easeOutBack
       box-shadow:inset 0 0 0 0 transparent
@@ -47,6 +55,16 @@ $expandSize = 7px
         cursor: pointer
       &:last-child
         border-right: 0
+
+    .rt-resizable-header
+      overflow: visible
+      &:last-child
+        overflow: hidden
+
+    .rt-resizable-header-content
+      overflow: hidden
+      text-overflow: ellipsis
+
   .rt-tbody
     display: flex
     flex-direction: column
@@ -105,6 +123,17 @@ $expandSize = 7px
       cursor: pointer
     &.-open:after
         transform: translate(-50%, -50%) rotate(0deg)
+
+  .rt-resizer
+    display: inline-block
+    position: absolute
+    width: 36px
+    top: 0
+    bottom: 0
+    right: -18px
+    cursor: col-resize
+    z-index: 10
+
   .rt-tfoot
     display: flex
     flex-direction: column
@@ -231,7 +260,6 @@ $expandSize = 7px
 
   input
   select
-    appearance: none
     border: 1px solid rgba(0,0,0,0.1)
     background: white
     padding: 5px 7px
@@ -240,6 +268,10 @@ $expandSize = 7px
     font-weight: normal
     outline:none
 
+  input:not([type="checkbox"]):not([type="radio"])
+  select
+    appearance: none
+
   .select-wrap
     position:relative
     display:inline-block

src/lifecycle.js

@@ -1,38 +1,12 @@
-import _ from './utils'
-import defaultProps from './defaultProps'
-
-export default {
-  getDefaultProps () {
-    return defaultProps
-  },
-
-  getInitialState () {
-    return {
-      page: 0,
-      pageSize: this.props.defaultPageSize || 10,
-      sorting: this.props.defaultSorting,
-      expandedRows: {},
-      filtering: this.props.defaultFiltering
-    }
-  },
-
-  getResolvedState (props, state) {
-    const resolvedState = {
-      ..._.compactObject(this.state),
-      ..._.compactObject(state),
-      ..._.compactObject(this.props),
-      ..._.compactObject(props)
-    }
-    return resolvedState
-  },
+export default Base => class extends Base {
 
   componentWillMount () {
     this.setStateWithData(this.getDataModel(this.getResolvedState()))
-  },
+  }
 
   componentDidMount () {
     this.fireOnChange()
-  },
+  }
 
   componentWillReceiveProps (nextProps, nextState) {
     const oldState = this.getResolvedState()
@@ -58,7 +32,7 @@ export default {
     ) {
       this.setStateWithData(this.getDataModel(newState))
     }
-  },
+  }
 
   setStateWithData (newState, cb) {
     const oldState = this.getResolvedState()

src/methods.js

@@ -1,6 +1,16 @@
 import _ from './utils'
 
-export default {
+export default Base => class extends Base {
+  getResolvedState (props, state) {
+    const resolvedState = {
+      ..._.compactObject(this.state),
+      ..._.compactObject(this.props),
+      ..._.compactObject(state),
+      ..._.compactObject(props)
+    }
+    return resolvedState
+  }
+
   getDataModel (newState) {
     const {
       columns,
@@ -9,7 +19,6 @@ export default {
       pivotIDKey,
       pivotValKey,
       subRowsKey,
-      expanderColumnWidth,
       SubComponent
     } = newState
 
@@ -35,29 +44,42 @@ export default {
       currentSpan = []
     }
 
-    const noSubExpanderColumns = columns.map(col => {
-      return {
-        ...col,
-        columns: col.columns ? col.columns.filter(d => !d.expander) : undefined
-      }
-    })
+    let columnsWithExpander = [...columns]
 
-    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
+    let expanderColumn = columns.find(col => col.expander || (col.columns && col.columns.some(col2 => col2.expander)))
+    // The actual expander might be in the columns field of a group column
+    if (expanderColumn && !expanderColumn.expander) {
+      expanderColumn = expanderColumn.columns.find(col => col.expander)
+    }
+
+    // If it has subrows or pivot columns we need to make sure we have an expander column
+    if ((SubComponent || pivotBy.length) && !expanderColumn) {
+      expanderColumn = {expander: true}
+      columnsWithExpander = [expanderColumn, ...columnsWithExpander]
     }
 
     const makeDecoratedColumn = (column) => {
-      const dcol = {
-        ...this.props.column,
-        ...column
-      }
-
-      if (dcol.expander) {
-        dcol.width = expanderColumnWidth
-        return dcol
+      let dcol
+      if (pivotBy.length && column.expander) {
+        dcol = {
+          ...this.props.column,
+          render: this.props.ExpanderComponent,
+          filterRender: this.props.ExpanderComponent,
+          ...this.props.pivotDefaults,
+          ...column
+        }
+      } else if (column.expander) {
+        dcol = {
+          ...this.props.column,
+          render: this.props.ExpanderComponent,
+          ...this.props.expanderDefaults,
+          ...column
+        }
+      } else {
+        dcol = {
+          ...this.props.column,
+          ...column
+        }
       }
 
       if (typeof dcol.accessor === 'string') {
@@ -129,12 +151,24 @@ export default {
           pivotColumns.push(allDecoratedColumns[i])
         }
       }
-      const pivotColumn = {
-        ...pivotColumns[0],
-        pivotColumns,
-        expander: true
+
+      const pivotExpanderColumn = visibleColumns.findIndex(col => col.expander || (col.columns && col.columns.some(col2 => col2.expander)))
+      if (pivotExpanderColumn >= 0) {
+        const pivotColumn = {
+          ...visibleColumns[pivotExpanderColumn],
+          pivotColumns
+        }
+        visibleColumns[pivotExpanderColumn] = pivotColumn
+      } else {
+        // If the expander column wasn't on the top level column, find it in the `columns` option.
+        const pivotExpanderSubColumn = visibleColumns[pivotExpanderColumn].columns.findIndex(col => col.expander)
+        const pivotColumn = {
+          ...visibleColumns[pivotExpanderColumn].columns[pivotExpanderSubColumn],
+          pivotColumns
+        }
+        // Add the pivot columns to the expander column
+        visibleColumns[pivotExpanderColumn].columns[pivotExpanderSubColumn] = pivotColumn
       }
-      visibleColumns[expanderColumnIndex] = pivotColumn
     }
 
     // Build flast list of allVisibleColumns and HeaderGroups
@@ -176,8 +210,7 @@ export default {
       })
       return aggregationValues
     }
-    let standardColumns = pivotBy.length ? allVisibleColumns.slice(1) : allVisibleColumns
-    const aggregatingColumns = standardColumns.filter(d => d.aggregate)
+    const aggregatingColumns = allVisibleColumns.filter(d => !d.expander && d.aggregate)
     let pivotColumn
     if (pivotBy.length) {
       pivotColumn = allVisibleColumns[0]
@@ -189,14 +222,14 @@ export default {
         // Group the rows together for this level
         let groupedRows = Object.entries(
           _.groupBy(rows, keys[i]))
-          .map(([key, value]) => {
-            return {
-              [pivotIDKey]: keys[i],
-              [pivotValKey]: key,
-              [keys[i]]: key,
-              [subRowsKey]: value
-            }
-          })
+        .map(([key, value]) => {
+          return {
+            [pivotIDKey]: keys[i],
+            [pivotValKey]: key,
+            [keys[i]]: key,
+            [subRowsKey]: value
+          }
+        })
         // Recurse into the subRows
         groupedRows = groupedRows.map(rowGroup => {
           let subRows = groupRecursively(rowGroup[subRowsKey], keys, i + 1)
@@ -220,7 +253,8 @@ export default {
       allDecoratedColumns,
       hasHeaderGroups
     }
-  },
+  }
+
   getSortedData (resolvedState) {
     const {
       manual,
@@ -236,16 +270,20 @@ export default {
     return {
       sortedData: manual ? resolvedData : this.sortData(this.filterData(resolvedData, showFilters, filtering, defaultFilterMethod, allVisibleColumns), sorting)
     }
-  },
+  }
+
   fireOnChange () {
     this.props.onChange(this.getResolvedState(), this)
-  },
+  }
+
   getPropOrState (key) {
     return _.getFirstDefined(this.props[key], this.state[key])
-  },
+  }
+
   getStateOrProp (key) {
     return _.getFirstDefined(this.state[key], this.props[key])
-  },
+  }
+
   filterData (data, showFilters, filtering, defaultFilterMethod, allVisibleColumns) {
     let filteredData = data
 
@@ -290,7 +328,8 @@ export default {
     }
 
     return filteredData
-  },
+  }
+
   sortData (data, sorting) {
     if (!sorting.length) {
       return data
@@ -314,11 +353,11 @@ export default {
         [this.props.subRowsKey]: this.sortData(row[this.props.subRowsKey], sorting)
       }
     })
-  },
+  }
 
   getMinRows () {
     return _.getFirstDefined(this.props.minRows, this.getStateOrProp('pageSize'))
-  },
+  }
 
   // User actions
   onPageChange (page) {
@@ -335,7 +374,8 @@ export default {
       , () => {
         this.fireOnChange()
       })
-  },
+  }
+
   onPageSizeChange (newPageSize) {
     const {onPageSizeChange} = this.props
     const {pageSize, page} = this.getResolvedState()
@@ -354,9 +394,22 @@ export default {
     }, () => {
       this.fireOnChange()
     })
-  },
+  }
+
   sortColumn (column, additive) {
-    const {sorting} = this.getResolvedState()
+    const {sorting, skipNextSort} = this.getResolvedState()
+
+    // we can't stop event propagation from the column resize move handlers
+    // attached to the document because of react's synthetic events
+    // so we have to prevent the sort function from actually sorting
+    // if we click on the column resize element within a header.
+    if (skipNextSort) {
+      this.setStateWithData({
+        skipNextSort: false
+      })
+      return
+    }
+
     const {onSortingChange} = this.props
     if (onSortingChange) {
       return onSortingChange(column, additive)
@@ -439,13 +492,14 @@ export default {
     }, () => {
       this.fireOnChange()
     })
-  },
-  filterColumn (column, event, pivotColumn) {
+  }
+
+  filterColumn (column, value, pivotColumn) {
     const {filtering} = this.getResolvedState()
     const {onFilteringChange} = this.props
 
     if (onFilteringChange) {
-      return onFilteringChange(column, event)
+      return onFilteringChange(column, value, pivotColumn)
     }
 
     // Remove old filter first if it exists
@@ -461,10 +515,10 @@ export default {
       }
     })
 
-    if (event.target.value !== '') {
+    if (value !== '') {
       newFiltering.push({
         id: column.id,
-        value: event.target.value,
+        value: value,
         pivotId: pivotColumn ? pivotColumn.id : undefined
       })
     }
@@ -475,4 +529,91 @@ export default {
       this.fireOnChange()
     })
   }
+
+  resizeColumnStart (column, event, isTouch) {
+    const {onResize} = this.props
+
+    if (onResize) {
+      return onResize(column, event, isTouch)
+    }
+
+    const parentWidth = event.target.parentElement.getBoundingClientRect().width
+
+    let pageX
+    if (isTouch) {
+      pageX = event.changedTouches[0].pageX
+    } else {
+      pageX = event.pageX
+    }
+
+    this.setStateWithData({
+      currentlyResizing: {
+        id: column.id,
+        startX: pageX,
+        parentWidth: parentWidth
+      }
+    }, () => {
+      if (isTouch) {
+        document.addEventListener('touchmove', this.resizeColumnMoving)
+        document.addEventListener('touchcancel', this.resizeColumnEnd)
+        document.addEventListener('touchend', this.resizeColumnEnd)
+      } else {
+        document.addEventListener('mousemove', this.resizeColumnMoving)
+        document.addEventListener('mouseup', this.resizeColumnEnd)
+        document.addEventListener('mouseleave', this.resizeColumnEnd)
+      }
+    })
+  }
+
+  resizeColumnEnd (event) {
+    let isTouch = event.type === 'touchend' || event.type === 'touchcancel'
+
+    if (isTouch) {
+      document.removeEventListener('touchmove', this.resizeColumnMoving)
+      document.removeEventListener('touchcancel', this.resizeColumnEnd)
+      document.removeEventListener('touchend', this.resizeColumnEnd)
+    }
+
+    // If its a touch event clear the mouse one's as well because sometimes
+    // the mouseDown event gets called as well, but the mouseUp event doesn't
+    document.removeEventListener('mousemove', this.resizeColumnMoving)
+    document.removeEventListener('mouseup', this.resizeColumnEnd)
+    document.removeEventListener('mouseleave', this.resizeColumnEnd)
+
+    // The touch events don't propagate up to the sorting's onMouseDown event so
+    // no need to prevent it from happening or else the first click after a touch
+    // event resize will not sort the column.
+    if (!isTouch) {
+      this.setStateWithData({
+        skipNextSort: true
+      })
+    }
+  }
+
+  resizeColumnMoving (event) {
+    const {resizing, currentlyResizing} = this.getResolvedState()
+
+    // Delete old value
+    const newResizing = resizing.filter(x => x.id !== currentlyResizing.id)
+
+    let pageX
+
+    if (event.type === 'touchmove') {
+      pageX = event.changedTouches[0].pageX
+    } else if (event.type === 'mousemove') {
+      pageX = event.pageX
+    }
+
+    // Set the min size to 10 to account for margin and border or else the group headers don't line up correctly
+    const newWidth = Math.max(currentlyResizing.parentWidth + pageX - currentlyResizing.startX, 11)
+
+    newResizing.push({
+      id: currentlyResizing.id,
+      value: newWidth
+    })
+
+    this.setStateWithData({
+      resizing: newResizing
+    })
+  }
 }

src/pagination.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
 import classnames from 'classnames'
 //
 // import _ from './utils'
@@ -7,28 +7,44 @@ const defaultButton = (props) => (
   <button type='button' {...props} className='-btn'>{props.children}</button>
 )
 
-export default React.createClass({
-  getInitialState () {
-    return {
-      page: this.props.page
+export default class ReactTablePagination extends Component {
+  constructor (props) {
+    super()
+
+    this.getSafePage = this.getSafePage.bind(this)
+    this.changePage = this.changePage.bind(this)
+    this.applyPage = this.applyPage.bind(this)
+
+    this.state = {
+      page: props.page
     }
-  },
+  }
+
   componentWillReceiveProps (nextProps) {
     this.setState({page: nextProps.page})
-  },
+  }
+
   getSafePage (page) {
+    if (isNaN(page)) {
+      page = this.props.page
+    }
     return Math.min(Math.max(page, 0), this.props.pages - 1)
-  },
+  }
+
   changePage (page) {
     page = this.getSafePage(page)
     this.setState({page})
-    this.props.onPageChange(page)
-  },
+    if (this.props.page !== page) {
+      this.props.onPageChange(page)
+    }
+  }
+
   applyPage (e) {
     e && e.preventDefault()
     const page = this.state.page
     this.changePage(page === '' ? this.props.page : page)
-  },
+  }
+
   render () {
     const {
       // Computed
@@ -123,4 +139,4 @@ export default React.createClass({
       </div>
     )
   }
-})
+}

src/utils.js

@@ -80,7 +80,7 @@ function orderBy (arr, funcs, dirs) {
     }
     return dirs[0]
       ? a.__index - b.__index
-      : b.__index - b.__index
+      : b.__index - a.__index
   })
 }
 

stories/CellRenderers.js

@@ -161,6 +161,7 @@ const columns = [{
 
 return (
   <ReactTable
+    className='-striped -highlight'
     data={data}
     columns={columns}
     defaultPageSize={10}

stories/ControlledTable.js

@@ -0,0 +1,153 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+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'
+  }]
+}]
+
+class ControlledTable extends React.Component {
+  constructor() {
+    super()
+    this.sortChange = this.sortChange.bind(this)
+    this.state = {
+      sorting: [],
+      page: 0,
+      pageSize: 10
+    }
+  }
+
+  sortChange(column, shift) {
+    if(shift)
+      alert('Shift click not implemented in this demo')
+    var sort = {id: column.id}
+    if(this.state.sorting.length && this.state.sorting[0].id == column.id)
+      this.state.sorting[0].asc ? sort.desc = true : sort.asc = true
+    else
+      sort.asc = true
+    this.setState({
+      sorting: [sort]
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <div className='table-wrap'>
+          <ReactTable
+            className='-striped -highlight'
+            data={data}
+            columns={columns}
+            sorting={this.state.sorting}
+            onSortingChange={this.sortChange}
+            page={this.state.page}
+            onPageChange={page => this.setState({page})}
+            pageSize={this.state.pageSize}
+            onPageSizeChange={(pageSize, page) => this.setState({page, pageSize})}
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: For simplicity, multi-sort is not implemented in this demo</em>
+        </div>
+        <CodeHighlight>{() => getCode()}</CodeHighlight>
+      </div>
+    )
+  }
+}
+
+function getCode () {
+  return `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'
+  }]
+}]
+
+class ControlledTable extends React.Component {
+  constructor() {
+    super()
+    this.sortChange = this.sortChange.bind(this)
+    this.state = {
+      sorting: [],
+      page: 0,
+      pageSize: 10
+    }
+  }
+
+  sortChange(column, shift) {
+    if(shift)
+      alert('Shift click not implemented in this demo')
+    var sort = {id: column.id}
+    if(this.state.sorting.length && this.state.sorting[0].id == column.id)
+      this.state.sorting[0].asc ? sort.desc = true : sort.asc = true
+    else
+      sort.asc = true
+    this.setState({
+      sorting: [sort]
+    })
+  }
+
+  render() {
+    return (
+      <ReactTable
+        className='-striped -highlight'
+        data={data}
+        columns={columns}
+        sorting={this.state.sorting}
+        onSortingChange={this.sortChange}
+        page={this.state.page}
+        onPageChange={page => this.setState({page})}
+        pageSize={this.state.pageSize}
+        onPageSizeChange={(pageSize, page) => this.setState({page, pageSize})}
+      />
+    )
+  }
+}`
+}
+
+export default () => <ControlledTable />

stories/CustomExpanderPosition.js

@@ -8,8 +8,8 @@ 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 }),
+      firstName: namor.generate({words: 1, numLen: 0}),
+      lastName: namor.generate({words: 1, numLen: 0}),
       age: Math.floor(Math.random() * 30)
     }
   })
@@ -19,26 +19,33 @@ export default () => {
     columns: [{
       header: 'First Name',
       accessor: 'firstName',
-      render: row => {
-        return <span>{row.aggregated ? '...' : row.value}</span>
-      }
+      footer: () => <div style={{textAlign: 'center'}}>First Name</div>
     }, {
       header: 'Last Name',
-      id: 'lastName',
-      accessor: d => d.lastName
+      accessor: 'lastName',
+      footer: () => <div style={{textAlign: 'center'}}>Last Name</div>
     }]
   }, {
     header: 'Info',
     columns: [{
       header: 'Age',
       accessor: 'age',
-      aggregate: vals => _.round(_.mean(vals)),
-      render: row => {
-        return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
-      }
+      footer: () => <div style={{textAlign: 'center'}}>Age</div>
     }]
   }, {
-    expander: true
+    header: 'Expand',
+    columns: [{
+      expander: true,
+      header: () => (<strong>More</strong>),
+      width: 65,
+      render: ({isExpanded, ...rest}) => (
+        <div>
+          {isExpanded ? <span>&#x2299;</span> : <span>&#x2295;</span>}
+        </div>
+      ),
+      style: {cursor: 'pointer', fontSize: 25, padding: '0', textAlign: 'center', userSelect: 'none'},
+      footer: () => <span>&hearts;</span>
+    }]
   }]
 
   return (
@@ -71,26 +78,33 @@ const columns = [{
   columns: [{
     header: 'First Name',
     accessor: 'firstName',
-    render: row => {
-      return <span>{row.aggregated ? '...' : row.value}</span>
-    }
+    footer: () => <div style={{textAlign: 'center'}}>First Name</div>
   }, {
     header: 'Last Name',
-    id: 'lastName',
-    accessor: d => d.lastName
+    accessor: 'lastName',
+    footer: () => <div style={{textAlign: 'center'}}>Last Name</div>
   }]
 }, {
   header: 'Info',
   columns: [{
     header: 'Age',
     accessor: 'age',
-    aggregate: vals => _.round(_.mean(vals)),
-    render: row => {
-      return <span>{row.aggregated ? \`$\{row.value} (avg)\` : row.value}</span>
-    }
+    footer: () => <div style={{textAlign: 'center'}}>Age</div>
   }]
 }, {
-  expander: true
+  header: 'Expand',
+  columns: [{
+    expander: true,
+    header: () => (<strong>More</strong>),
+    width: 65,
+    render: ({isExpanded, ...rest}) => (
+      <div>
+        {isExpanded ? <span>&#x2299;</span> : <span>&#x2295;</span>}
+      </div>
+    ),
+    style: {cursor: 'pointer', fontSize: 25, padding: '0', textAlign: 'center', userSelect: 'none'},
+    footer: () => <span>&hearts;</span>
+  }]
 }]
 
 return (

stories/Filtering.js

@@ -7,7 +7,7 @@ import ReactTable from '../src/index'
 
 class Filtering extends React.Component {
 
-  constructor(props) {
+  constructor (props) {
     super(props)
 
     const data = _.map(_.range(5553), d => {
@@ -33,10 +33,10 @@ class Filtering extends React.Component {
       data: data
     }
 
-    this.setTableOption = this.setTableOption.bind(this);
+    this.setTableOption = this.setTableOption.bind(this)
   }
 
-  render() {
+  render () {
     const columns = [{
       header: 'Name',
       columns: [{
@@ -54,26 +54,51 @@ class Filtering extends React.Component {
       columns: [{
         header: 'Age',
         accessor: 'age'
-      }]
+      }, {
+        header: 'Over 21',
+        accessor: 'age',
+        id: 'over',
+        render: ({value}) => (value >= 21 ? 'Yes' : 'No'),
+        filterMethod: (filter, row) => {
+          if (filter.value === 'all') {
+            return true
+          }
+          if (filter.value === 'true') {
+            return row[filter.id] >= 21
+          }
+          return row[filter.id] < 21
+        },
+        filterRender: ({filter, onFilterChange}) => (
+          <select
+            onChange={event => onFilterChange(event.target.value)}
+            style={{width: '100%'}}
+            value={filter ? filter.value : 'all'}>
+            <option value="all"></option>
+            <option value="true">Can Drink</option>
+            <option value="false">Can't Drink</option>
+          </select>
+        )
+      }
+      ]
     }]
 
     return (
       <div>
-        <div style={{float: "left"}}>
+        <div style={{float: 'left'}}>
           <h1>Table Options</h1>
           <table>
             <tbody>
             {
               Object.keys(this.state.tableOptions).map(optionKey => {
-                const optionValue = this.state.tableOptions[optionKey];
+                const optionValue = this.state.tableOptions[optionKey]
                 return (
                   <tr key={optionKey}>
                     <td>{optionKey}</td>
                     <td style={{paddingLeft: 10, paddingTop: 5}}>
                       <input type="checkbox"
-                             name={optionKey}
-                             checked={optionValue}
-                             onChange={this.setTableOption}
+                        name={optionKey}
+                        checked={optionValue}
+                        onChange={this.setTableOption}
                       />
                     </td>
                   </tr>
@@ -122,21 +147,30 @@ class Filtering extends React.Component {
         </div>
         <div>
           <h1>Custom Filters In This Example</h1>
-          <p>The default filter for all columns of a table if it is not specified in the configuration is set to match on values that start with the filter text. Example: age.startsWith("2").</p>
-          <p>This example overrides the default filter behavior by setting the <strong>defaultFilterMethod</strong> table option to match on values that are exactly equal to the filter text. Example: age == "23")</p>
+          <p>The default filter for all columns of a table if it is not specified in the configuration is set to match
+            on values that start with the filter text. Example: age.startsWith("2").</p>
+          <p>This example overrides the default filter behavior by setting
+            the <strong>defaultFilterMethod</strong> table option to match on values that are exactly equal to the
+            filter text. Example: age == "23")</p>
           <p>Each column can also be customized with the column <strong>filterMethod</strong> option:</p>
-          <p>In this example the firstName column filters on the value starting with and ending with the filter value.</p>
-          <p>In this example the lastName column filters on the value including the filter value anywhere in its text.</p>
+          <p>In this example the firstName column filters on the value starting with and ending with the filter
+            value.</p>
+          <p>In this example the lastName column filters on the value including the filter value anywhere in its
+            text.</p>
+          <p>To completely override the filter that is shown, you can set the <strong>filterRender</strong> column
+            option. Using this option you can specify the JSX that is shown. The option is passed
+            an <strong>onFilterChange</strong> method that must be called with the value that you wan't to
+            pass to the <strong>filterMethod</strong> option whenever the filter has changed.</p>
         </div>
         <CodeHighlight>{() => this.getCode()}</CodeHighlight>
       </div>
     )
   }
 
-  setTableOption(event) {
-    const target = event.target;
-    const value = target.type === 'checkbox' ? target.checked : target.value;
-    const name = target.name;
+  setTableOption (event) {
+    const target = event.target
+    const value = target.type === 'checkbox' ? target.checked : target.value
+    const name = target.name
     this.setState({
       tableOptions: {
         ...this.state.tableOptions,
@@ -145,7 +179,7 @@ class Filtering extends React.Component {
     })
   }
 
-  getCode() {
+  getCode () {
     return `
 const columns = [{
   header: 'Name',
@@ -164,6 +198,30 @@ const columns = [{
   columns: [{
     header: 'Age',
     accessor: 'age'
+  }, {
+    header: 'Over 21',
+    accessor: 'age',
+    id: 'over',
+    render: ({value}) => (value >= 21 ? 'Yes' : 'No'),
+    filterMethod: (filter, row) => {
+      if (filter.value === 'all') {
+        return true
+      }
+      if (filter.value === 'true') {
+        return row[filter.id] >= 21
+      }
+      return row[filter.id] < 21
+    },
+    filterRender: ({filter, onFilterChange}) => (
+      <select
+        onChange={event => onFilterChange(event.target.value)}
+        style={{width: '100%'}}
+        value={filter ? filter.value : 'all'}>
+        <option value="all"></option>
+        <option value="true">Can Drink</option>
+        <option value="false">Can't Drink</option>
+      </select>
+    )
   }]
 }]
 
@@ -203,4 +261,4 @@ export default (
   }
 }
 
-export default () => <Filtering/>
+export default () => <Filtering />

stories/Footers.js

@@ -88,23 +88,52 @@ const columns = [{
   header: 'Name',
   columns: [{
     header: 'First Name',
-    accessor: 'firstName'
+      accessor: 'firstName',
+      footer: (
+        <span><strong>Popular:</strong> {
+          _.first(
+            _.reduce(
+              _.map(
+                _.groupBy(
+                  data, d => d.firstName
+                )
+              ),
+              (a, b) => a.length > b.length ? a : b
+            )
+          ).firstName}
+        </span>
+      )
   }, {
     header: 'Last Name',
     id: 'lastName',
-    accessor: d => d.lastName
+      accessor: d => d.lastName,
+      footer: (
+        <span><strong>Longest:</strong> {
+          _.reduce(
+            _.map(
+              _.groupBy(
+                data, d => d.lastName
+              ),
+              (d, key) => key
+            ),
+            (a, b) => a.length > b.length ? a : b
+          )}
+        </span>
+      )
   }]
 }, {
   header: 'Info',
   columns: [{
     header: 'Age',
-    accessor: 'age'
+      accessor: 'age',
+      footer: <span><strong>Average:</strong> {_.round(_.mean(_.map(data, d => d.age)))}</span>
   }]
 }]
 
 // Display your table!
 return (
   <ReactTable
+    className='-striped -highlight'
     data={data}
     columns={columns}
     defaultPageSize={10}

stories/PivotingOptions.js

@@ -0,0 +1,183 @@
+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 => {
+        return _.round(_.mean(vals))
+      },
+      render: row => {
+        return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
+      }
+    }, {
+      header: 'Visits',
+      accessor: 'visits',
+      aggregate: vals => _.sum(vals),
+      hideFilter: true
+    }]
+  }, {
+    header: () => <strong>First &#8674; Last Name Pivot</strong>,
+    expander: true,
+    minWidth: 200,
+    render: ({isExpanded, ...rest}) => (
+      isExpanded ? <span> &#10136; </span> : <span> &#10137; </span>
+    ),
+    filterRender: ({key}) => <span key={key}> &#10609; </span>,
+    footer: () => <div style={{textAlign: 'center'}}><strong>Pivot Footer</strong></div>
+  }]
+
+  return (
+    <div>
+      <div className='table-wrap'>
+        <ReactTable
+          data={data}
+          columns={columns}
+          defaultPageSize={10}
+          className='-striped -highlight'
+          pivotBy={['firstName', 'lastName']}
+          showFilters={true}
+          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.filter(x=>!x.expander)}
+                  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',
+    aggregate: vals => {
+      return _.round(_.mean(vals))
+    },
+    render: row => {
+      return <span>{row.aggregated ? \`\${row.value} (avg)\` : row.value}</span>
+    }
+  }, {
+    header: 'Visits',
+    accessor: 'visits',
+    aggregate: vals => _.sum(vals),
+    hideFilter: true
+  }]
+}, {
+  header: () => <strong>First &#8674; Last Name Pivot</strong>,
+  expander: true,
+  minWidth: 200,
+  render: ({isExpanded, ...rest}) => (
+    isExpanded ? <span> &#10136; </span> : <span> &#10137; </span>
+  ),
+  filterRender: ({key}) => <span key={key}> &#10609; </span>,
+  footer: () => <div style={{textAlign: 'center'}}><strong>Pivot Footer</strong></div>
+}]
+
+return (
+  <div>
+    <div className='table-wrap'>
+      <ReactTable
+        data={data}
+        columns={columns}
+        defaultPageSize={10}
+        className='-striped -highlight'
+        pivotBy={['firstName', 'lastName']}
+        showFilters={true}
+        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.filter(x=>!x.expander)}
+                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>
+)
+  `
+}

stories/Simple.js

@@ -77,6 +77,7 @@ const columns = [{
 // Display your table!
 return (
   <ReactTable
+    className='-striped -highlight'
     data={data}
     columns={columns}
     defaultPageSize={10}

umd.webpack.js

@@ -0,0 +1,20 @@
+const webpack = require('webpack')
+module.exports = {
+  entry: './lib/index.js',
+  output: {
+    filename: './react-table.js',
+    libraryTarget: 'umd',
+    library: 'ReactTable'
+  },
+  externals: {
+    react: {
+      root: 'React',
+      commonjs2: 'react',
+      commonjs: 'react',
+      amd: 'react'
+    }
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin()
+  ]
+}

yarn.lock

@@ -121,6 +121,12 @@ accepts@~1.3.3:
     mime-types "~2.1.11"
     negotiator "0.6.1"
 
+acorn-dynamic-import@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz#c752bd210bef679501b6c6cb7fc84f8f47158cc4"
+  dependencies:
+    acorn "^4.0.3"
+
 acorn-globals@^1.0.4:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-1.0.9.tgz#55bb5e98691507b74579d0513413217c380c54cf"
@@ -145,10 +151,14 @@ acorn@^3.0.0, acorn@^3.0.4, acorn@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
-acorn@^4.0.1:
+acorn@^4.0.1, acorn@^4.0.3:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a"
 
+acorn@^5.0.0:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.0.3.tgz#c460df08491463f028ccb82eab3730bf01087b3d"
+
 airbnb-js-shims@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/airbnb-js-shims/-/airbnb-js-shims-1.0.1.tgz#7d5a7d772c8c6fdeb624ea3cef62506091b180b5"
@@ -162,7 +172,7 @@ airbnb-js-shims@^1.0.1:
     string.prototype.padend "^3.0.0"
     string.prototype.padstart "^3.0.0"
 
-ajv-keywords@^1.0.0:
+ajv-keywords@^1.0.0, ajv-keywords@^1.1.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
 
@@ -344,6 +354,12 @@ async@^1.3.0, async@^1.4.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
+async@^2.1.2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.3.0.tgz#1013d1051047dd320fe24e494d5c66ecaf6147d9"
+  dependencies:
+    lodash "^4.14.0"
+
 async@~0.2.6:
   version "0.2.10"
   resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
@@ -1445,7 +1461,7 @@ buffer-xor@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
 
-buffer@^4.1.0, buffer@^4.9.0:
+buffer@^4.1.0, buffer@^4.3.0, buffer@^4.9.0:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
   dependencies:
@@ -1550,7 +1566,7 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chokidar@^1.0.0, chokidar@^1.5.1, chokidar@~1.6.0:
+chokidar@^1.0.0, chokidar@^1.4.3, chokidar@^1.5.1, chokidar@~1.6.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
   dependencies:
@@ -1845,7 +1861,7 @@ crypto-browserify@3.3.0:
     ripemd160 "0.2.0"
     sha.js "2.2.6"
 
-crypto-browserify@^3.0.0:
+crypto-browserify@^3.0.0, crypto-browserify@^3.11.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.0.tgz#3652a0906ab9b2a7e0c3ce66a408e957a2485522"
   dependencies:
@@ -2175,6 +2191,15 @@ encoding@^0.1.11:
   dependencies:
     iconv-lite "~0.4.13"
 
+enhanced-resolve@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.1.0.tgz#9f4b626f577245edcf4b2ad83d86e17f4f421dec"
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.4.0"
+    object-assign "^4.0.1"
+    tapable "^0.2.5"
+
 enhanced-resolve@~0.9.0:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
@@ -3355,7 +3380,7 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
 
-json5@^0.5.0:
+json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
 
@@ -3437,6 +3462,10 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
+loader-runner@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
+
 loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5:
   version "0.2.16"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
@@ -3514,7 +3543,7 @@ lodash.uniq@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@4.x.x, lodash@^4.0.0, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
+lodash@4.x.x, lodash@^4.0.0, lodash@^4.14.0, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -3598,16 +3627,16 @@ memory-fs@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
 
-memory-fs@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
+memory-fs@^0.4.0, memory-fs@~0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
   dependencies:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
-memory-fs@~0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+memory-fs@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.3.0.tgz#7bcc6b629e3a43e871d7e29aca6ae8a7f15cbb20"
   dependencies:
     errno "^0.1.3"
     readable-stream "^2.0.1"
@@ -3817,6 +3846,34 @@ node-libs-browser@^0.7.0:
     util "^0.10.3"
     vm-browserify "0.0.4"
 
+node-libs-browser@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.0.0.tgz#a3a59ec97024985b46e958379646f96c4b616646"
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.1.4"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^1.0.0"
+    https-browserify "0.0.1"
+    os-browserify "^0.2.0"
+    path-browserify "0.0.0"
+    process "^0.11.0"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.0.5"
+    stream-browserify "^2.0.1"
+    stream-http "^2.3.1"
+    string_decoder "^0.10.25"
+    timers-browserify "^2.0.2"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.10.3"
+    vm-browserify "0.0.4"
+
 node-pre-gyp@^0.6.29:
   version "0.6.32"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.32.tgz#fc452b376e7319b3d255f5f34853ef6fd8fe1fd5"
@@ -4958,15 +5015,15 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@2, rimraf@^2.2.8, rimraf@~2.5.1, rimraf@~2.5.4:
-  version "2.5.4"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
+rimraf@2, rimraf@^2.2.8, rimraf@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
   dependencies:
     glob "^7.0.5"
 
-rimraf@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
+rimraf@~2.5.1, rimraf@~2.5.4:
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
   dependencies:
     glob "^7.0.5"
 
@@ -5160,6 +5217,10 @@ source-list-map@^0.1.4, source-list-map@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
 
+source-list-map@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-1.1.1.tgz#1a33ac210ca144d1e561f906ebccab5669ff4cb4"
+
 source-map-support@^0.4.2:
   version "0.4.10"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.10.tgz#d7b19038040a14c0837a18e630a196453952b378"
@@ -5299,7 +5360,7 @@ strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
 
-string-width@^1.0.1:
+string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
   dependencies:
@@ -5442,6 +5503,10 @@ tapable@^0.1.8, tapable@~0.1.8:
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
 
+tapable@^0.2.5, tapable@~0.2.5:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.6.tgz#206be8e188860b514425375e6f1ae89bfb01fd8d"
+
 tar-pack@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.3.0.tgz#30931816418f55afc4d21775afdd6720cee45dae"
@@ -5562,6 +5627,15 @@ uglify-js@2.7.x, uglify-js@2.x.x, uglify-js@~2.7.3:
     uglify-to-browserify "~1.0.0"
     yargs "~3.10.0"
 
+uglify-js@^2.8.5:
+  version "2.8.22"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.22.tgz#d54934778a8da14903fa29a326fb24c0ab51a1a0"
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
@@ -5693,6 +5767,14 @@ watchpack@^0.2.1:
     chokidar "^1.0.0"
     graceful-fs "^4.1.2"
 
+watchpack@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.3.1.tgz#7d8693907b28ce6013e7f3610aa2a1acf07dad87"
+  dependencies:
+    async "^2.1.2"
+    chokidar "^1.4.3"
+    graceful-fs "^4.1.2"
+
 webidl-conversions@^3.0.0, webidl-conversions@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
@@ -5722,6 +5804,13 @@ webpack-hot-middleware@^2.13.2:
     querystring "^0.2.0"
     strip-ansi "^3.0.0"
 
+webpack-sources@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.2.3.tgz#17c62bfaf13c707f9d02c479e0dcdde8380697fb"
+  dependencies:
+    source-list-map "^1.1.1"
+    source-map "~0.5.3"
+
 webpack@^1.13.1:
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-1.14.0.tgz#54f1ffb92051a328a5b2057d6ae33c289462c823"
@@ -5742,6 +5831,32 @@ webpack@^1.13.1:
     watchpack "^0.2.1"
     webpack-core "~0.6.9"
 
+webpack@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.4.1.tgz#15a91dbe34966d8a4b99c7d656efd92a2e5a6f6a"
+  dependencies:
+    acorn "^5.0.0"
+    acorn-dynamic-import "^2.0.0"
+    ajv "^4.7.0"
+    ajv-keywords "^1.1.1"
+    async "^2.1.2"
+    enhanced-resolve "^3.0.0"
+    interpret "^1.0.0"
+    json-loader "^0.5.4"
+    json5 "^0.5.1"
+    loader-runner "^2.3.0"
+    loader-utils "^0.2.16"
+    memory-fs "~0.4.1"
+    mkdirp "~0.5.0"
+    node-libs-browser "^2.0.0"
+    source-map "^0.5.3"
+    supports-color "^3.1.0"
+    tapable "~0.2.5"
+    uglify-js "^2.8.5"
+    watchpack "^1.3.1"
+    webpack-sources "^0.2.3"
+    yargs "^6.0.0"
+
 whatwg-encoding@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.1.tgz#3c6c451a198ee7aec55b1ec61d0920c67801a5f4"
@@ -5857,6 +5972,12 @@ yargs-parser@^2.4.1:
     camelcase "^3.0.0"
     lodash.assign "^4.0.6"
 
+yargs-parser@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-4.2.1.tgz#29cceac0dc4f03c6c87b4a9f217dd18c9f74871c"
+  dependencies:
+    camelcase "^3.0.0"
+
 yargs@^4.7.1:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-4.8.1.tgz#c0c42924ca4aaa6b0e6da1739dfb216439f9ddc0"
@@ -5876,6 +5997,24 @@ yargs@^4.7.1:
     y18n "^3.2.1"
     yargs-parser "^2.4.1"
 
+yargs@^6.0.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
+  dependencies:
+    camelcase "^3.0.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^1.4.0"
+    read-pkg-up "^1.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^1.0.2"
+    which-module "^1.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^4.2.0"
+
 yargs@~3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"