To achieve a responsive table, I utilized a unique method by passing a reference to the main table's TableHead's first TableRow, which typically contains column names. This ref was then passed as a prop in the expanded row's Table component, allowing me to use both colgroup and getBoundingClientRect().width from the ref's children. The dynamic adjustment of column widths in the expanded rows table based on the main table's columns was successfully implemented with this approach. Below is a sample code snippet that demonstrates this technique:

const MainTableComp = () => {
  ...
  const ref = useRef(null);
  ...
  return <TableContainer>
    <Table>
      <TableHead>
        <TableRow ref={ref}>
          <TableCell>Order Ids</TableCell>
          ...
            <ExpandedRow mainTableEl={ref}>
            ...
};

const ExpandedRow = ({ mainTableEl }) => {
  ...
  const [colWidths, setColWidths] = useState([]);
  ...
  useEffect(() => {
    setColWidths(
      Array.from(tableEl.current?.children || []).map(c => {
        return c.getBoundingClientRect().width
      })
    )
  }, [tableEl.current?.children[0].getBoundingClientRect()]); // if one column's width changes, the rest's, and 0's, would be too

  return <Fragment>
    ...
      <Collapse in={open} timeout="auto" unmountOnExit>
        <Table>
          <colgroup>
            {
              colWidths.map((cW, idx) => {
                return <col key={idx} style={{ width: cW }}></col>
              })
            }
          </colgroup>
          ...

};

Encountered a similar issue that required creating an 'invisible' header for the subitems and dynamically adjusting column widths. The solution that worked for me is as follows:

useLayoutEffect(() => {
  if (openedItem) {
    const hardcodeWidths = () => {
      const headers = Array.from(document.getElementsByClassName('headerCell'));
      const subTableParentRow = document.getElementsByClassName(`expandable_${openedItem}`)[0];
      const subTableColumns = subTableParentRow.getElementsByClassName('subTableColumn');
      headers.forEach((header, i) => {
        (subTableColumns[i] as HTMLElement).style.width = `${header.clientWidth}px`;
      });
    }
    
    hardcodeWidths();
    addEventListener('resize', hardcodeWidths);
    return () => {
      removeEventListener('resize', hardcodeWidths);
    }
  }
}, [openedItem])

<Table sx={{ minWidth: 650 }} aria-label="Talaria table" >
  <TableHead className={style.tableHead}>
    <TableRow>
      {props.hasStickyFirstRow && <TableCell />}
      {props.headers.cells.map((cell, index) => (
        <TableCell className='headerCell' align="center" key={index}>{cell.displayValue}</TableCell>  
      ))}
      {props.hasStickyFirstRow && <TableCell />}
    </TableRow>

    {props.hasStickyFirstRow &&
      <TableRow className={style.stickyHeader}>
        <TableCell> <LockedProtected className={style.tableLockIcon}/> </TableCell>
        {props.headers.cells.map((cell, index) => (
          <TableCell align="center" key={index}>
            {props.selectedStickyRow[cell.key]}
          </TableCell>
        ))}
        <TableCell/>
      </TableRow>
    }
  </TableHead>
  <TableBody>
    {(rowsPerPage > 0
      ? props.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
      : props.rows
    ).map((row) => {
      return(
        <>
          <TableRow
            key={row[props.uniqueElement]}
            sx={{
              '&:last-child td, &:last-child th': { border: 0 },
              ...(!(props.hasStickyFirstRow) && {
              cursor: 'pointer',
              }),
            }}
            className={style.tableBody}
            onClick={props.canClickRow ? () => props.onRowClick(row) : undefined}
          >
            { props.hasStickyFirstRow && <TableCell>
              <IconButton
                aria-label="expand row"
                size="small"
                onClick={() => setOpenedItem(openedItem === row[props.uniqueElement] ? '' : row[props.uniqueElement] )}
              >
                {openedItem === row[props.uniqueElement] ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
              </IconButton>
            </TableCell>}
            {props.headers.cells.map((cell) => (
              <TableCell align="center">
                {row[cell.key]}
              </TableCell>
            ))}
            { props.hasStickyFirstRow && <TableCell>
              <Radio
                checked={row[props.uniqueElement] === props.selectedRadioRowId}
                onChange={() => props.setSelectedRadioRowId && props.setSelectedRadioRowId(row[props.uniqueElement])}
                // TODO: disabled  // Here will need to add a logic to be disabled or maybe  primary color or 'secondary' if the table is disabled
              />
            </TableCell>}
          </TableRow>
          { props.hasStickyFirstRow && <TableRow className={`expandable_${row[props.uniqueElement]}`}>
            {/* TODO: when BE comes with a data format please make sure to change the keys (also up) */}
            {/* Added this table cell for alignment purposes */}
            <TableCell key={'dummyStartCell'} style={{padding: 0}}/> 
            <TableCell style={{ padding: 0 }} colSpan={props.headers.cells.length}>
              <Collapse in={openedItem === row[props.uniqueElement]} timeout="auto" unmountOnExit>
                <Table >
                  <colgroup>
                    {props.headers.cells.map(() => (
                      <col className='subTableColumn' />
                    ))}
                  </colgroup>
                  <TableBody>
                    {row.rowDetails.map((rowDetails:any, key:string) => (
                      <TableRow key={key} className='subtableCell' sx={{ '&:last-child td, &:last-child th': { border: 0 } }} >
                        {props.headers.cells.map((cell, index) => (
                          <TableCell align="center" key={cell.key}>
                            {rowDetails[cell.key]}
                          </TableCell>
                        ))}
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </Collapse>
            </TableCell>
            {/* Added this table cell for alignment purposes */}
            <TableCell key={'dummyEndCell'} style={{padding: 0}}/> 
        </TableRow> }
      </>
    )})}
  </TableBody>
</Table>