干锅版= ^ 0.2.13
预期行为
我正在使用customHeaderComponent在我正在显示的表上呈现列明智的过滤器,但是当我运行时,代码过滤器没有被渲染。
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>
);
}
}
我很长时间以来一直坚持这个。 此版本中此customHeaderComponent功能不可用吗?如果是,实现列级过滤的方法是什么