Here is the array structure I am working with:
const sample = [
{ name: 'apple', detail: [{'a', 'b'}]},
{ name: 'banana', detail: [{'a', 'b'}]},
];
In order to create a table similar to the image in the following link:
https://i.sstatic.net/EKFN8.png
The table body has all the details inside cells. However, the table's size is too narrow and does not align properly with the table header.
I'm curious if there's a more efficient way to map multiple data into rows and merge them into one table cell.
The names (apple and banana) should be in the first cell with row span.