Added instance to all custom props callbacks

This commit is contained in:
Tanner Linsley 2017-02-03 14:05:25 -07:00
parent ff8e24760a
commit 22f79fcd28
5 changed files with 33 additions and 31 deletions

View File

@ -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)
}
}
}}

View File

@ -16,7 +16,7 @@
<body>
<div id="root"></div>
<div id="error-display"></div>
<script src="static/preview.2c6e50074229d5f04361.bundle.js"></script>
<script src="static/preview.ee446fa2bd3fbfe7e38a.bundle.js"></script>
</body>
</html>

View File

@ -1 +1 @@
{"version":3,"file":"static/preview.2c6e50074229d5f04361.bundle.js","sources":["webpack:///static/preview.2c6e50074229d5f04361.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":""}
{"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":""}

View File

@ -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,
@ -573,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('_')}
@ -593,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,
@ -727,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}
@ -760,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,
@ -800,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(