• Overview
@angular/aria/grid

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 {}

element

HTMLElement

A 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 using tabindex.
  • activedescendant: Focus remains on the grid container, and aria-activedescendant is 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>
Jump to details