[DataGrid] Add default background color to grid #16066

KenanYusuf · 2025-01-03T11:44:34Z

Closes #15517

Changelog

Breaking changes

The Data Grid now has a default background color, and its customization has moved from theme.mixins.MuiDataGrid to theme.palette.DataGrid with the following properties:
- bg: Sets the background color of the entire grid (new property)
- headerBg: Sets the background color of the header (previously named containerBackground)
- pinnedBg: Sets the background color of pinned rows and columns (previously named pinnedBackground)
```
 const theme = createTheme({
-  mixins: {
-    MuiDataGrid: {
-      containerBackground: '#f8fafc',
-      pinnedBackground: '#f1f5f9',
-    },
-  },
+  palette: {
+    DataGrid: {
+      bg: '#f8fafc',
+      headerBg: '#e2e8f0',
+      pinnedBg: '#f1f5f9',
+    },
+  },
 });
```

mui-bot · 2025-01-03T11:49:15Z

Deploy preview: https://deploy-preview-16066--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against 7abb7a6

KenanYusuf · 2025-01-03T11:52:43Z

packages/x-data-grid/src/components/containers/GridRootStyles.ts

-  const pinnedBackground = t.mixins.MuiDataGrid?.pinnedBackground ?? containerBackground;
+    : (t.mixins.MuiDataGrid?.background ?? t.palette.background.default);
+  const headerBackground = t.mixins.MuiDataGrid?.headerBackground ?? background;
+  const pinnedBackground = t.mixins.MuiDataGrid?.pinnedBackground ?? background;


Currently, containerBackground is applied to column headers and pinned rows. IMO, it makes more sense to use the pinnedBackground color for pinned rows. With this change, containerBackground would only change the color of column headers, hence why I have renamed it to headerBackground.

It would be a second breaking change in addition to adding a background color to the grid.

Any concerns with this change? @mui/xgrid

KenanYusuf · 2025-01-03T11:57:36Z

packages/x-data-grid/src/components/containers/GridRootStyles.ts

@@ -663,7 +664,7 @@ export const GridRootStyles = styled('div', {
        backgroundColor: pinnedSelectedBackgroundColor,
      },
    },
-    [`& .${c.virtualScrollerContent} .${c.row}`]: {


Ensures that pinned column cells in pinned rows get hover styles too.

Before - Hovering pinned row

After - Hovering pinned row

cherniavskii · 2025-01-03T15:23:00Z

docs/data/data-grid/style/style.md

-      // Headers, and top & bottom fixed rows
-      containerBackground: '#343434',
+      // Container background
+      background: '#fafaf9',


How to handle dark mode here? It would be great to have this included in this demo.

Mentioned here #16066 (comment) and updated the docs

cherniavskii · 2025-01-03T15:35:49Z

packages/x-data-grid/src/components/containers/GridRootStyles.ts

+  const background = t.vars
    ? t.vars.palette.background.default
-    : (t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default);


Shouldn't t.mixins.MuiDataGrid?.containerBackground be used if provided, regardless of t.vars?

const background = t.mixins.MuiDataGrid?.containerBackground ?? (t.vars ? t.vars.palette.background.default : t.palette.background.default);

Yeah, the priority was wrong, good spot. Fixed e2e9b02

github-actions · 2025-01-10T08:30:46Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

KenanYusuf · 2025-01-24T09:37:33Z

docs/data/data-grid/style/style.md

+      // Pinned rows and columns background
+      pinnedBg: '#f1f5f9',
+      // Column header background
+      headerBg: '#eaeff5',


This is another breaking change to make Data Grid theming consistent with Material UI.

Instead of using the mixins theme property, we add DataGrid to the palette—in addition to being consistent with other component color options, this gives us built-in support for light/dark mode theming with colorSchemes (as shown in the snippet below this).

Material use bg instead of background, so also updated the property names for consistency.

docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md

mapache-salvaje · 2025-01-24T16:37:26Z

docs/data/data-grid/style/style.md

@@ -116,26 +116,64 @@ The following demo illustrates how this can be achieved.

 {{"demo": "StripedGrid.js", "bg": "inline"}}

-## Theme header and pinned sections
+## Theme container, header and pinned sections


Oxford comma. 😁 and is "Theme" necessary here? If not I think it's better without, for the sake of keeping the header as short as possible. I'm on the fence about whether or not to pluralize everything so I'll leave that to your judgement.

Suggested change

## Theme container, header and pinned sections

## Containers, headers, and pinned sections

docs/data/data-grid/style/style.md

mapache-salvaje · 2025-01-24T16:40:37Z

docs/data/data-grid/style/style.md

    },
  },
 });
 ```

+Material UI v6 users can use the `colorSchemes` property to specify different colors for light and dark mode:


might be nice to add h3s for ### Material UI v6 and ### Material UI v5 so users can quickly differentiate between the two samples when skimming

Makes sense! The sections are quite specific to light and dark mode theming so I've added that to the headings:

Light and dark mode in Material UI v5

Light and dark mode in Material UI v6

github-actions · 2025-01-28T11:32:56Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2025-01-28T11:32:56Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

Signed-off-by: Kenan Yusuf <[email protected]>

[DataGrid] Add background-color to grid

19ae1b7

KenanYusuf marked this pull request as draft January 3, 2025 11:44

KenanYusuf added breaking change component: data grid This is the name of the generic UI component, not the React module! v8.x design This is about UI or UX design, please involve a designer customization: theme Centered around the theming features labels Jan 3, 2025

ts format

a8c4527

KenanYusuf commented Jan 3, 2025

View reviewed changes

remove duplicate code

abd745e

KenanYusuf commented Jan 3, 2025

View reviewed changes

cherniavskii reviewed Jan 3, 2025

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 10, 2025

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 15, 2025

KenanYusuf added 5 commits January 17, 2025 16:25

Merge branch 'master' into grid-background-color

3f3f064

fix order of background

e2e9b02

refactor

649ac02

docs

05ca293

Merge branch 'master' into grid-background-color

870f8f8

KenanYusuf commented Jan 24, 2025

View reviewed changes

KenanYusuf added 2 commits January 24, 2025 09:48

update type

84e7251

migration guide

bdffada

KenanYusuf changed the title ~~[DataGrid] Add background-color to grid~~ [DataGrid] Add default background color to grid Jan 24, 2025

KenanYusuf marked this pull request as ready for review January 24, 2025 10:24

lint

6f211d9

KenanYusuf requested a review from a team January 24, 2025 11:13

arminmeh approved these changes Jan 24, 2025

View reviewed changes

KenanYusuf requested a review from mapache-salvaje January 24, 2025 15:14

mapache-salvaje reviewed Jan 24, 2025

View reviewed changes

KenanYusuf added 2 commits January 27, 2025 09:14

docs

08d0cde

Merge branch 'master' into grid-background-color

197355f

KenanYusuf requested a review from cherniavskii January 27, 2025 13:21

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 28, 2025

Merge branch 'master' into grid-background-color

7abb7a6

Signed-off-by: Kenan Yusuf <[email protected]>

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 28, 2025

KenanYusuf merged commit 2a686ed into mui:master Jan 29, 2025
18 checks passed

KenanYusuf deleted the grid-background-color branch January 29, 2025 08:37

This was referenced Jan 29, 2025

[data grid] Pinned columns / rows color in dark mode looks like an accident #5979

Closed

[data grid] Grid has inconsistent background #13549

Closed

A-s-h-o-k pushed a commit to A-s-h-o-k/mui-x that referenced this pull request Feb 4, 2025

[DataGrid] Add default background color to grid (mui#16066)

00b707f

Signed-off-by: Kenan Yusuf <[email protected]>

KenanYusuf mentioned this pull request Feb 11, 2025

[data grid] Add codemods for v8 breaking changes #15860

Open

11 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Add default background color to grid #16066

[DataGrid] Add default background color to grid #16066

KenanYusuf commented Jan 3, 2025 •

edited

Loading

mui-bot commented Jan 3, 2025 •

edited

Loading

KenanYusuf Jan 3, 2025 •

edited

Loading

KenanYusuf Jan 3, 2025 •

edited

Loading

cherniavskii Jan 3, 2025

KenanYusuf Jan 24, 2025 •

edited

Loading

cherniavskii Jan 3, 2025

KenanYusuf Jan 21, 2025

github-actions bot commented Jan 10, 2025

KenanYusuf Jan 24, 2025 •

edited

Loading

mapache-salvaje Jan 24, 2025

mapache-salvaje Jan 24, 2025

KenanYusuf Jan 27, 2025 •

edited

Loading

github-actions bot commented Jan 28, 2025

github-actions bot commented Jan 28, 2025

	## Theme container, header and pinned sections
	## Containers, headers, and pinned sections

[DataGrid] Add default background color to grid #16066

[DataGrid] Add default background color to grid #16066

Conversation

KenanYusuf commented Jan 3, 2025 • edited Loading

Changelog

Breaking changes

mui-bot commented Jan 3, 2025 • edited Loading

KenanYusuf Jan 3, 2025 • edited Loading

Choose a reason for hiding this comment

KenanYusuf Jan 3, 2025 • edited Loading

Choose a reason for hiding this comment

Before - Hovering pinned row

After - Hovering pinned row

cherniavskii Jan 3, 2025

Choose a reason for hiding this comment

KenanYusuf Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

cherniavskii Jan 3, 2025

Choose a reason for hiding this comment

KenanYusuf Jan 21, 2025

Choose a reason for hiding this comment

github-actions bot commented Jan 10, 2025

KenanYusuf Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

mapache-salvaje Jan 24, 2025

Choose a reason for hiding this comment

mapache-salvaje Jan 24, 2025

Choose a reason for hiding this comment

KenanYusuf Jan 27, 2025 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Jan 28, 2025

github-actions bot commented Jan 28, 2025

KenanYusuf commented Jan 3, 2025 •

edited

Loading

mui-bot commented Jan 3, 2025 •

edited

Loading

KenanYusuf Jan 3, 2025 •

edited

Loading

KenanYusuf Jan 3, 2025 •

edited

Loading

KenanYusuf Jan 24, 2025 •

edited

Loading

KenanYusuf Jan 24, 2025 •

edited

Loading

KenanYusuf Jan 27, 2025 •

edited

Loading