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