If i don’t use columnVisibilityModel={visibleColumns}, then the toggle in column management works fine but it shows all column initially while i want few column to be visible initially.
current code does not toggles means neither it check nor unckecks.
const visibleColumns = {
id: true,
name: true,
publisher: false,
stickerCount: false,
createdAt:false,
createdBy: false,
updatedAt: false,
stickersCount: false,
view: false ,
}
const simpleColumns = [
{
field: 'id',
headerName: 'ID',
width: 200,
},
...
];
function DataGridDemo() {
return (
<Box sx={{ height: 400, width: '100%' }}>
<DataGrid
apiRef={apiRef}
rows={rows}
columns={columns}
loading={isLoading || rows.length === 0}
initialState={{
pagination: {
paginationModel: {
pageSize: 5,
},
},
sorting: {
sortModel: [
{
field: 'createdAt',
sort: 'asc',
},
],
}
}}
columnVisibilityModel={visibleColumns}
/>
</Box>
);
}
export default DataGridDemo;
we need state to hold visibility info and need to pass the method to onColumnVisibilityModelChange prop of DataGrid component.
instead of passing visibleColumns directly to DataGrid we have to store it into state and pass that state to DataGrid component and then change the state on toggle event.
Code:
const [columnVisibility, setColumnVisibility] = React.useState(visibleColumns);
const handleColumnVisibilityChange = React.useCallback((newModel) => {
setColumnVisibility(newModel);
}, []);
...
<DataGrid
columnVisibilityModel={columnVisibility}
onColumnVisibilityModelChange={handleColumnVisibilityChange}
/>