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

问题描述

我在我的reactJS应用程序中使用了Material-Table插件来显示数据表。

我需要在列上显示过滤条件。但是，当我启用filter = true时，它将在标题下方的“标题”部分再创建一行。会占用不必要的空间并始终显示。

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

解决方法

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

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

因此解决方案如下所示。（我正在上课）

在材料表中，需要添加一个用于过滤的按钮。这将切换过滤器部分。还要添加选项= {{过滤：this.state.filter}}。我们还需要定义一个小的函数来切换标志。

    import React,{useEffect} from 'react'
    import {useSelector,useDispatch} from "react-redux";
    import {getTeams} from "../actions";
    
    const Team=()=> {
      const data=useSelector(state=>state.teams);
      const dispatch=useDispatch();
    
      useEffect(() => {
        console.log("Called");
        dispatch(getTeams());
      },[dispatch])
    
      console.log("hello",data);
      
      return (
        <div>
           
        </div>
      )
    }
    
    export default Team

material-table reactjs reactjs