DataGrid Columns

Configure DataGrid column visibility, locking, sticky positioning, resizing, and drag reordering.

Columns

Overview of hidden, locked, sticky, resizable, and reorderable column APIs.

Column APIs covered

width, hidden, locked, sticky, resizable, columnReorderable, reorderable, minResizableWidth, and maxResizableWidth.

Column features basics

Integration steps

Assign explicit pixel widths on ColumnDef before enabling hidden, locked, sticky, resizable, or reorderable column features.
Use hidden on the column definition for initial visibility, then update your ColumnDef array to toggle columns programmatically.
Set locked: true or sticky: "start" on leading columns that must remain visible while the inner grid viewport scrolls horizontally.
Enable [resizable]="true" and [columnReorderable]="true" on ngb-datagrid for interactive column resizing and drag reorder.
Use reorderable, minResizableWidth, and maxResizableWidth on individual columns when some columns must stay fixed.

Composite — column behaviors in ngb-datagrid

      import { Datagrid, ColumnDef } from '@angular-bootstrap/ngbootstrap';

@Component({
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="rows"
      [scrollable]="true"
      [resizable]="true"
      [columnReorderable]="true"
    ></ngb-datagrid>
  `,
})
export class InventoryColumnsDemo {
  readonly columns: ColumnDef<ProductRow>[] = [
    { field: 'sku', header: 'SKU', width: 160, locked: true, reorderable: false },
    { field: 'productName', header: 'Product Name', width: 280, sticky: 'start' },
    { field: 'category', header: 'Category', width: 180 },
    { field: 'price', header: 'Price', type: 'number', width: 160, minResizableWidth: 120 },
  ];
}

Standalone column state updates

      // Hide a column
columns = columns.map((column) =>
  column.field === 'supplier' ? { ...column, hidden: true } : column,
);

// Lock a leading column
columns = columns.map((column) =>
  column.field === 'sku' ? { ...column, locked: true } : column,
);