How can i hide a column in MUI? - reactjs

Question

I don't wanna show id field of my table.I use "#mui/x-data-grid":"^5.6.1" version. Here is my code;
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 column can be hidden or display:none. I tried to use
display:false
or:
hidden: true
and also tried:
options: {display: false, filter: false,}
but it wasnt work.

Answer 1

I found the solution.
{ field: 'id', headerName: 'ID', width: 50, hide: true}
This is enough for me.

Answer 2

According to MUI documentation, hide: true is now deprecated.
Instead you should use the Column Visibility Model.
Example from the documentation:
<DataGrid
initialState={{
columns: {
columnVisibilityModel: {
// Hide columns status and traderName, the other columns will remain visible
status: false,
traderName: false,
},
},
}}
/>

Answer 3

Expanding on Robinson's answer from the docs There's also a way to do this programmatically. I used this code to hide some columns on mobile version.
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 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}
/>
)

Answer 4

GridColDef.hide prop is deprecated, you should use the column visibility to hide the unwanted columns: https://mui.com/x/react-data-grid/columns/#controlled-visible-columns

Answer 5

I know that this question is already answered, but what I encountered was that I needed to hide a field but retrieve its value once I edit a row, which is also what OP commented on one of the answers.
The solution for this is adding the editable prop to the field like so:
{field: 'id', hide: true, editable: true}

Answer 6

Try removing the first object in columns array like so
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 },
]
or add the property hide: true and editable: true
const columns = [
{ field: 'id', headerName: 'ID', width: 50, hide: true, editable: true},
{ field: 'testName', headerName: 'Test Name', width: 120,},
{ field: 'testDate', headerName: 'Test Date', width: 160 },
]