如何在 MUI 中隐藏列？答案

【问题标题】：How can i hide a column in MUI?如何在 MUI 中隐藏列？
【发布时间】：2022-06-22 18:00:08
【问题描述】：

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

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


const columns = [
    { field: 'id', headerName: 'ID', width: 50},
    { field: 'testName', headerName: 'Test Name', width: 120,},
    { field: 'testDate', headerName: 'Test Date', width: 160 },
];

export default function DataTable(props) {

    const rows = [id:1, testName:"test", testDate:"23/03/2022"]; 

    return (
        <div id="resultTable" >
            <DataGrid
                rows={rows}
                columns={columns}
                pageSize={5}
                rowsPerPageOptions={[5]}
                
            />
        </div>
    );
}

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

display:false

或：

hidden: true

也试过了：

options: {display: false, filter: false,} 但它不起作用。

【问题讨论】：

标签： reactjs material-ui mui-datatable

【解决方案1】：

我找到了解决办法。

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

这对我来说已经足够了。

【讨论】：

我非常喜欢这个解决方案。如果 MUI 和我用过的其他框架一样，那么这个解决方案仍然允许我充分利用隐藏列上的 API。

【解决方案2】：

尝试像这样删除列数组中的第一个对象

const columns = [
    //{ field: 'id', headerName: 'ID', width: 50}, //or delete it entirely
    { field: 'testName', headerName: 'Test Name', width: 120,},
    { field: 'testDate', headerName: 'Test Date', width: 160 },
]

【讨论】：

但我需要稍后使用该 ID。谢谢你的回答。
在哪里？在数据网格中？

【解决方案3】：

GridColDef.hide 属性已弃用，您应该使用列可见性来隐藏不需要的列：https://mui.com/x/react-data-grid/columns/#controlled-visible-columns

【讨论】：