'How to use group table material ui in reactjs?

I use table material UI and

useEffect(() => {
    if (props.grouping){
      const { groupProperty, rows } = props;
      const groups = props.rows.reduce((acc, row) => {
        acc[row[groupProperty]] = acc[row[groupProperty]] || [];
        acc[row[groupProperty]].push(row);\
        return acc;
      }, {});

      setGroups(groups)
      const keys = Object.keys(groups);
      setDataGroup(keys)
    }

  }, [props.rows,props.schema]);


 <TableBody>
        <>
        {props.grouping && (
         dataGroup.map(key => (
            <TableRow className={clsx(classes.row, props.rowClassName)}>
                    <TableCell colspan="5">
                    <CardActions disableActionSpacing>
                    <b>
              {key}
            </b>
            <IconButton
              className={expanded[key] ? classes.expandOpen : classes.expand}
              onClick={() => handleExpandClick(key)}
              aria-expanded={expanded[key]}
              aria-label="Show more"
            >
              <ExpandMoreIcon />
            </IconButton>
          </CardActions>
          <Collapse in={expanded[key]} timeout="auto" unmountOnExit>
         <MuiTable  {...other}>
              <TableBody>
                {groups[key].map(row => (
                  <TableRow >
                    <TableCell  >{row.wageTitle}</TableCell>
                    <TableCell  numeric>{row.buy}</TableCell>
                    <TableCell  numeric>{row.sell}</TableCell>
                    <TableCell  numeric>{row.buyMaximum}</TableCell>
                    <TableCell numeric>{row.sellMaximum}</TableCell>
                  </TableRow>
                )
                )}
              </TableBody>
              </MuiTable>
          </Collapse>
                    </TableCell>
                    </TableRow>
         ))
                  )}

.....

<Table grouping={true} rows={tableData} className={classes.table} schema={schema} groupProperty="deductionTypeTitle"   ></Table>

I use this link How to group table in reactjs? ..But I want this grouping to be based on two data like this: https://codesandbox.io/s/l9ijbc?file=/demo.js Someone can help me



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source