Click Here to see table per image (1,2 are occurrences of Monday in month)
Please find the below code for details Timetable must be prepared as per image.
- Weekdays can have multiple occurence Example: Monday (1st Monday , 2nd Monday can be grouped together and 3,4,5 will be together or all occurenece can be grouped individually as per received data)
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
const Table = () => {
const tableData = [
{
time: "9:00 AM - 10:00 AM",
mon: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
tue: <p>-</p>,
wed: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
thur: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
fri: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
sat: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
sun: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
},
{
time: "10:00 AM - 11:00 AM",
mon: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
tue: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
wed: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
thur: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
fri: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
sat: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
sun: (
<p>
S:Pest
<br />
A:A1
<br />
SU:abc
</p>
),
},
];
const headerData = [ // header Data
{
mon: "Monday",
tue: "Tuesday",
wed: "Wednesday",
thur: "Thursday",
fri: "Friday",
sat: "Saturday",
sun: "Sunday",
},
];
const renderHeader = (headerData, index) => {
return (
<>
<tr key={index}>
<th>Time Slot</th>
<th>{headerData.mon}</th>
<th>{headerData.tue}</th>
<th>{headerData.wed}</th>
<th>{headerData.thur}</th>
<th>{headerData.fri}</th>
<th>{headerData.sat}</th>
<th>{headerData.sun}</th>
</tr>
<tr><th>Day Occurence</th></tr>
</>
);
};
const renderData = (tableData, index) => {
return (
<tr key={index}>
<td>{tableData.time}</td>
<td>{tableData.mon}</td>
<td>{tableData.tue}</td>
<td>{tableData.wed}</td>
<td>{tableData.thur}</td>
<td>{tableData.fri}</td>
<td>{tableData.sat}</td>
<td>{tableData.sun}</td>
</tr>
);
};
return (
<>
<table
id="timetable"
className="table table-hover table-striped table-bordered border-secondary"
>
<thead>{headerData.map(renderHeader)}</thead>
<tbody>{tableData.map(renderData)}</tbody>
</table>
</>
);
};
export default Table;