Ag-Grid: регулировка ширины столбцов и отображение горизонтальной полосы прокрутки, когда столбцы превышают размер контейнера

Question

У меня есть панель столбцов для добавления / удаления столбцов из AG-Grid. Всего около 50 столбцов, по умолчанию 5 отображаются со свойством api.sizeColumnsToFit(). он работает нормально, но проблема возникает, когда пользователь пытается добавить больше столбцов, а столбцы выходят за пределы контейнера. он пытается уместиться в размер контейнера и напортачил.

если я удалил api.sizeColumnsToFit(), когда пользователь удалит все столбцы и оставит только 2-3 столбца, он будет соответствовать размеру, но показывает пустое пространство в сетке, что выглядит не очень хорошо.

Любая идея, как я могу условно настроить ag-grid для правильной работы следующим образом:

if columns_are_less_than_container_size
  api.sizeColumnsToFit()
else
  Do NOT apply sizeColumnsToFit
  rather show a horizontal scroll

Answer 1

Вы можете реализовать onDisplayedColumnsChanged и рассчитываем на основе ширины родительского элемента.

Вместо того getActualWidth вы можете определить минимальную ширину и использовать getMinWidth.

onDisplayedColumnsChanged(params) {
    const gridWidth = document.getElementById("parent").offsetWidth;
    const widthVisibleColumns = params.columnApi.getAllColumns()
      .filter(c => c.isVisible())
      .map(c => c.getActualWidth())
      .reduce((a, b) => a + b);
    if (gridWidth > widthVisibleColumns) {
      params.api.sizeColumnsToFit();
    }
}