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

У меня есть панель столбцов для добавления / удаления столбцов из 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

javascript ag-grid-react ag-grid ag-grid-angular ag-grid-validation
person kashif    schedule 12.02.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете реализовать 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();
    }
}
person msfoster    schedule 12.02.2020