Material UI Table row 在该行下打开一个 Drawer答案

【问题标题】：Material UI Table row to open a Drawer under the rowMaterial UI Table row 在该行下打开一个 Drawer
【发布时间】：2021-12-20 22:17:18
【问题描述】：

我正在使用 Material UI（版本 5.0.6）创建一个表格。我想要它，以便在单击表格上的一行时，在该行下方打开一个抽屉以显示更多信息。

我能够让它识别点击了哪一行，但我不知道如何在点击的行下方打开一个抽屉。

以下是我正在尝试做的事情的简要说明：

这是表格，点击后应该会发生什么，比如说第 2 行。

这是我目前编写的代码：

<Table>
                        <TableHead>
                            <TableRow>
                                <TableCell>column 1</TableCell>
                                <TableCell>column 2</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            <TableRow onClick={() => {console.log("row clicked")}}>
                                    <TableCell align="center">
                                        row 1, column 1
                                    </TableCell>
                                    <TableCell align="center">
                                        row 1, column 2
                                    </TableCell>
                              </TableRow>
                        </TableBody>
</Table>

【问题讨论】：

标签： html reactjs material-ui

【解决方案1】：

有一个来自 MUI 5 的 Collapse 组件，他们在 Table 组件 here 的文档中也有一个示例

【讨论】：