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.
I found the solution.
{ field: 'id', headerName: 'ID', width: 50, hide: true}
This is enough for me.
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}
/>
)
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 },
]
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
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,
},
},
}}
/>
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}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.