Реагировать на таблицу с помощью хуков разворачивать и сворачивать строки

Question

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

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

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

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

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

Спасибо

Answer 1

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

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

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