how do I fill table html to column wise? - css

Question

I am trying to fill my table HTML using an API, however, I want to fill the given HTML table into a column instead of a row to look like the following image layout, but however, I am getting filled as row as you can see in my second image. is there a way to convert it into a column-based filling?
row fill
const arr = [
{
"demo": [
{
"_id": "T0810",
"title": "Historian",
"tags": [
"demo"
],
"queries": [],
},
{
"_id": "T0817",
"title": "book",
"tags": [
"demo"
],
"queries": [],
},
],
"demo_2": [
{
"_id": "T0875",
"title": "Program",
"tags": [
"demo_2",
"Control"
],
"queries": [],
},
{
"_id": "T0807",
"title": "Interface",
"tags": [
"demo_2"
],
"queries": [],
}
]
}
]
const keys = Object.keys(arr[0]);
export default function Demo() {
return (
<div className="wrapper">
<table className="table">
<thead>
<tr>
{keys.map((i) => (
<th key={i}>
<div className="column">
<div className="header">{i}</div>
</div>
</th>
))}
</tr>
</thead>
<tbody>
{keys.map((key) => (
<tr key={key}>
{arr[0][key].map((item) => (
<td key={item._id}>
<div className="column">
<div className="option">{item._id}</div>
</div>
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
}

Answer 1

It's only slightly more involved than what you have put together. The first thing you have to consider is that your table will have as many rows as the lengthiest key, so if demo array has 2 element and demo_2 has 6 elements, the table will have 6 rows even though there will be nothing for 3 of those rows to display for demo.
As such your top level loop will have to loop not through keys but through a number representing the length of the lengthiest key, if that makes sense. So apart from getting the keys, you will need something like this:
const max_rows = keys.reduce((acc, cur) => {
if (arr[0][cur].length > acc) return arr[0][cur].length;
else return acc;
}, 0);
Then your nested loop will look like this:
<table className="table">
<thead>
<tr>
{keys.map((i) => (
<th key={i}>
<div className="column">
<div className="header">{i}</div>
</div>
</th>
))}
</tr>
</thead>
<tbody>
{Array(max_rows)
.fill(0)
.map((key, index) => (
<tr key={index}>
{keys.map((item, ind) => (
<td key={ind}>
<div className="column">
{arr[0][item][index] ? (
<div className="option">
{arr[0][item][index]._id}
</div>
) : null}
</div>
</td>
))}
</tr>
))}
</tbody>
</table>
Here is a Sandbox: https://codesandbox.io/s/adoring-wave-5fub7?file=/src/App.js