how to enter custom data into specific columns in mui data grid

Viewed 28

I had a data table initially that had some special data in japanese in few columns. it was created using mui data table. I had used customBodyRender and the code for those special columns are as follows

 columns.push({
      name: "brandId",
      label: nowrapHeader(appLanguages.brand[lang]),
      options: {
        ...enableSortOnlyOpts,
        customBodyRender: (v) => getSelectCustomBodyRender(this.getBrandOptionMap(), v),
      },
    })

The member functions code is as follows

getBrandOptionMap() {
    const { servers } = this.props
    const optionMap = {}
    servers.serialBrands.map((o) => {
      optionMap[o.id] = o.name
      return o.id
    })
    return optionMap
  }

and

export const getSelectCustomBodyRender = (optionMap, v) =>
  Object.keys(optionMap).length && v in optionMap ? nowrap(optionMap[v]) : '';

I have converted the table into a data grid using MUI data grid and Im not sure how to convert this column to display the same data. How do I parse the above functions and logic to be accepted by the data grid column? Do I need to use valueGetter? If so, what is the syntax? I have tried the following

columns.push({
      field: 'brandId',
      headerName: nowrapHeader(appLanguages.brand[lang]),
      //options: {
      //  ...enableSortOnlyOpts,
      //  customBodyRender: (v) => getSelectCustomBodyRender(this.getBrandOptionMap(), v),
      //},
      valueGetter: (params) =>
        getSelectCustomBodyRender(this.getBrandOptionMap(), params.row.brandId),
      flex: 1,
    });

but I only get output as

[object Object]
0 Answers
Related