Автовысота Ag-grid и фиксированный заголовок

Вопрос или проблема

const agheader: HTMLElement = document.querySelector('.ag-header')!;
agheader!.style.position = 'fixed';
agheader!.style.top = '0';
agheader!.style.zIndex = '100';

  <div style="padding: 2rem">
    <div>
      <ag-grid-angular
        class="ag-theme-quartz"
        style="height: 500px;"
        [gridOptions]="gridOptions"
        [rowData]="rowData"
        (gridReady)="onGridReady($event)"
      />
    </div>
  </div>

Ответ или решение

Чтобы установить фиксированный заголовок для грида Ag-Grid с использованием параметра domLayout: 'autoHeight', существует несколько важных моментов, которые необходимо учесть, особенно после добавления отступов, которые могут нарушить выравнивание заголовка и тела таблицы.

Шаги для достижения фиксированного заголовка и правильного выравнивания:

1. Обновите стили заголовка: Чтобы заголовок фиксировался на верхней части контейнера с учетом отступов, вам нужно немного изменить CSS для заголовка. Актуально будет выставить стиль left в зависимости от отступов.

2. Добавьте слушатель событий для обновления позиции заголовка: Это необходимо в случае изменения размеров окна или изменения размера грида.

Пример кода

Вот модифицированный код, который должен решить вашу проблему:

<div style="padding: 2rem">
  <div>
    <ag-grid-angular
      class="ag-theme-quartz"
      style="height: 500px;"
      [gridOptions]="gridOptions"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    />
  </div>
</div>

JavaScript (TypeScript)

onGridReady(params) {
  this.gridOptions.api = params.api;

  // Настройка фиксированного заголовка
  const agHeader: HTMLElement = document.querySelector('.ag-header')!;
  this.setFixedHeader(agHeader);

  // Обновление позиции заголовка при изменении размера
  window.addEventListener('resize', () => {
    this.setFixedHeader(agHeader);
  });
}

setFixedHeader(agHeader: HTMLElement): void {
  const container = document.querySelector('.ag-grid-container') as HTMLElement; // Предполагаем, что вы обернули Ag-Grid в этот контейнер
  const padding = '2rem'; // Отступ, который вы добавили

  agHeader.style.position = 'fixed';
  agHeader.style.top = '0';
  agHeader.style.left = `${container.getBoundingClientRect().left + parseFloat(padding)}px`;
  agHeader.style.zIndex = '100';
}

CSS

.ag-header {
  background-color: white; /* Убедитесь, что фон заголовка совпадает с фоном контейнера */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Опционально, тень для выделения заголовка */
}

Объяснение:

1. Фиксированное позиционирование и выравнивание: Устанавливая свойство left, вы выравниваете заголовок с учетом отступа. Это предотвращает смещение заголовка при горизонтальной прокрутке.

2. Слушатель событий: Изменение размеров окна может повлиять на положение заголовка, поэтому важно обновлять положение заголовка при изменении размеров окна.

3. CSS стили: Не забудьте, что фон заголовка должен совпадать с фоном контейнера, чтобы избежать визуальных артефактов.

С помощью этих изменений ваша таблица Ag-Grid должна иметь фиксированный заголовок, который будет правильно выровнен с телом таблицы, даже с учетом добавленных отступов.