My goal is to populate cells in a static table with my data. Table is for an app to manage schools timetable. Table needs to be static because there is going to be input field in each empty cell. Each cell has and id, for example 304 which means day 3, lesson 04. I want to populate cells based on this id (to check if cell id is same as a lesson_id and then return data to a cell).
So what would be the best way to populate each cell in the table, but still making table which is 6 columns and 12 rows?
timetableData: [
{
lesson_id: 101,
subject: 'PCI',
teacher: 'RP',
},
{
lesson_id: 102,
subject: 'PCI',
teacher: 'RP',
},
]
.
| x | Monday | Tuesday | Wednesday | Thursday | Friday |
|----|--------|---------|-----------|----------|--------|
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 |
.
<table className={styles.tg}>
<thead>
<tr>
<th className={styles.tg0lax}>x</th>
<th className={styles.tg0lax}>Monday</th>
<th className={styles.tg0lax}>Tuesday</th>
<th className={styles.tg0lax}>Wednesday</th>
<th className={styles.tg0lax}>Thursday</th>
<th className={styles.tg0lax}>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<td className={styles.tg0lax}>1</td>
<td className={styles.tg0lax} id="101"></td>
<td className={styles.tg0lax} id="201"></td>
<td className={styles.tg0lax} id="301"></td>
<td className={styles.tg0lax} id="401"></td>
<td className={styles.tg0lax} id="501"></td>
</tr>
<tr>
<td className={styles.tg0lax}>2</td>
<td className={styles.tg0lax} id="102"></td>
<td className={styles.tg0lax} id="202"></td>
<td className={styles.tg0lax} id="302"></td>
<td className={styles.tg0lax} id="402"></td>
<td className={styles.tg0lax} id="502"></td>
</tr>
<tr>
<td className={styles.tg0lax}>3</td>
<td className={styles.tg0lax} id="103"></td>
<td className={styles.tg0lax} id="203"></td>
<td className={styles.tg0lax} id="303"></td>
<td className={styles.tg0lax} id="403"></td>
<td className={styles.tg0lax} id="503"></td>
</tr>
<tr>
<td className={styles.tg0lax}>4</td>
<td className={styles.tg0lax} id="104"></td>
<td className={styles.tg0lax} id="204"></td>
<td className={styles.tg0lax} id="304"></td>
<td className={styles.tg0lax} id="404"></td>
<td className={styles.tg0lax} id="504"></td>
</tr>
<tr>
<td className={styles.tg0lax}>5</td>
<td className={styles.tg0lax} id="105"></td>
<td className={styles.tg0lax} id="205"></td>
<td className={styles.tg0lax} id="305"></td>
<td className={styles.tg0lax} id="405"></td>
<td className={styles.tg0lax} id="505"></td>
</tr>
<tr>
<td className={styles.tg0lax}>6</td>
<td className={styles.tg0lax} id="106"></td>
<td className={styles.tg0lax} id="206"></td>
<td className={styles.tg0lax} id="306"></td>
<td className={styles.tg0lax} id="406"></td>
<td className={styles.tg0lax} id="506"></td>
</tr>
<tr>
<td className={styles.tg0lax}>7</td>
<td className={styles.tg0lax} id="107"></td>
<td className={styles.tg0lax} id="207"></td>
<td className={styles.tg0lax} id="307"></td>
<td className={styles.tg0lax} id="407"></td>
<td className={styles.tg0lax} id="507"></td>
</tr>
<tr>
<td className={styles.tg0lax}>8</td>
<td className={styles.tg0lax} id="108"></td>
<td className={styles.tg0lax} id="208"></td>
<td className={styles.tg0lax} id="308"></td>
<td className={styles.tg0lax} id="408"></td>
<td className={styles.tg0lax} id="508"></td>
</tr>
<tr>
<td className={styles.tg0lax}>9</td>
<td className={styles.tg0lax} id="109"></td>
<td className={styles.tg0lax} id="209"></td>
<td className={styles.tg0lax} id="309"></td>
<td className={styles.tg0lax} id="409"></td>
<td className={styles.tg0lax} id="509"></td>
</tr>
<tr>
<td className={styles.tg0lax}>10</td>
<td className={styles.tg0lax} id="110"></td>
<td className={styles.tg0lax} id="210"></td>
<td className={styles.tg0lax} id="310"></td>
<td className={styles.tg0lax} id="410"></td>
<td className={styles.tg0lax} id="510"></td>
</tr>
<tr>
<td className={styles.tg0lax}>11</td>
<td className={styles.tg0lax} id="111"></td>
<td className={styles.tg0lax} id="211"></td>
<td className={styles.tg0lax} id="311"></td>
<td className={styles.tg0lax} id="411"></td>
<td className={styles.tg0lax} id="511"></td>
</tr>
</tbody>
</table>
