customHeaderComponent未呈现

时间:2017-10-27 11:11:38

标签: javascript reactjs griddle

干锅版= ^ 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功能不可用吗?如果是,实现列级过滤的方法是什么

0 个答案:

没有答案