DataGrid master-detail
Expand a parent row to display related records in a child grid or a custom detail template.
Nested grids
Place a DataGrid inside ngbRowDetail and bind it to the expanded row's child records. Each child grid has its own columns, data and keyboard focus. This example contains 24 parent records with three to five related records on confirmed orders.
Order | Customer | Status | Line items |
|---|
<ngb-datagrid [data]="orders" [columns]="orderColumns" [keyboardNavigation]="true">
<ng-template ngbRowDetail let-order>
<ngb-datagrid [data]="order.lines" [columns]="lineColumns"
[keyboardNavigation]="true" [enablePagination]="false" scrollable="none" />
</ng-template>
</ngb-datagrid>
Import Datagrid and NgbRowDetailTemplate into your standalone component. Set singleExpand to keep one detail open; omit it to allow several. Use Expanded State when open details must follow records across paging or sorting.
Conditional display
Use detailRowPredicate to control which rows offer a disclosure button. Return true for rows with available details. This predicate hides the disclosure for draft records; the row itself remains visible.
Order | Customer | Status | Line items |
|---|
<ngb-datagrid [data]="orders" [columns]="columns" [detailRowPredicate]="hasDetails">
<ng-template ngbRowDetail let-order><p>{{ order.note }}</p></ng-template>
</ngb-datagrid>
readonly hasDetails = (order: Order): boolean =>
order.status === 'Ready' && order.lines.length > 0;
Keep the predicate pure and inexpensive. It controls display, not authorization: protect sensitive detail data on your server.
Keyboard navigation
Enable [keyboardNavigation]="true" on both grids. No additional focus directive is required. Tab reaches the parent disclosure, cells and detail entry cell in normal tab order.
| Shortcut | Behavior |
|---|---|
| Enter / Space on the disclosure | Expand or collapse the detail. |
| Enter on the focused detail cell | Move focus to the child grid's current entry cell. An empty child grid has no data cell to enter; use Tab for its controls. |
| Arrow keys in the child grid | Move between child cells without moving the parent's focus. |
| Escape from a child data cell | Return focus to the parent detail cell without collapsing it. |
| Tab / Shift+Tab | Follow the native tab order through controls and grids. |
Editors and interactive controls keep their own shortcuts. If Escape cancels an edit or clears a cell range, press it again from a plain child data cell to return to the parent. Closing focused detail content restores its disclosure focus.
Loading and limitations
Load and cache child records in your application using detailChange. Show loading, errors and Retry in the template and ignore stale responses. The grid does not call an endpoint.
Sticky/locked columns cannot be combined with details. Local virtualization uses a fixed detailRowHeight; flat remote virtual windows do not support details. Group/detail row counts remain unknown. This is not a complete APG spreadsheet keyboard model.