diff --git a/src/column-definition.js b/src/column-definition.js index a7f0e02..224edb5 100644 --- a/src/column-definition.js +++ b/src/column-definition.js @@ -24,6 +24,8 @@ ColumnDefinition.PropTypes = { displayName: React.PropTypes.string, //The component that should be rendered instead of the standard column data. This component will still be rendered inside of a TD element. customComponent: React.PropTypes.object, + //The component that should be rendered instead of the standard column header. This component will still be rendered inside of a TH element. + customHeadingComponent: React.PropTypes.object, //Can this column be sorted sortable: React.PropTypes.bool, //What sort type this column uses - magic string :shame: diff --git a/src/table-heading-cell.js b/src/table-heading-cell.js index 3f8bf5d..31c5c8c 100644 --- a/src/table-heading-cell.js +++ b/src/table-heading-cell.js @@ -43,7 +43,7 @@ class TableHeadingCell extends React.Component { const { className } = getStyleProperties(this.props, 'tableHeadingCell'); const classNames = classnames(className, this.props.columnProperty ? this.props.columnProperty.headerCssClassName : null) - const { sorted } = this.props; + const { sorted, state, title, sortAscending } = this.props; const clickEvent = this.isSortable() ? this._handleClick : null; return ( @@ -54,8 +54,16 @@ class TableHeadingCell extends React.Component { onClick={clickEvent} className={classNames} > - {this.props.title} { this.getSortIcon() } - ); + {this.props.hasOwnProperty('customHeadingComponent') ? + : + [this.props.title, this.getSortIcon()]} + + ); } _handleHover() {