Editing & shortcuts

MonkeyTab is designed around keyboard-first editing. Most operations have a shortcut, and all of them compose.

Cell selection

Click any cell to select it. The selected cell gets a blue border.

• ↑ ↓ ← → — move the active cell
• Tab / Shift+Tab — move right / left
• Shift+↑↓←→ — extend a rectangular selection (range mode)
• Escape — clear selection

Editing a cell

• Enter — open the editor for the active cell
• Double-click — same as Enter
• Start typing — on a Text or Number cell, typing immediately replaces the value
• Escape — cancel and discard changes

Saving:

• Enter (in editor) — save and move down
• Tab (in editor) — save and move right
• Escape (in editor) — discard changes

Some field types (Image, Attachment, MultiSelect, rich-text) open a popup editor instead of editing inline. Close the popup with Escape or the Done button.

Adding and deleting rows

When onRowCreate is set, new rows are draft rows — they appear optimistically with a light border and are only committed once required fields are filled and the draft is confirmed. Empty-required-field cells show a red asterisk and red left border.

Copy and paste

Copy:

• Cmd/Ctrl+C — copy the active cell, or all cells in the current selection, as tab-separated values (TSV)
• Right-click → Copy → choose format (value, display text, JSON, mailto link, etc. — format list is type-aware)

Paste:

• Cmd/Ctrl+V — paste TSV from the clipboard starting from the active cell. Multi-row, multi-column pastes fill the grid row by row.
• Paste works across apps — copy a range from Excel or Google Sheets and paste directly into MonkeyTab.

Image cells:

• Drag an image file directly onto an Image cell — no editor needed
• Cmd/Ctrl+V on a selected Image cell pastes an image from the clipboard
• When maxImages is 1, the image replaces the existing one; otherwise it appends

Undo and redo

Every cell edit, row creation, and row deletion is tracked in an undo stack (50 items per grid instance).

• Cmd/Ctrl+Z — undo
• Cmd/Ctrl+Shift+Z — redo

Undo and redo are per <MonkeyTable> instance — two tables on the same page have independent stacks.

Column operations

Header interactions

Context menu options

• Rename — inline rename (requires onColumnRename prop to persist)
• Customize — edit type-specific options (select options, number format, etc.)
• Change type — convert the column to a different field type, with a preview of compatible/incompatible values
• Sort A→Z / Z→A — sort by this column
• Group by this column — enable row grouping
• Color by this column — enable row tinting
• Hide — hide the column without deleting it
• Delete — delete the column and its data (with confirmation if confirmBeforeDelete is on)

Adding a column

Click the + button in the column header area, or click a ghost column header. The new-field picker lets you choose a type and name.

Row operations

Right-click any row (or use its ⋮ button) for:

• View — open the record detail panel (all fields, expanded)
• Duplicate — create a copy of the row
• Insert row — insert a blank row immediately after
• Delete — delete the row (with confirmation if confirmBeforeDelete is on)

Drag the row handle (leftmost column) to reorder rows.

Row grouping

Set groupBy to a field ID to collapse rows into groups:

<MonkeyTable
  groupBy="Status"
  groupCollapsed={false}
  groupOrder="auto"    // 'auto' | 'asc' | 'desc' | 'count-asc' | 'count-desc' | string[]
  onGroupByChange={(fieldId) => setGroupBy(fieldId)}
  ...
/>

Within each group:

• Click the group header to collapse / expand
• + Add row inside a group inherits the group's field value
• The header shows a row count
• Checkbox in the group header selects all rows in the group

Row and column coloring

Row coloring — tint each row based on a field's value:

<MonkeyTable
  colorBy="Priority"            // uses SingleSelect option colors automatically
  colorByMap={{ p0: '#fecaca' }} // override individual values
  ...
/>

Column coloring — tint a column's cells conditionally:

columns={[
  { id: 'Score', type: 'Number', color: [
    { when: { op: 'lt',  value: 50 }, color: '#fee2e2' },
    { when: { op: 'gte', value: 90 }, color: '#dcfce7' },
  ]},
]}

See API reference → Column coloring for all rule operators and forms.

Fill handle

When a range of cells is selected, drag the small square handle at the bottom-right corner to fill adjacent cells with the same value.

Bulk actions

Select rows with their checkboxes, then use the bulk-action toolbar that appears. Built-in: Delete selected rows.

To add custom bulk actions, use the selectionActions render prop:

<MonkeyTable
  selectionActions={(ids, clearSelection) => (
    <button onClick={async () => {
      await api.bulkArchive(ids);
      clearSelection();
    }}>
      Archive {ids.length} rows
    </button>
  )}
  ...
/>

Keyboard shortcut reference