如何在 Material-UI 的 DataGrid 中动态添加 singleSelect 列的 valueOptions？

Question

This is my second question in SO, so apologize for any error in asking and formatting my question. I've been trying to accomplish what the tile said. Basically I have the following example of an array that I use to define my columns:

[
{
    field: 'name',
    headerName: 'Name',
    flex: 1,
    editable: true
},
{
    field: 'address',
    headerName: "Address",
    flex: 1,
    editable: true
},
{
    field: 'country',
    headerName: "Country",
    flex: 1,
    editable: true,
    type: 'singleSelect',
    valueOptions: 
    [
        // This should be dynamic
    ]
},
]

This is exported from a separate file, which is then imported in the React component that uses the DataGrid with these columns definitions.

The options are fetched from my REST API when a user logs in and they will be different for each user.

Is there anyway I could assign the valueOptions for the column country dynamically after the initial definitions?

Thank you!

PS: I'm using the free version of Material-UI's DataGrid.

Answer 1

You could change the value of the "valueOptions" field after you have the answer of your REST service:

 fetch("your endpoint").then(answer => { columnsConfig.filter(column => column.field === "country").valueOptions = answer; })

PS: you may have to transform the answer before setting the value of valueOptions

Answer 2

valueOpt accepts a function that you can use to dynamically reference the values you are looking for.

Relevant issue: https://github.com/mui/mui-x/issues/3528

[{
    field: 'country',
    headerName: "Country",
    flex: 1,
    editable: true,
    type: 'singleSelect',
    valueOptions: ({id, row, field}) => {
        return row.countryOpt;
    }
}]

Answer 3

you can do by valueOptions field

const types = { // get value from services }

{
  field: 'country', width: 180,
  headerName: 'Country',
  type: 'singleSelect',
  editable: true,
  valueOptions: ({ row }) => { const options = [];
    types?.map((type) =>options.push(type.name))
    return options
  }

},