ag-grid table spilling out of screen

Question

I have an ag-grid table that changes its size dynamically based on some buttons. more or less columns will be added or removed from the table. However, as the number of columns increases, the table would eventually spill out of the page, which cannot be seen. I have tried to apply horizontal scrolling but to no avail.

This is my code:

<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>

Basically, I want either two of the followings:

1. the width of the ag-grid table to be fixed and horizontal scrolling enabled
2. OR the width of the ag-grid table can grow depending on the number of columns. However, it should not spill out of the page.

And also, I would like the table to be centralized in the middle of the page as well. Thanks!

Answer 1

You can try:

<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();
}

I see your grid takes 100% width, make sure the parent div has a fixed width. To center the grid, I see you have done justify-content: center; which is good but make sure this div has display: flex; on it.

gridSizeChanged will be called every time the grid size changes and then we call sizeColumnsToFit so this will shrink all columns to fit with the fixed width.