I have been working with react bootstrap table, you can find more information here
You can check out the code in action by clicking here
My goal was to create a table that resembles the one shown below:
https://i.sstatic.net/jsZKe.png Here is an example of what my data looks like:
const data = [
{
rollId: 1,
name:"Momo",
marks: {
maths: 30,
english:24,
science:50,
arts:10
},
age:14
},
{
rollId: 2,
name:"Sana",
marks: {
maths: 30,
english:24,
science:50,
arts:10
},
age:14
},
{
rollId: 3,
name:"Mark",
marks: {
math: 30,
english:24,
science:50,
arts:10
},
age:14
}
]
The code I used to create this table is as follows:
<Table
striped
bordered
hover
responsive
bgcolor="white"
size="lg"
style={{ opacity: "0.8" }}
>
<thead
style={{ backgroundColor: "#198754" }}
className="text-white"
>
<tr>
<th rowSpan={2}>ROll ID</th>
<th rowSpan={2}>Name</th>
<th rowSpan={2} colSpan={4} >
<tr>
<th colSpan={4}>Marks</th>
</tr>
<tr>
<th rowSpan={1}>Maths</th>
<th rowSpan={1}>English </th>
<th rowSpan={1}>Science</th>
<th rowSpan={1}>Arts</th>
</tr>
</th>
<th rowSpan={2}>Age</th>
</tr>
</thead>
<tbody>
{data.map((dat) => {
return (
<tr key={dat.rollId}>
<td key={dat.rollId}>{dat.rollId}</td>
<td>{dat.name}</td>
<td>{dat.marks.maths}</td>
<td>{dat.marks.english}</td>
<td>{dat.marks.science}</td>
<td>{dat.marks.arts}</td>
<td >{dat.age}</td>
</tr>
);
})}
</tbody>
</Table>
However, I am facing an issue where the subjects are not displaying in 4 separate columns. Can someone please help me fix this table?