I'm using Material Table for managing workstations. Some of the data i receive are arrays, they are automaticly itterated 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 itteration done by Material Table at "MTableCell" component ? Or maybe there is some smarter way of doing this ?

CodePudding user response：

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