ReactJs Material-Table 如何 show/hide 过滤选项

Question

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

我有要求在列上显示过滤。但是，当我启用 filtering=true 时，它会在标题下方的 Header 部分再创建一行。这需要不必要的 space 并且它总是显示。

我想隐藏过滤器部分。也许我在列旁边显示过滤器图标，单击它时会显示过滤文本行。我看到这个选项在 tubular-react tables 上。但是我可以使用 material-table 吗？

Answer 1

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

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

Answer 2

所以解决方案如下。（我正在使用 class）

在Material-table中，需要添加一个过滤器按钮。这将切换过滤器部分。同时添加选项={{过滤：this.state.filter}}。我们还需要定义一个小函数来切换标志。

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

ReactJs Material-Table 如何 show/hide 过滤选项

ReactJs Material-Table How to show/hide filter options

reactjs

material-table