how to display grouped header in muidatatable in react js - reactjs

Question

enter image description here
as shown in the above image i want to display it in a muidatatable with grouped header
i tried this below code but i didn't get proper table with grouped header it shows only the headers not to the grouped headers
const columns=[
{
name: 'Name',
headerCellProps: {
style: {
textAlign: 'center',
border: 0,
background: blue[500],
},
},
columns: [
{
name: 'firstName',
header: 'First Name',
},
{
name: 'lastName',
header: 'Last Name',
},
],
},
{
name: 'age',
header: 'Age',
headerCellProps: {
style: {
background: orange[500],
},
},
},
{
name: 'Job',
headerCellProps: {
style: { textAlign: 'center', border: 0, background: purple[500] },
},
columns: [
{
name: 'jobTitle',
header: 'Title',
},
{
name: 'jobArea',
header: 'Area',
},
],
},
]

Answer 1

const columns = [
{
name: 'Health & Safety',
// label:'Manual Handling',
options: {
filter: true,
customHeadRender: (tableMeta,value) =>
(<>
<th className={classes.thhead} >
<th className={classes.thsubhead} >
<span className={classes.headSpan} >Health & Safety</span>
{EMP.filter( item => item.TrainingCategory === 'Health & Safety').map((EMPLOYE)=>{
return(
<th style={{border:"0px",paddingLeft:"0px",paddingTop:"0px",paddingBottom:"0px"}} >
{/* <span className={classes.headSpan} >Health & Safety</span> */}
<th className={classes.headvalueOne} >
{EMPLOYE.TrainingName}
</th>
</th>
)
})
}
</th>
</th>
</>),
customBodyRender: (value) => (
<td className={classes.tdHead}>
<td className={classes.tdsubHead} >
{ EMP?
EMP.map((EMPLOYE)=>{
return(
<td className={classes.TablevalueOne} >{EMPLOYE.JobTitileNumber}</td>
)
}):null}
</td>
</td>
),
}
},
},
];