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>