Резюме аккордеона пользовательского интерфейса материала

Question

У меня очень специфический случай отображения количества выбранных элементов в моем Material UI - Accordion Summary: Следующее должно быть поведение:

When a User click on the Header Checkbox it should select All the Item in that Panel and then shows the Count of those Items as X Selected

Right Now I am able to do the following :

{stableSort (value, getComparator (order, orderBy)) .slice (page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map ((row, index) => {const isItemSelected = isSelectedID (row.id); const isItemSelected = isSelectedID (row.id); labelId = `extended-table-checkbox - $ {index}`; return ( handleClick (event, row.first_name + "" + row.last_name, row.id)} role = "checkbox" aria-checked = {isItemSelected} tabIndex = {- 1} key = {row.id} selected = {isItemSelected} > {row.first_name + "" + row.last_name} {row.email} ); })} ); }): undefined}

EnhancedTableToolbar

 const EnhancedTableToolbar = (props) => {
  const classes = useToolbarStyles();
  const { numSelected, name, values } = props;

  return (
    <Toolbar
      className={clsx(classes.root)}
    >
      {numSelected > 0 ? (
        <>
          <EnhancedTableHead
              classes={classes}
              numSelected={selected.length}
              onSelectAllClick={(event) => handleSelectAllClick(event,values)}
              rowCount={values.length}
              label={name}
          />
          <Typography   component="div">
            {numSelected} selected
          </Typography>
        </>
      ) : (
        <EnhancedTableHead
              classes={classes}
              numSelected={selected.length}
              onSelectAllClick={(event) => handleSelectAllClick(event,values)}
              rowCount={values.length}
              label={name}
        />
      )}
    </Toolbar>
  );
};

handleSelectAllClick

const handleSelectAllClick = (event, val) => {
    if (event.target.checked) {
      const newSelectedsID = val.map((n) => n.id);
      const newSelecteds = val.map((n) => n.first_name + " " + n.last_name);
      console.log(newSelecteds);
      console.log(newSelectedsID);
      setSelectedID(newSelectedsID);
      setSelected(newSelecteds);
      return;
    }
    setSelected([]);
    setSelectedID([]);
};

Пожалуйста, помогите мне пройти через это. Спасибо