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

Posted

技术标签:

【中文标题】如何在材料表reactjs的表列外显示选择过滤器【英文标题】:How to display selection filter outside table column for material-table reactjs 【发布时间】:2020-02-05 13:00:42 【问题描述】:

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

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

我想单独使用表格外的选择下拉菜单过滤“出生地”数据,而不是列头内

【问题讨论】:

【参考方案1】:

我认为材料表只包含基本功能,所以你问的不是开箱即用的。

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

最初

filteredTableData = 表格数据

它被代理到表格组件。在 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的表列外显示选择过滤器的主要内容,如果未能解决你的问题,请参考以下文章

如何处理以保留 Sql 关键字命名的表列?

如何处理包含需要执行的 SQL 语句字符串的表列?

怎样在ORACLE中查询并列出所有含某一列名(如NAME)的表;

Reactjs - 如何在 reactjs 材料表中加载和映射数据

如何过滤我的表以在 Oracle 中显示结果?

sql [AS]显示具有不同名称的表列(未在原始表中重命名)#SQL