Data Grid - Styling recipes

Advanced grid styling recipes.

Remove cell focus outline

The data grid cells are actionable elements and visually indicate the focus state by default. You can remove the focus outline by overriding the :focus and :focus-within styles for the cells and header cells.

Remove drag handle for columns that are not resizeable

In the MUI Data Grid, each column has a resize handle that allows users to adjust the width of the column. However, there might be cases where you want to disable this feature for certain columns.

To hide the drag handles on columns that are not resizable, you can use the resizable property in the GridColDef object. When the column is not resizable, the drag handle will not have the columnSeparator--resizable class. We can use that to hide the separator.

Styling Cells without impacting aggregation cells

Aggregation cells do not receive a special class, so styling cells without impacting them needs a small workaround in the getClassName function.