customHeaderComponent not getting rendered

Question

Griddle version=^0.2.13

Expected Behavior

I am using customHeaderComponent to render columns wise filter on the table that I am displaying but when i run the code filter is not getting rendered.

App.jsx



import React, { Component } from 'react';
    import Griddle from 'griddle-react';

    import HeaderComponent from 'components/HeaderComponent';


    export default class App extends Component {

       constructor(props) {
          super(props);
          this.state = { 
               colData: [{
                         "columnName": "nodeId",
                         "order": 1,
                         "displayName": "Warehouse",
                         "customHeaderComponent": HeaderComponent
                        },
                        {
                         "columnName": "nodeType",
                         "order": 2,
                         "displayName": "Node Type"
                        },
                        {
                         "columnName": "backlog",
                         "order": 3,
                         "displayName": "Backlog"
                        },
                        {
                         "columnName": "ptmPad",
                         "order": 4,
                         "displayName": "PTM Pad"
                        }]
             };
         }    

       render() {
         return (
         <div>
               <Griddle ref='Griddle' results={this.props.data} tableClassName="table" showFilter={true} useFixedHeader={true} resultsPerPage={20} filterPlaceholderText="Search"
                 columnMetadata = {this.state.colData}
                 showSettings={true}  />
         </div>
       );  
     } 
    }

HeaderComponent.jsx

import React, { Component } from 'react';


export default class HeaderComponent extends Component {
  constructor(props) {
        super(props);

        this.textOnClick = this.textOnClick.bind(this);
        this.filterText = this.filterText.bind(this);
 }       

  textOnClick(e) {
     e.stopPropagation();
  }

  filterText(e) {
    this.props.filterByColumn(e.target.value, this.props.columnName);
  }

  render(){
    return (
      <span>
        <input type='text' onChange={this.filterText} onClick={this.textOnClick} />
      </span>
    );
  }

}

I am stuck on this since very long. Is this customHeaderComponent feature not available in this version? If yes what is the way to implement column level filtering