diff --git a/spec/pivotal-ui-react/table/plugins/render-th-children_spec.js b/spec/pivotal-ui-react/table/plugins/render-th-children_spec.js
new file mode 100644
index 000000000..afaa314e7
--- /dev/null
+++ b/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: () => (
some header
)},
+ {attribute: 'attr2', displayName: 'Attr2'}
+ ];
+
+ data = [{
+ attr1: 'row1-value1',
+ attr2: 'row1-value2'
+ }];
+
+ const ComposedTable = withRenderThChildren(Table);
+ ReactDOM.render(, root);
+ });
+
+ it('renders the correct header', () => {
+ expect('table thead th:eq(0) .custom').toHaveText('some header');
+ expect('table thead th:eq(1)').toHaveText('Attr2');
+ });
+});
diff --git a/src/react/table/index.js b/src/react/table/index.js
index a4758a5d9..94d9bd58f 100644
--- a/src/react/table/index.js
+++ b/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,
diff --git a/src/react/table/plugins/render-th-children.js b/src/react/table/plugins/render-th-children.js
new file mode 100644
index 000000000..03ddaed9b
--- /dev/null
+++ b/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()};
+ }
+ });
+ }
+ };
+}
\ No newline at end of file