ReactJs材料表如何显示/隐藏过滤器选项

Question

我正在为我的reactJS应用程序使用material Table插件来显示数据表。

我需要在列上显示筛选。但当我启用filtering=true时，它会在标题下方的Header部分再创建一行。它占用了不必要的空间，而且总是显示出来。

我想隐藏筛选器部分。也许我会在列旁边显示过滤器图标，单击它时会显示过滤文本行。我在管状反应表上看到了这个选项。但是我可以用材料表吗？

Answer 1

它不支持开箱即用，但如果您将过滤状态保存在useState中并将其设置为true，则会更新表，如下所示：

function Table(){
const [filtering, setFiltering] = React.useState(false);
retrun <div>
<MaterialTable options={{filtering}}/>
<button onClick={() => {setFiltering(currentFilter => !currentFilter)}}>Show Filtering</button>
</div>
}

Answer 2

所以解决方案如下所示。(我正在使用类(

在"材质"表中，需要添加一个过滤器按钮。这将切换过滤器部分。另外添加options＝｛｛Filtering:this.state.filter｝｝。我们还需要定义一个小函数来切换标志。

options={{Filtering: this.state.filter}   
actions={[
{
icon: 'filter',
tooltip: 'Enable Filter',
isFreeAction: true,
onClick: (event) => { this.functionName(!this.state.filter)}
}
]}