[DataGrid] Add default background color to grid #16066
+314
−30
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import * as React from 'react'; | ||
| import { createTheme, ThemeProvider } from '@mui/material/styles'; | ||
|
|
||
| import { DataGridPremium } from '@mui/x-data-grid-premium'; | ||
|
|
||
| const theme = createTheme({ | ||
| mixins: { | ||
| MuiDataGrid: { | ||
| background: '#fafaf9', | ||
| pinnedBackground: '#f5f5f4', | ||
| headerBackground: '#eeedec', | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| const columns = [ | ||
| { field: 'id', headerName: 'ID', width: 90 }, | ||
| { | ||
| field: 'firstName', | ||
| headerName: 'First name', | ||
| width: 150, | ||
| editable: true, | ||
| }, | ||
| { | ||
| field: 'lastName', | ||
| headerName: 'Last name', | ||
| width: 150, | ||
| editable: true, | ||
| }, | ||
| { | ||
| field: 'age', | ||
| headerName: 'Age', | ||
| type: 'number', | ||
| width: 110, | ||
| editable: true, | ||
| }, | ||
| { | ||
| field: 'fullName', | ||
| headerName: 'Full name', | ||
| description: 'This column has a value getter and is not sortable.', | ||
| sortable: false, | ||
| width: 160, | ||
| valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`, | ||
| }, | ||
| ]; | ||
|
|
||
| const rows = [ | ||
| { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 }, | ||
| { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 }, | ||
| { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 }, | ||
| { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 }, | ||
| { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null }, | ||
| { id: 6, lastName: 'Melisandre', firstName: null, age: 150 }, | ||
| { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, | ||
| { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, | ||
| { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, | ||
| ]; | ||
|
|
||
| export default function BackgroundColorsGrid() { | ||
| return ( | ||
| <div style={{ height: 400, width: '100%' }}> | ||
| <ThemeProvider theme={theme}> | ||
| <DataGridPremium | ||
| rows={rows} | ||
| columns={columns} | ||
| initialState={{ | ||
| pagination: { | ||
| paginationModel: { | ||
| pageSize: 5, | ||
| }, | ||
| }, | ||
| pinnedColumns: { | ||
| left: ['id'], | ||
| }, | ||
| }} | ||
| pinnedRows={{ | ||
| bottom: [rows[0]], | ||
| }} | ||
| /> | ||
| </ThemeProvider> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import * as React from 'react'; | ||
| import { createTheme, ThemeProvider } from '@mui/material/styles'; | ||
| import { GridColDef } from '@mui/x-data-grid'; | ||
| import { DataGridPremium } from '@mui/x-data-grid-premium'; | ||
| import type {} from '@mui/x-data-grid/themeAugmentation'; | ||
|
|
||
| const theme = createTheme({ | ||
| mixins: { | ||
| MuiDataGrid: { | ||
| background: '#fafaf9', | ||
| pinnedBackground: '#f5f5f4', | ||
| headerBackground: '#eeedec', | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| const columns: GridColDef<(typeof rows)[number]>[] = [ | ||
| { field: 'id', headerName: 'ID', width: 90 }, | ||
| { | ||
| field: 'firstName', | ||
| headerName: 'First name', | ||
| width: 150, | ||
| editable: true, | ||
| }, | ||
| { | ||
| field: 'lastName', | ||
| headerName: 'Last name', | ||
| width: 150, | ||
| editable: true, | ||
| }, | ||
| { | ||
| field: 'age', | ||
| headerName: 'Age', | ||
| type: 'number', | ||
| width: 110, | ||
| editable: true, | ||
| }, | ||
| { | ||
| field: 'fullName', | ||
| headerName: 'Full name', | ||
| description: 'This column has a value getter and is not sortable.', | ||
| sortable: false, | ||
| width: 160, | ||
| valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`, | ||
| }, | ||
| ]; | ||
|
|
||
| const rows = [ | ||
| { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 }, | ||
| { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 }, | ||
| { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 }, | ||
| { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 }, | ||
| { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null }, | ||
| { id: 6, lastName: 'Melisandre', firstName: null, age: 150 }, | ||
| { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, | ||
| { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, | ||
| { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, | ||
| ]; | ||
|
|
||
| export default function BackgroundColorsGrid() { | ||
| return ( | ||
| <div style={{ height: 400, width: '100%' }}> | ||
| <ThemeProvider theme={theme}> | ||
| <DataGridPremium | ||
| rows={rows} | ||
| columns={columns} | ||
| initialState={{ | ||
| pagination: { | ||
| paginationModel: { | ||
| pageSize: 5, | ||
| }, | ||
| }, | ||
| pinnedColumns: { | ||
| left: ['id'], | ||
| }, | ||
| }} | ||
| pinnedRows={{ | ||
| bottom: [rows[0]], | ||
| }} | ||
| /> | ||
| </ThemeProvider> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -116,9 +116,11 @@ The following demo illustrates how this can be achieved. | |
|
|
||
| {{"demo": "StripedGrid.js", "bg": "inline"}} | ||
|
|
||
| ## Theme container, header and pinned sections | ||
|
|
||
| By default, the Data Grid uses the Material UI `theme.palette.background.default` color for the background color of the grid container, the column headers, and the pinned rows and columns. | ||
|
|
||
| You can override the various background colors with the following configuration: | ||
|
|
||
| ```tsx | ||
| import { createTheme } from '@mui/material/styles'; | ||
|
|
@@ -127,15 +129,19 @@ import type {} from '@mui/x-data-grid/themeAugmentation'; | |
| const theme = createTheme({ | ||
| mixins: { | ||
| MuiDataGrid: { | ||
| // Container background | ||
| background: '#fafaf9', | ||
|
There was a problem hiding this comment. How to handle dark mode here? It would be great to have this included in this demo. There was a problem hiding this comment. Mentioned here #16066 (comment) and updated the docs |
||
| // Pinned rows and columns background | ||
| pinnedBackground: '#f5f5f4', | ||
| // Column header background | ||
| headerBackground: '#eeedec', | ||
| }, | ||
| }, | ||
| }); | ||
| ``` | ||
|
|
||
| {{"demo": "BackgroundColorsGrid.js", "bg": "inline", "defaultCodeOpen": false}} | ||
|
|
||
| ## Custom theme | ||
|
|
||
| The following demo leverages the CSS customization API to match the Ant Design specification. | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -146,11 +146,11 @@ export const GridRootStyles = styled('div', { | |
| const borderColor = getBorderColor(t); | ||
| const radius = t.shape.borderRadius; | ||
|
|
||
| const background = t.vars | ||
| ? t.vars.palette.background.default | ||
|
There was a problem hiding this comment. Shouldn't const background =
t.mixins.MuiDataGrid?.containerBackground ??
(t.vars ? t.vars.palette.background.default : t.palette.background.default);There was a problem hiding this comment. Yeah, the priority was wrong, good spot. Fixed e2e9b02 |
||
| : (t.mixins.MuiDataGrid?.background ?? t.palette.background.default); | ||
| const headerBackground = t.mixins.MuiDataGrid?.headerBackground ?? background; | ||
| const pinnedBackground = t.mixins.MuiDataGrid?.pinnedBackground ?? background; | ||
|
There was a problem hiding this comment. Currently, It would be a second breaking change in addition to adding a background color to the grid. Any concerns with this change? @mui/xgrid |
||
|
|
||
| const overlayBackground = t.vars | ||
| ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` | ||
|
|
@@ -218,7 +218,8 @@ export const GridRootStyles = styled('div', { | |
| '--unstable_DataGrid-headWeight': t.typography.fontWeightMedium, | ||
| '--unstable_DataGrid-overlayBackground': overlayBackground, | ||
|
|
||
| '--DataGrid-background': background, | ||
| '--DataGrid-headerBackground': headerBackground, | ||
| '--DataGrid-pinnedBackground': pinnedBackground, | ||
| '--DataGrid-rowBorderColor': borderColor, | ||
|
|
||
|
|
@@ -243,6 +244,7 @@ export const GridRootStyles = styled('div', { | |
| borderStyle: 'solid', | ||
| borderColor, | ||
| borderRadius: 'var(--unstable_DataGrid-radius)', | ||
| backgroundColor: 'var(--DataGrid-background)', | ||
| color: (t.vars || t).palette.text.primary, | ||
| ...t.typography.body2, | ||
| outline: 'none', | ||
|
|
@@ -407,7 +409,7 @@ export const GridRootStyles = styled('div', { | |
| [`& .${c['columnHeader--pinnedLeft']}, & .${c['columnHeader--pinnedRight']}`]: { | ||
| position: 'sticky', | ||
| zIndex: 4, // Should be above the column separator | ||
| background: 'var(--DataGrid-headerBackground)', | ||
| }, | ||
| [`& .${c.columnSeparator}`]: { | ||
| position: 'absolute', | ||
|
|
@@ -422,6 +424,7 @@ export const GridRootStyles = styled('div', { | |
| }, | ||
| [`& .${c.columnHeaders}`]: { | ||
| width: 'var(--DataGrid-rowWidth)', | ||
| backgroundColor: 'var(--DataGrid-headerBackground)', | ||
| }, | ||
| '@media (hover: hover)': { | ||
| [`& .${c.columnHeader}:hover`]: columnHeaderStyles, | ||
|
|
@@ -530,11 +533,6 @@ export const GridRootStyles = styled('div', { | |
| }, | ||
| '&.Mui-selected': selectedStyles, | ||
| }, | ||
|
|
||
| /* Cell styles */ | ||
| [`& .${c.cell}`]: { | ||
|
|
@@ -554,6 +552,9 @@ export const GridRootStyles = styled('div', { | |
| [`& .${c['virtualScrollerContent--overflowed']} .${c['row--lastVisible']} .${c.cell}`]: { | ||
| borderTopColor: 'transparent', | ||
| }, | ||
| [`& .${c.pinnedRows}`]: { | ||
| backgroundColor: 'var(--DataGrid-pinnedBackground)', | ||
| }, | ||
| [`& .${c['pinnedRows--top']} :first-of-type`]: { | ||
| [`& .${c.cell}, .${c.scrollbarFiller}`]: { | ||
| borderTop: 'none', | ||
|
|
@@ -663,7 +664,7 @@ export const GridRootStyles = styled('div', { | |
| backgroundColor: pinnedSelectedBackgroundColor, | ||
| }, | ||
| }, | ||
|
There was a problem hiding this comment. Ensures that pinned column cells in pinned rows get hover styles too. Before - Hovering pinned row
After - Hovering pinned row
|
||
| [`& .${c.row}`]: { | ||
| '&:hover': pinnedHoverStyles, | ||
| '&.Mui-selected': pinnedSelectedStyles, | ||
| '&.Mui-selected:hover': pinnedSelectedHoverStyles, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.