Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

120
Views
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

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!