dynamic table in Reactjs

Idea behind this code is some personal thinking on some feature that may be useful for all members to be having record of details.

const schoolTimings = [
  {
    schoolType: 'Primary School',
    list: [
      {
        school: 'ABC',
        day: 'Monday',
        open: '08:00',
        close: '12:30'
      },
      {
        school: 'ABC',
        day: 'Tuesday',
        open: '08:00',
        close: '12:30'
      },
      {
        school: 'ABC',
        day: 'Thursday',
        open: '08:00',
        close: '12:30'
      },
      {
        school: 'ABC',
        day: 'Friday',
        open: '08:00',
        close: '12:30'
      },
      {
        school: 'ABC',
        day: 'Saturday',
        open: '08:00',
        close: '12:30'
      },
      {
        school: 'XYZ',
        day: 'Monday',
        open: '08:00',
        close: '12:00'
      },
      {
        school: 'XYZ',
        day: 'Tuesday',
        open: '08:00',
        close: '12:00'
      },
      {
        school: 'XYZ',
        day: 'Wednesday',
        open: '08:00',
        close: '12:00'
      },
      {
        school: 'XYZ',
        day: 'Thursday',
        open: '08:00',
        close: '12:00'
      },
      {
        school: 'XYZ',
        day: 'Friday',
        open: '08:00',
        close: '12:00'
      },
      {
        school: 'XYZ',
        day: 'Saturday',
        open: '08:00',
        close: '12:00'
      }
    ]
  },
  {
    schoolType: 'Secondary School',
    list: [
      {
        school: 'PQR',
        day: 'Monday',
        open: '08:00',
        close: '15:30'
      },
      {
        school: 'PQR',
        day: 'Tuesday',
        open: '08:00',
        close: '15:30'
      },
      {
        school: 'PQR',
        day: 'Wednesday',
        open: '08:00',
        close: '15:30'
      },
      {
        school: 'PQR',
        day: 'Thursday',
        open: '08:00',
        close: '15:30'
      },
      {
        school: 'PQR',
        day: 'Friday',
        open: '08:00',
        close: '15:30'
      },
      {
        school: 'PQR',
        day: 'Saturday',
        open: '08:00',
        close: '15:30'
      },
      {
        school: 'XYZ',
        day: 'Monday',
        open: '08:00',
        close: '17:00'
      },
      {
        school: 'XYZ',
        day: 'Tuesday',
        open: '08:00',
        close: '17:00'
      },
      {
        school: 'XYZ',
        day: 'Wednesday',
        open: '08:00',
        close: '17:00'
      },
      {
        school: 'XYZ',
        day: 'Thursday',
        open: '08:00',
        close: '17:00'
      },
      {
        school: 'XYZ',
        day: 'Friday',
        open: '08:00',
        close: '17:00'
      },
      {
        school: 'XYZ',
        day: 'Saturday',
        open: '08:00',
        close: '17:00'
      }
    ]
  }
];

All the data provided is imaginary , not exact data .

I am trying this for past 1 month , unable to get output,

need in reactjs with js or typescript with the format as pic attached (for reference) Output for above data format needed as shown in this screenshot.

Please do share answer if you know the solution, Thank You to whole helping community.

Answer

This code works for what you ask:

import React from 'react';
const Tab = () => {
const schoolTimings = [
{
schoolType: 'Primary School',
list: [
{
school: 'ABC',
day: 'Monday',
open: '08:00',
close: '12:30'
},
{
school: 'ABC',
day: 'Tuesday',
open: '08:00',
close: '12:30'
},
{
school: 'ABC',
day: 'Thursday',
open: '08:00',
close: '12:30'
},
{
school: 'ABC',
day: 'Friday',
open: '08:00',
close: '12:30'
},
{
school: 'ABC',
day: 'Saturday',
open: '08:00',
close: '12:30'
},
{
school: 'XYZ',
day: 'Monday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Tuesday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Wednesday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Thursday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Friday',
open: '08:00',
close: '12:00'
},
{
school: 'XYZ',
day: 'Saturday',
open: '08:00',
close: '12:00'
}
]
},
{
schoolType: 'Secondary School',
list: [
{
school: 'PQR',
day: 'Monday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Tuesday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Wednesday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Thursday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Friday',
open: '08:00',
close: '15:30'
},
{
school: 'PQR',
day: 'Saturday',
open: '08:00',
close: '15:30'
},
{
school: 'XYZ',
day: 'Monday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Tuesday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Wednesday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Thursday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Friday',
open: '08:00',
close: '17:00'
},
{
school: 'XYZ',
day: 'Saturday',
open: '08:00',
close: '17:00'
}
]
}
];
let table2 = <></>
for (let i = 0; i < schoolTimings.length; i++) {
table2 = <>{table2}
<tbody>
<tr>
<td colSpan="15"  style={{color: "blue", fontWeight: "bold"}}>  {schoolTimings[i].schoolType}  </td>
</tr>
</tbody>
</>;
let listSchool = []
for (let j = 0; j < schoolTimings[i].list.length; j++) {
if (listSchool.indexOf(schoolTimings[i].list[j].school) === -1) {
listSchool.push(schoolTimings[i].list[j].school)
}
}
for (let k = 0; k < listSchool.length; k++) {
let listValueSchool = {
School: listSchool[k],
Monday: {
open: '',
close: ''
},
Tuesday: {
open: '',
close: ''
}, Wednesday: {
open: '',
close: ''
}, Thursday: {
open: '',
close: ''
}, Friday: {
open: '',
close: ''
}, Saturday: {
open: '',
close: ''
}, Sunday: {
open: '',
close: ''
},
}
for (let j = 0; j < schoolTimings[i].list.length; j++) {
if (schoolTimings[i].list[j].school === listSchool[k]) {
switch (schoolTimings[i].list[j].day) {
case 'Monday':
listValueSchool.Monday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
case 'Tuesday':
listValueSchool.Tuesday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
case 'Wednesday':
listValueSchool.Wednesday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
case 'Thursday':
listValueSchool.Thursday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
case 'Friday':
listValueSchool.Friday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
case 'Saturday':
listValueSchool.Saturday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
case 'Sunday':
listValueSchool.Sunday = {
open: schoolTimings[i].list[j].open,
close: schoolTimings[i].list[j].close
}
break;
default:
break;
}
}
}
table2 = <>{table2}
<tbody>
<tr>
<td>{listValueSchool.School}</td>
<td>{listValueSchool.Sunday.open}</td>
<td>{listValueSchool.Sunday.close}</td>
<td>{listValueSchool.Monday.open}</td>
<td>{listValueSchool.Monday.close}</td>
<td>{listValueSchool.Tuesday.open}</td>
<td>{listValueSchool.Tuesday.close}</td>
<td>{listValueSchool.Wednesday.open}</td>
<td>{listValueSchool.Wednesday.close}</td>
<td>{listValueSchool.Thursday.open}</td>
<td>{listValueSchool.Thursday.close}</td>
<td>{listValueSchool.Friday.open}</td>
<td>{listValueSchool.Friday.close}</td>
<td>{listValueSchool.Saturday.open}</td>
<td>{listValueSchool.Saturday.close}</td>
</tr>
</tbody>
</>;
}
}
return (
<table>
<thead>
<tr>
<th colSpan="1" style={{color: "purple"}}>Day</th>
<th colSpan="2" style={{color: "purple"}}>Sunday</th>
<th colSpan="2" style={{color: "purple"}}>Monday</th>
<th colSpan="2" style={{color: "purple"}}>Tuesday</th>
<th colSpan="2" style={{color: "purple"}}>Wednesday</th>
<th colSpan="2" style={{color: "purple"}}>Thursday</th>
<th colSpan="2" style={{color: "purple"}}>Friday</th>
<th colSpan="2" style={{color: "purple"}}>Saturday</th>
</tr>
</thead>
<tbody>
<tr>
<td colSpan="1">School</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
<td colSpan="1">Open</td>
<td colSpan="1">Close</td>
</tr>
</tbody>
{table2}
</table>
);
}
export default Tab;