reactjs - React 数据网格过滤器默认启用(并打开)

Question

有没有办法让过滤器在 React Data Grid 中默认打开(显示)？最好是一个能让我避免传入 toolbar={<Toolbar enableFilter />} 的支持 <ReactDataGrid />

通读 Adazzle component docs似乎没有明显的 Prop 可以传递给主要<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
/>

Answer 1

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

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

然后向您的网格添加一个引用，以便它的过滤器在挂载时立即打开

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