ag-grid 表格溢出屏幕

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