## Overview [#overview]

Set `interaction="row-navigation"` and pass `onRowActivate` for record lists
that open a case, project, or other item. Cubitt supplies hover, roving row
focus, keyboard navigation, and Enter activation. The consumer performs
routing, permission checks, or another business action from the callback.

Use `getRowCanActivate` when grouped, summary, disabled, or otherwise ineligible
rows should not participate. A custom cell handler may call
`event.preventDefault()` to take precedence for one gesture. Buttons, inputs,
links, editable content, and elements marked with `data-grid-interactive` keep
their own interaction without activating the row.

## Example [#example]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="DataGridRowNavigationScenario" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <DataGrid
      getRowCanActivate={(row) => !row.getIsGrouped()}
      interaction="row-navigation"
      onRowActivate={({ row }) =>
        navigate({ to: "/matters/$matterId", params: { matterId: row.original.id } })
      }
      table={table}
    >
      <DataGrid.Viewport aria-label="Matters" />
    </DataGrid>
    ```
  </Tab>
</Tabs>

## Keyboard navigation [#keyboard-navigation]

Row navigation uses a row-first grid keyboard model, promoted to a treegrid when
the row model is hierarchical. Up, Down, Home, and End move between eligible
rows. Right expands an expandable row or enters its first cell; Left collapses
an expanded row or moves from the first cell back to the row, and a second Left
moves a nested row to its parent.

Once focus is inside a row, Left and Right move between its cells and Up and
Down retain the same column while moving between eligible rows.

## Link behavior [#link-behavior]

The activation callback intentionally does not emulate an anchor. When
modifier-click, middle-click, opening in a new tab, copying a destination, or
link previews matter, render the router's real link in the identifying cell and
use the same route descriptor from `onRowActivate` for the rest of the row.
Clicking the link is already excluded from row activation.

```tsx
const getMatterLink = (matterId: string) => ({
  to: "/matters/$matterId",
  params: { matterId },
} as const);

columnHelper.accessor("name", {
  header: "Matter",
  meta: { rowHeader: true },
  cell: ({ getValue, row }) => (
    <Link {...getMatterLink(row.original.id)}>{getValue()}</Link>
  ),
});

<DataGrid
  interaction="row-navigation"
  onRowActivate={({ row }) => navigate(getMatterLink(row.original.id))}
  table={table}
>
  <DataGrid.Viewport aria-label="Matters" />
</DataGrid>
```

## Selection checkbox composition [#selection-checkbox-composition]

`rowSelectionColumn: true` may accompany row navigation without changing the
preset. Checkbox interaction updates selection and never activates the row
or selects it twice. See [Row Selection](/components/data-grid/row-selection)
for selection configuration and checkbox-column behavior.

## API Reference [#api-reference]

### DataGrid props [#datagrid-props]

| Prop                | Type                                  | Default      | Description                                                           |
| ------------------- | ------------------------------------- | ------------ | --------------------------------------------------------------------- |
| `interaction`       | `"row-navigation"`                    | -            | Enables row focus, keyboard navigation, and row activation. Required. |
| `onRowActivate`     | `DataGridRowActivationHandler<TData>` | -            | Handles activation for an eligible row. Required.                     |
| `getRowCanActivate` | `(row) => boolean`                    | `() => true` | Limits which rows can receive focus and activate.                     |

### Activation context [#activation-context]

`onRowActivate` receives the activated row and originating gesture:

| Field                | Type                                                                      | Description                                                                             |
| -------------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| `row`                | `Row<DataGridFeatures, TData>`                                            | Activated row.                                                                          |
| `table`              | `DataGridTable<TData>`                                                    | Table instance.                                                                         |
| `event`              | `MouseEvent<HTMLTableRowElement>` or `KeyboardEvent<HTMLTableRowElement>` | Original event, narrowed by `trigger`.                                                  |
| `trigger`            | `"pointer" \| "keyboard"`                                                 | Interaction that activated the row.                                                     |
| `toggleRowSelection` | `() => void`                                                              | Toggles the row using its configured selection behavior. Row selection must be enabled. |