How to simulate an HTML table with a column per component in a reactor?

Question

The component response is amazing when we know how to separate concerns. However, I find this case very difficult for the abstract.

  |  A |  B |  C |
     |  Aa |  Ba |  Ca |
     |  Ab |  Bb |  Cb |
     |  Ac |  Bc |  Cc |

I have an API that returns 1 column per query, for example: [Aa, Ab, Ac] so I usually want A, B, C to be a React component and make it its parent component

However, in this case, I cannot easily do this due to the structure of the html tr structure for each component, and not for the column.

Does anyone have an idea about this?

Answer 1

Iterating differently, iterating properties! Use the "RowRenderer" component, which iterates over all the .a , .b , .c properties, given that you know them beforehand. For the property, use "CellRenderer", which takes an object of type A , B , C and the name of the iteration property and displays the cell.