默认情况下启用(并打开)的React Data Grid过滤器

Jam*_*yon 2 reactjs react-data-grid

有没有一种方法可以使过滤器默认在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}
/>
Run Code Online (Sandbox Code Playgroud)

理想情况下,最终组件应类似于以下内容:

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

Rob*_*ite 5

您是正确的,似乎没有一种自动打开工具栏和过滤器的内置方式,但是一个相当简单的解决方法是

 componentDidMount(){
    this.myOpenGrid.onToggleFilter();
  }
Run Code Online (Sandbox Code Playgroud)

然后在网格中添加一个引用,以便在安装时立即将其过滤器切换为打开状态

<ReactDataGrid
   ref={(datagrid) => { this.myOpenGrid = datagrid; }}
   // all other set up
/>
Run Code Online (Sandbox Code Playgroud)