将行特定的数据传递给expandableRowsComponent

Question

我已经使用react数据表组件创建了一个表，现在我想使表行可以展开，这样当我展开一行时，它会显示特定于该行的详细信息，就像Material UI Collapsible一样。

我阅读了react-data-table-component API文档，通过将expandableRows设置为true并将组件分配给expandableRowsComponent，可以具有可扩展的行。但是我如何将数据传递给expandableRowsComponent，以便如果我扩展行1；这是行1〃；，对于第2排；这是第2行"；等等…

如有任何帮助或指导，我们将不胜感激。谢谢

Answer 1

我浏览了react数据表组件作者的github代码，在这些故事中，我找到了相关的代码，这些代码有助于我准确地找到我想要的东西！如果有人感兴趣，下面是示例代码链接：DataTable

Answer 2

数据对象将在每行的props中自动传递。

例如：

<DataTable data={yourData} columns={yourColumns} expandableRows={true} keyField="yourId" expandableRowsComponent={ExpandableComponent} />

您的可扩展组件将在道具内接收行数据

const ExpandableComponent = props => <div>{props?.data?.title}</div>