[data grid] SingleSelect Horizontal alignment in Datagrid

[sterlingdcs-damian]

The problem in depth

In Mui data grid is there a way to align a column that has a singleSelect
We would like to left align it, but it seems to default to being centred

Column definition:

 {
        field: 'category',
        type: 'singleSelect',
        valueOptions: Object.values(OperationCategories),
        headerName: t({ id: 'category', message: 'Category' }),
        width: 220,
        editable: true,
        preProcessEditCellProps: required(),
      }

Your environment

`npx @mui/envinfo`

System: OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur) Binaries: Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm pnpm: 8.15.2 - ~/.local/share/pnpm/pnpm Browsers: Chrome: Not Found npmPackages: @emotion/react: 11.11.1 => 11.11.1 @emotion/styled: 11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.15 @mui/core-downloads-tracker: 5.14.18 @mui/icons-material: 5.14.9 => 5.14.9 @mui/lab: 5.0.0-alpha.144 => 5.0.0-alpha.144 @mui/material: 5.14.10 => 5.14.10 @mui/private-theming: 5.14.18 @mui/styled-engine: 5.14.18 @mui/styles: 5.14.10 => 5.14.10 @mui/system: 5.14.9 => 5.14.9 @mui/types: 7.2.13 @mui/utils: 5.15.7 @mui/x-charts: ^6.19.3 => 6.19.3 @mui/x-data-grid: 6.18.4 @mui/x-data-grid-premium: 6.18.4 => 6.18.4 @mui/x-data-grid-pro: 6.18.4 @mui/x-license-pro: 6.10.2 => 6.10.2 @mui/x-tree-view: 6.0.0-alpha.1 @types/react: 17.0.2 => 17.0.2 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 typescript: 4.4.3 => 4.4.3

Search keywords: Data grid single-select align
Order ID: 73340

[michelengelen]

Hey @sterlingdcs-damian this is definitely possible.
You can pass in MenuProps into the slotProps that define this:

slotProps={{
  baseSelect: {
    MenuProps: {
      anchorOrigin: {
        vertical: 'bottom',
        horizontal: 'left',
      },

      transformOrigin: {
        vertical: 'top',
        horizontal: 'left',
      },
    },
  },
}}

Does this solve your use case?

[sterlingdcs-damian]

hey @michelengelen , thanks!
looking a lot better now

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @sterlingdcs-damian?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.