customHeaderComponent not getting rendered

[shemansh]

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 nothis is getting rendered.

Actual Behavior

Should have rendered a column level filter.

my code

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.

[shemansh]

@ryanlanciaux please if you can help me out ?

[shemansh]

Still no reply on this.

[dahlbyk]

You might have better luck asking on StackOverflow. 0.x isn't under active development.