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以便缩小所有列以适应固定宽度。