如何从 MUI Datagrid 列显示/隐藏面板中删除选项

Question

我正在尝试控制哪些列将显示在 MUI 数据网格工具栏内的

<GridToolbarColumnsButton/>

组件上（参见下图）

首选解决方案：
使用 API 我认为我还没有找到任何现有的功能来执行此操作，甚至没有找到任何有关

<GridToolbarColumnsButton/>

的文档

到目前为止我的解决方法：
使用 vanilla js 定位面板内包含文本“Commodity”的行，向其添加一个类，然后在 DataGrid elementsProps 中为该类传递

display:'hide'

。

问题在于，由于列面板未在初始渲染时安装，因此在我打开面板然后强制重新渲染之前，它不会隐藏商品选项。

  useEffect( () => {

    var divs = document.querySelectorAll('div .MuiDataGrid-columnsPanelRow')

    for (let i = 0; i < divs.length; i++) {
      if (divs[i].textContent === 'Commodity') {
        divs[i].classList.add("column-panel-cust");
      }
    }
  })

<DataGridPro
...
   componentsProps={{
            panel: {
              sx: {
                paddingTop: '15px',
                '& .column-panel-cust': {
                  display: 'none',
                },
              },
            },
/>

Answer 1

找不到为此的 API 挂钩，但可以通过向

<GridToolbarColumnsButton onBlur={handleOnBlur}/>

添加 onBlur 来运行该函数来使其工作：

const handleOnBlur = () => {

var divs = document.querySelectorAll('div .MuiDataGrid-columnsPanelRow')

    for (let i = 0; i < divs.length; i++) {
      if (divs[i].textContent === 'Commodity') {
        divs[i].classList.add("column-panel-cust");
      }
    }
}

将

column-panel-cust

类添加到带有文本商品的 div 中，该类的样式在 DataGrid elementsProps 中传递：

<DataGridPro
...
   componentsProps={{
            panel: {
              sx: {
                paddingTop: '15px',
                '& .column-panel-cust': {
                  display: 'none',
                },
              },
            },
/>

Answer 2

你也可以只使用一些纯CSS。您只需定位该列的位置即可。例如，我在这里做同样的事情，从 GridToolbarColumnsButton （最后一项）隐藏菜单。

 <DataGrid
        columns={columnsDataGrid}
        loading={loadingDataSubcriptions}
        rows={supplierList}
        components={{
          Toolbar: customToolbarSupplier,
        }}
        componentsProps={{
          panel: {
            sx: {
              '& .MuiDataGrid-columnsPanelRow:last-child': {
                display: 'none', 
              },
            },
          },
        }}
      />

Answer 3

虽然该线程可能很旧，但为找到该线程的任何人添加信息......

在 MUI DataGrid v6 中，您可以通过两种方式执行此操作，具体取决于您使用列面板的方式。

选项 1：使用工具栏中的 GridToolbarColumnsButton

GridColumnsPanel 是工具栏按钮使用的底层组件，它有一个名为 getToggableColumns 的 prop，它采用 DataGrid 的列模型。默认情况下，它采用传递给 DataGrid“columns”属性的所有列。可以过滤此模型以删除您不想显示为可切换的列。您可以通过使用以下方法来实现此目的：

function MyCustomToolbar(props: any) {

 return (
  <GridToolbarContainer>
   <GridToolbarColumnsButton/>
   {/* other toolbar items */}
  </GridToolbarContainer>
   );
}

const hiddenFields = ['Commodity', '{hidden column 2}', etc...];

const getTogglableColumns = (columns: any) => {
  return columns
   .filter((column: any) => !hiddenFields.includes(column.field))
   .map((column: any) => column.field);
};

hiddenFields 定义要隐藏的列，然后用于过滤 DataGrid columns 属性以排除在hiddenFields 常量中列出的任何内容。

将它们添加到代码中后，您需要将它们应用到 DataGrid，如下所示：

<DataGrid
    {...data}
    slots={{ toolbar: MyCustomToolbar }}
    slotProps={{ columnsPanel: { getTogglableColumns }}}
/>

然后，当您通过工具栏按钮打开列面板时，商品或之前定义的任何其他列将在此面板中对用户隐藏。

选项 2：自定义网格列面板

如果您直接使用 GridColumnsPanel 而不是通过工具栏按钮，例如将其添加到模态弹出窗口或其他组件（我的用例），您仍然需要在选项 1 中定义hiddenColumns 和 getTogglableColumns 常量。如果要在 DataGrid 中应用它们，您可以将它们直接应用到自定义 GridColumnsPanel 组件的位置。现在，您的组件将如下所示：

<GridColumnsPanel getTogglableColumns={getToggableColumns} {/* other customizations */} />

这里，过滤后的列模型直接传递到组件以在其他地方使用。