DataGrid remote data

Data Binding

Remote Data

Bind the current server page while the parent component owns fetching, loading state, and total count.

Remote binding is the right model when the dataset is too large for the browser, the backend owns filtering or sorting, or permissions require every page to come from an API.

Use the grid pager to request another server page. Showing 0 row(s) from [total]="23".

Loading interactive DataGrid example…

Code snippet

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

@Component({
  standalone: true,
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="orders"
      [loading]="loading"
      [total]="total"
      [pageable]="{ pageSizes: [25, 50], info: true }"
      [pageSize]="pageSize"
      (pageChange)="loadPage($event.page, $event.pageSize)"
    />
  `,
})
export class RemoteOrdersPage {
  orders: Order[] = [];
  total = 0;
  pageSize = 25;
  loading = false;

  constructor(private readonly http: HttpClient) {}

  loadPage(page: number, pageSize: number): void {
    this.loading = true;
    this.http
      .get<{ items: Order[]; total: number }>('/api/orders', { params: { page, pageSize } })
      .subscribe((result) => {
        this.orders = result.items;
        this.total = result.total;
        this.loading = false;
      });
  }
}

API information

API	Type	Usage
`[data]`	`T[]`	Provides only the current server page when remote binding is active.
`[total]`	`number \| null`	Tells the pager the full server-side result count, even when only one page is loaded.
`[loading]`	`boolean`	Shows the grid loading overlay and sets aria-busy while the request is in progress.
`(pageChange)`	`EventEmitter<{ page: number; pageSize: number }>`	Emits when the user changes page or page size so the parent can request a new server page.
`[pageable]`	`boolean \| NgbDatagridPageableSettings`	Enables paging controls for the remote result set.
`[pageSize]`	`number`	Keeps the grid pager and API request page size in sync.