Создать вложенную таблицу с помощью react-table v7

Заранее благодарны за Вашу помощь.

Проблема, которую я пытаюсь решить, состоит в том, чтобы создать таблицу с реактивной таблицей v7 и внутри этой таблицы, используя развернуть и отобразить другую таблицу с данными, относящимися к первому выбору, как они прикреплены к изображению.

введите описание изображения здесь

Это пример изображения codeandbox, я хочу сделать то же самое но, используя самую последнюю версию response-table, я пробовал использовать подкомпоненты, но они показывают мне только данные, а не заголовки, которые у них есть, поэтому я не могу выполнить заказ, поиск в подтаблице

Я попытался отобразить просто еще один экземпляр таблицы реакции внутри подкомпонента, но похоже, что он всегда остается в первом столбце:

введите описание изображения здесь

Есть ли у кого-нибудь пример, похожий на тот, что показан на эталонном изображении, который может мне помочь?


person Cristian Turcios    schedule 12.03.2021    source источник


Ответы (1)


Поскольку в response-table v7 нет головы, вы действительно можете сделать это разными способами. Как минимум, вам нужен способ контролировать, какая строка открыта, и чтобы эта строка отображала свое содержимое как подстроку. Я разветвил базовую таблицу react-table v7. пример в качестве примера. Вот основные изменения, которые я внес, которые вы можете применить к своему собственному варианту использования:

  • Чтобы контролировать, какая строка была открыта, была создана переменная состояния с именем open, которая соответствует идентификатору строки, содержимое которой отображается (или false, если его нет). Существует бесконечно много способов реализовать такую ​​логику, и она не обязательно должна контролироваться родительским компонентом Table. Если каждая из ваших строк является компонентом, например, они могут отслеживать свое открытое состояние.
  • Затем субкомпонент был добавлен в качестве дочернего элемента родительской таблицы, которая передает его в качестве свойства, называемого дочерними элементами. Затем он отображается в отдельной строке, условно на основе указанной выше переменной открытого состояния. Здесь он был обработан исключительно как {children}, но для более сложных случаев использования можно использовать React.cloneElement или аналогичный, если вы передаете данные от родителя к подкомпоненту таблицы.
person toki    schedule 06.04.2021