如何在材料表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 中包含表格和“出生地”选择,状态中的 birthPlace 和 filteredTableData 和 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的表列外显示选择过滤器的主要内容,如果未能解决你的问题,请参考以下文章
怎样在ORACLE中查询并列出所有含某一列名(如NAME)的表;