The container for a grid. It provides keyboard navigation and focus management for the grid's rows and cells. It manages the overall behavior of the grid, including focus wrapping, selection, and disabled states.
API
class Grid { readonly element: HTMLElement; readonly textDirection: WritableSignal<Direction>; readonly @Input() enableSelection: InputSignalWithTransform<boolean, unknown>; readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>; readonly @Input() softDisabled: InputSignalWithTransform<boolean, unknown>; readonly @Input() focusMode: InputSignal<"roving" | "activedescendant">; readonly @Input() rowWrap: InputSignal<"continuous" | "loop" | "nowrap">; readonly @Input() colWrap: InputSignal<"continuous" | "loop" | "nowrap">; readonly @Input() multi: InputSignalWithTransform<boolean, unknown>; readonly @Input() selectionMode: InputSignal<"follow" | "explicit">; readonly @Input() enableRangeSelection: InputSignalWithTransform<boolean, unknown>;}
element
HTMLElementA reference to the host element.
textDirection
WritableSignal<Direction>Text direction.
enableSelection
InputSignalWithTransform<boolean, unknown>Whether selection is enabled for the grid.
disabled
InputSignalWithTransform<boolean, unknown>Whether the grid is disabled.
softDisabled
InputSignalWithTransform<boolean, unknown>Whether to allow disabled items to receive focus. When true, disabled items are
focusable but not interactive. When false, disabled items are skipped during navigation.
focusMode
InputSignal<"roving" | "activedescendant">The focus strategy used by the grid.
roving: Focus is moved to the active cell usingtabindex.activedescendant: Focus remains on the grid container, andaria-activedescendantis used to indicate the active cell.
rowWrap
InputSignal<"continuous" | "loop" | "nowrap">The wrapping behavior for keyboard navigation along the row axis.
continuous: Navigation wraps from the last row to the first, and vice-versa.loop: Navigation wraps within the current row.nowrap: Navigation stops at the first/last item in the row.
colWrap
InputSignal<"continuous" | "loop" | "nowrap">The wrapping behavior for keyboard navigation along the column axis.
continuous: Navigation wraps from the last column to the first, and vice-versa.loop: Navigation wraps within the current column.nowrap: Navigation stops at the first/last item in the column.
multi
InputSignalWithTransform<boolean, unknown>Whether multiple cells in the grid can be selected.
selectionMode
InputSignal<"follow" | "explicit">The selection strategy used by the grid.
follow: The focused cell is automatically selected.explicit: Cells are selected explicitly by the user (e.g., via click or spacebar).
enableRangeSelection
InputSignalWithTransform<boolean, unknown>Whether enable range selections (with modifier keys or dragging).
Description
The container for a grid. It provides keyboard navigation and focus management for the grid's rows and cells. It manages the overall behavior of the grid, including focus wrapping, selection, and disabled states.
<table ngGrid [multi]="true" [enableSelection]="true"> @for (row of gridData; track row) { <tr ngGridRow> @for (cell of row; track cell) { <td ngGridCell [disabled]="cell.disabled"> {{cell.value}} </td> } </tr> }</table>