while header span with multiple heading sorting is not working kindly help me thanks in advance.

[Shoukathsandy]

Guidelines

• Please include a demo of the issue/behavior/question you haveconst JobSummary = () => {

  const columns = [
  { title: "Approve", field: "approve", customSort: (a, b) => a.Approve.length - b.Approve.length },
  { title: "In Time", field: "inTime",customSort: (a, b) => a.inTime.length - b.inTime.length },
  { title: "In Date", field: "inDate" },
  { title: "Out Time", field: "outTime" },
  { title: "Out Date", field: "outDate" },
  {title:"Action",field:"action"}

  ];
  
  const data = [
    {
      approve: "ABC",
      inTime: "10:AM",
      inDate: "14/10/19",
      outTime: "5:PM",
      outDate: "14/10/19",
      action: "Pending"
    },
    {
      approve: "DAT",
      inTime: "10:AM",
      inDate: "14/10/19",
      outTime: "5:PM",
      outDate: "14/10/19",
      action: "Pending"
    }
  ];
  

  const headercell =
  { Header: props => {
  return (
  
  
  <TableCell style={{border:"1px solid black"}} rowSpan={2}>Host
  <TableCell style={{border:"1px solid black"}} colSpan={3} align="center">
  MTD
  
  <TableCell style={{border:"1px solid black"}} colSpan={3} align="center">
  Yesterday
  
  <TableCell style={{border:"1px solid black"}} colSpan={3} align="center">
  Today
  
  
  
  <TableCell style={{border:"1px solid black"}} sorting={true} align="center">Completed
  <TableCell style={{border:"1px solid black"}} align="center">Total Time
  <TableCell style={{border:"1px solid black"}} align="center">Average
  <TableCell style={{border:"1px solid black"}} align="center">Completed
  <TableCell style={{border:"1px solid black"}} align="center">Total Time
  <TableCell style={{border:"1px solid black"}} align="center">Average
  <TableCell style={{border:"1px solid black"}} align="center">Completed
  <TableCell style={{border:"1px solid black"}} align="center">Total Time
  <TableCell style={{border:"1px solid black"}} align="center">Average

    </TableRow>
  </TableHead>
  

  );
  },
  Row: ({ data }) => {
  return (
  
  <TableCell style={{border:"1px solid black"}} >{data.approve}
  <TableCell style={{border:"1px solid black"}} align="center">{data.inTime}
  <TableCell style={{border:"1px solid black"}} align="center">{data.inDate}
  <TableCell style={{border:"1px solid black"}} align="center">{data.outTime}
  <TableCell style={{border:"1px solid black"}} align="center">{data.outDate}
  <TableCell style={{border:"1px solid black"}} align="center">{data.action}
  
  );
  }}
  return (
  <>
  Job Summary
  <MaterialTable title={"Job Summary"} data={data} columns={columns}
  components={headercell} options={{columnsButton: true,sorting:true, filtering:true, thirdSortClick: true,}}
  />
  </>

• Please try to be as detailed as possible

• You may fork one of the following starter templates if you would like:

  • CodeSandbox

  • StackBlitz

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.