DataGrid data binding

Data Binding

Local Data

Bind a plain Angular array when the full dataset is already available in memory.

Local binding is best for compact datasets, static reference data, or client-owned collections where the grid can sort, filter, and page the complete array without asking the server for every interaction.

Loading interactive DataGrid example…

Code snippet

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

interface Order {
  product: string;
  category: string;
  status: string;
  amount: number;
}

@Component({
  standalone: true,
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="orders"
      [enableSorting]="true"
      [filterable]="'row'"
      [pageable]="{ pageSizes: [5, 10, 25], info: true }"
      [pageSize]="5"
    />
  `,
})
export class LocalOrdersPage {
  readonly columns: ColumnDef<Order>[] = [
    { field: 'product', header: 'Product', sortable: true, filterable: true },
    { field: 'category', header: 'Category', filterable: true },
    { field: 'status', header: 'Status', filterable: true },
    { field: 'amount', header: 'Amount', type: 'number', sortable: true, filterable: true },
  ];

  readonly orders: Order[] = loadOrdersIntoMemory();
}

API information

API	Type	Usage
`[columns]`	`ColumnDef<T>[]`	Defines visible fields, headers, widths, types, sorting, and filtering metadata.
`[data]`	`T[]`	Provides the full local collection. The grid processes this array in memory.
`[enableSorting]`	`boolean`	Enables header sorting for columns marked sortable: true.
`[filterable]`	`NgbFilterable`	Renders row, menu, multi-checkbox, or no filter UI depending on the configured mode.
`[pageable]`	`boolean \| NgbDatagridPageableSettings`	Shows the pager and optional page-size controls for local pages.
`[pageSize]`	`number`	Controls how many local rows are shown per page.