Better expanding and aggregation control

src/defaultProps.js

@@ -168,12 +168,12 @@ export default {
   PivotValueComponent: ({subRows, value}) => (
     <span>{value} {subRows && `(${subRows.length})`}</span>
   ),
-  PivotPreviewComponent: ({subRows, column}) => {
-    const previewValues = subRows.slice(0, 3).map((row, i) => (
-      <span key={i}>{row[column.id]}, </span>
+  AggregateComponent: ({subRows, column}) => {
+    const previewValues = subRows.map((row, i) => (
+      <span key={i}>{row[column.id]}{i < subRows.length - 1 ? ', ' : ''}</span>
     ))
     return (
-      <span>{previewValues}...</span>
+      <span>{previewValues}</span>
     )
   },
   PivotComponent: undefined, // this is a computed default generated using

src/index.js

@@ -108,7 +108,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       ResizerComponent,
       ExpanderComponent,
       PivotValueComponent,
-      PivotPreviewComponent,
+      AggregateComponent,
       // Data model
       resolvedData,
       allVisibleColumns,
@@ -511,8 +511,17 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
               let isPreview
               let expandable
 
+              // Resolve Aggregate Renderer
+              const ResolvedAggregateComponent = column.aggregateRender ||
+                !column.aggregate && AggregateComponent
+
               // Is this column pivoted?
               if (pivotBy && column.pivot) {
+                // Make it expandable
+                expandable = true
+                interactionProps = {
+                  onClick: onExpanderClick
+                }
                 // Is this column a branch?
                 isBranch = rowInfo.rowValues[pivotIDKey] === column.id &&
                   cellInfo.subRows
@@ -520,10 +529,9 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                 isPreview = pivotBy.indexOf(column.id) >= pivotBy.indexOf(rowInfo.rowValues[pivotIDKey]) &&
                   cellInfo.subRows
 
-                // Resolve renderers
+                // Resolve Pivot Renderers
                 const ResolvedExpanderComponent = column.expanderRender || ExpanderComponent
                 const ResolvedPivotValueComponent = column.pivotValueRender || PivotValueComponent
-                const ResolvedPivotPreviewComponent = column.pivotPreviewRender || PivotPreviewComponent
                 // Build the default PivotComponent
                 const DefaultResolvedPivotComponent = props => (
                   <div>
@@ -541,24 +549,22 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                     value: row[pivotValKey],
                     isExpanded
                   }, cellInfo.rowValues[column.id])
-                  interactionProps = {
-                    onClick: onExpanderClick
-                  }
-                  expandable = true
                 } else if (isPreview) {
                   // Show the pivot preview
-                  resolvedCell = _.normalizeComponent(ResolvedPivotPreviewComponent, {
+                  resolvedCell = _.normalizeComponent(ResolvedAggregateComponent, {
                     ...cellInfo,
                     value: cellInfo.rowValues[column.id],
                     isExpanded
                   }, cellInfo.rowValues[column.id])
-                  interactionProps = {
-                    onClick: onExpanderClick
-                  }
-                  expandable = true
                 } else {
                   resolvedCell = null
                 }
+              } else if (cellInfo.aggregated) {
+                resolvedCell = _.normalizeComponent(ResolvedAggregateComponent, {
+                  ...cellInfo,
+                  value: cellInfo.rowValues[column.id],
+                  isExpanded
+                }, cellInfo.rowValues[column.id])
               }
 
               // Expander onClick event
@@ -572,8 +578,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                   }
                 }
               }
-
-              // Return regular cell
+              
+              // Return the cell
               return (
                 <TdComponent
                   key={i2 + '-' + column.id}

stories/OneHundredKRows.js

@@ -31,8 +31,8 @@ export default () => {
       header: 'Age',
       accessor: 'age',
       aggregate: vals => _.round(_.mean(vals)),
-      render: row => {
-        return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
+      aggregateRender: row => {
+        return <span>{row.value} (avg)</span>
       }
     }, {
       header: 'Visits',

stories/Pivoting.js

@@ -31,8 +31,8 @@ export default () => {
       header: 'Age',
       accessor: 'age',
       aggregate: vals => _.round(_.mean(vals)),
-      render: row => {
-        return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
+      aggregateRender: row => {
+        return <span>{row.value} (avg)</span>
       }
     }, {
       header: 'Visits',

stories/PivotingOptions.js

@@ -32,17 +32,21 @@ export default () => {
     columns: [{
       header: 'Age',
       accessor: 'age',
-      // aggregate: vals => {
-      //   return _.round(_.mean(vals))
-      // },
-      render: row => {
+      aggregate: vals => {
+        return _.round(_.mean(vals))
+      },
+      aggregateRender: row => {
         console.log(row.value)
-        return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
+        return <span>{row.value} (avg)</span>
       }
     }, {
       header: 'Visits',
       accessor: 'visits',
       aggregate: vals => _.sum(vals),
+      // aggregateRender: row => {
+      //   console.log(row.value)
+      //   return <span>{row.value}</span>
+      // },
       hideFilter: true
     }]
   }, {

stories/PivotingSubComponents.js

@@ -31,10 +31,10 @@ export default () => {
       header: 'Age',
       accessor: 'age',
       aggregate: vals => _.round(_.mean(vals)),
-      render: row => {
-        return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
+      aggregateRender: row => {
+        return <span>{row.value} (avg)</span>
       },
-      filterMethod: (filter, row) => (filter.value == `${row[filter.id]} (avg)`)
+      filterMethod: (filter, row) => (filter.value === `${row[filter.id]} (avg)`)
     }, {
       header: 'Visits',
       accessor: 'visits',
@@ -108,7 +108,7 @@ const columns = [{
     render: row => {
       return <span>{row.aggregated ? \`\${row.value} (avg)\` : row.value}</span>
     },
-    filterMethod: (filter, row) => (filter.value == \`\${row[filter.id]} (avg)\`) 
+    filterMethod: (filter, row) => (filter.value == \`\${row[filter.id]} (avg)\`)
   }, {
     header: 'Visits',
     accessor: 'visits',