5.2.0

Fixes #80

.storybook/config.js

@@ -14,6 +14,7 @@ import Simple from '../stories/Simple.js'
 import CellRenderers from '../stories/CellRenderers.js'
 import DefaultSorting from '../stories/DefaultSorting.js'
 import CustomWidths from '../stories/CustomWidths.js'
+import CustomComponentProps from '../stories/CustomComponentProps.js'
 import ServerSide from '../stories/ServerSide.js'
 import SubComponents from '../stories/SubComponents.js'
 import Pivoting from '../stories/Pivoting.js'
@@ -21,6 +22,7 @@ import PivotingSubComponents from '../stories/PivotingSubComponents.js'
 import OneHundredKRows from '../stories/OneHundredKRows.js'
 import FunctionalRendering from '../stories/FunctionalRendering.js'
 import CustomExpanderPosition from '../stories/CustomExpanderPosition.js'
+import NoDataText from '../stories/NoDataText.js'
 //
 configure(() => {
   storiesOf('1. Docs')
@@ -40,6 +42,7 @@ configure(() => {
     .add('Cell Renderers & Custom Components', CellRenderers)
     .add('Default Sorting', DefaultSorting)
     .add('Custom Column Widths', CustomWidths)
+    .add('Custom Component Props', CustomComponentProps)
     .add('Server-side Data', ServerSide)
     .add('Sub Components', SubComponents)
     .add('Pivoting & Aggregation', Pivoting)
@@ -47,4 +50,5 @@ configure(() => {
     .add('100k Rows w/ Pivoting & Sub Components', OneHundredKRows)
     .add('Functional Rendering', FunctionalRendering)
     .add('Custom Expander Position', CustomExpanderPosition)
+    .add('Custom "No Data" Text', NoDataText)
 }, module)

README.md

@@ -44,11 +44,11 @@
 - [Props](#props)
 - [Columns](#columns)
 - [Column Header Groups](#column-header-groups)
-- [Custom Cell & Header Rendering](#custom-cell--and-header-rendering)
+- [Custom Cell and Header Rendering](#custom-cell-and-header-rendering)
 - [Styles](#styles)
 - [Custom Props](#custom-props)
-- [Pivoting & Aggregation](#pivoting--aggregation)
-- [Sub Tables & Sub Components](#sub-tables--sub-components)
+- [Pivoting and Aggregation](#pivoting-and-aggregation)
+- [Sub Tables and Sub Components](#sub-tables-and-sub-components)
 - [Server-side Data](#server-side-data)
 - [Fully Controlled Component](#fully-controlled-component)
 - [Functional Rendering](#functional-rendering)
@@ -103,7 +103,7 @@ const columns = [{
 }, {
   header: 'Age',
   accessor: 'age',
-  render: props => <span className='number'>props.value</span> // Custom cell components!
+  render: props => <span className='number'>{props.value}</span> // Custom cell components!
 }, {
   header: 'Friend Name',
   accessor: d => d.friend.name // Custom value accessors!
@@ -135,6 +135,10 @@ These are all of the available props (and their default values) for the main `<R
   defaultPageSize: 20,
   showPageJump: true,
   expanderColumnWidth: 35,
+  collapseOnSortingChange: false,
+  collapseOnPageChange: true,
+  freezeWhenExpanded: false,
+  defaultSorting: [],
 
   // Controlled State Overrides (see Fully Controlled Component section)
   page: undefined,
@@ -183,6 +187,7 @@ These are all of the available props (and their default values) for the main `<R
   getTdProps: () => ({}),
   getPaginationProps: () => ({}),
   getLoadingProps: () => ({}),
+  getNoDataProps: () => ({}),
 
   // Global Column Defaults
   column: {
@@ -205,6 +210,7 @@ These are all of the available props (and their default values) for the main `<R
   previousText: 'Previous',
   nextText: 'Next',
   loadingText: 'Loading...',
+  noDataText: 'No rows found',  
   pageText: 'Page',
   ofText: 'of',
   rowsText: 'rows',
@@ -242,7 +248,6 @@ Or just define them as props
   accessor: 'propertyName' or Accessor eg. (row) => row.propertyName,
   id: 'myProperty', // Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls
   sortable: true,
-  sort: 'asc' or 'desc', // used to determine the column sorting on init
   show: true, // can be used to hide a column
   width: undefined, // A hardcoded width for the column. This overrides both min and max width options
   minWidth: 100 // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set)
@@ -292,7 +297,7 @@ const columns = [{
 }]
 ```
 
-## Custom Cell & Header Rendering
+## Custom Cell and Header Rendering
 You can use any react component or JSX to display column headers or cells. Any component you use will be passed the following props:
 - `row` - Original row from your data
 - `rowValues` - The post-accessed values from the original row
@@ -373,20 +378,22 @@ Every single built-in component's props can be dynamically extended using any on
 
 These callbacks are executed with each render of the element with three parameters:
 1. Table State
-1. RowInfo (where applicable)
-1. Column (where applicable)
+1. RowInfo (undefined if not applicable)
+1. Column (undefined if not applicable)
+1. React Table Instance
 
 This makes it extremely easy to add, say... a row click callback!
 ```javascript
 // When any Td element is clicked, we'll log out some information
 <ReactTable
-  getTdProps={(state, rowInfo, column) => {
+  getTdProps={(state, rowInfo, column, instance) => {
     return {
       onClick: e => {
         console.log('A Td Element was clicked!')
+        console.log('it produced this event:', e)
         console.log('It was in this column:', column)
         console.log('It was in this row:', rowInfo)
-        console.log('it produced this event:', e)
+        console.log('It was in this table instance:', instance)
       }
     }
   }}
@@ -432,7 +439,7 @@ const columns = [{
 }]
 ```
 
-## Pivoting & Aggregation
+## Pivoting and 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
@@ -462,7 +469,7 @@ const columns = [{
 
 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
+## Sub Tables and Sub Components
 By adding a `SubComponent` props, you can easily add an expansion level to all root-level rows:
 ```javascript
 <ReactTable

docs/iframe.html

@@ -16,7 +16,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.eaae7b0eec1fc944fd56.bundle.js"></script>
+        <script src="static/preview.1dfdb2ebd0085aa535c8.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.1ef8adb8615e5a688f5d.bundle.js"></script>
+        <script src="static/manager.d3baea6e6f08c3c0279c.bundle.js"></script>
       </body>
     </html>
   

docs/static/manager.d3baea6e6f08c3c0279c.bundle.js.map

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.1dfdb2ebd0085aa535c8.bundle.js","sources":["webpack:///static/preview.1dfdb2ebd0085aa535c8.bundle.js"],"mappings":"AAAA;AAkuDA;AAu+CA;AA0+FA;AAmpFA;AAkxLA;AA7sBA;AAojOA;AAkjEA;AAivDA;AAy7DA;AAqlDA;AAmvDA;AAu8CA;AA6+DA;AAwlDA;AA2+CA;AAimDA;AA29DA;AA04DA;AAsxCA;AAynDA;AAurDA;AAgiEA;AA03DA;AAwwCA;AA8tDA;AA02FA;AA+tGA;AAy+CA;AAuzCA;AAkuCA;AAikDA;AA8dA;AA+jFA","sourceRoot":""}

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

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -62,6 +62,7 @@
     "react-dom": "^15.4.2",
     "react-json-tree": "^0.10.1",
     "standard": "^8.0.0",
+    "storybook": "^0.0.0",
     "stylus": "^0.54.5",
     "uglifyify": "3.0.3"
   },

src/componentMethods.js

@@ -10,7 +10,10 @@ export default {
       pivotValKey,
       subRowsKey,
       expanderColumnWidth,
-      SubComponent
+      SubComponent,
+      page,
+      pages,
+      pageSize
     } = this.getResolvedState(nextProps, nextState)
 
     // Determine Header Groups
@@ -27,9 +30,11 @@ export default {
 
     // A convenience function to add a header and reset the currentSpan
     const addHeader = (columns, column = columns[0]) => {
-      headerGroups.push(Object.assign({}, column, {
+      headerGroups.push({
+        ...this.props.column,
+        ...column,
         columns: columns
-      }))
+      })
       currentSpan = []
     }
 
@@ -48,7 +53,10 @@ export default {
     }
 
     const makeDecoratedColumn = (column) => {
-      const dcol = Object.assign({}, this.props.column, column)
+      const dcol = {
+        ...this.props.column,
+        ...column
+      }
 
       if (dcol.expander) {
         dcol.width = expanderColumnWidth
@@ -207,29 +215,29 @@ export default {
       resolvedData = groupRecursively(resolvedData, pivotBy)
     }
 
+    const newPages = _.getFirstDefined(pages, Math.ceil(resolvedData.length / pageSize))
+    const newPage = page > newPages ? newPage - 1 : page
+
     return {
       resolvedData,
       pivotColumn,
       allVisibleColumns,
       headerGroups,
       allDecoratedColumns,
-      hasHeaderGroups
+      hasHeaderGroups,
+      page: Math.max(newPage, 0)
     }
   },
-  getSortedData (nextProps, nextState) {
+  getSortedData (resolvedState) {
     const {
       manual,
       sorting,
-      allDecoratedColumns,
       resolvedData
-    } = this.getResolvedState(nextProps, nextState)
-
-    const resolvedSorting = sorting.length ? sorting : this.getInitSorting(allDecoratedColumns)
+    } = resolvedState
 
     // Resolve the data from either manual data or sorted data
     return {
-      resolvedSorting,
-      sortedData: manual ? resolvedData : this.sortData(resolvedData, resolvedSorting)
+      sortedData: manual ? resolvedData : this.sortData(resolvedData, sorting)
     }
   },
 
@@ -242,27 +250,10 @@ export default {
   getStateOrProp (key) {
     return _.getFirstDefined(this.state[key], this.props[key])
   },
-  getInitSorting (columns) {
-    if (!columns) {
-      return []
-    }
-    const initSorting = columns.filter(d => {
-      return typeof d.sort !== 'undefined'
-    }).map(d => {
-      return {
-        id: d.id,
-        asc: d.sort === 'asc'
-      }
-    })
-
-    return initSorting
-
-    // return initSorting.length ? initSorting : [{
-    //   id: columns.find(d => d.id).id,
-    //   asc: true
-    // }]
-  },
   sortData (data, sorting) {
+    if (!sorting.length) {
+      return data
+    }
     const sorted = _.orderBy(data, sorting.map(sort => {
       return row => {
         if (row[sort.id] === null || row[sort.id] === undefined) {
@@ -270,7 +261,7 @@ export default {
         }
         return typeof row[sort.id] === 'string' ? row[sort.id].toLowerCase() : row[sort.id]
       }
-    }), sorting.map(d => d.asc ? 'asc' : 'desc'))
+    }), sorting.map(d => !d.desc))
 
     return sorted.map(row => {
       if (!row[this.props.subRowsKey]) {
@@ -325,54 +316,25 @@ export default {
     if (onSortingChange) {
       return onSortingChange(column, additive)
     }
-    let newSorting = _.clone(sorting || [])
-    if (_.isArray(column)) {
-      const existingIndex = newSorting.findIndex(d => d.id === column[0].id)
-      if (existingIndex > -1) {
-        const existing = newSorting[existingIndex]
-        if (existing.asc) {
-          column.forEach((d, i) => {
-            newSorting[existingIndex + i].asc = false
-          })
-        } else {
-          if (additive) {
-            newSorting.splice(existingIndex, column.length)
-          } else {
-            column.forEach((d, i) => {
-              newSorting[existingIndex + i].asc = true
-            })
-          }
-        }
-        if (!additive) {
-          newSorting = newSorting.slice(existingIndex, column.length)
-        }
-      } else {
-        if (additive) {
-          newSorting = newSorting.concat(column.map(d => ({
-            id: d.id,
-            asc: true
-          })))
-        } else {
-          newSorting = column.map(d => ({
-            id: d.id,
-            asc: true
-          }))
-        }
-      }
-    } else {
+    let newSorting = _.clone(sorting || []).map(d => {
+      d.desc = _.isSortingDesc(d)
+      return d
+    })
+    if (!_.isArray(column)) {
+      // Single-Sort
       const existingIndex = newSorting.findIndex(d => d.id === column.id)
       if (existingIndex > -1) {
         const existing = newSorting[existingIndex]
-        if (existing.asc) {
-          existing.asc = false
-          if (!additive) {
-            newSorting = [existing]
-          }
-        } else {
+        if (existing.desc) {
           if (additive) {
             newSorting.splice(existingIndex, 1)
           } else {
-            existing.asc = true
+            existing.desc = false
+            newSorting = [existing]
+          }
+        } else {
+          existing.desc = true
+          if (!additive) {
             newSorting = [existing]
           }
         }
@@ -380,15 +342,51 @@ export default {
         if (additive) {
           newSorting.push({
             id: column.id,
-            asc: true
+            desc: false
           })
         } else {
           newSorting = [{
             id: column.id,
-            asc: true
+            desc: false
           }]
         }
       }
+    } else {
+      // Multi-Sort
+      const existingIndex = newSorting.findIndex(d => d.id === column[0].id)
+      // Existing Sorted Column
+      if (existingIndex > -1) {
+        const existing = newSorting[existingIndex]
+        if (existing.desc) {
+          if (additive) {
+            newSorting.splice(existingIndex, column.length)
+          } else {
+            column.forEach((d, i) => {
+              newSorting[existingIndex + i].desc = false
+            })
+          }
+        } else {
+          column.forEach((d, i) => {
+            newSorting[existingIndex + i].desc = true
+          })
+        }
+        if (!additive) {
+          newSorting = newSorting.slice(existingIndex, column.length)
+        }
+      } else {
+        // New Sort Column
+        if (additive) {
+          newSorting = newSorting.concat(column.map(d => ({
+            id: d.id,
+            desc: false
+          })))
+        } else {
+          newSorting = column.map(d => ({
+            id: d.id,
+            desc: false
+          }))
+        }
+      }
     }
     this.setStateWithData({
       page: ((!sorting.length && newSorting.length) || !additive) ? 0 : this.state.page,

src/index.js

@@ -18,6 +18,10 @@ export const ReactTableDefaults = {
   defaultPageSize: 20,
   showPageJump: true,
   expanderColumnWidth: 35,
+  collapseOnSortingChange: false,
+  collapseOnPageChange: true,
+  freezeWhenExpanded: false,
+  defaultSorting: [],
 
   // Controlled State Overrides
   // page: undefined,
@@ -66,6 +70,7 @@ export const ReactTableDefaults = {
   getTdProps: emptyObj,
   getPaginationProps: emptyObj,
   getLoadingProps: emptyObj,
+  getNoDataProps: emptyObj,
 
   // Global Column Defaults
   column: {
@@ -88,6 +93,7 @@ export const ReactTableDefaults = {
   previousText: 'Previous',
   nextText: 'Next',
   loadingText: 'Loading...',
+  noDataText: 'No rows found',
   pageText: 'Page',
   ofText: 'of',
   rowsText: 'rows',
@@ -135,7 +141,8 @@ export const ReactTableDefaults = {
         {loadingText}
       </div>
     </div>
-  )
+  ),
+  NoDataComponent: _.makeTemplateComponent('rt-noData')
 }
 
 export default React.createClass({
@@ -147,17 +154,17 @@ export default React.createClass({
     return {
       page: 0,
       pageSize: this.props.defaultPageSize || 10,
-      sorting: [],
+      sorting: this.props.defaultSorting,
       expandedRows: {}
     }
   },
 
   getResolvedState (props, state) {
     const resolvedState = {
-      ...this.state,
-      ...state,
-      ...this.props,
-      ...props
+      ..._.compactObject(this.state),
+      ..._.compactObject(state),
+      ..._.compactObject(this.props),
+      ..._.compactObject(props)
     }
     return resolvedState
   },
@@ -173,6 +180,7 @@ export default React.createClass({
   componentWillReceiveProps (nextProps, nextState) {
     const oldState = this.getResolvedState()
     const newState = this.getResolvedState(nextProps, nextState)
+
     // Props that trigger a data update
     if (
       oldState.data !== newState.data ||
@@ -187,22 +195,53 @@ export default React.createClass({
   setStateWithData (newState, cb) {
     const oldState = this.getResolvedState()
     const newResolvedState = this.getResolvedState({}, newState)
-    if (
-      oldState.resolvedData !== newResolvedState.resolvedData ||
-      oldState.sorting !== newResolvedState.sorting
-    ) {
-      Object.assign(newState, this.getSortedData({}, newState))
+    const { freezeWhenExpanded } = newResolvedState
+
+    // Default to unfrozen state
+    newResolvedState.frozen = false
+
+    // If freezeWhenExpanded is set, check for frozen conditions
+    if (freezeWhenExpanded) {
+      // if any rows are expanded, freeze the existing data and sorting
+      const keys = Object.keys(newResolvedState.expandedRows)
+      for (var i = 0; i < keys.length; i++) {
+        if (newResolvedState.expandedRows[keys[i]]) {
+          newResolvedState.frozen = true
+          break
+        }
+      }
     }
+
+    // If the data isn't frozen and either the data or
+    // sorting model has changed, update the data
+    if (
+      (oldState.frozen && !newResolvedState.frozen) ||
+      oldState.sorting !== newResolvedState.sorting ||
+      (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
+    ) {
+      // Handle collapseOnSortingChange & collapseOnPageChange
+      if (
+        (oldState.sorting !== newResolvedState.sorting && this.props.collapseOnSortingChange) ||
+        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnPageChange)
+      ) {
+        newResolvedState.expandedRows = {}
+      }
+
+      Object.assign(newResolvedState, this.getSortedData(newResolvedState))
+    }
+
     // Calculate pageSize all the time
     if (newResolvedState.resolvedData) {
-      newState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize)
+      newResolvedState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize)
     }
-    return this.setState(newState, cb)
+
+    return this.setState(newResolvedState, cb)
   },
 
   shouldComponentUpdate (nextProps, nextState) {
     const oldState = this.getResolvedState()
     const newState = this.getResolvedState(nextProps, nextState)
+
     // State changes that trigger a render
     if (
       oldState.sortedData !== newState.sortedData ||
@@ -236,15 +275,17 @@ export default React.createClass({
       getTdProps,
       getPaginationProps,
       getLoadingProps,
+      getNoDataProps,
       showPagination,
       expanderColumnWidth,
       manual,
       loadingText,
+      noDataText,
       // State
       loading,
       pageSize,
       page,
-      resolvedSorting,
+      sorting,
       pages,
       // Pivoting State
       pivotValKey,
@@ -263,6 +304,7 @@ export default React.createClass({
       PaginationComponent,
       LoadingComponent,
       SubComponent,
+      NoDataComponent,
       // Data model
       resolvedData,
       allVisibleColumns,
@@ -320,8 +362,8 @@ export default React.createClass({
     // Visual Components
 
     const makeHeaderGroups = () => {
-      const theadGroupProps = _.splitProps(getTheadGroupProps(finalState))
-      const theadGroupTrProps = _.splitProps(getTheadGroupTrProps(finalState))
+      const theadGroupProps = _.splitProps(getTheadGroupProps(finalState, undefined, undefined, this))
+      const theadGroupTrProps = _.splitProps(getTheadGroupTrProps(finalState, undefined, undefined, this))
       return (
         <TheadComponent
           className={classnames('-headerGroups', theadGroupProps.className)}
@@ -346,8 +388,8 @@ export default React.createClass({
       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 theadGroupThProps = _.splitProps(getTheadGroupThProps(finalState, undefined, column))
-      const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column))
+      const theadGroupThProps = _.splitProps(getTheadGroupThProps(finalState, undefined, column, this))
+      const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
 
       const classes = [
         column.headerClassName,
@@ -376,6 +418,7 @@ export default React.createClass({
         if (column.pivotColumns) {
           return (
             <ThComponent
+              key={i}
               className={classnames(
                 'rt-pivot-header',
                 classes
@@ -390,6 +433,7 @@ export default React.createClass({
         }
         return (
           <ThComponent
+            key={i}
             className={classnames(
               'rt-expander-header',
               classes
@@ -415,19 +459,17 @@ export default React.createClass({
           }}
           {...rest}
         >
-          {typeof column.header === 'function' ? (
-            <column.header
-              data={sortedData}
-              column={column}
-            />
-          ) : column.header}
+          {_.normalizeComponent(column.header, {
+            data: sortedData,
+            column: column
+          })}
         </ThComponent>
       )
     }
 
     const makeHeaders = () => {
-      const theadProps = _.splitProps(getTheadProps(finalState))
-      const theadTrProps = _.splitProps(getTheadTrProps(finalState))
+      const theadProps = _.splitProps(getTheadProps(finalState, undefined, undefined, this))
+      const theadTrProps = _.splitProps(getTheadTrProps(finalState, undefined, undefined, this))
       return (
         <TheadComponent
           className={classnames('-header', theadProps.className)}
@@ -449,12 +491,12 @@ export default React.createClass({
     }
 
     const makeHeader = (column, i) => {
-      const sort = resolvedSorting.find(d => d.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 theadThProps = _.splitProps(getTheadThProps(finalState, undefined, column))
-      const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column))
+      const theadThProps = _.splitProps(getTheadThProps(finalState, undefined, column, this))
+      const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
 
       const classes = [
         column.headerClassName,
@@ -475,14 +517,15 @@ export default React.createClass({
 
       if (column.expander) {
         if (column.pivotColumns) {
-          const pivotSort = resolvedSorting.find(d => d.id === column.id)
+          const pivotSort = sorting.find(d => d.id === column.id)
           return (
             <ThComponent
+              key={i}
               className={classnames(
                 'rt-pivot-header',
                 column.sortable && '-cursor-pointer',
                 classes,
-                pivotSort ? (pivotSort.asc ? '-sort-asc' : '-sort-desc') : ''
+                pivotSort ? (pivotSort.desc ? '-sort-asc' : '-sort-desc') : ''
               )}
               style={{
                 ...styles,
@@ -498,12 +541,10 @@ export default React.createClass({
               {column.pivotColumns.map((pivotColumn, i) => {
                 return (
                   <span key={pivotColumn.id}>
-                    {typeof pivotColumn.header === 'function' ? (
-                      <pivotColumn.header
-                        data={sortedData}
-                        column={pivotColumn}
-                      />
-                    ) : pivotColumn.header}
+                    {_.normalizeComponent(pivotColumn.header, {
+                      data: sortedData,
+                      column: column
+                    })}
                     {i < column.pivotColumns.length - 1 && (
                       <ExpanderComponent />
                     )}
@@ -515,6 +556,7 @@ export default React.createClass({
         }
         return (
           <ThComponent
+            key={i}
             className={classnames(
               'rt-expander-header',
               classes
@@ -534,7 +576,7 @@ export default React.createClass({
           key={i}
           className={classnames(
             classes,
-            sort ? (sort.asc ? '-sort-asc' : '-sort-desc') : '',
+            sort ? (sort.desc ? '-sort-asc' : '-sort-desc') : '',
             column.sortable && '-cursor-pointer',
             !show && '-hidden',
           )}
@@ -549,12 +591,10 @@ export default React.createClass({
           }}
           {...rest}
         >
-          {typeof column.header === 'function' ? (
-            <column.header
-              data={sortedData}
-              column={column}
-            />
-          ) : column.header}
+          {_.normalizeComponent(column.header, {
+            data: sortedData,
+            column: column
+          })}
         </ThComponent>
       )
     }
@@ -571,8 +611,8 @@ export default React.createClass({
         subRows: row[subRowsKey]
       }
       const isExpanded = _.get(expandedRows, rowInfo.nestingPath)
-      const trGroupProps = getTrGroupProps(finalState, rowInfo)
-      const trProps = _.splitProps(getTrProps(finalState, rowInfo))
+      const trGroupProps = getTrGroupProps(finalState, rowInfo, undefined, this)
+      const trProps = _.splitProps(getTrProps(finalState, rowInfo, undefined, this))
       return (
         <TrGroupComponent
           key={rowInfo.nestingPath.join('_')}
@@ -587,12 +627,11 @@ export default React.createClass({
             {...trProps.rest}
           >
             {allVisibleColumns.map((column, i2) => {
-              const Cell = column.render
               const show = typeof column.show === 'function' ? column.show() : column.show
               const width = _.getFirstDefined(column.width, column.minWidth)
               const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
-              const tdProps = _.splitProps(getTdProps(finalState, rowInfo, column))
-              const columnProps = _.splitProps(column.getProps(finalState, rowInfo, column))
+              const tdProps = _.splitProps(getTdProps(finalState, rowInfo, column, this))
+              const columnProps = _.splitProps(column.getProps(finalState, rowInfo, column, this))
 
               const classes = [
                 tdProps.className,
@@ -627,6 +666,7 @@ export default React.createClass({
                   const PivotCell = column.pivotRender
                   return (
                     <TdComponent
+                      key={i2}
                       className={classnames(
                         'rt-pivot',
                         classes
@@ -667,6 +707,7 @@ export default React.createClass({
                 // Return the regular expander cell
                 return (
                   <TdComponent
+                    key={i2}
                     className={classnames(
                       classes,
                       {hidden: !show}
@@ -703,13 +744,10 @@ export default React.createClass({
                   }}
                   {...tdProps.rest}
                 >
-                  {typeof Cell === 'function' ? (
-                    <Cell
-                      {...rowInfo}
-                      value={rowInfo.rowValues[column.id]}
-                    />
-                  ) : typeof Cell !== 'undefined' ? Cell
-                  : rowInfo.rowValues[column.id]}
+                  {_.normalizeComponent(column.render, {
+                    ...rowInfo,
+                    value: rowInfo.rowValues[column.id]
+                  }, rowInfo.rowValues[column.id])}
                 </TdComponent>
               )
             })}
@@ -725,9 +763,9 @@ export default React.createClass({
     }
 
     const makePadRow = (row, i) => {
-      const trGroupProps = getTrGroupProps(finalState)
-      const trProps = _.splitProps(getTrProps(finalState))
-      const thProps = _.splitProps(getThProps(finalState))
+      const trGroupProps = getTrGroupProps(finalState, undefined, undefined, this)
+      const trProps = _.splitProps(getTrProps(finalState, undefined, undefined, this))
+      const thProps = _.splitProps(getThProps(finalState, undefined, undefined, this))
       return (
         <TrGroupComponent
           key={i}
@@ -758,8 +796,8 @@ export default React.createClass({
               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 tdProps = _.splitProps(getTdProps(finalState, undefined, column))
-              const columnProps = _.splitProps(column.getProps(finalState, undefined, column))
+              const tdProps = _.splitProps(getTdProps(finalState, undefined, column, this))
+              const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this))
 
               const classes = [
                 tdProps.className,
@@ -798,11 +836,12 @@ export default React.createClass({
     }
 
     const makeTable = () => {
-      const rootProps = _.splitProps(getProps(finalState))
-      const tableProps = _.splitProps(getTableProps(finalState))
-      const tBodyProps = _.splitProps(getTbodyProps(finalState))
-      const paginationProps = _.splitProps(getPaginationProps(finalState))
-      const loadingProps = getLoadingProps(finalState)
+      const rootProps = _.splitProps(getProps(finalState, undefined, undefined, this))
+      const tableProps = _.splitProps(getTableProps(finalState, undefined, undefined, this))
+      const tBodyProps = _.splitProps(getTbodyProps(finalState, undefined, undefined, this))
+      const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
+      const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
+      const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
       return (
         <div
           className={classnames(
@@ -848,6 +887,13 @@ export default React.createClass({
               {...paginationProps.rest}
             />
           )}
+          {!pageRows.length && (
+            <NoDataComponent
+              {...noDataProps}
+            >
+              {_.normalizeComponent(noDataText)}
+            </NoDataComponent>
+          )}
           <LoadingComponent
             loading={loading}
             loadingText={loadingText}

src/index.styl

@@ -170,6 +170,18 @@ $expandSize = 7px
     .-pageSizeOptions
       margin: 3px 10px
 
+  .rt-noData
+    display:block
+    position:absolute
+    left:50%
+    top:50%
+    transform: translate(-50%, -50%)
+    background: alpha(white, .8)
+    transition: all .3s ease
+    z-index: 1
+    pointer-events: none
+    padding: 20px
+    color: alpha(black, .5)
 
   .-loading
     display:block

src/utils.js

@@ -15,7 +15,10 @@ export default {
   makeTemplateComponent,
   groupBy,
   isArray,
-  splitProps
+  splitProps,
+  compactObject,
+  isSortingDesc,
+  normalizeComponent
 }
 
 function get (obj, path, def) {
@@ -173,3 +176,27 @@ function splitProps ({className, style, ...rest}) {
     rest
   }
 }
+
+function compactObject (obj) {
+  const newObj = {}
+  for (var key in obj) {
+    if (obj.hasOwnProperty(key) && obj[key] !== undefined && typeof obj[key] !== 'undefined') {
+      newObj[key] = obj[key]
+    }
+  }
+  return newObj
+}
+
+function isSortingDesc (d) {
+  return !!(d.sort === 'desc' || d.desc === true || d.asc === false)
+}
+
+function normalizeComponent (Comp, params, fallback = Comp) {
+  return typeof Comp === 'function' ? (
+    Comp.prototype.isReactComponent ? (
+      <Comp
+        {...params}
+      />
+    ) : Comp(params)
+  ) : fallback
+}

stories/CustomComponentProps.js

@@ -0,0 +1,106 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+export default () => {
+  const data = _.map(_.range(5553), d => {
+    return {
+      firstName: namor.generate({ words: 1, numLen: 0 }),
+      lastName: namor.generate({ words: 1, numLen: 0 }),
+      age: Math.floor(Math.random() * 30)
+    }
+  })
+
+  const columns = [{
+    header: 'Name',
+    columns: [{
+      header: 'First Name',
+      accessor: 'firstName'
+    }, {
+      header: 'Last Name',
+      id: 'lastName',
+      accessor: d => d.lastName
+    }]
+  }, {
+    header: 'Info',
+    columns: [{
+      header: 'Age',
+      accessor: 'age'
+    }]
+  }]
+
+  return (
+    <div>
+      <strong>Hey!</strong> Open your console! :)
+      <div className='table-wrap'>
+        <ReactTable
+          className='-striped -highlight'
+          data={data}
+          columns={columns}
+          defaultPageSize={10}
+          getTdProps={(state, rowInfo, column, instance) => {
+            return {
+              onMouseEnter: e => console.log('Cell - onMouseEnter', {
+                state,
+                rowInfo,
+                column,
+                instance,
+                event: e
+              })
+            }
+          }}
+        />
+      </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'
+  }]
+}]
+
+return (
+  <ReactTable
+    className='-striped -highlight'
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+    getTdProps={(state, rowInfo, column, instance) => {
+      return {
+        onMouseEnter: e => console.log('Cell - onMouseEnter', {
+          state,
+          rowInfo,
+          column,
+          instance,
+          event: e
+        })
+      }
+    }}
+  />
+)
+  `
+}

stories/CustomExpanderPosition.js

@@ -79,8 +79,6 @@ const columns = [{
     id: 'lastName',
     accessor: d => d.lastName
   }]
-}, {
-  expander: true
 }, {
   header: 'Info',
   columns: [{
@@ -91,6 +89,8 @@ const columns = [{
       return <span>{row.aggregated ? \`$\{row.value} (avg)\` : row.value}</span>
     }
   }]
+}, {
+  expander: true
 }]
 
 return (
@@ -100,7 +100,6 @@ return (
     columns={columns}
     defaultPageSize={10}
     SubComponent={() => <span>Hello</span>}
-    pivotBy={['lastName']}
   />
 )
   `

stories/DefaultSorting.js

@@ -28,8 +28,7 @@ export default () => {
     header: 'Info',
     columns: [{
       header: 'Age',
-      accessor: 'age',
-      sort: 'desc'
+      accessor: 'age'
     }]
   }]
 
@@ -41,6 +40,10 @@ export default () => {
           data={data}
           columns={columns}
           defaultPageSize={10}
+          defaultSorting={[{
+            id: 'age',
+            desc: true
+          }]}
         />
       </div>
       <div style={{textAlign: 'center'}}>
@@ -54,34 +57,35 @@ export default () => {
 
 function getCode () {
   return `
-import ReactTable from 'react-table'
-
-// Create some column definitions
-const columns = [{
-  header: 'Name',
-  columns: [{
-    header: 'First Name',
-    accessor: 'firstName'
+  const columns = [{
+    header: 'Name',
+    columns: [{
+      header: 'First Name',
+      accessor: 'firstName'
+    }, {
+      header: 'Last Name',
+      id: 'lastName',
+      accessor: d => d.lastName
+    }]
   }, {
-    header: 'Last Name',
-    id: 'lastName',
-    accessor: d => d.lastName
+    header: 'Info',
+    columns: [{
+      header: 'Age',
+      accessor: 'age'
+    }]
   }]
-}, {
-  header: 'Info',
-  columns: [{
-    header: 'Age',
-    accessor: 'age'
-  }]
-}]
 
-// Display your table!
-return (
-  <ReactTable
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-  />
-)
+  return (
+    <ReactTable
+      className='-striped -highlight'
+      data={data}
+      columns={columns}
+      defaultPageSize={10}
+      defaultSorting={[{
+        id: 'age',
+        desc: true
+      }]}
+    />
+  )
   `
 }

stories/NoDataText.js

@@ -0,0 +1,92 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+export default () => {
+  const data = _.map(_.range(5553), d => {
+    return {
+      firstName: namor.generate({ words: 1, numLen: 0 }),
+      lastName: namor.generate({ words: 1, numLen: 0 }),
+      age: Math.floor(Math.random() * 30)
+    }
+  })
+
+  const columns = [{
+    header: 'Name',
+    columns: [{
+      header: 'First Name',
+      accessor: 'firstName'
+    }, {
+      header: 'Last Name',
+      id: 'lastName',
+      accessor: d => d.lastName
+    }]
+  }, {
+    header: 'Info',
+    columns: [{
+      header: 'Age',
+      accessor: 'age'
+    }]
+  }]
+
+  return (
+    <div>
+      <div className='table-wrap'>
+        <ReactTable
+          className='-striped -highlight'
+          data={[]}
+          noDataText='Oh Noes!'
+          // noDataText={() => 'Oh Noes!'} // Supports functions
+          // noDataText={() => <span>Oh Noes!</span>} // Supports JSX / React Components
+          columns={columns}
+          defaultPageSize={10}
+        />
+      </div>
+      <div style={{textAlign: 'center'}}>
+        <br />
+        <em>Tip: Hold shift when sorting to multi-sort!</em>
+      </div>
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
+import ReactTable from 'react-table'
+
+// Create some column definitions
+const columns = [{
+  header: 'Name',
+  columns: [{
+    header: 'First Name',
+    accessor: 'firstName'
+  }, {
+    header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName
+  }]
+}, {
+  header: 'Info',
+  columns: [{
+    header: 'Age',
+    accessor: 'age'
+  }]
+}]
+
+// Display your table!
+return (
+  <ReactTable
+    data={[]}
+    noDataText='Oh Noes!'
+    // noDataText={() => 'Oh Noes!'} // Supports functions
+    // noDataText={() => <span>Oh Noes!</span>} // Supports JSX / React Components
+    columns={columns}
+    defaultPageSize={10}
+  />
+)
+  `
+}

stories/OneHundredKRows.js

@@ -100,15 +100,24 @@ const columns = [{
   header: 'Info',
   columns: [{
     header: 'Age',
-    accessor: '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)
   }]
 }]
 
-export default (
+return (
   <ReactTable
     data={data}
     columns={columns}
     defaultPageSize={10}
+    className='-striped -highlight'
     pivotBy={['firstName', 'lastName']}
     SubComponent={(row) => {
       return (

stories/Pivoting.js

@@ -50,12 +50,6 @@ export default () => {
           className='-striped -highlight'
           defaultPageSize={10}
           pivotBy={['firstName', 'lastName']}
-          // expandedRows={{
-          //   2: true,
-          //   3: {
-          //     2: true
-          //   }
-          // }}
         />
       </div>
       <div style={{textAlign: 'center'}}>
@@ -83,38 +77,25 @@ const columns = [{
   header: 'Info',
   columns: [{
     header: 'Age',
-    accessor: '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)
   }]
 }]
 
-export default (
+return (
   <ReactTable
     data={data}
     columns={columns}
+    className='-striped -highlight'
     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>
-      )
-    }}
+    pivotBy={['firstName', 'lastName']}
   />
 )
   `

stories/PivotingSubComponents.js

@@ -100,15 +100,24 @@ const columns = [{
   header: 'Info',
   columns: [{
     header: 'Age',
-    accessor: '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)
   }]
 }]
 
-export default (
+return (
   <ReactTable
     data={data}
     columns={columns}
     defaultPageSize={10}
+    className='-striped -highlight'
     pivotBy={['firstName', 'lastName']}
     SubComponent={(row) => {
       return (

stories/SubComponents.js

@@ -125,4 +125,4 @@ export default (
   />
 )
   `
-}
+}

yarn.lock

@@ -2998,7 +2998,7 @@ indexof@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
 
-inflight@^1.0.4:
+inflight@^1.0.4, inflight@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
   dependencies:
@@ -5248,6 +5248,10 @@ standard@^8.0.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
+storybook@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/storybook/-/storybook-0.0.0.tgz#b3b9508fb99fd83615674917583cfe9e1532931d"
+
 stream-browserify@^2.0.0, stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"