diff --git a/docs/data/data-grid/column-visibility/ColumnSelectorDisabledGrid.js b/docs/data/data-grid/column-visibility/ColumnSelectorDisabledGrid.js
index 0c7623304fc7..ff98ae3194f1 100644
--- a/docs/data/data-grid/column-visibility/ColumnSelectorDisabledGrid.js
+++ b/docs/data/data-grid/column-visibility/ColumnSelectorDisabledGrid.js
@@ -8,12 +8,12 @@ import { DataGrid, GridToolbar } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 const UserType = {
-  Admin: 0,
-  Regular: 1,
+  Regular: 0,
+  Admin: 1,
 };
 
 export default function ColumnSelectorDisabledGrid() {
-  const [userType, setUserType] = React.useState(UserType.Admin);
+  const [userType, setUserType] = React.useState(UserType.Regular);
   const { data } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 10,
@@ -48,8 +48,8 @@ export default function ColumnSelectorDisabledGrid() {
             setUserType(event.target.value);
           }}
         >
-          <MenuItem value={UserType.Admin}>Admin</MenuItem>
           <MenuItem value={UserType.Regular}>Regular User</MenuItem>
+          <MenuItem value={UserType.Admin}>Admin</MenuItem>
         </Select>
       </FormControl>
       <div style={{ height: 400, width: '100%' }}>
diff --git a/docs/data/data-grid/column-visibility/ColumnSelectorDisabledGrid.tsx b/docs/data/data-grid/column-visibility/ColumnSelectorDisabledGrid.tsx
index 7d22de0aa64d..ca148f604b88 100644
--- a/docs/data/data-grid/column-visibility/ColumnSelectorDisabledGrid.tsx
+++ b/docs/data/data-grid/column-visibility/ColumnSelectorDisabledGrid.tsx
@@ -8,12 +8,12 @@ import { DataGrid, GridToolbar } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 const UserType = {
-  Admin: 0,
-  Regular: 1,
+  Regular: 0,
+  Admin: 1,
 };
 
 export default function ColumnSelectorDisabledGrid() {
-  const [userType, setUserType] = React.useState(UserType.Admin);
+  const [userType, setUserType] = React.useState(UserType.Regular);
   const { data } = useDemoData({
     dataSet: 'Commodity',
     rowLength: 10,
@@ -48,8 +48,8 @@ export default function ColumnSelectorDisabledGrid() {
             setUserType(event.target.value as number);
           }}
         >
-          <MenuItem value={UserType.Admin}>Admin</MenuItem>
           <MenuItem value={UserType.Regular}>Regular User</MenuItem>
+          <MenuItem value={UserType.Admin}>Admin</MenuItem>
         </Select>
       </FormControl>
       <div style={{ height: 400, width: '100%' }}>