Блог

Главная - Вопросы по программированию - Как изначально автоматически развернуть все строки с помощью react-таблицы 7?

Как изначально автоматически развернуть все строки с помощью react-таблицы 7?

#reactjs #typescript #react-table #react-table-v7

Вопрос:

Я ищу простой и понятный способ автоматического расширения всех строк при использовании react-таблицы v7.

Когда я сопоставляю все данные true и устанавливаю их в качестве начального состояния, они не расширяют мои строки.

 const expanded = {
  1: true,
  2: true,
  ...
};

...

useTable(
  {
    ...
    initialState: {
      expanded
    }
  }
);

Сбросив expanded опору состояния таблицы, я обнаружил, что существуют сгенерированные нечисловые ключи, такие как {Col1:somevalue2: true} (сгруппированные столбцы). У меня нет доступа к этим ключам до создания экземпляра таблицы, и поэтому у меня также нет доступа к идентификаторам строк для создания начального состояния.

Единственный способ, который я нашел, приведен ниже, но я бы предпочел, чтобы табличный экземпляр был расширен изначально (в результате useTable() крючка).

 React.useEffect(() => tableInstance.toggleAllRowsExpanded(true), []);

Соответствующее обсуждение на Github: https://github.com/tannerlinsley/react-table/discussions/3317

Ответ №1:

То, что вы написали, имеет интуитивный смысл, основанный на том, что говорится в документации, но в нем отсутствует ключевой элемент. Вы должны сообщить initialState, что ваш «расширенный» объект привязан к свойству «расширенный», вот так:

   const initialExpanded = React.useMemo(() => {
    return {
      "expanded": {
        "0": true,
        "4": true
      }
  }}, [])
  const { /* ... */ } = useTable({
    initialState: { initialExpanded }, 
    /* etc */
  });

Комментарии:

1. Я не вижу, чем это отличается от моего примера, а также как он расширяет сгруппированные строки?

2. @simPod В вашем объекте отсутствует «расширенная» часть. { "1": true } против { "expanded": { "1": true } } в принципе. Что касается сгруппированных строк, вы должны включить их явно-поэтому вам нужно «1», а также «1.1» и «1.2» и т. Д

3. расширенная часть находится прямо здесь: initialState: { expanded } . И дело в том, что я действительно не знаю идентификаторов сгруппированных строк и не хочу создавать алгоритм для их поиска. Я бы ожидал, что у react-table уже будет такой, и он сделает это за меня.

4. Мои извинения, я, по-видимому, полностью пропустил эту часть вашего ответа? В любом случае, если вы не можете предварительно сгенерировать идентификаторы на основе ваших данных, то я не знаю ни одного метода или объекта, который предоставляет react-table, который позволяет вам предварительно настроить все строки для переключения. Я думаю, что вы уже используете оптимальное решение: крючки. Это довольно элегантное решение, если, конечно, нет задержки во времени рендеринга или чего-то в этом роде, я думаю.

5. Да, к сожалению, это своего рода грязный обходной путь. Таблица мигает, и это не оптимально с точки зрения количества повторных отправлений. Как вы сказали, похоже, что до сих пор нет подходящего способа. В любом случае, спасибо.

Метки: