diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json
index 40944dec87d98..7247691dba615 100644
--- a/docs/data/data-grid/localization/data.json
+++ b/docs/data/data-grid/localization/data.json
@@ -3,48 +3,48 @@
"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"
},
{
@@ -52,23 +52,23 @@
"importName": "hrHR",
"localeName": "Croatian",
"missingKeysCount": 11,
- "totalKeysCount": 133,
+ "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"
},
{
@@ -76,207 +76,207 @@
"importName": "nlNL",
"localeName": "Dutch",
"missingKeysCount": 10,
- "totalKeysCount": 133,
+ "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..ca305b51f9df2
--- /dev/null
+++ b/docs/data/data-grid/overlays/NoColumnsOverlayCustom.js
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+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';
+
+const StyledGridOverlay = styled('div')(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ textAlign: '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() {
+ const apiRef = useGridApiContext();
+
+ const handleOpenManageColumns = () => {
+ apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
+ };
+
+ 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..be51ed6482b2d
--- /dev/null
+++ b/docs/data/data-grid/overlays/NoColumnsOverlayCustom.tsx
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+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';
+
+const StyledGridOverlay = styled('div')(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ textAlign: '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() {
+ const apiRef = useGridApiContext();
+
+ const handleOpenManageColumns = () => {
+ apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
+ };
+
+ 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/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..2c23cce04082f 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--hiddenContent` and is now also applied when the "No columns" overlay is displayed.