React Redux Material-ui - 使用可编辑单元格制作表格

Question

我对 material-ui 相当陌生，我想我的问题可能有一个简单的答案，但我只是想获得一些反馈。我想做的是呈现一个只有列标题的表（从存储在数据库中的数据填充）。此时应该没有行。理想情况下，我希望有一个可点击的按钮，可以添加一行（与列标题具有相同数量的单元格），然后可以将数据输入并保存到数据库中。我假设我可以添加 onCellClick 属性，以便将数据输入到 material-ui 表的单元格中，但我最大的问题是生成行的最佳方法是什么？以前我只是通过将一个对象推入一个空数组来做类似的事情，但我想知道是否有更清洁的方法来做到这一点？特别是考虑到我决定使用 React 和 Redux 构建它的主要原因之一是尽量避免做这样的事情！

无论如何，感谢您的宝贵时间，如果您能给我展示一个更好的方法示例，我将不胜感激！

Answer 1

您可以使用 Material-UI 的 Table 标签通过使用可编辑的组件（下拉菜单、文本字段等）填充表格的单元格来做到这一点。但是，我已经停止将它用于更大的数据集，因为它性能不佳。相反，我使用ReactDataGrid。使用 Material-UI 让 CSS 看起来不错有点棘手，但它的性能要好得多。我使用 Material-UI 组件填充 ReactDataGrid 中的单元格，就像使用 Material-UI 的表格一样。