Question

我正在使用material-table来显示表格数据。并为表格外的特定列添加过滤器。

示例： https://material-table.com/#/docs/features/filtering

我想仅使用表格外部而不是列标题内部的选择下拉列表过滤“出生地”数据

Answer 1

我认为材料表仅包含基本功能，因此您提出的要求不是开箱即用的。

最简单的解决方案是将表包装在其他组件中，该组件将包含表和jsx中的“出生地”选择，状态和tableData中的 birthPlace 和 filteredTableData 作为类属性。

最初

filteredTableData = tableData

，它代理到表组件。在 birthPlaceSelect onChange 事件中，您应该实现过滤 tableData 并将其设置为 filteredTableData 。

因此，基本上，您可以自己过滤表外的数据。

class FilterableTable extends Component {
  state = {
    filteredTableData: [],
    birthPlace: null,
  };

  componentDidMount() {
    // load data or get it from store in loadDataFromServer
    loadDataFromServer().then(data => {
      // save initial data to state
      this.setState({ filteredTableData: data });
      // and save copy to class prop
      this.data = data;
    });
  }

  onFilterValueChanged = ev => {
    if (ev.target.value) {
      this.setState({
        filteredTableData: this.data.filter(row =>
          row.birthPlace.contains(ev.target.value)
        ),
      });
    }else{
      this.setState({
        filteredTableData: this.data        
      });
    }
  };


  render() {
    const { filteredTableData, birthPlace } = this.state;

    return (
      <div>
        <input value={birthPlace} onChange={this.onFilterValueChanged} />
        <MaterialTable data={filteredTableData} />
      </div>
    );
  }
}

如何在材料表Reactjs的表列外部显示选择过滤器

1 个答案: