Angular DataGrid Component, Sort/Filter/Paginate Data

Build Angular data tables with sorting, filtering, grouping, pagination, editing, and PDF/Excel export. Explore working examples and API documentation.

Grid overview

One component, full data-table toolkit

Bind [columns] and [data] to get started. Turn on sorting, filtering, search, paging, editing, export, and more with inputs — then explore each topic in the lab navigation above.

Change Theme

Locale Direction

Playground

Sort, filter, paginate, and select — with localized labels.

Library theme: bootstrap. Learn about scoped theme tokens.

Loading interactive DataGrid example…

Core features

The DataGrid supports array-based columns and declarative ngb-grid-column definitions. Sorting, filtering, paging, editing, row details, selection, responsive layout, and adapter-driven export are available through the public API — explore each area in the lab navigation above.

Data binding

Local arrays, remote pages with [total] and [loading], trackBy, externalFiltering.

[data]
[loading]
[total]
[trackBy]
externalFiltering

Open Grid Overview

Sorting

Click headers or use Enter on focused headers. sortChange emits active field and direction.

[enableSorting]
(sortChange)
ColumnDef.sortable

Open Sorting

Data operations

Unified state for sorting, filtering, paging, local arrays, and manual/server-side data requests.

[state]
(dataStateChange)
[total]
filterManual

Open Data Operations

Grouping

Group rows by one or more fields with grouped headers, state events, and local helper output.

[groupable]
[group]
(groupChange)
state.group

Open Grouping

Filtering

Row, menu, multi-checkbox, composite descriptors, and custom ngbFilter templates.

[filterable]
[filter]
(filterChange)
filterManual

Open Filtering

Search

Global, per-column, advanced rules, and highlight matching text in cells.

[enableGlobalFilter]
searchHighlightTerm
searchHighlightFields

Open Search

Pagination

pageable settings, standalone ngb-pager, responsive footer, custom ngbPager template.

[pageable]
(pageChange)
NgbPagerComponent

Open Pagination

Editing

Inline, in-cell, external dialog, toolbar, restricted fields, add row.

[enableEdit]
[editMode]
ngbEditor
(rowSave)

Open Editing

Selection

Single/multiple, row vs checkbox behavior, programmatic setSelectionIds.

[selectionMode]
[selectionBehavior]
(selectionChange)

Open Rows

Export

PDF and Excel via injected adapters; current page, selection, or all rows.

[exportOptions]
dataProviderAll
NgbExportButton

Open Export

Columns

Hidden, locked, sticky, resize, reorder (drag and programmatic).

[resizable]
[columnReorderable]
ColumnDef.sticky
hidden

Open Columns

Rows

Sticky rows, drag reorder, row/cell highlighting, ngbRowDetail templates.

[stickyRows]
[rowReorderable]
ngbRowDetail
highlightedIndex

Open Rows

Grid to chart

Row/column selection charts, full grid aggregate, sparklines in cells.

NgbGridChartComponent
NgbDataChartComponent

Open Grid to Chart

Visual design

Comfortable/compact density, stacked card layout, layout toolbar tools.

[tableOptions]
[dataLayoutMode]
ngb-datagrid-layout-toolbar

Open Visual Design

Performance baseline

Static benchmark report

The benchmark UI is intentionally frozen to snapshot tables and charts so the overview page does not rerun measurements on every visit. The values below summarize controlled local baselines for ngb-datagrid, AG Grid, Kendo UI Grid, and Webix DataTable.

Best 2,500-row init104.4 msngbootstrap local baseline

Best 1M-row first page188 mspaged visible render only

Best 1,000-column init149 msngbootstrap static-width baseline

Interactive visualsChart.jshover charts with frozen data snapshots

Table 1. Data table initialization time (rows), ms

Rows baseline includes small, medium, large, and million-row first-page scenarios.

N ngbootstrap AG AG Grid K Kendo UI Grid W Webix DataTable

Rows	ngbootstrap	AG Grid	Kendo UI Grid	Webix DataTable
250	38.4 ms	63.9 ms	63.9 ms	46.8 ms
1,000	39.8 ms	64.0 ms	64.0 ms	48.3 ms
2,500	104 ms	128 ms	128 ms	122 ms
1,000,000	188 ms	246 ms	318 ms	214 ms

How the row baseline is measured

Same logical dataset shape across all engines: one identifier column plus seven text and numeric columns.
Chrome local baseline captured from this workspace in a fixed-size lab surface.
The 1,000,000-row entry measures first visible-page initialization with paging enabled, not one million mounted DOM rows.
Values are stored as snapshots here so the overview remains fast and does not benchmark on page load.

Table 2. Data table initialization time (columns), ms

Columns baseline keeps the row workload constant while increasing explicit visible columns.

N ngbootstrap AG AG Grid K Kendo UI Grid W Webix DataTable

Columns	ngbootstrap	AG Grid	Kendo UI Grid	Webix DataTable
10	7.0 ms	18.0 ms	32.0 ms	9.0 ms
50	18.0 ms	42.0 ms	77.0 ms	21.0 ms
100	29.0 ms	75.0 ms	154 ms	33.0 ms
500	81.0 ms	115 ms	292 ms	88.0 ms
1,000	149 ms	180 ms	418 ms	162 ms

How the column baseline is measured

Constant visible row workload, increasing column count, and explicit column widths to make layout cost visible.
Interactive chart hover is enabled through Chart.js, but the datasets are frozen snapshots rather than live reruns.
Webix is included as a comparison line in the report even though the current lab runtime does not mount Webix in the page.

Built for Every User

Build one grid experience that feels natural for more users from day one. Localization, accessibility, and keyboard support are already built in, so teams can ship faster without treating inclusion as a follow-up task.

Globalization

[locale] — format numbers and pagination text.
[dir] — LTR, RTL, or auto layout.
[labels] — translate built-in UI strings.

Accessibility

Semantic table + role="grid" and aria-sort.
Live status region for sort and page changes.
[selectionA11yLabels] for row selection.

Keyboard

[keyboardNavigation]="true" by default.
Arrow keys move between cells; Enter sorts headers.
Full shortcut list appears directly after this section.

Use the playground above to switch locale and direction, then verify how the same grid experience adapts across languages, layouts, and keyboard-first workflows.

The grid gives you a strong accessible baseline, but production flows should still be validated with real content, assistive technology, and product-specific accessibility review.

Keyboard shortcuts (part of inclusive design above)

Works when [keyboardNavigation]="true". Click a data cell first, then use:

Keys	Action
Arrow keys	Move focus between data cells
Home / End	First or last column in the row
Ctrl+Home / Ctrl+End	First or last row on the page
Enter (header)	Cycle sort on the focused column
Space	Toggle row selection (when selection is enabled)
Alt+Page Up / Down	Previous or next page (when paginated)
F3	Open filter operator menu (row filter mode)
Escape	Close menus or cancel in-cell edit
Enter (in-cell)	Commit edit; arrows move between editable cells