react-data-table-component 与嵌套表答案

【问题标题】：react-data-table-component with nested tablesreact-data-table-component 与嵌套表
【发布时间】：2023-04-07 02:48:01
【问题描述】：

我在节点/反应页面中使用 react-data-table-component。我有 2 个数据集，List 和 ListNested。

list 是文档数据的集合（具体来说是 xlsm），每行都有文档的最新版本。

listNested 是一个类似的数据集，但包含list 中每条记录的所有先前版本（如果存在）。

我的父表定义为：

return(    
  <DataTable
    title="Documents"
    columns={columns}
    data={list}
    pagination={true}
    fixedHeader={true}
    keyField="document_id"
    striped={true}
    highlightOnHover={true}
    noDataComponent=<div className="loader">
      <Loader
        type="Oval"
        color="#005ea2"
        height={100}
        width={100} />
    </div>
    persistTableHead={true}
    defaultSortField="updated_at"
    defaultSortAsc={false}
    overflowY={true}

    expandableRows
    expandableRowDisabled={row => row.disabled}
    expandableRowsComponent={<ExpanableComponent />}

  />
);

我的 ExpandableComponent 定义为：

const ExpanableComponent = ({listNested}) =>
  <DataTable
    columns={columnsNested}
    data={listNested}
    pagination={true}
    fixedHeader={true}
    keyField="doc_name"
    striped={true}
    highlightOnHover={true}
    noDataComponent=<div>No previous versions of this document were found.</div>
    persistTableHead={true}
    defaultSortField="updated_at"
    defaultSortAsc={false}
    overflowY={true}
  />;

文档[Here] 没有明确定义这种类型的嵌套。我尝试使用doc_name 属性作为keyField，但它不能正常工作。嵌套数据显示在父表中而不是嵌套表中，但嵌套表标题确实显示在嵌套行中。

在下图中，第 2 行和第 3 行来自 ExpandableComponent 中的 listNested 数据集，应嵌套在第 1 行下方。但是，第 1 行显示一个空数据集（带圆圈）。

我验证了两个列表都有我想要的数据，我只是想知道如何将第二个列表粘贴到嵌套部分中。

【问题讨论】：

你有遮阳篷吗？
@AndersonSilva 很奇怪，如果您将 {data} 作为可扩展组件中的第一个参数，您将获得行数据，所以它对我有用。

标签： node.js reactjs xlsm nested-table react-data-table-component

【解决方案1】：

要完成这项工作，您必须准确调用您的道具 data，而不是 listNested，如下所示：

const ExpanableComponent = ({data, ...props}) =>
  <DataTable data={data} {...props}/>

顺便说一句，它甚至可以将自己称为expandableRowsComponent。

export default function MyDataTable({data, ...props}) {
    return <Datatable 
        expandableRows
        expandableRowsComponent={<MyDataTable className="ml-3"/>}
        noTableHead={!!data}
        noHeader={!!data}
        {...props}
    />
}

要使用这个组件，你不必使用 prop data。后面的两个 props 表明如果数据是 undefined（因为 [] 仍然是真实的），那么表格不会显示任何内容。

【讨论】：

【解决方案2】：

我在可扩展组件的 props 中添加了 {data} 参数作为第一个参数，它对我有用。

【讨论】：