如何将展开的行数据与材质 UI 的可折叠表中主表的列对齐

Question

我有一个功能，当用户单击展开图标时，行将展开。我想将扩展的行数据与主表的列对齐，我正在使用 Material UI 的可折叠表组件来执行此操作！

如何在 HTML/CSS 中实现此功能？

我创建了一个例子，以更清楚地描述问题！这是codesandbox的链接：

https://codesandbox.io/s/heuristic-allen-im8tj9?file=/src/App.js

正如您所看到的，嵌套行（扩展行）字段未与其父列对齐！如何将它们与其父列正确对齐？

我想做这样的事情

任何建议/帮助将不胜感激，谢谢！

Answer 1

有同样的问题。解决此问题的唯一方法是为子项创建一个“不可见”标题并动态设置列的宽度。对我来说，工作代码如下所示：

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>