React Table с помощью хуков расширяет и сворачивает строки

avatar
Vivek V Nair
18 марта 2020 в 13:17
16796
1
3

Я использую компонент таблицы реакций внутри своего проекта. Свойство расширения строк использовалось в моих функциях, и теперь оно работает нормально.

Мне нужна возможность свернуть все строки, пока я расширяю строку. т.е. одновременно должна быть открыта только одна строка. Я просмотрел много документации и ссылок coderhelper, но ни одна из них не сработала. Обратите внимание, что в этой реализации используются хуки. Так же, как упомянутый здесь: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/expanding

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

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

Но здесь он открывается при начальной загрузке.

Спасибо

Источник

Ответы (1)

avatar
Niyas Nazar
18 марта 2020 в 16:12
6

Я добавил здесь только часть функции App. Codesandbox: https://codesandbox.io/s/jolly-payne-dxs1d?fontsize=14&hidenavigation=1&theme=dark.

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

Cell: ({ row, rows, toggleRowExpanded }) =>
          // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
          // to build the toggle for expanding a row
          row.canExpand ? (
            <span
              {...row.getToggleRowExpandedProps({
                style: {
                  // We can even use the row.depth property
                  // and paddingLeft to indicate the depth
                  // of the row
                  paddingLeft: `${row.depth * 2}rem`
                },
                onClick: () => {
                  const expandedRow = rows.find(row => row.isExpanded);

                  if (expandedRow) {
                    const isSubItemOfRow = Boolean(
                      expandedRow && row.id.split(".")[0] === expandedRow.id
                    );

                    if (isSubItemOfRow) {
                      const expandedSubItem = expandedRow.subRows.find(
                        subRow => subRow.isExpanded
                      );

                      if (expandedSubItem) {
                        const isClickedOnExpandedSubItem =
                          expandedSubItem.id === row.id;
                        if (!isClickedOnExpandedSubItem) {
                          toggleRowExpanded(expandedSubItem.id, false);
                        }
                      }
                    } else {
                      toggleRowExpanded(expandedRow.id, false);
                    }
                  }
                  row.toggleRowExpanded();
                }
              })}
            >
              {row.isExpanded ? "????" : "????"}
            </span>
          ) : null
Vivek V Nair
20 марта 2020 в 03:42
0

Спасибо, приятель .. не тот, который мне нужен, но это определенно работает :)