From dcdcc13ac7104c45ae0cb5004f9788fa80e0c8e4 Mon Sep 17 00:00:00 2001 From: Kenan Yusuf Date: Tue, 11 Feb 2025 16:10:42 +0000 Subject: [PATCH 1/7] [data grid] Add "No columns" overlay --- docs/data/data-grid/localization/data.json | 140 +++++++++--------- .../data-grid/overlays/NoColumnsOverlay.js | 34 +++++ .../data-grid/overlays/NoColumnsOverlay.tsx | 37 +++++ .../overlays/NoColumnsOverlay.tsx.preview | 8 + .../overlays/NoColumnsOverlayCustom.js | 83 +++++++++++ .../overlays/NoColumnsOverlayCustom.tsx | 86 +++++++++++ .../NoColumnsOverlayCustom.tsx.preview | 11 ++ docs/data/data-grid/overlays/overlays.md | 16 ++ .../x/api/data-grid/data-grid-premium.json | 6 + docs/pages/x/api/data-grid/data-grid-pro.json | 6 + docs/pages/x/api/data-grid/data-grid.json | 6 + .../data-grid-premium/data-grid-premium.json | 1 + .../data-grid-pro/data-grid-pro.json | 1 + .../data-grid/data-grid/data-grid.json | 1 + .../src/components/GridNoColumnsOverlay.tsx | 52 +++++++ .../src/components/base/GridOverlays.tsx | 5 +- .../GridGenericColumnHeaderItem.tsx | 1 - .../src/components/containers/GridOverlay.tsx | 6 +- .../components/containers/GridRootStyles.ts | 4 +- packages/x-data-grid/src/components/index.ts | 1 + .../virtualization/GridMainContainer.tsx | 7 +- .../virtualization/GridVirtualScroller.tsx | 13 +- .../constants/defaultGridSlotsComponents.ts | 2 + .../x-data-grid/src/constants/gridClasses.ts | 6 +- .../src/constants/localeTextConstants.ts | 2 + .../columnHeaders/useGridColumnHeaders.tsx | 1 + .../features/overlays/useGridOverlays.tsx | 11 ++ packages/x-data-grid/src/locales/arSD.ts | 2 + packages/x-data-grid/src/locales/beBY.ts | 2 + packages/x-data-grid/src/locales/bgBG.ts | 2 + packages/x-data-grid/src/locales/csCZ.ts | 2 + packages/x-data-grid/src/locales/daDK.ts | 2 + packages/x-data-grid/src/locales/deDE.ts | 2 + packages/x-data-grid/src/locales/elGR.ts | 2 + packages/x-data-grid/src/locales/esES.ts | 2 + packages/x-data-grid/src/locales/faIR.ts | 2 + packages/x-data-grid/src/locales/fiFI.ts | 2 + packages/x-data-grid/src/locales/frFR.ts | 2 + packages/x-data-grid/src/locales/heIL.ts | 2 + packages/x-data-grid/src/locales/hrHR.ts | 2 + packages/x-data-grid/src/locales/huHU.ts | 2 + packages/x-data-grid/src/locales/isIS.ts | 2 + packages/x-data-grid/src/locales/itIT.ts | 2 + packages/x-data-grid/src/locales/jaJP.ts | 2 + packages/x-data-grid/src/locales/koKR.ts | 2 + packages/x-data-grid/src/locales/nbNO.ts | 2 + packages/x-data-grid/src/locales/nlNL.ts | 2 + packages/x-data-grid/src/locales/nnNO.ts | 2 + packages/x-data-grid/src/locales/plPL.ts | 2 + packages/x-data-grid/src/locales/ptBR.ts | 2 + packages/x-data-grid/src/locales/ptPT.ts | 2 + packages/x-data-grid/src/locales/roRO.ts | 2 + packages/x-data-grid/src/locales/ruRU.ts | 2 + packages/x-data-grid/src/locales/skSK.ts | 2 + packages/x-data-grid/src/locales/svSE.ts | 2 + packages/x-data-grid/src/locales/trTR.ts | 2 + packages/x-data-grid/src/locales/ukUA.ts | 2 + packages/x-data-grid/src/locales/urPK.ts | 2 + packages/x-data-grid/src/locales/viVN.ts | 2 + packages/x-data-grid/src/locales/zhCN.ts | 2 + packages/x-data-grid/src/locales/zhHK.ts | 2 + packages/x-data-grid/src/locales/zhTW.ts | 2 + .../src/models/api/gridLocaleTextApi.ts | 2 + .../src/models/gridSlotsComponent.ts | 5 + .../src/models/gridSlotsComponentsProps.ts | 2 + scripts/x-data-grid-premium.exports.json | 2 + scripts/x-data-grid-pro.exports.json | 2 + scripts/x-data-grid.exports.json | 2 + 68 files changed, 544 insertions(+), 88 deletions(-) create mode 100644 docs/data/data-grid/overlays/NoColumnsOverlay.js create mode 100644 docs/data/data-grid/overlays/NoColumnsOverlay.tsx create mode 100644 docs/data/data-grid/overlays/NoColumnsOverlay.tsx.preview create mode 100644 docs/data/data-grid/overlays/NoColumnsOverlayCustom.js create mode 100644 docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx create mode 100644 docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx.preview create mode 100644 packages/x-data-grid/src/components/GridNoColumnsOverlay.tsx diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json index 40944dec87d98..54af280af3a4a 100644 --- a/docs/data/data-grid/localization/data.json +++ b/docs/data/data-grid/localization/data.json @@ -3,280 +3,280 @@ "languageTag": "ar-SD", "importName": "arSD", "localeName": "Arabic (Sudan)", - "missingKeysCount": 19, - "totalKeysCount": 133, + "missingKeysCount": 21, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/arSD.ts" }, { "languageTag": "be-BY", "importName": "beBY", "localeName": "Belarusian", - "missingKeysCount": 45, - "totalKeysCount": 133, + "missingKeysCount": 47, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/beBY.ts" }, { "languageTag": "bg-BG", "importName": "bgBG", "localeName": "Bulgarian", - "missingKeysCount": 11, - "totalKeysCount": 133, + "missingKeysCount": 13, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/bgBG.ts" }, { "languageTag": "zh-HK", "importName": "zhHK", "localeName": "Chinese (Hong Kong)", - "missingKeysCount": 19, - "totalKeysCount": 133, + "missingKeysCount": 21, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhHK.ts" }, { "languageTag": "zh-CN", "importName": "zhCN", "localeName": "Chinese (Simplified)", - "missingKeysCount": 1, - "totalKeysCount": 133, + "missingKeysCount": 3, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhCN.ts" }, { "languageTag": "zh-TW", "importName": "zhTW", "localeName": "Chinese (Taiwan)", - "missingKeysCount": 19, - "totalKeysCount": 133, + "missingKeysCount": 21, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhTW.ts" }, { "languageTag": "hr-HR", "importName": "hrHR", "localeName": "Croatian", - "missingKeysCount": 11, - "totalKeysCount": 133, + "missingKeysCount": 13, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/hrHR.ts" }, { "languageTag": "cs-CZ", "importName": "csCZ", "localeName": "Czech", - "missingKeysCount": 15, - "totalKeysCount": 133, + "missingKeysCount": 17, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/csCZ.ts" }, { "languageTag": "da-DK", "importName": "daDK", "localeName": "Danish", - "missingKeysCount": 11, - "totalKeysCount": 133, + "missingKeysCount": 13, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/daDK.ts" }, { "languageTag": "nl-NL", "importName": "nlNL", "localeName": "Dutch", - "missingKeysCount": 10, - "totalKeysCount": 133, + "missingKeysCount": 12, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nlNL.ts" }, { "languageTag": "fi-FI", "importName": "fiFI", "localeName": "Finnish", - "missingKeysCount": 15, - "totalKeysCount": 133, + "missingKeysCount": 17, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/fiFI.ts" }, { "languageTag": "fr-FR", "importName": "frFR", "localeName": "French", - "missingKeysCount": 11, - "totalKeysCount": 133, + "missingKeysCount": 13, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/frFR.ts" }, { "languageTag": "de-DE", "importName": "deDE", "localeName": "German", - "missingKeysCount": 1, - "totalKeysCount": 133, + "missingKeysCount": 3, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/deDE.ts" }, { "languageTag": "el-GR", "importName": "elGR", "localeName": "Greek", - "missingKeysCount": 19, - "totalKeysCount": 133, + "missingKeysCount": 21, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/elGR.ts" }, { "languageTag": "he-IL", "importName": "heIL", "localeName": "Hebrew", - "missingKeysCount": 1, - "totalKeysCount": 133, + "missingKeysCount": 3, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/heIL.ts" }, { "languageTag": "hu-HU", "importName": "huHU", "localeName": "Hungarian", - "missingKeysCount": 17, - "totalKeysCount": 133, + "missingKeysCount": 19, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/huHU.ts" }, { "languageTag": "is-IS", "importName": "isIS", "localeName": "Icelandic", - "missingKeysCount": 19, - "totalKeysCount": 133, + "missingKeysCount": 21, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/isIS.ts" }, { "languageTag": "it-IT", "importName": "itIT", "localeName": "Italian", - "missingKeysCount": 11, - "totalKeysCount": 133, + "missingKeysCount": 13, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/itIT.ts" }, { "languageTag": "ja-JP", "importName": "jaJP", "localeName": "Japanese", - "missingKeysCount": 11, - "totalKeysCount": 133, + "missingKeysCount": 13, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/jaJP.ts" }, { "languageTag": "ko-KR", "importName": "koKR", "localeName": "Korean", - "missingKeysCount": 1, - "totalKeysCount": 133, + "missingKeysCount": 3, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/koKR.ts" }, { "languageTag": "nb-NO", "importName": "nbNO", "localeName": "Norwegian (Bokmål)", - "missingKeysCount": 15, - "totalKeysCount": 133, + "missingKeysCount": 17, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nbNO.ts" }, { "languageTag": "nn-NO", "importName": "nnNO", "localeName": "Norwegian (Nynorsk)", - "missingKeysCount": 15, - "totalKeysCount": 133, + "missingKeysCount": 17, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nnNO.ts" }, { "languageTag": "fa-IR", "importName": "faIR", "localeName": "Persian", - "missingKeysCount": 10, - "totalKeysCount": 133, + "missingKeysCount": 12, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/faIR.ts" }, { "languageTag": "pl-PL", "importName": "plPL", "localeName": "Polish", - "missingKeysCount": 22, - "totalKeysCount": 133, + "missingKeysCount": 24, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/plPL.ts" }, { "languageTag": "pt-PT", "importName": "ptPT", "localeName": "Portuguese", - "missingKeysCount": 1, - "totalKeysCount": 133, + "missingKeysCount": 3, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptPT.ts" }, { "languageTag": "pt-BR", "importName": "ptBR", "localeName": "Portuguese (Brazil)", - "missingKeysCount": 1, - "totalKeysCount": 133, + "missingKeysCount": 3, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptBR.ts" }, { "languageTag": "ro-RO", "importName": "roRO", "localeName": "Romanian", - "missingKeysCount": 1, - "totalKeysCount": 133, + "missingKeysCount": 3, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/roRO.ts" }, { "languageTag": "ru-RU", "importName": "ruRU", "localeName": "Russian", - "missingKeysCount": 15, - "totalKeysCount": 133, + "missingKeysCount": 17, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ruRU.ts" }, { "languageTag": "sk-SK", "importName": "skSK", "localeName": "Slovak", - "missingKeysCount": 16, - "totalKeysCount": 133, + "missingKeysCount": 18, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/skSK.ts" }, { "languageTag": "es-ES", "importName": "esES", "localeName": "Spanish", - "missingKeysCount": 1, - "totalKeysCount": 133, + "missingKeysCount": 3, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/esES.ts" }, { "languageTag": "sv-SE", "importName": "svSE", "localeName": "Swedish", - "missingKeysCount": 11, - "totalKeysCount": 133, + "missingKeysCount": 13, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/svSE.ts" }, { "languageTag": "tr-TR", "importName": "trTR", "localeName": "Turkish", - "missingKeysCount": 1, - "totalKeysCount": 133, + "missingKeysCount": 3, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/trTR.ts" }, { "languageTag": "uk-UA", "importName": "ukUA", "localeName": "Ukrainian", - "missingKeysCount": 19, - "totalKeysCount": 133, + "missingKeysCount": 21, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ukUA.ts" }, { "languageTag": "ur-PK", "importName": "urPK", "localeName": "Urdu (Pakistan)", - "missingKeysCount": 10, - "totalKeysCount": 133, + "missingKeysCount": 12, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/urPK.ts" }, { "languageTag": "vi-VN", "importName": "viVN", "localeName": "Vietnamese", - "missingKeysCount": 11, - "totalKeysCount": 133, + "missingKeysCount": 13, + "totalKeysCount": 135, "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/viVN.ts" } ] diff --git a/docs/data/data-grid/overlays/NoColumnsOverlay.js b/docs/data/data-grid/overlays/NoColumnsOverlay.js new file mode 100644 index 0000000000000..3fc3f5ca57966 --- /dev/null +++ b/docs/data/data-grid/overlays/NoColumnsOverlay.js @@ -0,0 +1,34 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function NoColumnsOverlay() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 50, + maxColumns: 6, + }); + + const initialColumns = React.useMemo( + () => + data.columns.reduce((acc, col) => { + acc[col.field] = false; + return acc; + }, {}), + [data.columns], + ); + + return ( + + + + ); +} diff --git a/docs/data/data-grid/overlays/NoColumnsOverlay.tsx b/docs/data/data-grid/overlays/NoColumnsOverlay.tsx new file mode 100644 index 0000000000000..0cd53f5d6c549 --- /dev/null +++ b/docs/data/data-grid/overlays/NoColumnsOverlay.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +export default function NoColumnsOverlay() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 50, + maxColumns: 6, + }); + + const initialColumns = React.useMemo( + () => + data.columns.reduce( + (acc, col) => { + acc[col.field] = false; + return acc; + }, + {} as Record, + ), + [data.columns], + ); + + return ( + + + + ); +} diff --git a/docs/data/data-grid/overlays/NoColumnsOverlay.tsx.preview b/docs/data/data-grid/overlays/NoColumnsOverlay.tsx.preview new file mode 100644 index 0000000000000..6c4d5da6ce9bc --- /dev/null +++ b/docs/data/data-grid/overlays/NoColumnsOverlay.tsx.preview @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/overlays/NoColumnsOverlayCustom.js b/docs/data/data-grid/overlays/NoColumnsOverlayCustom.js new file mode 100644 index 0000000000000..c6d32fe75ed99 --- /dev/null +++ b/docs/data/data-grid/overlays/NoColumnsOverlayCustom.js @@ -0,0 +1,83 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import { styled } from '@mui/material/styles'; + +const StyledGridOverlay = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + height: '100%', + '& .no-columns-primary': { + fill: '#3D4751', + ...theme.applyStyles('light', { + fill: '#AEB8C2', + }), + }, + '& .no-columns-secondary': { + fill: '#1D2126', + ...theme.applyStyles('light', { + fill: '#E8EAED', + }), + }, +})); + +function CustomNoColumnsOverlay() { + return ( + + + + + + No columns + + ); +} + +export default function NoColumnsOverlayCustom() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 50, + maxColumns: 6, + }); + + const initialColumns = React.useMemo( + () => + data.columns.reduce((acc, col) => { + acc[col.field] = false; + return acc; + }, {}), + [data.columns], + ); + + return ( + + + + ); +} diff --git a/docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx b/docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx new file mode 100644 index 0000000000000..2096ad6832fb8 --- /dev/null +++ b/docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { DataGrid } from '@mui/x-data-grid'; +import { useDemoData } from '@mui/x-data-grid-generator'; +import { styled } from '@mui/material/styles'; + +const StyledGridOverlay = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + height: '100%', + '& .no-columns-primary': { + fill: '#3D4751', + ...theme.applyStyles('light', { + fill: '#AEB8C2', + }), + }, + '& .no-columns-secondary': { + fill: '#1D2126', + ...theme.applyStyles('light', { + fill: '#E8EAED', + }), + }, +})); + +function CustomNoColumnsOverlay() { + return ( + + + + + + No columns + + ); +} + +export default function NoColumnsOverlayCustom() { + const { data } = useDemoData({ + dataSet: 'Commodity', + rowLength: 50, + maxColumns: 6, + }); + + const initialColumns = React.useMemo( + () => + data.columns.reduce( + (acc, col) => { + acc[col.field] = false; + return acc; + }, + {} as Record, + ), + [data.columns], + ); + + return ( + + + + ); +} diff --git a/docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx.preview b/docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx.preview new file mode 100644 index 0000000000000..8cba3faf383a2 --- /dev/null +++ b/docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx.preview @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/docs/data/data-grid/overlays/overlays.md b/docs/data/data-grid/overlays/overlays.md index 6a192c478af5b..c80e578077f9e 100644 --- a/docs/data/data-grid/overlays/overlays.md +++ b/docs/data/data-grid/overlays/overlays.md @@ -56,6 +56,22 @@ In the following demo, a labeled determinate [CircularProgress](/material-ui/rea {{"demo": "LoadingOverlayCustom.js", "bg": "inline"}} +## No columns overlay + +The no-columns overlay is displayed when the Data Grid has no columns, or when all columns are hidden. + +The "Manage columns" button is displayed when all columns are hidden and `disableColumnSelector` is `false`. + +{{"demo": "NoColumnsOverlay.js", "bg": "inline"}} + +### Custom component + +If you want to customize the no-columns overlay, a component can be passed to the `noColumnsOverlay` slot and rendered in place. + +In the following demo, an illustration is added on top of the default "No columns" message. + +{{"demo": "NoColumnsOverlayCustom.js", "bg": "inline"}} + ## No rows overlay The no-rows overlay is displayed when the Data Grid has no rows. diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index fc81166fcafe4..f07535b9bae64 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -766,6 +766,12 @@ "default": "GridNoRowsOverlay", "class": null }, + { + "name": "noColumnsOverlay", + "description": "No columns overlay component rendered when the grid has no columns.", + "default": "GridNoColumnsOverlay", + "class": null + }, { "name": "pagination", "description": "Pagination component rendered in the grid footer by default.", diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 76fdbcb935274..c3418e1521847 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -701,6 +701,12 @@ "default": "GridNoRowsOverlay", "class": null }, + { + "name": "noColumnsOverlay", + "description": "No columns overlay component rendered when the grid has no columns.", + "default": "GridNoColumnsOverlay", + "class": null + }, { "name": "pagination", "description": "Pagination component rendered in the grid footer by default.", diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 7a75d30ce0661..32a0b0d2ba554 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -584,6 +584,12 @@ "default": "GridNoRowsOverlay", "class": null }, + { + "name": "noColumnsOverlay", + "description": "No columns overlay component rendered when the grid has no columns.", + "default": "GridNoColumnsOverlay", + "class": null + }, { "name": "pagination", "description": "Pagination component rendered in the grid footer by default.", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index df2e0f2a0942c..d5fa7bff68fe7 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -1339,6 +1339,7 @@ "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", "menuItemCheckIcon": "Icon displayed to indicate that a menu item is selected.", "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "noColumnsOverlay": "No columns overlay component rendered when the grid has no columns.", "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.", "openFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index 2dc20cbc9a7cd..18dc20692d14d 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -1274,6 +1274,7 @@ "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", "menuItemCheckIcon": "Icon displayed to indicate that a menu item is selected.", "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "noColumnsOverlay": "No columns overlay component rendered when the grid has no columns.", "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.", "openFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index 877b2fe56ae12..ab4b30f1c6455 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -1144,6 +1144,7 @@ "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", "menuItemCheckIcon": "Icon displayed to indicate that a menu item is selected.", "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "noColumnsOverlay": "No columns overlay component rendered when the grid has no columns.", "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.", "openFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", diff --git a/packages/x-data-grid/src/components/GridNoColumnsOverlay.tsx b/packages/x-data-grid/src/components/GridNoColumnsOverlay.tsx new file mode 100644 index 0000000000000..cb1448e8557f9 --- /dev/null +++ b/packages/x-data-grid/src/components/GridNoColumnsOverlay.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { forwardRef } from '@mui/x-internals/forwardRef'; +import { useGridRootProps } from '../hooks/utils/useGridRootProps'; +import { useGridApiContext } from '../hooks/utils/useGridApiContext'; +import { GridOverlay, GridOverlayProps } from './containers/GridOverlay'; +import { GridPreferencePanelsValue } from '../hooks/features/preferencesPanel/gridPreferencePanelsValue'; +import { gridColumnFieldsSelector, useGridSelector } from '../hooks'; + +const GridNoColumnsOverlay = forwardRef( + function GridNoColumnsOverlay(props, ref) { + const rootProps = useGridRootProps(); + const apiRef = useGridApiContext(); + const columns = useGridSelector(apiRef, gridColumnFieldsSelector); + + const showColumns = () => { + apiRef.current.showPreferences(GridPreferencePanelsValue.columns); + }; + + const showManageColumns = !rootProps.disableColumnSelector && columns.length > 0; + + return ( + + {apiRef.current.getLocaleText('noColumnsOverlayLabel')} + {showManageColumns && ( + } + size="small" + {...rootProps.slotProps?.baseButton} + onClick={showColumns} + > + {apiRef.current.getLocaleText('noColumnsOverlayManageColumns')} + + )} + + ); + }, +); + +GridNoColumnsOverlay.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the TypeScript types and run "pnpm proptypes" | + // ---------------------------------------------------------------------- + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), +} as any; + +export { GridNoColumnsOverlay }; diff --git a/packages/x-data-grid/src/components/base/GridOverlays.tsx b/packages/x-data-grid/src/components/base/GridOverlays.tsx index 386efae7d726a..5cda1e293acd2 100644 --- a/packages/x-data-grid/src/components/base/GridOverlays.tsx +++ b/packages/x-data-grid/src/components/base/GridOverlays.tsx @@ -14,7 +14,10 @@ import { GridLoadingOverlayVariant } from '../GridLoadingOverlay'; import { GridSlotsComponent } from '../../models'; export type GridOverlayType = - | keyof Pick + | keyof Pick< + GridSlotsComponent, + 'noColumnsOverlay' | 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay' + > | null; interface GridOverlaysProps { diff --git a/packages/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx b/packages/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx index 13b41fa523087..8646b0eff20a2 100644 --- a/packages/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx +++ b/packages/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx @@ -101,7 +101,6 @@ const GridGenericColumnHeaderItem = forwardRef styles.overlay, -})<{ ownerState: OwnerState }>({ +})<{ ownerState: OwnerState }>(({ theme }) => ({ width: '100%', height: '100%', display: 'flex', + gap: theme.spacing(1), + flexDirection: 'column', alignSelf: 'center', alignItems: 'center', justifyContent: 'center', backgroundColor: 'var(--unstable_DataGrid-overlayBackground)', -}); +})); const GridOverlay = forwardRef(function GridOverlay(props, ref) { const { className, ...other } = props; diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts index 98249c2f005ea..80a4facf0c026 100644 --- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts +++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts @@ -802,8 +802,8 @@ export const GridRootStyles = styled('div', { borderBottom: '1px solid var(--DataGrid-rowBorderColor)', }, - /* Hide grid rows, row filler, and vertical scrollbar when skeleton overlay is visible */ - [`& .${c['main--hasSkeletonLoadingOverlay']}`]: { + /* Hide grid rows, row filler, and vertical scrollbar. Used when skeleton/no columns overlay is visible */ + [`& .${c['main--hideContent']}`]: { [`& .${c.virtualScrollerContent}`]: { // We use visibility hidden so that the virtual scroller content retains its height. // Position fixed is used to remove the virtual scroller content from the flow. diff --git a/packages/x-data-grid/src/components/index.ts b/packages/x-data-grid/src/components/index.ts index 2657dac0cd890..679dae53517b8 100644 --- a/packages/x-data-grid/src/components/index.ts +++ b/packages/x-data-grid/src/components/index.ts @@ -14,6 +14,7 @@ export * from './GridFooter'; export * from './GridHeader'; export * from './GridLoadingOverlay'; export * from './GridNoRowsOverlay'; +export * from './GridNoColumnsOverlay'; export { GridPagination } from './GridPagination'; export * from './GridRowCount'; export * from './GridRow'; diff --git a/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx b/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx index e09227daa4e17..3cef488348d5d 100644 --- a/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx +++ b/packages/x-data-grid/src/components/virtualization/GridMainContainer.tsx @@ -5,6 +5,7 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { useGridConfiguration } from '../../hooks/utils/useGridConfiguration'; import { GridLoadingOverlayVariant } from '../GridLoadingOverlay'; +import { GridOverlayType } from '../base/GridOverlays'; const GridPanelAnchor = styled('div')({ position: 'absolute', @@ -16,6 +17,7 @@ const GridPanelAnchor = styled('div')({ type OwnerState = Pick & { hasScrollX: boolean; hasPinnedRight: boolean; + overlayType: GridOverlayType; loadingOverlayVariant: GridLoadingOverlayVariant | null; }; @@ -23,11 +25,12 @@ const Element = styled('div', { name: 'MuiDataGrid', slot: 'Main', overridesResolver: (props, styles) => { - const { ownerState } = props; + const { ownerState, loadingOverlayVariant, overlayType } = props; + const hideContent = loadingOverlayVariant === 'skeleton' || overlayType === 'noColumnsOverlay'; return [ styles.main, ownerState.hasPinnedRight && styles['main--hasPinnedRight'], - ownerState.loadingOverlayVariant === 'skeleton' && styles['main--hasSkeletonLoadingOverlay'], + hideContent && styles['main--hideContent'], ]; }, })<{ ownerState: OwnerState }>({ diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx index e5f569a880d1c..7b9a2ea4771ee 100644 --- a/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx +++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx @@ -24,21 +24,20 @@ import { GridVirtualScrollerRenderZone as RenderZone } from './GridVirtualScroll import { GridVirtualScrollbar as Scrollbar } from './GridVirtualScrollbar'; import { GridLoadingOverlayVariant } from '../GridLoadingOverlay'; import { GridStateCommunity } from '../../models/gridStateCommunity'; +import { GridOverlayType } from '../base/GridOverlays'; type OwnerState = Pick & { hasScrollX: boolean; hasPinnedRight: boolean; loadingOverlayVariant: GridLoadingOverlayVariant | null; + overlayType: GridOverlayType; }; const useUtilityClasses = (ownerState: OwnerState) => { - const { classes, hasScrollX, hasPinnedRight, loadingOverlayVariant } = ownerState; + const { classes, hasScrollX, hasPinnedRight, loadingOverlayVariant, overlayType } = ownerState; + const hideContent = loadingOverlayVariant === 'skeleton' || overlayType === 'noColumnsOverlay'; const slots = { - root: [ - 'main', - hasPinnedRight && 'main--hasPinnedRight', - loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay', - ], + root: ['main', hasPinnedRight && 'main--hasPinnedRight', hideContent && 'main--hideContent'], scroller: ['virtualScroller', hasScrollX && 'virtualScroller--hasScrollX'], }; @@ -90,7 +89,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) { classes: rootProps.classes, hasScrollX, hasPinnedRight, - loadingOverlayVariant: overlaysProps.loadingOverlayVariant, + ...overlaysProps, }; const classes = useUtilityClasses(ownerState); diff --git a/packages/x-data-grid/src/constants/defaultGridSlotsComponents.ts b/packages/x-data-grid/src/constants/defaultGridSlotsComponents.ts index e186c665723d4..5abe4160975c5 100644 --- a/packages/x-data-grid/src/constants/defaultGridSlotsComponents.ts +++ b/packages/x-data-grid/src/constants/defaultGridSlotsComponents.ts @@ -13,6 +13,7 @@ import { GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon, + GridNoColumnsOverlay, } from '../components'; import { GridCell } from '../components/cell/GridCell'; import { GridColumnHeaders } from '../components/GridColumnHeaders'; @@ -40,6 +41,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS: GridSlotsComponent = { loadingOverlay: GridLoadingOverlay, noResultsOverlay: GridNoResultsOverlay, noRowsOverlay: GridNoRowsOverlay, + noColumnsOverlay: GridNoColumnsOverlay, pagination: GridPagination, filterPanel: GridFilterPanel, columnsPanel: GridColumnsPanel, diff --git a/packages/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts index be3a2a8ee288f..204a4ce0794d7 100644 --- a/packages/x-data-grid/src/constants/gridClasses.ts +++ b/packages/x-data-grid/src/constants/gridClasses.ts @@ -390,10 +390,10 @@ export interface GridClasses { */ 'main--hasPinnedRight': string; /** - * Styles applied to the main container element when it has an active skeleton loading overlay. + * Styles applied to the main container element to hide the contents of the grid. * @ignore - do not document. */ - 'main--hasSkeletonLoadingOverlay': string; + 'main--hideContent': string; /** * Styles applied to the menu element. */ @@ -779,7 +779,7 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [ 'iconSeparator', 'main', 'main--hasPinnedRight', - 'main--hasSkeletonLoadingOverlay', + 'main--hideContent', 'menu', 'menuIcon', 'menuIconButton', diff --git a/packages/x-data-grid/src/constants/localeTextConstants.ts b/packages/x-data-grid/src/constants/localeTextConstants.ts index 5f528025ccc0b..afd5a0c09205a 100644 --- a/packages/x-data-grid/src/constants/localeTextConstants.ts +++ b/packages/x-data-grid/src/constants/localeTextConstants.ts @@ -4,6 +4,8 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = { // Root noRowsLabel: 'No rows', noResultsOverlayLabel: 'No results found.', + noColumnsOverlayLabel: 'No columns', + noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Density', diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index ff382271dd348..10a8db2f7bcbc 100644 --- a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -300,6 +300,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { aria-rowindex={headerGroupingMaxDepth + 1} ownerState={rootProps} className={gridClasses['row--borderBottom']} + style={{ height: headerHeight }} > {leftRenderContext && getColumnHeaders( diff --git a/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.tsx b/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.tsx index 828f17f99999d..6e896c2498783 100644 --- a/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.tsx +++ b/packages/x-data-grid/src/hooks/features/overlays/useGridOverlays.tsx @@ -8,6 +8,7 @@ import { gridPinnedRowsCountSelector } from '../rows/gridRowsSelector'; import { GridLoadingOverlayVariant } from '../../../components/GridLoadingOverlay'; import { GridOverlayWrapper } from '../../../components/base/GridOverlays'; import type { GridOverlayType } from '../../../components/base/GridOverlays'; +import { gridVisibleColumnDefinitionsSelector } from '..'; /** * Uses the grid state to determine which overlay to display. @@ -20,15 +21,21 @@ export const useGridOverlays = () => { const totalRowCount = useGridSelector(apiRef, gridRowCountSelector); const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector); const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector); + const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector); const noRows = totalRowCount === 0 && pinnedRowsCount === 0; const loading = useGridSelector(apiRef, gridRowsLoadingSelector); const showNoRowsOverlay = !loading && noRows; const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0; + const showNoColumnsOverlay = !loading && visibleColumns.length === 0; let overlayType: GridOverlayType = null; let loadingOverlayVariant: GridLoadingOverlayVariant | null = null; + if (showNoColumnsOverlay) { + overlayType = 'noColumnsOverlay'; + } + if (showNoRowsOverlay) { overlayType = 'noRowsOverlay'; } @@ -37,6 +44,10 @@ export const useGridOverlays = () => { overlayType = 'noResultsOverlay'; } + if (showNoColumnsOverlay) { + overlayType = 'noColumnsOverlay'; + } + if (loading) { overlayType = 'loadingOverlay'; loadingOverlayVariant = diff --git a/packages/x-data-grid/src/locales/arSD.ts b/packages/x-data-grid/src/locales/arSD.ts index e38397e88ae82..6d1c53258a786 100644 --- a/packages/x-data-grid/src/locales/arSD.ts +++ b/packages/x-data-grid/src/locales/arSD.ts @@ -6,6 +6,8 @@ const arSDGrid: Partial = { // Root noRowsLabel: 'لا توجد صفوف', noResultsOverlayLabel: 'لم يتم العثور على نتائج.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'الكثافة', diff --git a/packages/x-data-grid/src/locales/beBY.ts b/packages/x-data-grid/src/locales/beBY.ts index c7be6370cb2b6..84665ad467fab 100644 --- a/packages/x-data-grid/src/locales/beBY.ts +++ b/packages/x-data-grid/src/locales/beBY.ts @@ -25,6 +25,8 @@ const beBYGrid: Partial = { // Root noRowsLabel: 'Няма радкоў', noResultsOverlayLabel: 'Дадзеныя не знойдзены.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Вышыня радка', diff --git a/packages/x-data-grid/src/locales/bgBG.ts b/packages/x-data-grid/src/locales/bgBG.ts index c4cc12cb209ec..103912ed0a73a 100644 --- a/packages/x-data-grid/src/locales/bgBG.ts +++ b/packages/x-data-grid/src/locales/bgBG.ts @@ -6,6 +6,8 @@ const bgBGGrid: Partial = { // Root noRowsLabel: 'Няма редове', noResultsOverlayLabel: 'Няма намерени резултати.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Гъстота', diff --git a/packages/x-data-grid/src/locales/csCZ.ts b/packages/x-data-grid/src/locales/csCZ.ts index 28c2edc1f15bb..28ba78bbfb5ab 100644 --- a/packages/x-data-grid/src/locales/csCZ.ts +++ b/packages/x-data-grid/src/locales/csCZ.ts @@ -6,6 +6,8 @@ const csCZGrid: Partial = { // Root noRowsLabel: 'Žádné záznamy', noResultsOverlayLabel: 'Nenašly se žadné výsledky.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Zobrazení', diff --git a/packages/x-data-grid/src/locales/daDK.ts b/packages/x-data-grid/src/locales/daDK.ts index 91b39e716d8f6..9f4a8762aeb6b 100644 --- a/packages/x-data-grid/src/locales/daDK.ts +++ b/packages/x-data-grid/src/locales/daDK.ts @@ -6,6 +6,8 @@ const daDKGrid: Partial = { // Root noRowsLabel: 'Ingen rækker', noResultsOverlayLabel: 'Ingen resultater', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Tæthed', diff --git a/packages/x-data-grid/src/locales/deDE.ts b/packages/x-data-grid/src/locales/deDE.ts index 306d254f9d1a0..dd3b5e4a11d88 100644 --- a/packages/x-data-grid/src/locales/deDE.ts +++ b/packages/x-data-grid/src/locales/deDE.ts @@ -6,6 +6,8 @@ const deDEGrid: Partial = { // Root noRowsLabel: 'Keine Einträge', noResultsOverlayLabel: 'Keine Ergebnisse gefunden.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Zeilenhöhe', diff --git a/packages/x-data-grid/src/locales/elGR.ts b/packages/x-data-grid/src/locales/elGR.ts index ce1b8cc1c9bf3..da33e973695ab 100644 --- a/packages/x-data-grid/src/locales/elGR.ts +++ b/packages/x-data-grid/src/locales/elGR.ts @@ -6,6 +6,8 @@ const elGRGrid: Partial = { // Root noRowsLabel: 'Δεν υπάρχουν καταχωρήσεις', noResultsOverlayLabel: 'Δεν βρέθηκαν αποτελέσματα.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Ύψος σειράς', diff --git a/packages/x-data-grid/src/locales/esES.ts b/packages/x-data-grid/src/locales/esES.ts index 5f0f9700565ce..265d1e4b2648c 100644 --- a/packages/x-data-grid/src/locales/esES.ts +++ b/packages/x-data-grid/src/locales/esES.ts @@ -6,6 +6,8 @@ const esESGrid: Partial = { // Root noRowsLabel: 'Sin filas', noResultsOverlayLabel: 'Resultados no encontrados', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Densidad', diff --git a/packages/x-data-grid/src/locales/faIR.ts b/packages/x-data-grid/src/locales/faIR.ts index dcccf721dfd61..8004290ede8d7 100644 --- a/packages/x-data-grid/src/locales/faIR.ts +++ b/packages/x-data-grid/src/locales/faIR.ts @@ -6,6 +6,8 @@ const faIRGrid: Partial = { // Root noRowsLabel: 'بدون سطر', noResultsOverlayLabel: 'نتیجه‌ای پیدا نشد.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'تراکم', diff --git a/packages/x-data-grid/src/locales/fiFI.ts b/packages/x-data-grid/src/locales/fiFI.ts index 15e763df36eec..a8613e931d573 100644 --- a/packages/x-data-grid/src/locales/fiFI.ts +++ b/packages/x-data-grid/src/locales/fiFI.ts @@ -6,6 +6,8 @@ const fiFIGrid: Partial = { // Root noRowsLabel: 'Ei rivejä', noResultsOverlayLabel: 'Ei tuloksia.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Tiiveys', diff --git a/packages/x-data-grid/src/locales/frFR.ts b/packages/x-data-grid/src/locales/frFR.ts index 4b7bdd287991d..3d88e058492ef 100644 --- a/packages/x-data-grid/src/locales/frFR.ts +++ b/packages/x-data-grid/src/locales/frFR.ts @@ -6,6 +6,8 @@ const frFRGrid: Partial = { // Root noRowsLabel: 'Pas de résultats', noResultsOverlayLabel: 'Aucun résultat.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Densité', diff --git a/packages/x-data-grid/src/locales/heIL.ts b/packages/x-data-grid/src/locales/heIL.ts index 3bfe383ac780a..f5f55e8279a0d 100644 --- a/packages/x-data-grid/src/locales/heIL.ts +++ b/packages/x-data-grid/src/locales/heIL.ts @@ -6,6 +6,8 @@ const heILGrid: Partial = { // Root noRowsLabel: 'אין שורות', noResultsOverlayLabel: 'לא נמצאו תוצאות.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'צפיפות', diff --git a/packages/x-data-grid/src/locales/hrHR.ts b/packages/x-data-grid/src/locales/hrHR.ts index 718990aecf84e..a6f65b4a924ef 100644 --- a/packages/x-data-grid/src/locales/hrHR.ts +++ b/packages/x-data-grid/src/locales/hrHR.ts @@ -6,6 +6,8 @@ const hrHRGrid: Partial = { // Root noRowsLabel: 'Nema redova', noResultsOverlayLabel: 'Nema rezultata.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Gustoća', diff --git a/packages/x-data-grid/src/locales/huHU.ts b/packages/x-data-grid/src/locales/huHU.ts index 0ae1c185bc96c..bc0906f2303d5 100644 --- a/packages/x-data-grid/src/locales/huHU.ts +++ b/packages/x-data-grid/src/locales/huHU.ts @@ -6,6 +6,8 @@ const huHUGrid: Partial = { // Root noRowsLabel: 'Nincsenek sorok', noResultsOverlayLabel: 'Nincs találat.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Sormagasság', diff --git a/packages/x-data-grid/src/locales/isIS.ts b/packages/x-data-grid/src/locales/isIS.ts index b058fa1ae0cb6..6f2d5418989a3 100644 --- a/packages/x-data-grid/src/locales/isIS.ts +++ b/packages/x-data-grid/src/locales/isIS.ts @@ -6,6 +6,8 @@ const isISGrid: Partial = { // Root noRowsLabel: 'Engar raðir', noResultsOverlayLabel: 'Engar niðurstöður', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Þéttleiki', diff --git a/packages/x-data-grid/src/locales/itIT.ts b/packages/x-data-grid/src/locales/itIT.ts index 123284cdf3516..9f721d793588a 100644 --- a/packages/x-data-grid/src/locales/itIT.ts +++ b/packages/x-data-grid/src/locales/itIT.ts @@ -6,6 +6,8 @@ const itITGrid: Partial = { // Root noRowsLabel: 'Nessun record', noResultsOverlayLabel: 'Nessun record trovato.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Densità', diff --git a/packages/x-data-grid/src/locales/jaJP.ts b/packages/x-data-grid/src/locales/jaJP.ts index 21ce444cd4440..6c9b60c79275c 100644 --- a/packages/x-data-grid/src/locales/jaJP.ts +++ b/packages/x-data-grid/src/locales/jaJP.ts @@ -6,6 +6,8 @@ const jaJPGrid: Partial = { // Root noRowsLabel: '行がありません。', noResultsOverlayLabel: '結果がありません。', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: '行間隔', diff --git a/packages/x-data-grid/src/locales/koKR.ts b/packages/x-data-grid/src/locales/koKR.ts index 4da460f91959e..379ecc94681e4 100644 --- a/packages/x-data-grid/src/locales/koKR.ts +++ b/packages/x-data-grid/src/locales/koKR.ts @@ -6,6 +6,8 @@ const koKRGrid: Partial = { // Root noRowsLabel: '행이 없습니다.', noResultsOverlayLabel: '결과값이 없습니다.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: '행 간격', diff --git a/packages/x-data-grid/src/locales/nbNO.ts b/packages/x-data-grid/src/locales/nbNO.ts index 1f94a0cc33a4e..d05ec851d5e44 100644 --- a/packages/x-data-grid/src/locales/nbNO.ts +++ b/packages/x-data-grid/src/locales/nbNO.ts @@ -6,6 +6,8 @@ const nbNOGrid: Partial = { // Root noRowsLabel: 'Ingen rader', noResultsOverlayLabel: 'Fant ingen resultat.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Tetthet', diff --git a/packages/x-data-grid/src/locales/nlNL.ts b/packages/x-data-grid/src/locales/nlNL.ts index d6ec3adeabd2e..b128a08429c81 100644 --- a/packages/x-data-grid/src/locales/nlNL.ts +++ b/packages/x-data-grid/src/locales/nlNL.ts @@ -6,6 +6,8 @@ const nlNLGrid: Partial = { // Root noRowsLabel: 'Geen resultaten.', noResultsOverlayLabel: 'Geen resultaten gevonden.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Grootte', diff --git a/packages/x-data-grid/src/locales/nnNO.ts b/packages/x-data-grid/src/locales/nnNO.ts index 615b636249780..081f38d060ece 100644 --- a/packages/x-data-grid/src/locales/nnNO.ts +++ b/packages/x-data-grid/src/locales/nnNO.ts @@ -6,6 +6,8 @@ const nnNOGrid: Partial = { // Root noRowsLabel: 'Ingen rader', noResultsOverlayLabel: 'Fann ingen resultat.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Tettheit', diff --git a/packages/x-data-grid/src/locales/plPL.ts b/packages/x-data-grid/src/locales/plPL.ts index 376d510dc52b8..704d7129922da 100644 --- a/packages/x-data-grid/src/locales/plPL.ts +++ b/packages/x-data-grid/src/locales/plPL.ts @@ -6,6 +6,8 @@ const plPLGrid: Partial = { // Root noRowsLabel: 'Brak danych', noResultsOverlayLabel: 'Nie znaleziono wyników.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Wysokość rzędu', diff --git a/packages/x-data-grid/src/locales/ptBR.ts b/packages/x-data-grid/src/locales/ptBR.ts index c6feb6fc6b18d..d2dbe1166a626 100644 --- a/packages/x-data-grid/src/locales/ptBR.ts +++ b/packages/x-data-grid/src/locales/ptBR.ts @@ -6,6 +6,8 @@ const ptBRGrid: Partial = { // Root noRowsLabel: 'Nenhuma linha', noResultsOverlayLabel: 'Nenhum resultado encontrado.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Densidade', diff --git a/packages/x-data-grid/src/locales/ptPT.ts b/packages/x-data-grid/src/locales/ptPT.ts index 1abd0a4d22ca4..f7a0d6904c80a 100644 --- a/packages/x-data-grid/src/locales/ptPT.ts +++ b/packages/x-data-grid/src/locales/ptPT.ts @@ -6,6 +6,8 @@ const ptPTGrid: Partial = { // Root noRowsLabel: 'Nenhuma linha', noResultsOverlayLabel: 'Nenhum resultado encontrado.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Densidade', diff --git a/packages/x-data-grid/src/locales/roRO.ts b/packages/x-data-grid/src/locales/roRO.ts index 46c8e1d86bd19..15c4cfd0a3833 100644 --- a/packages/x-data-grid/src/locales/roRO.ts +++ b/packages/x-data-grid/src/locales/roRO.ts @@ -6,6 +6,8 @@ const roROGrid: Partial = { // Root noRowsLabel: 'Lipsă date', noResultsOverlayLabel: 'Nu au fost găsite rezultate.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Înălțime rând', diff --git a/packages/x-data-grid/src/locales/ruRU.ts b/packages/x-data-grid/src/locales/ruRU.ts index 0d91ed721c716..751ace61c4162 100644 --- a/packages/x-data-grid/src/locales/ruRU.ts +++ b/packages/x-data-grid/src/locales/ruRU.ts @@ -26,6 +26,8 @@ const ruRUGrid: Partial = { // Root noRowsLabel: 'Нет строк', noResultsOverlayLabel: 'Данные не найдены.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Высота строки', diff --git a/packages/x-data-grid/src/locales/skSK.ts b/packages/x-data-grid/src/locales/skSK.ts index 52391f6147d77..7fba4bea1bbe4 100644 --- a/packages/x-data-grid/src/locales/skSK.ts +++ b/packages/x-data-grid/src/locales/skSK.ts @@ -6,6 +6,8 @@ const skSKGrid: Partial = { // Root noRowsLabel: 'Žiadne záznamy', noResultsOverlayLabel: 'Nenašli sa žadne výsledky.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Hustota', diff --git a/packages/x-data-grid/src/locales/svSE.ts b/packages/x-data-grid/src/locales/svSE.ts index 43d5558520fed..caa97373a337e 100644 --- a/packages/x-data-grid/src/locales/svSE.ts +++ b/packages/x-data-grid/src/locales/svSE.ts @@ -6,6 +6,8 @@ const svSEGrid: Partial = { // Root noRowsLabel: 'Inga rader', noResultsOverlayLabel: 'Inga resultat funna.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Densitet', diff --git a/packages/x-data-grid/src/locales/trTR.ts b/packages/x-data-grid/src/locales/trTR.ts index 6bfb9dcf951c5..49fe06f0739c8 100644 --- a/packages/x-data-grid/src/locales/trTR.ts +++ b/packages/x-data-grid/src/locales/trTR.ts @@ -6,6 +6,8 @@ const trTRGrid: Partial = { // Root noRowsLabel: 'Satır yok', noResultsOverlayLabel: 'Sonuç bulunamadı.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Yoğunluk', diff --git a/packages/x-data-grid/src/locales/ukUA.ts b/packages/x-data-grid/src/locales/ukUA.ts index 2006b9bc13957..10c6e4f877782 100644 --- a/packages/x-data-grid/src/locales/ukUA.ts +++ b/packages/x-data-grid/src/locales/ukUA.ts @@ -26,6 +26,8 @@ const ukUAGrid: Partial = { // Root noRowsLabel: 'Немає рядків', noResultsOverlayLabel: 'Дані не знайдено.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Висота рядка', diff --git a/packages/x-data-grid/src/locales/urPK.ts b/packages/x-data-grid/src/locales/urPK.ts index d38a0ff258a09..aff92318ba87b 100644 --- a/packages/x-data-grid/src/locales/urPK.ts +++ b/packages/x-data-grid/src/locales/urPK.ts @@ -6,6 +6,8 @@ const urPKGrid: Partial = { // Root noRowsLabel: 'کوئی قطاریں نہیں', noResultsOverlayLabel: 'کوئی نتائج نہیں', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'کثافت', diff --git a/packages/x-data-grid/src/locales/viVN.ts b/packages/x-data-grid/src/locales/viVN.ts index 5c45271a104d6..b7958b89ea48f 100644 --- a/packages/x-data-grid/src/locales/viVN.ts +++ b/packages/x-data-grid/src/locales/viVN.ts @@ -6,6 +6,8 @@ const viVNGrid: Partial = { // Root noRowsLabel: 'Không có dữ liệu', noResultsOverlayLabel: 'Không tìm thấy kết quả.', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: 'Độ giãn', diff --git a/packages/x-data-grid/src/locales/zhCN.ts b/packages/x-data-grid/src/locales/zhCN.ts index 6a55a054f6a5a..7e1b79c1b2f83 100644 --- a/packages/x-data-grid/src/locales/zhCN.ts +++ b/packages/x-data-grid/src/locales/zhCN.ts @@ -6,6 +6,8 @@ const zhCNGrid: Partial = { // Root noRowsLabel: '没有数据。', noResultsOverlayLabel: '未找到数据。', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: '表格密度', diff --git a/packages/x-data-grid/src/locales/zhHK.ts b/packages/x-data-grid/src/locales/zhHK.ts index d0ee2ab4ce2af..366e6e558282d 100644 --- a/packages/x-data-grid/src/locales/zhHK.ts +++ b/packages/x-data-grid/src/locales/zhHK.ts @@ -6,6 +6,8 @@ const zhHKGrid: Partial = { // Root noRowsLabel: '沒有行', noResultsOverlayLabel: '未找到結果。', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: '密度', diff --git a/packages/x-data-grid/src/locales/zhTW.ts b/packages/x-data-grid/src/locales/zhTW.ts index ac45c10da6ab6..2ec26bdb6f4c4 100644 --- a/packages/x-data-grid/src/locales/zhTW.ts +++ b/packages/x-data-grid/src/locales/zhTW.ts @@ -6,6 +6,8 @@ const zhTWGrid: Partial = { // Root noRowsLabel: '沒有資料', noResultsOverlayLabel: '沒有結果', + // noColumnsOverlayLabel: 'No columns', + // noColumnsOverlayManageColumns: 'Manage columns', // Density selector toolbar button text toolbarDensity: '表格密度', diff --git a/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts index 9ced6d619e02b..b6310bf94290c 100644 --- a/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts +++ b/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts @@ -17,6 +17,8 @@ export interface GridLocaleText { // Root noRowsLabel: string; noResultsOverlayLabel: string; + noColumnsOverlayLabel: string; + noColumnsOverlayManageColumns: string; // Density selector toolbar button text toolbarDensity: React.ReactNode; diff --git a/packages/x-data-grid/src/models/gridSlotsComponent.ts b/packages/x-data-grid/src/models/gridSlotsComponent.ts index b27d7f9249882..22e89142284ed 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponent.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponent.ts @@ -183,6 +183,11 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen * @default GridNoRowsOverlay */ noRowsOverlay: React.JSXElementConstructor; + /** + * No columns overlay component rendered when the grid has no columns. + * @default GridNoColumnsOverlay + */ + noColumnsOverlay: React.JSXElementConstructor; /** * Pagination component rendered in the grid footer by default. * @default Pagination diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts index f7b93d68b95c2..f719566993f4f 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -88,6 +88,7 @@ export interface PaginationPropsOverrides {} export interface LoadingOverlayPropsOverrides {} export interface NoResultsOverlayPropsOverrides {} export interface NoRowsOverlayPropsOverrides {} +export interface NoColumnsOverlayPropsOverrides {} export interface PanelPropsOverrides {} export interface PinnedRowsPropsOverrides {} export interface SkeletonCellPropsOverrides {} @@ -142,6 +143,7 @@ interface ElementSlotProps { loadingOverlay: GridLoadingOverlayProps & LoadingOverlayPropsOverrides; noResultsOverlay: GridOverlayProps & NoResultsOverlayPropsOverrides; noRowsOverlay: GridOverlayProps & NoRowsOverlayPropsOverrides; + noColumnsOverlay: GridOverlayProps & NoColumnsOverlayPropsOverrides; pagination: Partial & PaginationPropsOverrides; panel: GridPanelProps & PanelPropsOverrides; pinnedRows: GridPinnedRowsProps & PinnedRowsPropsOverrides; diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 8b77eeb95693d..e3613c2ceb94f 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -424,6 +424,7 @@ { "name": "GridMenuProps", "kind": "Interface" }, { "name": "GridMoreVertIcon", "kind": "Variable" }, { "name": "GridMultiSelectionApi", "kind": "Interface" }, + { "name": "GridNoColumnsOverlay", "kind": "Variable" }, { "name": "GridNoRowsOverlay", "kind": "Variable" }, { "name": "gridNumberComparator", "kind": "Variable" }, { "name": "GridOverlay", "kind": "Variable" }, @@ -653,6 +654,7 @@ { "name": "Logger", "kind": "Interface" }, { "name": "MuiBaseEvent", "kind": "TypeAlias" }, { "name": "MuiEvent", "kind": "TypeAlias" }, + { "name": "NoColumnsOverlayPropsOverrides", "kind": "Interface" }, { "name": "NoResultsOverlayPropsOverrides", "kind": "Interface" }, { "name": "NoRowsOverlayPropsOverrides", "kind": "Interface" }, { "name": "OutputSelector", "kind": "Interface" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index f9949a3e90f55..b3cfe02470c45 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -386,6 +386,7 @@ { "name": "GridMenuProps", "kind": "Interface" }, { "name": "GridMoreVertIcon", "kind": "Variable" }, { "name": "GridMultiSelectionApi", "kind": "Interface" }, + { "name": "GridNoColumnsOverlay", "kind": "Variable" }, { "name": "GridNoRowsOverlay", "kind": "Variable" }, { "name": "gridNumberComparator", "kind": "Variable" }, { "name": "GridOverlay", "kind": "Variable" }, @@ -601,6 +602,7 @@ { "name": "Logger", "kind": "Interface" }, { "name": "MuiBaseEvent", "kind": "TypeAlias" }, { "name": "MuiEvent", "kind": "TypeAlias" }, + { "name": "NoColumnsOverlayPropsOverrides", "kind": "Interface" }, { "name": "NoResultsOverlayPropsOverrides", "kind": "Interface" }, { "name": "NoRowsOverlayPropsOverrides", "kind": "Interface" }, { "name": "OutputSelector", "kind": "Interface" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 4daaaa08ddcf4..f08d8f9071572 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -356,6 +356,7 @@ { "name": "GridMenuProps", "kind": "Interface" }, { "name": "GridMoreVertIcon", "kind": "Variable" }, { "name": "GridMultiSelectionApi", "kind": "Interface" }, + { "name": "GridNoColumnsOverlay", "kind": "Variable" }, { "name": "GridNoRowsOverlay", "kind": "Variable" }, { "name": "gridNumberComparator", "kind": "Variable" }, { "name": "GridOverlay", "kind": "Variable" }, @@ -557,6 +558,7 @@ { "name": "Logger", "kind": "Interface" }, { "name": "MuiBaseEvent", "kind": "TypeAlias" }, { "name": "MuiEvent", "kind": "TypeAlias" }, + { "name": "NoColumnsOverlayPropsOverrides", "kind": "Interface" }, { "name": "NoResultsOverlayPropsOverrides", "kind": "Interface" }, { "name": "NoRowsOverlayPropsOverrides", "kind": "Interface" }, { "name": "OutputSelector", "kind": "Interface" }, From 2c5513121fbf403a36f0172b3c7021c5311188f9 Mon Sep 17 00:00:00 2001 From: Kenan Yusuf Date: Tue, 11 Feb 2025 16:28:20 +0000 Subject: [PATCH 2/7] improvements --- .../overlays/NoColumnsOverlayCustom.js | 22 +++++++++++++++++-- .../overlays/NoColumnsOverlayCustom.tsx | 22 +++++++++++++++++-- .../src/components/GridNoColumnsOverlay.tsx | 9 ++++---- 3 files changed, 44 insertions(+), 9 deletions(-) diff --git a/docs/data/data-grid/overlays/NoColumnsOverlayCustom.js b/docs/data/data-grid/overlays/NoColumnsOverlayCustom.js index c6d32fe75ed99..ca305b51f9df2 100644 --- a/docs/data/data-grid/overlays/NoColumnsOverlayCustom.js +++ b/docs/data/data-grid/overlays/NoColumnsOverlayCustom.js @@ -1,6 +1,12 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { DataGrid } from '@mui/x-data-grid'; +import Button from '@mui/material/Button'; +import Stack from '@mui/material/Stack'; +import { + DataGrid, + GridPreferencePanelsValue, + useGridApiContext, +} from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; import { styled } from '@mui/material/styles'; @@ -9,6 +15,7 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', + textAlign: 'center', height: '100%', '& .no-columns-primary': { fill: '#3D4751', @@ -25,6 +32,12 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({ })); function CustomNoColumnsOverlay() { + const apiRef = useGridApiContext(); + + const handleOpenManageColumns = () => { + apiRef.current.showPreferences(GridPreferencePanelsValue.columns); + }; + return ( - No columns + + No columns + + ); } diff --git a/docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx b/docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx index 2096ad6832fb8..be51ed6482b2d 100644 --- a/docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx +++ b/docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx @@ -1,6 +1,12 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import { DataGrid } from '@mui/x-data-grid'; +import Button from '@mui/material/Button'; +import Stack from '@mui/material/Stack'; +import { + DataGrid, + GridPreferencePanelsValue, + useGridApiContext, +} from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; import { styled } from '@mui/material/styles'; @@ -9,6 +15,7 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', + textAlign: 'center', height: '100%', '& .no-columns-primary': { fill: '#3D4751', @@ -25,6 +32,12 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({ })); function CustomNoColumnsOverlay() { + const apiRef = useGridApiContext(); + + const handleOpenManageColumns = () => { + apiRef.current.showPreferences(GridPreferencePanelsValue.columns); + }; + return ( - No columns + + No columns + + ); } diff --git a/packages/x-data-grid/src/components/GridNoColumnsOverlay.tsx b/packages/x-data-grid/src/components/GridNoColumnsOverlay.tsx index cb1448e8557f9..691b637b62eb9 100644 --- a/packages/x-data-grid/src/components/GridNoColumnsOverlay.tsx +++ b/packages/x-data-grid/src/components/GridNoColumnsOverlay.tsx @@ -13,21 +13,20 @@ const GridNoColumnsOverlay = forwardRef( const apiRef = useGridApiContext(); const columns = useGridSelector(apiRef, gridColumnFieldsSelector); - const showColumns = () => { + const handleOpenManageColumns = () => { apiRef.current.showPreferences(GridPreferencePanelsValue.columns); }; - const showManageColumns = !rootProps.disableColumnSelector && columns.length > 0; + const showManageColumnsButton = !rootProps.disableColumnSelector && columns.length > 0; return ( {apiRef.current.getLocaleText('noColumnsOverlayLabel')} - {showManageColumns && ( + {showManageColumnsButton && ( } size="small" {...rootProps.slotProps?.baseButton} - onClick={showColumns} + onClick={handleOpenManageColumns} > {apiRef.current.getLocaleText('noColumnsOverlayManageColumns')} From ec141fd80f390292e4b8ee279f1008a3a5efb89f Mon Sep 17 00:00:00 2001 From: Kenan Yusuf Date: Wed, 12 Feb 2025 08:43:44 +0000 Subject: [PATCH 3/7] fix column group height --- .../src/hooks/features/columnHeaders/useGridColumnHeaders.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx index 10a8db2f7bcbc..60c3cfdb45453 100644 --- a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -467,6 +467,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { role="row" aria-rowindex={depth + 1} ownerState={rootProps} + style={{ height: groupHeaderHeight }} > {leftRenderContext && getColumnGroupHeaders({ From c4a2a98fbf1184538ed7e8aa92518ed16fbe25ef Mon Sep 17 00:00:00 2001 From: Kenan Yusuf Date: Wed, 12 Feb 2025 09:05:34 +0000 Subject: [PATCH 4/7] migration guide --- .../migration/migration-data-grid-v7/migration-data-grid-v7.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md index 43c6072e3ec8d..e7ea1348b5028 100644 --- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md +++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md @@ -161,6 +161,7 @@ Below are described the steps you need to make to migrate from v7 to v8. ``` - The `detailPanels`, `pinnedColumns`, and `pinnedRowsRenderZone` classes have been removed. +- The `main--hasSkeletonLoadingOverlay` class has been renamed to `main--hideContent` and is now also applied when the "No columns" overlay is displayed.