feat(SortableTables): Pass rowData prop into CustomCells

[finishes #113095437]

Author: charleshansen

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');
     });
   });

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;

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