Inline Editable Grid

A keyboard-driven spreadsheet grid with roving-cell navigation and Excel-style Enter/Tab commits.

Prominimalbrutalist

Category: Components
Added: 2026-09-01
Deps: none
Updated: 2026-09-01

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview

Product	Qty	Price
Standing desk	12	349
Monitor arm	24	89
Task chair	8	219
Desk mat	40	29

Arrow keys to move · Enter to edit · Tab commits + moves right

Props

Visible rows4

No runtime dependencies

"use client";

import { useEffect, useRef, useState, type KeyboardEvent } from "react";

type ColKey = "product" | "qty" | "price";
type Row = { product: string; qty: string; price: string };

const COLUMNS: { key: ColKey; label: string; numeric?: boolean }[] = [
  { key: "product", label: "Product" },
  { key: "qty", label: "Qty", numeric: true },
  { key: "price", label: "Price", numeric: true },
];

const INITIAL_ROWS: Row[] = [
  { product: "Standing desk", qty: "12", price: "349" },
  { product: "Monitor arm", qty: "24", price: "89" },
  { product: "Task chair", qty: "8", price: "219" },
  { product: "Desk mat", qty: "40", price: "29" },

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}

Notes

About this component

A table of always-on <input> elements looks editable but breaks the moment you want arrow-key navigation between cells, because a focused text input consumes ArrowLeft/ArrowRight for cursor movement instead of letting them move between cells. This component keeps cells as plain, focusable divs until the user explicitly opens one (Enter, F2, or double-click), so arrow keys are free to drive a roving-tabindex active cell the rest of the time — the same two-mode design every real spreadsheet app uses. The non-obvious detail is the separate draft string: the value being typed lives outside the committed rows array entirely, so pressing Escape can throw it away with a single setEditing(null) rather than needing an undo snapshot of the row data. The other detail worth knowing is that Enter and Tab commit to DIFFERENT next cells (down vs. right) — mirroring Excel/Sheets muscle memory — which means the commit function needs the pressed key's intent, not just 'save and stop editing'. Caveat: values are stored and edited as plain strings including the numeric columns, so this ships without number parsing/validation — add that at the commit boundary before using this over real data.

Curator’s note

Enter moves the active cell DOWN after committing, Tab moves it RIGHT — matching spreadsheet conventions instead of treating them as interchangeable 'confirm' keys.

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Pro

File Tree Explorer

components

A recursive, collapsible file tree with real roving-tabindex arrow-key navigation.

treefile explorersidebar

Pro

Nested Command Menu

components

A Cmd+K menu with real submenu drilling, a breadcrumb trail, and scoped per-level search.

command menucmdknavigation

NewPro

Shortcut Recorder Field

components

Records a keyboard chord by physical key position, and refuses the ones the browser owns.

keyboardshortcutsettings