MUI DataGrid组件初始化时默认显示筛选栏的实现方法

问题解答 #

1. 能否向<GridToolbarFilterButton />传递属性？

当然可以。<GridToolbarFilterButton />是基于MUI Button组件封装的，支持所有MUI Button的通用属性（比如color、variant、size），也可以自定义onClick事件。示例如下：

<GridToolbarFilterButton 
  color="secondary" 
  variant="outlined"
  onClick={(e) => {
    console.log("筛选按钮被点击");
    // 可添加自定义逻辑
  }}
/>

2. 实现初始化时显示筛选栏

无需修改自定义Toolbar组件，直接给<DataGrid />配置initialState属性，将筛选面板的初始状态设为打开即可：

修改后的DataGrid代码：

<DataGrid
  rows={tableRows}
  columns={tableColumns}
  components={{ Toolbar: ReportRenderToolbar }}
  checkboxSelection
  disableRowSelectionOnClick
  // 配置初始状态默认打开筛选面板
  initialState={{
    filter: {
      filterPanel: {
        open: true,
      },
    },
  }}
/>

组件初始化完成后，筛选栏会自动展开，和点击筛选按钮后的状态完全一致。

如果后续需要通过代码手动控制筛选栏的显示/隐藏，可以使用DataGrid的apiRef，调用apiRef.current.openFilterPanel()或apiRef.current.closeFilterPanel()方法。

内容的提问来源于stack exchange，提问作者Burak Algur