---
title: "Table Keyboard Navigation"
description: "Enables moving between table cells with Tab and arrow keys, auto-creating rows on Tab past the last cell and handling merged cells like a spreadsheet."
metadata:
  - name: keywords
    content: "jodit, table navigation, keyboard, arrow keys, tab, table cells"
---
# Table Keyboard Navigation Plugin

Enables keyboard navigation between table cells using arrow keys and Tab. Users can move focus between cells without mouse, with automatic row creation when tabbing past last cell.

## Features

- Tab/Shift+Tab: Navigate forward/backward through cells
- Arrow keys: Navigate up/down/left/right in table
- Auto-creates new row when Tab on last cell
- Leaves the table at its edges, where there's no cell to move to
- Handles merged cells (colspan/rowspan)
- Keeps the table's popup and resize frame on the cell the caret moves to (see `select-cells` and `resizer`)
- Auto-inserts `<br>` in empty cells
- Select all cell content on Tab

## Supported Keys

- **Tab**: Next cell (creates row if needed)
- **Shift+Tab**: Previous cell (creates row before if needed)
- **Left Arrow**: Previous cell, from the start of a cell
- **Right Arrow**: Next cell, from the end of a cell
- **Up Arrow**: Cell above (same column)
- **Down Arrow**: Cell below (same column)

With no cell in that direction, the arrow keys leave the caret to the browser, which moves it out of the table.

### Basic Navigation

```typescript
const editor = Jodit.make('#editor');

// Insert table:
// | Cell 1 | Cell 2 |
// | Cell 3 | Cell 4 |

// Cursor in Cell 1:
// Press Tab → moves to Cell 2
// Press Tab → moves to Cell 3
// Press Tab → moves to Cell 4
// Press Tab → creates new row, moves to new cell
```

### Arrow Navigation

```typescript
// Cursor in Cell 2:
// Press Left → moves to Cell 1
// Press Right → moves back to Cell 2
// Press Down → moves to Cell 4
// Press Up → moves back to Cell 2
```

### Edge Navigation

```typescript
// Cursor at the start of Cell 1 (first cell):
// Press Left → moves out of the table, before it

// Cursor at the end of Cell 4 (last cell):
// Press Right → moves out of the table, after it

// Cursor in the top row:
// Press Up → moves out of the table, above it

// Cursor in the bottom row:
// Press Down → moves out of the table, below it
```

### Key Detection

On `keydown` event:
1. Checks if key is Tab or arrow key
2. Finds current table cell via `Dom.up(current, Dom.isCell)`
3. Validates cursor position:
   - For Tab: works from any position in cell
   - For arrows: only at cell boundaries (start/end of content)
4. If valid: executes navigation, returns `false` (prevents default)

### Tab Navigation

1. Gets next/previous cell via `Dom.next`/`Dom.prev`
2. If no next cell:
   - Calls `table.appendRow()` to add row at end/start
   - Gets newly created cell
3. Selects entire cell content, or puts the cursor in an empty cell

### Arrow Navigation

**Left/Right:**
- Gets next/previous cell in DOM order
- At the first or last cell, leaves the key to the browser

**Up/Down:**
- Builds formal table matrix (handles colspan/rowspan)
- Gets cell coordinates [row, column]
- Accesses cell at [row±1, same column]
- Handles missing cells gracefully

### Empty Cell Handling

If target cell empty:
- Creates `<br>` element
- Appends to cell
- Sets cursor before `<br>`

### Cursor Position

For Tab: Selects entire cell content (an empty cell gets the cursor)
For arrows: Sets cursor at start/end based on direction

## Edge Cases

1. **Merged Cells**: Formal matrix handles colspan/rowspan correctly
2. **Empty Cells**: Auto-inserts `<br>` for cursor positioning
3. **First Cell Tab Back**: Creates new row before first row
4. **Last Cell Tab Forward**: Creates new row after last row
5. **Cursor in Middle**: Arrows only work at text start/end
6. **Nested Tables**: Works only in immediate table, not nested
7. **Non-table Content**: Ignored, default behavior

## Typical Use Case

Users entering data in tables need efficient keyboard-only navigation between cells. The table-keyboard-navigation plugin provides this by enabling Tab and arrow keys to move between cells, similar to spreadsheet applications, with automatic row creation when needed.

### tableKeyboardNavigation()

**tableKeyboardNavigation**(`editor`): `void`

Defined in: [src/plugins/table-keyboard-navigation/table-keyboard-navigation.ts:31](https://github.com/xdan/jodit/blob/main/src/plugins/table-keyboard-navigation/table-keyboard-navigation.ts#L31)

Process navigates key pressing in table cell

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `editor` | [`IJodit`](../interfaces/types.IJodit.html) |

#### Returns

`void`