ReactJs Material-Table 如何显示/隐藏过滤选项

Question

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

我需要在列上显示过滤。但是，当我启用“filtering=true”时，它会在标题下方的“标题”部分中再创建一行。这占用了不必要的空间并且总是显示。

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

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

Answer 3

如何默认禁用列的过滤器并在其悬停时启用它？我可以通过将enableColumnFilter设置为false来禁用它，当它悬停时如何启用它？