компонент таблицы данных реакции с вложенными таблицами - PullRequest
Новая
       48

компонент таблицы данных реакции с вложенными таблицами

0 голосов
/ 08 января 2020

Я использую компонент response-data-table-component на странице узел / реакция. У меня есть 2 набора данных, List и ListNested.

list - это наборы данных документа (xlsm, чтобы быть специфицированными c), которые имеют самую последнюю версию документа в каждой строке .

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}
  />;

документация [Здесь] не дает четкого определения этого типа вложенности. Я попытался использовать атрибут doc_name в качестве keyField, но он не работает должным образом. Вложенные данные отображаются в родительской таблице, а не во вложенной таблице, но заголовки вложенной таблицы действительно отображаются во вложенной строке.

На рисунке ниже строки 2 и 3 взяты из данных listNested установлен в ExpandableComponent и должен быть вложен в строку 1. однако строка 1 показывает пустой набор данных (обведено).

enter image description here

Я подтвердил в обоих списках есть данные, которые мне нужны, я просто застрял в том, как вставить второй список во вложенный раздел.

...