如何在反应js中的muidatatable中显示分组header
how to display grouped header in muidatatable in react js
enter image description here
如上图所示,我想将其显示在 muidatatable 中,并分组 header
我尝试了下面的代码,但我没有得到正确的 table 分组 header 它只显示 headers 而不是分组的 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',
},
],
},
]
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>
),
}
},
},
];
enter image description here
如上图所示,我想将其显示在 muidatatable 中,并分组 header
我尝试了下面的代码,但我没有得到正确的 table 分组 header 它只显示 headers 而不是分组的 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',
},
],
},
]
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>
),
}
},
},
];