React Material-Table - How can I add commas between cell that is rendered from fetched array?

Question

I'm using Material Table for managing workstations. Some of the data I receive are arrays, they are automatically iterated and displayed in cell but without commas.

Current behavior picture

What I'm trying to achieve

I feel like overriding whole cell component is overkill and I would like to avoid modyfing fetched array. Is there is any way that I can modify that iteration done by Material Table at "MTableCell" component? Or maybe there is some smarter way of doing this?

Answer 1

Assuming attribs is your data as array (as shown in the picture):

const attribs = ['ATTRIBUTE1', 'ATTRIBUTE2', 'ATTRIBUTE3'];

You can use reduce to convert that to a comma-separated string:

const separated = attribs.reduce((prev, current) => `${prev},${current}`);

And then feed that into the material table cell. You can check a simple example here: https://codesandbox.io/s/basictable-material-demo-forked-19c9z?file=/demo.js