ag-grid таблица выливается за пределы экрана - PullRequest
Новая
       21

ag-grid таблица выливается за пределы экрана

0 голосов
/ 10 марта 2020

У меня есть таблица ag-grid, которая динамически меняет свой размер на основе некоторых кнопок. более или менее столбцы будут добавлены или удалены из таблицы. Однако по мере увеличения числа столбцов таблица в конечном итоге будет выпадать из страницы, что невозможно увидеть. Я пытался применить горизонтальную прокрутку, но безрезультатно.

Это мой код: 

<div class="row text-center" style="justify-content: center;">
  <div>
    <ag-grid-angular
      style="font-size: 15px; width: 100%;"
      class="ag-theme-balham"
      [rowData]="data"
      [columnDefs][="columnDefs"
      [defaultColDef]="defaultColumnDefs"
      (gridready)="onGridReady($event)"
    </ag-grid-angular>
  </div>
</div>

По сути, я хочу либо два из следующих:

  1. ширина таблицы ag-grid для фиксирования и горизонтальная прокрутка включена
  2. ИЛИ ширина таблицы ag-grid может увеличиваться в зависимости от количества столбцов. Тем не менее, он не должен выпадать из страницы.

И еще, я хотел бы, чтобы таблица была также централизована в середине страницы. Спасибо!

1 Ответ

0 голосов
/ 10 марта 2020

Вы можете попробовать: 

<ag-grid-angular
      style="font-size: 15px; width: 100%;"
      class="ag-theme-balham"
      [rowData]="data"
      [columnDefs][="columnDefs"
      [defaultColDef]="defaultColumnDefs"
      (gridReady)="onGridReady($event)"
      (gridSizeChanged)="onGridSizeChanged($event)
</ag-grid-angular>

onGridReady(params: GridReadyEvent) {
  params.api.sizeColumnsToFit();
}

onGridSizeChanged(params: GridSizeChangedEvent) {
  params.api.sizeColumnsToFit();
}

Я вижу, что ваша сетка занимает 100% ширины, убедитесь, что родительский div имеет фиксированную ширину. Чтобы выровнять сетку, я вижу, что вы сделали justify-content: center;, что хорошо, но убедитесь, что у этого div есть display: flex;.

gridSizeChanged будет вызываться при каждом изменении размера сетки, а затем мы вызываем sizeColumnsToFit, поэтому все столбцы будут сжаты до фиксированной ширины.

...