React-Table: Как сделать так, чтобы флажки из одной таблицы влияли на флажки из другой таблицы - PullRequest
Новая
       24

React-Table: Как сделать так, чтобы флажки из одной таблицы влияли на флажки из другой таблицы

0 голосов
/ 29 апреля 2020

Я использую react-table с Typescript, и у меня есть два экземпляра таблицы.

Мне интересно, как получить флажок выбора , работающий с этой настройкой.

Мои данные настроены так: 

[
 {
  id: 1
  name: parentTable1
  // various parent table columns...
  children: [
  {
      id: 2
      name: childTable1
      // various child table columns different from the parent...
  },
  {
      id: 3
      name: childTable2
  },
  // more child tables
  ]
 },
 {
  id: 4
  name: parentTable2

  children: [
  {
      id: 5
      name: childTable3
  },
  {
      id: 6
      name: childTable4
  },
  // more child tables
  ]
 },
 // more parent tables
]

Один экземпляр таблицы содержит все данные родительской таблицы. Другой экземпляр таблицы с разными столбцами содержит данные дочерней таблицы. У каждой строки в обеих таблицах есть флажок: если вы отметите все флажки в дочерней таблице для данного родителя, для строки этой таблицы с соответствующим родителем будет установлен флажок автоматически. Если у вас установлены некоторые, но не все детские флажки для данного родителя, тогда этот флажок помещается в неопределенное состояние - как в примерах Таннера.

Но в примерах Таннер имеет ( например 1 , ex 2 ), он работает с одним экземпляром таблицы, и все его флажки существуют в одном столбце. Я работаю с двумя экземплярами таблицы, и я хотел бы, чтобы одна таблица была «родительской» таблицей с флажком getToggleAllRowsSelectedProps, а другая таблица - «дочерней» с флажками, которые имеют getToggleRowSelectedProps.

Я думал о том, чтобы передать экземпляр родительской таблицы дочернему элементу в качестве реквизита, но, к сожалению, каждый элемент в свойстве rows переданного экземпляра таблицы не имеет доступного getToggleRowSelectedProps. Мне интересно, возможна ли эта настройка даже с помощью таблицы реакции?

...