如何隐藏 MUI X 数据网格中的列？

Question

我不想显示我的表的 id 字段。我使用 "@mui/x-data-grid": "^5.6.1" 版本。这是我的代码：

\n

import * as React from 'react';\nimport { DataGrid } from '@mui/x-data-grid';\n\n\nconst columns = [\n    { field: 'id', headerName: 'ID', width: 50},\n    { field: 'testName', headerName: 'Test Name', width: 120,},\n    { field: 'testDate', headerName: 'Test Date', width: 160 },\n];\n\nexport default function DataTable(props) {\n\n    const rows = [id:1, testName:"test", testDate:"23/03/2022"];\n\n    return (\n        <div id="resultTable" >\n            <DataGrid\n                rows={rows}\n                columns={columns}\n                pageSize={5}\n                rowsPerPageOptions={[5]}\n\n            />\n        </div>\n    );\n}\n

\n

Id 列可以隐藏或显示：none。我尝试使用

\n

display: false\n

\n

或者：

\n

hidden: true

\n

我也尝试过：

\n

options: {display: false, filter: false,}，但它没有 \xe2\x80\x99 工作。

\n

Answer 1

根据MUI X 文档，hide: true现已弃用。

相反，您应该使用列可见性模型。

文档中的示例：

<DataGrid
  initialState={{
    columns: {
      columnVisibilityModel: {
        // Hide columns status and traderName, the other columns will remain visible
        status: false,
        traderName: false,
      },
    },
  }}
/>

Answer 2

我找到了解决方案。

{ field: 'id', headerName: 'ID', width: 50, hide: true}

这对我来说就足够了。

Answer 3

扩展罗宾逊在文档中的答案，还有一种以编程方式执行此操作的方法。我使用此代码隐藏移动版本上的一些列。

import React from 'react'
import { DataGrid } from "@mui/x-data-grid";

import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";

export const MOBILE_COLUMNS = {
  id: true,
  value: true,
  value2: false,
  value3: false,
};
export const ALL_COLUMNS = {
  id: true,
  value: true,
  value2: true,
  value3: true,
};

const Component = ({rows,columns}) => {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up("sm"));

  const [columnVisible, setColumnVisible] = React.useState(ALL_COLUMNS);
  React.useEffect(() => {
    const newColumns = matches ? ALL_COLUMNS : MOBILE_COLUMNS;
    setColumnVisible(newColumns);
  }, [matches]);

  return (
    <DataGrid
      rows={rows}
      columns={columns}
      columnVisibilityModel={columnVisible}
    />
  );
};