3

有没有办法在 React Data Grid 中默认打开（显示）过滤器？最好是让我避免将toolbar={<Toolbar enableFilter />}道具传递给<ReactDataGrid />

通读Adazzle组件文档，似乎没有明显的道具可以在<ReactDataGrid />显示过滤器的主要组件上传递，而无需onToggleFilter()通过<Toolbar />组件调用。

我正在构建的最终网格组件将呈现过滤器输入，用户立即可见和可编辑，无需“点击清除”或以其他方式调用记录的onClearFilters()函数。这也使<Toolbar />组件（和嵌套<Filter Rows />按钮）变得不必要。

我当前的组件是...

<ReactDataGrid
   onGridSort={this.handleGridSort}
   columns={this.state.columns}
   rowGetter={this.rowGetter}
   rowsCount={this.getSize()}
   toolbar={<Toolbar enableFilter />}
   onAddFilter={this.handleFilterChange}
   onClearFilters={this.onClearFilters}
/>

理想情况下，最终组件看起来像这样......

<ReactDataGrid
  onGridSort={this.handleGridSort}
  columns={this.state.columns}
  rowGetter={this.rowGetter}
  rowsCount={this.getSize()}}
  onAddFilter={this.handleFilterChange}
  filtersVisible={true}  // Renders with filters visible/active
/>
4

3 回答 3

5

你是对的，似乎没有内置的方法可以自动打开工具栏和过滤器，但是一个相当简单的解决方法是

 componentDidMount(){
    this.myOpenGrid.onToggleFilter();
  }

然后在您的网格中添加一个参考，以便它的过滤器在安装时立即打开

<ReactDataGrid
   ref={(datagrid) => { this.myOpenGrid = datagrid; }}
   // all other set up
/>
于 2017-08-09T18:01:03.833 回答
2

我有同样的要求。我知道你说你不想使用<Toolbar />，但是，为了记录，你可以做什么。

我创建了自己的<Toolbar />组件。我在这里遵循了他们的源代码，只拿了我需要的东西。

import React,{Component} from 'react';
class Toolbar extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.onToggleFilter();
    }

    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

并将其添加到toolbarReactDataGrid 上的道具中。过滤器总是显示，没有按钮，不需要用 CSS 隐藏任何东西。

于 2018-09-12T14:01:10.617 回答
0

实现自己的 ReactDataGrid 类，并设置 canFilter=true 的状态。

import ReactDataGrid from "react-data-grid";

class MyDataGrid extends ReactDataGrid {
    constructor(props) {
        super(props);
        this.state.canFilter=true;
    }
}

export default MyDataGrid;

然后使用 MyDataGrid 类而不是 ReactDataGrid 类。

于 2021-04-27T08:38:34.287 回答