Open shemansh opened 7 years ago
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.
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.
@ryanlanciaux please if you can help me out ?
Still no reply on this.
You might have better luck asking on StackOverflow. 0.x isn't under active development.
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
HeaderComponent.jsx
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.