DataGrid Column Resizing

Resize DataGrid columns from the header with explicit widths, min widths, and auto-fit behavior.

Column Resizing

Drag column edges or auto-fit columns to the grid width

Column resizing is disabled by default. Turn it on with [resizable]="true" and set an explicit width on each column. Drag the handle on a header edge to resize. Use minResizableWidth / maxResizableWidth to limit how far a column can grow or shrink. When columns are narrower than the grid, empty space remains on the right until you auto-fit.

Live example

The Product column is limited between 180px and 420px. Other columns resize freely (minimum 50px).

Loading interactive DataGrid example…

Configuration

Option	Scope	Description
`[resizable]`	Grid	Enables header drag handles. Default `false`.
`ColumnDef.width`	Column	Required (px) for every visible column when resizing is on.
`minResizableWidth`	Column	Minimum width while dragging (defaults to 50).
`maxResizableWidth`	Column	Maximum width while dragging.
`ColumnDef.resizable`	Column	Set `false` to disable resizing for one column.
`autoFitColumnsToGrid()`	Grid API	Expands or shrinks all visible data columns evenly so their total width matches the grid viewport.

Column resizing

Integration steps

Set [resizable]="true" on ngb-datagrid. Resizing is disabled by default.
Give every visible column an explicit width in pixels.
Optionally set minResizableWidth and maxResizableWidth on ColumnDef to limit drag range.
Drag the handle on the right edge of a header cell to resize that column.
When total column width is less than the grid width, the table leaves whitespace on the right.
Call grid.autoFitColumnsToGrid() after data is loaded to expand or shrink columns to fill the viewport.

Component

      @Component({
  imports: [Datagrid],
  template: `
    <button type="button" class="btn btn-outline-primary btn-sm" (click)="autoFitToGrid()">
      Auto-fit Columns to Grid
    </button>

    <ngb-datagrid
      #productGrid
      [columns]="columns"
      [data]="rows"
      [resizable]="true"
      [enableSorting]="true"
      [scrollable]="true"
    ></ngb-datagrid>
  `,
})
export class ProductGridResizeDemo {
  @ViewChild('productGrid') grid?: Datagrid<ProductRow>;

  readonly columns: ColumnDef<ProductRow>[] = [
    { field: 'sku', header: 'SKU', width: 120 },
    { field: 'product', header: 'Product', width: 260, minResizableWidth: 180, maxResizableWidth: 420 },
    { field: 'category', header: 'Category', width: 160 },
    { field: 'price', header: 'Price', type: 'number', width: 120 },
  ];

  autoFitToGrid(): void {
    this.grid?.autoFitColumnsToGrid();
  }
}

Declarative column limits

      <ngb-grid-column
  field="product"
  header="Product"
  [width]="260"
  [minResizableWidth]="180"
  [maxResizableWidth]="420"
></ngb-grid-column>