Material UI DataGrid ValueFormatter multiple value in one field

Question

Hi guys I am using material UI DataGrid and have this code

const columns = [
    { field: 'date', headerName: 'Date',flex: 1},
    { field: 'user_id', headerName: 'Shop',flex: 1, valueFormatter: ({ value }) => value.id},
    { field: 'user_id', headerName: 'Shop',flex: 1, valueFormatter: ({ value }) => value.name},
    ];

which returns 'Maximum call stack size exceeded'

basically I want to merge this user_id.id and user_id.name in one field. By the way I am having nested object here so i have to call user_id twice.

I have this code which gives me blank output.

{ field: 'user_id' ,
     headerName: 'Shop',
     flex: 1,
     valueFormatter:(params) => {
       return `${params.id|| ''} ${params.name || ''}`;
     },
   },

any idea how to fix it?

Answer 1

If user_id is an object with id and name properties, and it's nested within your data, you should access them accordingly.

const columns = [
  { field: 'date', headerName: 'Date', flex: 1 },
  {
    field: 'user_id',
    headerName: 'Shop',
    flex: 1,
    valueFormatter: ({ value }) => {
      // Assuming user_id is an object with id and name properties
      const { id, name } = value.user_id || {}; // Destructure id and name from user_id

      return `${id || ''} ${name || ''}`;
    },
  },
];