5.1.1

Better resolve server-side data pages and pagesize
Fix custom cell render to allow pure functions
2026-08-19 16:30:21 +00:00 · 2017-02-13 15:54:59 -07:00 · 2017-02-13 15:54:47 -07:00 · 2017-02-13 15:54:25 -07:00 · 2017-02-10 16:51:47 -07:00 · 2017-02-10 16:46:54 -07:00
25 changed files with 443 additions and 256 deletions
@@ -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'
@@ -40,6 +41,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)
@@ -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,
@@ -242,7 +246,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)
@@ -373,20 +376,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)
      }
    }
  }}
@@ -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.2624d4fc5e8e37cbc8cc.bundle.js"></script>
      </body>
    </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.f127c5ae855df8d8558a.bundle.js"></script>
      </body>
    </html>
  
@@ -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.f127c5ae855df8d8558a.bundle.js","sources":["webpack:///static/manager.f127c5ae855df8d8558a.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;AAwyDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}
@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.2624d4fc5e8e37cbc8cc.bundle.js","sources":["webpack:///static/preview.2624d4fc5e8e37cbc8cc.bundle.js"],"mappings":"AAAA;AAkuDA;AAkyDA;AA01EA;AA+gGA;AAo4IA;AAt5NA;AA4udA;AA2hEA;AA2uDA;AA29DA;AA2gDA;AAosDA;AAuhDA;AA+6DA;AAioDA;AA4+CA;AAwpDA;AAisEA;AAqoDA;AAqwCA;AA2oDA;AAowDA;AAokEA;AA0vDA;AA2rDA;AA8nDA;AAwsFA;AAyiGA;AA++CA;AA8yCA;AAgzCA;AAwhDA;AAiPA;AA+jFA","sourceRoot":""}
@@ -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":""}
@@ -1,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "5.0.0",
+  "version": "5.1.1",
  "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"
  },
@@ -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,
@@ -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,
@@ -147,17 +151,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 +177,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 +192,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 ||
@@ -244,7 +280,7 @@ export default React.createClass({
      loading,
      pageSize,
      page,
-      resolvedSorting,
+      sorting,
      pages,
      // Pivoting State
      pivotValKey,
@@ -320,8 +356,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 +382,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 +412,7 @@ export default React.createClass({
        if (column.pivotColumns) {
          return (
            <ThComponent
+              key={i}
              className={classnames(
                'rt-pivot-header',
                classes
@@ -390,6 +427,7 @@ export default React.createClass({
        }
        return (
          <ThComponent
+            key={i}
            className={classnames(
              'rt-expander-header',
              classes
@@ -426,8 +464,8 @@ export default React.createClass({
    }

    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 +487,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 +513,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,
@@ -515,6 +554,7 @@ export default React.createClass({
        }
        return (
          <ThComponent
+            key={i}
            className={classnames(
              'rt-expander-header',
              classes
@@ -534,7 +574,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',
          )}
@@ -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('_')}
@@ -591,8 +631,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, 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 +667,7 @@ export default React.createClass({
                  const PivotCell = column.pivotRender
                  return (
                    <TdComponent
+                      key={i2}
                      className={classnames(
                        'rt-pivot',
                        classes
@@ -667,6 +708,7 @@ export default React.createClass({
                // Return the regular expander cell
                return (
                  <TdComponent
+                    key={i2}
                    className={classnames(
                      classes,
                      {hidden: !show}
@@ -704,12 +746,16 @@ export default React.createClass({
                  {...tdProps.rest}
                >
                  {typeof Cell === 'function' ? (
-                    <Cell
-                      {...rowInfo}
-                      value={rowInfo.rowValues[column.id]}
-                    />
-                  ) : typeof Cell !== 'undefined' ? Cell
-                  : rowInfo.rowValues[column.id]}
+                    Cell.prototype.isReactComponent ? (
+                      <Cell
+                        {...rowInfo}
+                        value={rowInfo.rowValues[column.id]}
+                      />
+                    ) : Cell({
+                      ...rowInfo,
+                      value: rowInfo.rowValues[column.id]
+                    })
+                  ) : rowInfo.rowValues[column.id]}
                </TdComponent>
              )
            })}
@@ -725,9 +771,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 +804,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 +844,11 @@ 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)
      return (
        <div
          className={classnames(
@@ -15,7 +15,9 @@ export default {
  makeTemplateComponent,
  groupBy,
  isArray,
-  splitProps
+  splitProps,
+  compactObject,
+  isSortingDesc
 }

 function get (obj, path, def) {
@@ -173,3 +175,17 @@ 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)
+}
@@ -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
+        })
+      }
+    }}
+  />
+)
+  `
+}
@@ -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']}
  />
 )
  `
@@ -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
+      }]}
+    />
+  )
  `
 }
@@ -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 (
@@ -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']}
  />
 )
  `
@@ -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 (
@@ -40,6 +40,13 @@ export default () => {
          data={data}
          columns={columns}
          defaultPageSize={10}
+          getTdProps={() => {
+            return {
+              onClick: () => {
+                console.log('clicked')
+              }
+            }
+          }}
        />
      </div>
      <div style={{textAlign: 'center'}}>
@@ -125,4 +125,4 @@ export default (
  />
 )
  `
-}
+}
@@ -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"
Author	SHA1	Message	Date
Tanner Linsley	403fb7a708	5.1.1	2017-02-13 15:54:59 -07:00
Tanner Linsley	ecd5658e4b	Better resolve server-side data pages and pagesize	2017-02-13 15:54:47 -07:00
Tanner Linsley	3852227bdd	Fix custom cell render to allow pure functions	2017-02-13 15:54:25 -07:00
Tanner Linsley	1fec9b882f	5.1.0	2017-02-10 16:51:47 -07:00
Tanner Linsley	46c4c6fdb2	Doc Updates	2017-02-10 16:46:54 -07:00
Tanner Linsley	e702fc80ca	defaultSorting changes and doc updates	2017-02-10 16:46:14 -07:00
Tanner Linsley	beaa748187	5.0.4	2017-02-10 14:49:04 -07:00
Tanner Linsley	cce77d24f2	Retain original data order if no sorting is found	2017-02-10 14:48:55 -07:00
Tanner Linsley	3984a540c1	5.0.3	2017-02-09 10:07:42 -07:00
Tanner Linsley	726fd52753	Adjust current page if available pages dips below current page Fixes #69	2017-02-09 10:07:42 -07:00
Tanner LinsleyandGitHub	6a6d373526	Update README.md	2017-02-08 08:20:30 -07:00
TacticalCodingandTanner Linsley	e11fdab457	Fix 'iterator must have unique key' warning on pivoting tables. (#56 ) (#66 )	2017-02-07 10:31:40 -07:00
Jan ZandTanner Linsley	1e4f838326	'collapseOnChange' and 'freezeWhenExpanded' (#61 ) * rough draft of "closeSubComponentOnDataChange" and "preventAutoSortWhenComponentIsOpen" * changed flag name from ...component to ...subcomponent * fixed problem with sorting not immediately being applied. passes tests now * changed var names * Cleanup and simplification * Fix deps * Better freezing strategy * subcomponent reverse	2017-02-06 15:09:35 -07:00
Tanner Linsley	aa48ef57ee	5.0.2	2017-02-03 14:05:32 -07:00
Tanner Linsley	22f79fcd28	Added instance to all custom props callbacks	2017-02-03 14:05:25 -07:00
Tanner Linsley	ff8e24760a	5.0.1	2017-02-03 11:07:51 -07:00
Tanner Linsley	f1511bd27e	Bug fixes and Doc Updates	2017-02-03 11:07:48 -07:00
Tanner Linsley	4733997c26	Updated Docs	2017-02-02 18:17:37 -07:00
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"static/preview.2624d4fc5e8e37cbc8cc.bundle.js","sources":["webpack:///static/preview.2624d4fc5e8e37cbc8cc.bundle.js"],"mappings":"AAAA;AAkuDA;AAkyDA;AA01EA;AA+gGA;AAo4IA;AAt5NA;AA4udA;AA2hEA;AA2uDA;AA29DA;AA2gDA;AAosDA;AAuhDA;AA+6DA;AAioDA;AA4+CA;AAwpDA;AAisEA;AAqoDA;AAqwCA;AA2oDA;AAowDA;AAokEA;AA0vDA;AA2rDA;AA8nDA;AAwsFA;AAyiGA;AA++CA;AA8yCA;AAgzCA;AAwhDA;AAiPA;AA+jFA","sourceRoot":""}`
				`@@ -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":""}`