Currently, there is no direct method to override GridToolbarColumnsButton in Data Grid version v6.13.0.
To achieve the same functionality, I utilized the api reference useGridApiContext, demonstrated below:
Output:
enter image description here
(Note: Import statements have been omitted, remember to include them...)
CustomPopupCheckboxes:
export default function CustomPopupCheckboxes(props) {
const apiRef = useGridApiContext();
const [visibleColumns, setVisibleColumns] = useState([]);
const [columns, setColumns] = useState(apiRef.current.getVisibleColumns());
useEffect(() => {
setVisibleColumns(apiRef.current.getVisibleColumns());
});
return (
<Menu
id="long-menu"
anchorEl={props.moreMenuAnchorEl}
open={props.openColumnsMenu}
onClose={() => props.setOpenColumnsMenu(!props.openColumnsMenu)}
>
{columns.map((column) => {
let isVisible = visibleColumns.filter((x) => x.field == column.field);
return (
<div style={column.hideable ? {} : { display: "none" }}>
<Checkbox
checked={isVisible.length != 0 ? true : false}
onChange={(e) => {
apiRef.current.setColumnVisibility(
column.field,
e.target.checked
);
setVisibleColumns(apiRef.current.getVisibleColumns());
}}
/>
{column.headerName}
</div>
);
})}
</Menu>
);
}
CustomToolbar:
export default function CustomToolbar(props) {
const [openColumnsMenu, setOpenColumnsMenu] = useState(false);
const [columnsMenuAnchorEl, setColumnsMenuAnchorEl] = useState(null);
return (
<GridToolbarContainer
style={{
display: "inline-block",
textAlign: "right",
marginBottom: "10px",
}}
>
<CustomIconButton
onClick={(event) => {
setOpenColumnsMenu(!openColumnsMenu);
setColumnsMenuAnchorEl(event.currentTarget);
}}
>
<img src="./Icons/Columns.svg" />
</CustomIconButton>
<CustomPopupCheckboxes
moreMenuAnchorEl={columnsMenuAnchorEl}
openColumnsMenu={openColumnsMenu}
setOpenColumnsMenu={(value) => setOpenColumnsMenu(value)}
/>
</div>
</GridToolbarContainer>
);
}
In my particular situation, I needed to create an IconButton that triggers a popup with checkboxes upon clicking.