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]