Fixed HeaderRow getHeaderRenderer that was causing a bug for sortable filterable grids

Author: diogofcunha

Diff for: src/Header.js

@@ -95,7 +95,8 @@ const Header = React.createClass({
         height={row.height || this.props.height}
         columns={columnMetrics.columns}
         resizing={resizeColumn}
-        headerCellRenderer={row.headerCellRenderer}
+        filterable={row.filterable}
+        onFilterChange={row.onFilterChange}
         sortColumn={this.props.sortColumn}
         sortDirection={this.props.sortDirection}
         onSort={this.props.onSort}

Diff for: src/HeaderCellType.js

@@ -0,0 +1,7 @@
+const HeaderCellType = {
+  SORTABLE: 0,
+  FILTERABLE: 1,
+  NONE: 2
+};
+
+module.exports = HeaderCellType;

Diff for: src/HeaderRow.js

@@ -5,6 +5,9 @@ const getScrollbarSize  = require('./getScrollbarSize');
 const ExcelColumn  = require('./addons/grids/ExcelColumn');
 const ColumnUtilsMixin  = require('./ColumnUtils');
 const SortableHeaderCell    = require('./addons/cells/headerCells/SortableHeaderCell');
+const FilterableHeaderCell  = require('./addons/cells/headerCells/FilterableHeaderCell');
+const HeaderCellType = require('./HeaderCellType');
+
 const PropTypes         = React.PropTypes;
 
 const HeaderRowStyle  = {
@@ -29,6 +32,8 @@ const HeaderRow = React.createClass({
     sortDirection: React.PropTypes.oneOf(DEFINE_SORT),
     cellRenderer: PropTypes.func,
     headerCellRenderer: PropTypes.func,
+    filterable: PropTypes.bool,
+    onFilterChange: PropTypes.func,
     resizing: PropTypes.func
   },
 
@@ -45,13 +50,41 @@ const HeaderRow = React.createClass({
     );
   },
 
+  getHeaderCellType(column) {
+    if (column.filterable) {
+      if (this.props.filterable) return HeaderCellType.FILTERABLE;
+    }
+
+    if (column.sortable) return HeaderCellType.SORTABLE;
+
+    return HeaderCellType.NONE;
+  },
+
+  getFilterableHeaderCell() {
+    return <FilterableHeaderCell onChange={this.props.onFilterChange} />;
+  },
+
+  getSortableHeaderCell(column) {
+    let sortDirection = (this.props.sortColumn === column.key) ? this.props.sortDirection : DEFINE_SORT.NONE;
+    return <SortableHeaderCell columnKey={column.key} onSort={this.props.onSort} sortDirection={sortDirection}/>;
+  },
+
   getHeaderRenderer(column) {
-    if (column.sortable) {
-      let sortDirection = (this.props.sortColumn === column.key) ? this.props.sortDirection : DEFINE_SORT.NONE;
-      return <SortableHeaderCell columnKey={column.key} onSort={this.props.onSort} sortDirection={sortDirection}/>;
+    let headerCellType = this.getHeaderCellType(column);
+    let renderer;
+
+    switch (headerCellType) {
+    case HeaderCellType.SORTABLE:
+      renderer = this.getSortableHeaderCell(column);
+      break;
+    case HeaderCellType.FILTERABLE:
+      renderer = this.getFilterableHeaderCell();
+      break;
+    default:
+      break;
     }
 
-    return this.props.headerCellRenderer || column.headerRenderer || this.props.cellRenderer;
+    return renderer;
   },
 
   getStyle(): HeaderRowStyle {

Diff for: src/addons/grids/ExcelColumn.js

@@ -4,7 +4,8 @@ const React = require('react');
 const ExcelColumnShape = {
   name: React.PropTypes.string.isRequired,
   key: React.PropTypes.string.isRequired,
-  width: React.PropTypes.number.isRequired
+  width: React.PropTypes.number.isRequired,
+  filterable: React.PropTypes.bool
 };
 
 module.exports = ExcelColumnShape;

Diff for: src/addons/grids/ReactDataGrid.js

@@ -10,7 +10,6 @@ const Row                   = require('../../Row');
 const ExcelColumn           = require('./ExcelColumn');
 const KeyboardHandlerMixin  = require('../../KeyboardHandlerMixin');
 const CheckboxEditor        = require('../editors/CheckboxEditor');
-const FilterableHeaderCell  = require('../cells/headerCells/FilterableHeaderCell');
 const cloneWithProps        = require('react/lib/cloneWithProps');
 const DOMMetrics           = require('../../DOMMetrics');
 const ColumnMetricsMixin      = require('../../ColumnMetricsMixin');
@@ -343,7 +342,8 @@ const ReactDataGrid = React.createClass({
     if (this.state.canFilter === true) {
       rows.push({
         ref: 'filterRow',
-        headerCellRenderer: <FilterableHeaderCell onChange={this.props.onAddFilter} />,
+        filterable: true,
+        onFilterChange: this.props.onAddFilter,
         height: 45
       });
     }