Question

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

通过Adazzle component docs阅读它似乎没有明显的道具传递显示过滤器的主<ReactDataGrid />组件而不通过onToggleFilter()来调用<Toolbar /> onClearFilters()组件。

我建筑物的最终网格组件将使用过滤器输入进行渲染，用户可以立即看到并编辑，无需点击清除＆＃39;或以其他方式调用记录的<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
/>

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

game.physics.arcade.enable(bullet)

// set the bounce energy, 1 is 100% energy return
bullet.body.bounce.set(1);

Answer 1

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

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

然后在网格中添加一个引用，以便在mount

上立即打开过滤器

<ReactDataGrid
   ref={(datagrid) => { this.myOpenGrid = datagrid; }}
   // all other set up
/>

Answer 2

我有相同的要求。我知道您说过您不想使用<Toolbar />，但是，仅作记录，您可以做什么。

我创建了自己的<Toolbar />组件。我遵循了他们的源代码here，只接受了我需要的内容。

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

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

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

并将其添加到ReactDataGrid上的toolbar道具中。过滤器始终显示，没有按钮，不需要使用CSS隐藏任何内容。

Answer 3

实现你自己的 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 类。

反应数据网格过滤器默认启用（和打开）

3 个答案: