Create a custom Component for React Material-Table row item

Question

I learn React JavaScript and want to create a Material Table with only one Column and every row is a complex component like this;

The Squares with number are part of the component and they can be eater green or Red, as a validation.

I have tried doing this looking at material-table docs

I understand Material Table is suppose to have columns and rows and I can do that adding my Component props "squares with number" as rows. The visual problem is that the row is to long and cumbersome to navigate since User should only have to look an see that all squares are green and not having to horizontal scroll the row.

I like to get some advice how to do what I need. Maybe some other library not Material Table is better?

Answer 1

You could use editComponent in your column like this to render what you want in the row

    columns: [
      {
       ...
        editComponent: props => (
          <ul onChange={props.onChange}>
           <Box/>
          </ul>
        )
      },
      ...