Как я могу обновить данные в таблице сведений, не теряя выбор диапазона и фильтры?

Question

У меня последняя версия таблицы React agGrid с сеткой Master / Detail. Мои данные извлекаются на клиенте каждые 5 секунд, а затем помещаются в хранилище избыточных данных. Компонент React Grid использует deltaRowDataMode={true} props и deltaRowDataMode: true в параметрах Detail.

Моя основная сетка работает нормально, как и ожидалось: если я выбрал диапазон, сетка сохранит выбор после обновления данных, так что фильтры и меню видимости все еще будет открыто. Но детализированная сетка ведет себя по-разному: при обновлении данных sh выборки удаляются, меню видимости закрывается и скачки сетки при изменении фильтров.

В документах я читал, что когда я открываю детальную сетку, она создается из ну, но в моем случае я не закрываю детали. Везде, где я пробовал флаг keepDetailRows=true, это решало проблемы с переходом при обновлении и потере выбора, но детальная сетка теперь не обновляет данные.

Answer 1

Кажется, есть только два возможных варианта в соответствии с документами https://www.ag-grid.com/javascript-grid-master-detail/#changing -data-refre sh. Первая - это таблица подробностей redr aws каждый раз, когда данные в главной строке изменяются, а вторая - строка подробностей, которая вообще не изменяется, если включен флаг suppressRefre sh. Странное решение, ужасное поведение ...

Обновление.

Привет еще раз. Я нашел пару решений.

Первый - использовать detailCellRendererParams в параметрах таблицы и установить для suppressRefre sh значение true. Это дает возможность использовать getDetailGridInfo для получения таблицы детализации api. Пока обновление таблицы подробностей отключено, использование detailGridInfo позволяет установить новый data для таблицы подробностей.

useEffect(() => {
    const api = gridApiRef;
    api && api.forEachNode(node => {
      const { detailNode, expanded } = node;
      if (detailNode && expanded) {
        const detailGridInfo = api.getDetailGridInfo(detailNode.id);
        const rowData = detailNode.data.someData; // your nested data

        if (detailGridInfo) {
          detailGridInfo.api.setRowData(rowData);
        }
      }
    });
}, [results]);

Второй способ - использовать пользовательский cellRenderer, в противном случае гораздо более гибкий и позволяет использовать любой контент внутри cellRenderer. В параметрах таблицы установите detailCellRenderer: 'yourCustomCellRendereForDetailTable. В yourCustomCellRendereForDetailTable вы можете использовать

this.state = {
    rowData: [],
}

У каждого cellRenderer есть метод refre sh, который можно использовать следующим образом.

  refresh(params) {
    const newData = [ ...params.data.yourSomeData];
    const oldData = this.state.rowData;

    if (newData.length !== oldData.length) {
      this.setState({
        rowData: newData,
      });
    }

    if (newData.length === oldData.length) {
      if (newData.some((elem, index) => {
        return !isEqual(elem, oldData[index]);
      })) {
        this.setState({
          rowData: newData,
        });
      }
   }

    return true;
  }

Использование метода refresh таким образом дает полностью настраиваемый подход использования detailCellRenderer.

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