I am using Next.js 10 to create a timetable or schedule similar to the one below:
| bus stop | time 1 | time 2 | time 3 | |
|---|---|---|---|---|
| {props[0].bus stop} | {props[0].times[0]} | {props[0].times[1]} | {props[0].times[2]} | ... |
| {props[1].bus stop} | {props[1].times[0]} | {props[1].times[1]} | {props[1].times[2]} | ... |
| {props[2].bus stop} | {props[2].times[0]} | {props[2].times[1]} | {props[2].times[2]} | ... |
| ... | ... | ... | ... | ... |
JSON data:
[
{
"bus stop":"Bad Königshofen ZOB",
"times":[
"05:55",
"06:35",
"06:35",
"NULL",
...
]
},
{
"bus stop":"Bad Königshofen Schulzentrum",
"times":[
"NULL",
"NULL",
"12:17",
"13:10",
...
]
},
{
"bus stop":"Großeibstadt",
"times":[
"06:00",
"06:40",
"06:40",
"NULL",
...
]
}
]
A solution for generating "bus stop" rows:
{props.map(prop => <div className={styles.grid_left}>{prop["bus stop"]}</div>)}
I am unsure how to generate the "times" section in the table.
For clarity: "Bus stops" represent the locations where the bus goes, while "times" indicate when the bus arrives at each stop.
If my JSON structure is not ideal, I am open to changing it. However, the "bus stops" and "times" should be capable of any length, whether it's 1 or 2 million entities.
Edit (credited to @yochanan sheinberger):
{props.map(prop =>
<grid className={styles.grid_container}>
<div className={styles.grid_left}>{prop["bus stop"]}</div>
{prop.times.map(time => <div className={styles.grid_right}>{time}</div>)}
</grid>
)}
My custom CSS solution:
<table className={styles.tg}>
{props.map(prop =>
<tr>
<th className={styles.tg_0pky}>{prop["bus stop"]}</th>
{prop.times.map(time => time === "NULL" ? <th className={styles.tg_0pky}></th> : <th className={styles.tg_0pky}>{time}</th>)}
</tr>
)}
</table>
CSS styling:
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
border-color: black;
border-style: solid;
...
This will result in a structured table display as shown above.