带有嵌套表的react-data-table-component

Question

我在一个node/react页面中使用了react-data-table-component。我有两个数据集，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行显示了一个空数据集(带圆圈)。

​

​

我验证了两个列表都有我想要的数据，我只是被困在如何将第二个列表放入嵌套部分。

Answer 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。后两个支柱表明，如果数据为undefined (因为[]仍然为真)，则表不会显示任何内容。

Answer 2

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