Introduce renderThChildren table plugin [#159899107]

Signed-off-by: Ming Xiao <mxiao@pivotal.io>

spec/pivotal-ui-react/table/plugins/render-th-children_spec.js

@@ -0,0 +1,26 @@
+import '../../spec_helper';
+import {Table, withRenderThChildren} from '../../../../src/react/table';
+
+describe('withRenderThChildren', () => {
+  let data;
+
+  beforeEach(() => {
+    const columns = [
+      {attribute: 'attr1', renderThChildren: () => (<div className="custom">some header</div>)},
+      {attribute: 'attr2', displayName: 'Attr2'}
+    ];
+
+    data = [{
+      attr1: 'row1-value1',
+      attr2: 'row1-value2'
+    }];
+
+    const ComposedTable = withRenderThChildren(Table);
+    ReactDOM.render(<ComposedTable {...{columns, data}}/>, root);
+  });
+
+  it('renders the correct header', () => {
+    expect('table thead th:eq(0) .custom').toHaveText('some header');
+    expect('table thead th:eq(1)').toHaveText('Attr2');
+  });
+});

src/react/table/index.js

@@ -6,16 +6,17 @@ import {withCellEllipsis} from './plugins/cell-ellipsis';
 import {withCellLink} from './plugins/cell-link';
 import {withCellOnClick} from './plugins/cell-on-click';
 import {withCellRenderer} from './plugins/cell-renderer';
-import {withRenderTdChildren} from './plugins/render-td-children';
 import {withCellTooltip} from './plugins/cell-tooltip';
 import {withCellWidth} from './plugins/cell-width';
 import {withFlex} from './plugins/flex';
 import {withFooterRow} from './plugins/footer-row';
+import {withRenderTdChildren} from './plugins/render-td-children';
+import {withRenderThChildren} from './plugins/render-th-children';
 import {withRowClassName} from './plugins/row-class-name';
 import {withRowDrawer} from './plugins/row-drawer';
 import {withRowLink} from './plugins/row-link';
-import {withSorting} from './plugins/sorting';
 import {withScrollableTbody} from './plugins/scrollable-tbody';
+import {withSorting} from './plugins/sorting';
 
 export {Table} from './table';
 export {TablePlugin} from './table-plugin';
@@ -25,16 +26,17 @@ export {withCellEllipsis} from './plugins/cell-ellipsis';
 export {withCellLink} from './plugins/cell-link';
 export {withCellOnClick} from './plugins/cell-on-click';
 export {withCellRenderer} from './plugins/cell-renderer';
-export {withRenderTdChildren} from './plugins/render-td-children';
 export {withCellTooltip} from './plugins/cell-tooltip';
 export {withCellWidth} from './plugins/cell-width';
 export {withFlex} from './plugins/flex';
 export {withFooterRow} from './plugins/footer-row';
+export {withRenderTdChildren} from './plugins/render-td-children';
+export {withRenderThChildren} from './plugins/render-th-children';
 export {withRowClassName} from './plugins/row-class-name';
 export {withRowDrawer} from './plugins/row-drawer';
 export {withRowLink} from './plugins/row-link';
-export {withSorting} from './plugins/sorting';
 export {withScrollableTbody} from './plugins/scrollable-tbody';
+export {withSorting} from './plugins/sorting';
 
 export const SortableTable = withSorting(Table);
 export const FlexTable = withFlex(Table);
@@ -47,6 +49,7 @@ export const AdvancedTable = flow(
   withCellOnClick,
   withCellRenderer,
   withRenderTdChildren,
+  withRenderThChildren,
   withCellTooltip,
   withCellWidth,
   withFooterRow,

src/react/table/plugins/render-th-children.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {TablePlugin} from '../table-plugin';
+
+export function withRenderThChildren(Table) {
+  return class TableWithRenderTdChildren extends TablePlugin {
+    render() {
+      return this.renderTable(Table, {
+        th: (props, {column: {renderThChildren}}) => {
+          if (!renderThChildren) return;
+          return {children: renderThChildren()};
+        }
+      });
+    }
+  };
+}