5.0.2

Added instance to all custom props callbacks
5.0.1
2026-08-19 16:30:21 +00:00 · 2017-02-03 14:05:32 -07:00 · 2017-02-03 14:05:25 -07:00 · 2017-02-03 11:07:51 -07:00 · 2017-02-03 11:07:48 -07:00 · 2017-02-02 18:17:37 -07:00
15 changed files with 185 additions and 88 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)
@@ -373,20 +373,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.ee446fa2bd3fbfe7e38a.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":""}
@@ -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":""}
@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.ee446fa2bd3fbfe7e38a.bundle.js","sources":["webpack:///static/preview.ee446fa2bd3fbfe7e38a.bundle.js"],"mappings":"AAAA;AAkuDA;AAiwDA;AAs1EA;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;AAwrFA;AAyiGA;AA0/CA;AAqyCA;AA22CA;AAu/CA;AAyGA;AA+jFA","sourceRoot":""}
@@ -1,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "5.0.0",
+  "version": "5.0.2",
  "description": "A fast, lightweight, opinionated table and datagrid built on React",
  "license": "MIT",
  "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -27,9 +27,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 +50,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
@@ -320,8 +320,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 +346,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,
@@ -426,8 +426,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)}
@@ -453,8 +453,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 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,
@@ -478,6 +478,7 @@ export default React.createClass({
          const pivotSort = resolvedSorting.find(d => d.id === column.id)
          return (
            <ThComponent
+              key={i}
              className={classnames(
                'rt-pivot-header',
                column.sortable && '-cursor-pointer',
@@ -515,6 +516,7 @@ export default React.createClass({
        }
        return (
          <ThComponent
+            key={i}
            className={classnames(
              'rt-expander-header',
              classes
@@ -571,8 +573,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 +593,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,
@@ -725,9 +727,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 +760,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 +800,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(
@@ -0,0 +1,86 @@
+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={data}
+          columns={columns}
+          defaultPageSize={10}
+        />
+      </div>
+      <div style={{textAlign: 'center'}}>
+        <br />
+        <em>Tip: Hold shift when sorting to multi-sort!</em>
+      </div>
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
+import ReactTable from 'react-table'
+
+// Create some column definitions
+const columns = [{
+  header: 'Name',
+  columns: [{
+    header: 'First Name',
+    accessor: 'firstName'
+  }, {
+    header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName
+  }]
+}, {
+  header: 'Info',
+  columns: [{
+    header: 'Age',
+    accessor: 'age'
+  }]
+}]
+
+// Display your table!
+return (
+  <ReactTable
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+  />
+)
+  `
+}
Author	SHA1	Message	Date
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
				`@@ -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":""}`
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"static/preview.ee446fa2bd3fbfe7e38a.bundle.js","sources":["webpack:///static/preview.ee446fa2bd3fbfe7e38a.bundle.js"],"mappings":"AAAA;AAkuDA;AAiwDA;AAs1EA;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;AAwrFA;AAyiGA;AA0/CA;AAqyCA;AA22CA;AAu/CA;AAyGA;AA+jFA","sourceRoot":""}`