DataGrid Pagination Settings

Settings playground

These map to NgbPagerSettings. The active pageSize is always included in the dropdown when it is not listed in pageSizes.

Standalone ngb-pager (full width)

Responsive density — narrow container (≈400px, compact: hides info)

Minimal density — very narrow (≈320px, hides info and page sizes)

• ORD-1000 — Customer 1
• ORD-1001 — Customer 2
• ORD-1002 — Customer 3
• ORD-1003 — Customer 4
• ORD-1004 — Customer 5

Datagrid with [pageable]

Same settings object as standalone ngb-pager, plus position for top, bottom, or both footers. Pagination slices paged rows automatically.

Defaults

NGB_PAGER_DEFAULT_SETTINGS

{"buttonCount":10,"info":true,"pageSizes":false,"previousNext":true,"type":"numeric","responsive":true}

NGB_PAGER_BREAKPOINTS

full ≥ 520px · compact ≥ 360px · minimal below compact

NgbPagerSettings

NgbPagerComponent (ngb-pager)

NgbDatagridPageableSettings (datagrid [pageable])

Extends NgbPagerSettings with grid placement:

Pass [pageable]="true" for defaults, or an object to override. Legacy [enablePagination] + [pageSizeOptions] still activates pagination with preset page sizes.

NgbPaginationComponent (ngb-pagination)

Low-level control used inside ngb-pager. Use directly when you only need page buttons or a page input.

Custom pager template

Project <ng-template ngbPager> inside ngb-datagrid. Responsive layout is disabled; you own the full footer UI. Context: page, pageSize, total, pageCount, grid.

      @Component({
  imports: [Datagrid, NgbPagerTemplate],
  template: `
    <ngb-datagrid [columns]="columns" [data]="rows" [pageable]="{ pageSizes: [10, 25] }">
      <ng-template ngbPager let-ctx>
        <div class="d-flex gap-2 align-items-center">
          <button type="button" class="btn btn-sm btn-outline-secondary"
            [disabled]="ctx.page <= 1" (click)="grid.onPage(ctx.page - 1)">Prev</button>
          <span>Page {{ ctx.page }} / {{ ctx.pageCount }} ({{ ctx.total }} records)</span>
          <button type="button" class="btn btn-sm btn-outline-secondary"
            [disabled]="ctx.page >= ctx.pageCount" (click)="grid.onPage(ctx.page + 1)">Next</button>
        </div>
      </ng-template>
    </ngb-datagrid>
  `,
})
export class CustomPagerGrid {}
    

Pager settings (ngb-pager & datagrid pageable)

Integration steps

1. Import NgbPagerComponent from @angular-bootstrap/ngbootstrap (or ngbootstrap/pagination) for any list, table, or custom grid.
2. Bind [page], [pageSize], and [collectionSize]; pass [settings]="true" for defaults or an NgbPagerSettings object.
3. Handle (pageChange) and (pageSizeChange) to update your data slice.
4. On ngb-datagrid, use [pageable] with the same settings plus optional position: "top" | "bottom" | "both".
5. Set pageSizes to a number array for the rows-per-page dropdown, or false to hide it.
6. responsive: true (default) hides range info and page sizes as the footer narrows; false keeps all controls and wraps.
7. Use <ng-template ngbPager> inside the grid for a fully custom pager (disables built-in responsive layout).

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

@Component({
  imports: [Datagrid],
  template: `
    <ngb-datagrid
      [columns]="columns"
      [data]="rows"
      [pageSize]="pageSize"
      [pageable]="pageable"
      (pageChange)="onPageChange($event)"
    ></ngb-datagrid>
  `,
})
export class OrdersGrid {
  pageSize = 10;

  readonly pageable: NgbDatagridPageableSettings = {
    buttonCount: 5,
    info: true,
    pageSizes: [5, 10, 25, 50],
    previousNext: true,
    type: 'numeric',
    responsive: true,
    position: 'bottom',
  };

  onPageChange(event: { page: number; pageSize: number }): void {
    this.pageSize = event.pageSize;
  }
}
    

      import { NgbPagerComponent, NgbPagerSettings } from '@angular-bootstrap/ngbootstrap';

@Component({
  imports: [NgbPagerComponent],
  template: `
    <ngb-pager
      [page]="page"
      [pageSize]="pageSize"
      [collectionSize]="items.length"
      [settings]="pagerSettings"
      [infoLabel]="rangeLabel"
      rowsPerPageLabel="Rows per page"
      (pageChange)="page = $event"
      (pageSizeChange)="onPageSize($event)"
    />
    <ul>
      <li *ngFor="let item of pagedItems">{{ item.name }}</li>
    </ul>
  `,
})
export class StandaloneListPager {
  page = 1;
  pageSize = 10;
  readonly items = [/* your data */];

  readonly pagerSettings: NgbPagerSettings = {
    buttonCount: 5,
    info: true,
    pageSizes: [10, 25, 50],
    previousNext: true,
    type: 'numeric',
    responsive: true,
  };

  get pagedItems() {
    const start = (this.page - 1) * this.pageSize;
    return this.items.slice(start, start + this.pageSize);
  }

  get rangeLabel(): string {
  return `${(this.page - 1) * this.pageSize + 1}–${Math.min(this.page * this.pageSize, this.items.length)} of ${this.items.length}`;
  }

  onPageSize(size: number): void {
    this.pageSize = size;
    this.page = 1;
  }
}