[data grid] Sort columns in column visibility panels alphabetically

[Aberkati]

Steps to reproduce

Link to live example: (required)

Steps:

1. go to mux datapremium
2. try to manage column visibility
3. the names of the columns are not ordered..

Current behavior

Expected behavior

Sorry for my english!
I want to sort the manage columns's panel by alphabetic order, without sorting columns of the grid.
For example :
I have 3 columns :
const columns = [
{ field: 'name', headerName: 'Name', flex: 1 },
{ field: 'age', headerName: 'Age', flex: 1 },
{ field: 'id', headerName: 'ID', flex: 1 },
];

The order of the columns displayed in the grid should be name,age,id
BUT in the column manage panel I want to have age,id,name in this order, without changing columns order in the grid

I dont found any solution in the documentation..;
thank you in advance

I have this demo but without any solutions for the moment ..
https://codesandbox.io/embed/k7p7mg?module=/src/Demo.tsx&fontsize=12

Your environment

System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.18.1 - C:\Program Files\nodejs\node.EXE
npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (128.0.2739.79)
npmPackages:
@emotion/react: ^11.10.6 => 11.11.1
@emotion/styled: ^11.10.6 => 11.11.0
@mui/base: 5.0.0-beta.7
@mui/core-downloads-tracker: 5.14.0
@mui/icons-material: ^5.11.16 => 5.14.0
@mui/material: ^5.12.1 => 5.14.0
@mui/private-theming: 5.13.7
@mui/styled-engine: 5.13.2
@mui/system: 5.14.0
@mui/types: 7.2.4
@mui/utils: 5.15.14
@mui/x-data-grid: 6.20.0
@mui/x-data-grid-premium: 6.20.0 => 6.20.0
@mui/x-data-grid-pro: 6.20.0
@mui/x-license-pro: ^6.10.0 => 6.10.2
@types/react: 17.0.75
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0

Search keywords: PremiumDataGrid

Search keywords:

[oliviertassinari]

It looks like it's a docs problem:

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";

export default function ColumnMenuGrid() {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={[]}
        columns={[
          { field: "name", headerName: "Name", flex: 1 },
          { field: "age", headerName: "Age", flex: 1 },
          { field: "id", headerName: "ID", flex: 1 },
        ]}
        slotProps={{
          columnsManagement: {
            sort: "asc",
          },
        }}
      />
    </div>
  );
}

https://codesandbox.io/p/sandbox/vibrant-kalam-zvmqgv?file=%2Fsrc%2FDemo.tsx%3A4%2C1

---

I guess the root issue is that https://mui.com/x/api/data-grid/grid-columns-management/ doesn't exist. Is there a reason we didn't do?

diff --git a/scripts/buildApiDocs/gridSettings/index.ts b/scripts/buildApiDocs/gridSettings/index.ts
index 2da346753..11a3ce098 100644
--- a/scripts/buildApiDocs/gridSettings/index.ts
+++ b/scripts/buildApiDocs/gridSettings/index.ts
@@ -63,6 +63,7 @@ export default dataGridApiPages;
       'src/DataGridPremium/DataGridPremium.tsx',
       'src/DataGridPro/DataGridPro.tsx',
       'src/DataGrid/DataGrid.tsx',
+      'src/components/columnsManagement/GridColumnsManagement.tsx',
       'src/components/panel/filterPanel/GridFilterForm.tsx',
       'src/components/panel/filterPanel/GridFilterPanel.tsx',
       'src/components/toolbar/GridToolbarQuickFilter.tsx',

I guess that in https://mui.com/x/api/data-grid/data-grid/#DataGrid-css-MuiDataGrid-columnsManagement, those should be linked too:

[KenanYusuf]

@oliviertassinari we have a section on column management customization here, but it is missing the sorting option.

I think it would be better to have an API page for these options, too.

[Aberkati]

Not working for my MUIX version, I'm using 6.20.0...

[michelengelen]

Not working for my MUIX version, I'm using 6.20.0...

v6 still uses the columnsPanel prop as opposed to the renamed columnsManagement prop in v7. This is stated in the migration docs as well.

You can use this as an example for v6:

<DataGridPremium
  // ...
  slotProps={{
    columnsPanel: {
      sort: 'desc'
    },
  }}
/>

[michelengelen]

@KenanYusuf @oliviertassinari I'll add this as a request to update the docs to the board. I do agree that we could have documented this a bit better. 👍🏼