I'm currently working on a React table component that consists of rows and columns. My main goal is to have the rows arranged vertically and the numbers within each row aligned horizontally.
Here's how it looks at the moment:
https://i.sstatic.net/hEVwH.png
However, when I encapsulate each number within a basic Cell component, the layout changes to this:
https://i.sstatic.net/BIXQ2.png
Below is the code snippet for reference:
function Cell({ number }) {
return (
<div>
{number}
</div>
)
}
function Row({ row }) {
// issue arises when using Cell component
const mapped = row.map((datapoint, index) => {
return <li className="horizontalList" key={index.toString()}><Cell number={datapoint}/></li>
})
// uncomment this and comment out the other one to see the intended output
// const mapped = row.map((datapoint, index) => {
// return <li className="horizontalList" key={index.toString()}>{datapoint}</li>
// })
return (
<div className="row">
<ul>
{mapped}
</ul>
</div>
)
}
function App() {
const data = [
[1, 2, 3, 4, 5],
[1, 2, 3, 4, 5],
[1, 2, 3, 4, 5],
[1, 2, 3, 4, 5],
[1, 2, 3, 4, 5],
]
const mapped = data.map((rows, index) => {
return <li className="verticalList" key={index.toString()}><Row row={rows}/></li>
})
return (
<div className="App">
<div className="container">
<ul>
{mapped}
</ul>
</div>
</div>
);
}
The accompanying CSS styles are as follows:
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.horizontalList {
display: inline;
padding: 10px;
}
.verticalList {
padding: 10px;
}