feat(SortableTables): Pass rowData prop into CustomCells

[finishes #113095437]
pivotal-cf · Feb 5, 2016 · 9dbb5b2 · 9dbb5b2
1 parent 3e121eb
commit 9dbb5b2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/library/spec/pivotal-ui-react/sortable-table/sortable-table_spec.js b/library/spec/pivotal-ui-react/sortable-table/sortable-table_spec.js
@@ -257,7 +257,7 @@ describe('SortableTable', function() {
         {
           attribute: 'title',
           displayName: 'Title',
-          CustomCell: ({value, index}) => <td className="custom">{`${index}: ${value}`}</td>
+          CustomCell: ({value, index, rowDatum}) => <td className="custom">{`${rowDatum.instances}-${index}: ${value}`}</td>
         },
         {
           attribute: 'instances',
@@ -288,9 +288,9 @@ describe('SortableTable', function() {
     });
 
     it('uses custom for the column', function() {
-      expect('tbody tr:nth-of-type(1) > td:eq(0)').toContainText('0: foo');
+      expect('tbody tr:nth-of-type(1) > td:eq(0)').toContainText('1-0: foo');
       expect('tbody tr:nth-of-type(1) > td:eq(0)').toHaveClass('custom');
-      expect('tbody tr:nth-of-type(2) > td:eq(0)').toContainText('1: sup');
+      expect('tbody tr:nth-of-type(2) > td:eq(0)').toContainText('3-1: sup');
       expect('tbody tr:nth-of-type(2) > td:eq(0)').toHaveClass('custom');
     });
   });

diff --git a/library/src/pivotal-ui-react/sortable-table/sortable-table.js b/library/src/pivotal-ui-react/sortable-table/sortable-table.js
@@ -73,7 +73,7 @@ export const SortableTable = React.createClass({
     return sortedData.map((datum, rowKey) => {
       const cells = columns.map(({attribute, CustomCell}, key) => {
         const Cell = CustomCell || TableCell;
-        return <Cell key={key} index={rowKey} value={datum[attribute]}>{datum[attribute]}</Cell>;
+        return <Cell key={key} index={rowKey} value={datum[attribute]} rowDatum={datum}>{datum[attribute]}</Cell>;
       });
 
       const Row = CustomRow || TableRow;

diff --git a/styleguide/docs/react/sortable-table.js b/styleguide/docs/react/sortable-table.js
@@ -135,7 +135,7 @@ var CustomRow = React.createClass({
  The `TableCell` component is provided for users who wish to customize their cells
  with the `CustomCell` attribute on the `columns` prop. If a custom cell is provided, the table will use that
  component to render each cell, giving it a `value` prop representing the attribute from the datum for that row and `index`
- representing the (zero-indexed) row number.
+ representing the (zero-indexed) row number. For more advanced use cases, the `rowDatum` prop is also passed into the custom cell.
 
  Note that sorting occurs on the actual data.
  Changing the presentation of the data does not affect the sort behavior.
@@ -145,7 +145,7 @@ var CustomRow = React.createClass({
    render() {
      return (
        <TableCell>
-         {this.props.index}: {this.props.value}
+         {this.props.index}: {this.props.value} - {this.props.rowDatum.bar}
        </TableCell>
      );
    }