diff --git a/src/index.js b/src/index.js index 9255843..dce8f64 100644 --- a/src/index.js +++ b/src/index.js @@ -478,6 +478,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { isExpanded, column: {...column}, value: rowInfo.row[column.id], + pivoted: column.pivoted, + expander: column.expander, resized, show, width, @@ -519,36 +521,35 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { // Resolve Renderers const ResolvedAggregatedComponent = column.Aggregated || (!column.aggregate ? AggregatedComponent : column.Cell) const ResolvedExpanderComponent = column.Expander || ExpanderComponent + const ResolvedPivotValueComponent = column.PivotValue || PivotValueComponent + const DefaultResolvedPivotComponent = PivotComponent || (props => ( +
+ + +
+ )) + const ResolvedPivotComponent = column.Pivot || DefaultResolvedPivotComponent // Is this column pivoted? - if (pivotBy && column.pivot) { + if (cellInfo.pivoted || cellInfo.expander) { // Make it expandable cellInfo.expandable = cellInfo.subRows interactionProps = { onClick: onExpanderClick } + } + + if (cellInfo.pivoted) { // Is this column a branch? isBranch = rowInfo.row[pivotIDKey] === column.id && cellInfo.subRows // Should this column be blank? isPreview = pivotBy.indexOf(column.id) > pivotBy.indexOf(rowInfo.row[pivotIDKey]) && cellInfo.subRows - - // Resolve Pivot Renderers - const ResolvedPivotValueComponent = column.PivotValue || PivotValueComponent - // Build the default PivotComponent - const DefaultResolvedPivotComponent = PivotComponent || (props => ( -
- - -
- )) - // Allow a completely custom pivotRender - const resolvedPivot = column.Pivot || DefaultResolvedPivotComponent // Pivot Cell Render Override if (isBranch) { // isPivot - resolvedCell = _.normalizeComponent(resolvedPivot, { + resolvedCell = _.normalizeComponent(ResolvedPivotComponent, { ...cellInfo, value: row[pivotValKey] }, row[pivotValKey]) @@ -560,23 +561,22 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { } } else if (cellInfo.aggregated) { resolvedCell = _.normalizeComponent(ResolvedAggregatedComponent, cellInfo, value) - } - - // Expander onClick event - if (column.expander) { - resolvedCell = _.normalizeComponent(ResolvedExpanderComponent, cellInfo) - cellInfo.expandable = true - interactionProps = { - onClick: onExpanderClick + } else if (column.expander) { + resolvedCell = _.normalizeComponent(ResolvedPivotComponent, cellInfo, value) + if (cellInfo.subRows) { + resolvedCell = null } - if (pivotBy) { - if (cellInfo.groupedByPivot) { - resolvedCell = null - } - if (!cellInfo.subRows && !SubComponent) { - resolvedCell = null - } + if (!cellInfo.subRows && !SubComponent) { + resolvedCell = null } + // if (pivotBy) { + // if (cellInfo.groupedByPivot) { + // resolvedCell = null + // } + // if (!cellInfo.subRows && !SubComponent) { + // resolvedCell = null + // } + // } } // Return the cell diff --git a/src/methods.js b/src/methods.js index 30d9da5..32b4a90 100644 --- a/src/methods.js +++ b/src/methods.js @@ -52,18 +52,18 @@ export default Base => class extends Base { const makeDecoratedColumn = (column) => { let dcol - if (column.expander) { - dcol = { - ...this.props.column, - ...this.props.expanderDefaults, - ...column - } - } else { + // if (column.expander) { + // dcol = { + // ...this.props.column, + // ...this.props.expanderDefaults, + // ...column + // } + // } else { dcol = { ...this.props.column, ...column } - } + // } if (typeof dcol.accessor === 'string') { dcol.id = dcol.id || dcol.accessor @@ -145,7 +145,7 @@ export default Base => class extends Base { columns: pivotColumns.map(col => ({ ...this.props.pivotDefaults, ...col, - pivot: true + pivoted: true })) } diff --git a/stories/SubRows.js b/stories/SubRows.js index a55998a..d35bb3f 100644 --- a/stories/SubRows.js +++ b/stories/SubRows.js @@ -15,35 +15,27 @@ export default () => { }) return { firstName: namor.generate({ words: 1, numLen: 0 }), - age: (ages => { - return Math.round(ages.reduce((p, c) => p + c, 0) / ages.length) - })(grandChildren.map(d => d.age)), - aggregated: true, + age: Math.floor(Math.random() * 30), children: grandChildren } }) return { lastName: namor.generate({ words: 1, numLen: 0 }), - firstName: children.map(d => d.firstName).join(', '), - age: (ages => { - return Math.round(ages.reduce((p, c) => p + c, 0) / ages.length) - })(children.map(d => d.age)), - aggregated: true, + firstName: children.map(d => d.firstName), + age: Math.floor(Math.random() * 30), children } }) const columns = [{ - expander: true - }, { Header: 'Name', columns: [{ Header: 'First Name', - accessor: 'firstName' + accessor: 'firstName', + expander: true }, { Header: 'Last Name', - id: 'lastName', - accessor: d => d.lastName + accessor: 'lastName' }] }, { Header: 'Info', @@ -62,8 +54,6 @@ export default () => { columns={columns} defaultPageSize={10} subRowsKey='children' - aggregatedKey='aggregated' - pivotBy={['lastName']} />