react-data-table-component 与嵌套表

Posted 2023-02-22

【中文标题】react-data-table-component 与嵌套表

【英文标题】：react-data-table-component with nested tables

【发布时间】：2020-04-26 06:26:21

【问题描述】：

我在节点/反应页面中使用 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 作为可扩展组件中的第一个参数，您将获得行数据，所以它对我有用。

【参考方案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 参数作为第一个参数，它对我有用。