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

Question

我正在使用材料表来显示表数据。 和 为表外的特定列添加筛选器。

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

我想单独使用表外而不是列标题内的选择下拉列表仅过滤"出生地"数据

Answer 1

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

最简单的解决方案是将表包装在其他组件中，该组件将包含jsx中的表和"出生地"选择，在状态中出生地点和filteredTableData以及表数据作为类属性。

最初

筛选表数据 = 表数据

它代理到表组件。在birthPlaceSelectonChange事件中，您应该实现过滤表数据并将其设置为过滤表数据的状态。

所以基本上你自己过滤表外的数据。

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>
);
}
}