Pass sort properties to custom header renderer (Comcast#1080)

In order to be able to display current sort order, we need sorting information in header renderer.

Author: methyl

packages/react-data-grid/src/HeaderRow.js

@@ -83,13 +83,26 @@ const HeaderRow = createReactClass({
   },
 
   getSortableHeaderCell(column) {
-    let sortDirection = (this.props.sortColumn === column.key) ? this.props.sortDirection : SortableHeaderCell.DEFINE_SORT.NONE;
-    return <SortableHeaderCell columnKey={column.key} onSort={this.props.onSort} sortDirection={sortDirection}/>;
+    let SortableRenderer = SortableHeaderCell;
+    if (column.headerRenderer !== undefined) {
+      SortableRenderer = column.headerRenderer;
+    }
+    const sortDirection = (this.props.sortColumn === column.key) ? this.props.sortDirection : SortableHeaderCell.DEFINE_SORT.NONE;
+    const props = { columnKey: column.key, onSort: this.props.onSort, sortDirection: sortDirection };
+
+    if (React.isValidElement(SortableRenderer)) {
+      // a string means it's an HTML element and props we want to pass are not valid, return it as is
+      if (typeof SortableRenderer.type === 'string') {
+        return SortableRenderer;
+      }
+      return React.cloneElement(SortableRenderer, props);
+    }
+    return React.createElement(SortableRenderer, props);
   },
 
   getHeaderRenderer(column) {
     let renderer;
-    if (column.headerRenderer && !this.props.filterable) {
+    if (column.headerRenderer && !this.props.filterable && !column.sortable) {
       renderer = column.headerRenderer;
     } else {
       let headerCellType = this.getHeaderCellType(column);