ag 網格表溢出屏幕

Question

我有一個 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 表的寬度可以根據列數增加。 但是，它不應溢出頁面。

而且，我希望表格也集中在頁面中間。 謝謝！

Answer 1

你可以試試：

<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以便縮小所有列以適應固定寬度。