Editable Grid React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Editable Grid is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import EditableGrid from @/components/ui/editable-grid.

import { useState } from "react"
import { EditableGrid, type GridColumn, type GridRow } from "@/components/ui/editable-grid"

type Product = GridRow & { name: string; category: string; price: number | null; stock: number | null; active: boolean }

const columns: GridColumn<Product>[] = [
  { id: "name", header: "Product", required: true, width: 240 },
  {
    id: "category",
    header: "Category",
    type: "select",
    options: [
      { value: "licenses", label: "Licenses" },
      { value: "services", label: "Services" },
    ],
  },
  { id: "price", header: "Price before tax", type: "currency", currency: "USD", min: 0 },
  { id: "stock", header: "Stock", type: "number", step: 1, min: 0 },
  { id: "active", header: "Active", type: "checkbox" },
]

export function PriceList() {
  const [rows, setRows] = useState<Product[]>([
    { id: "p-1", name: "Acme CRM Business license (month)", category: "licenses", price: 49, stock: 120, active: true },
    { id: "p-2", name: "Setup and training (hour)", category: "services", price: 65, stock: null, active: true },
  ])
  return (
    <EditableGrid
      title="Price list 2026"
      columns={columns}
      value={rows}
      onValueChange={setRows}
      locale="en-US"
      createRow={() => ({ id: crypto.randomUUID(), name: "", category: "licenses", price: null, stock: null, active: true })}
      labels={{ addRow: "New product" }}
    />
  )
}

Props

• columns*
  GridColumn<R>[]

  The columns: { id (the row key), header, type (text, number, currency, select, date, checkbox), width, minWidth, options, currency, decimals, min, max, step, required, validate, readOnly (or a function of the row), align, format, placeholder, frozen }. Columns are not virtualized; a grid here has fewer than 30.

• value
  R[]

  The rows, controlled. Every row needs a unique string id. Pair with onValueChange.

• defaultValuedefault "[]"
  R[]

  The starting rows while uncontrolled.

• onValueChange
  (rows: R[]) => void

  Every change to the rows: edits, pastes, cleared ranges, added, deleted and restored rows.

• onCellChange
  (change: GridCellChange) => (void | false | Promise<unknown>)

  One committed cell ({ rowId, columnId, value, previous }). Return false or a rejected promise to put the old value back (save to a server and roll back on failure).

• onCellsChange
  (changes: GridCellChange[]) => (void | false | Promise<unknown>)

  Batches: a paste, a cleared range, a row saved from the sheet, undo and redo. Same revert contract as onCellChange.

• createRowdefault "() => ({ id: crypto.randomUUID() })"
  (index: number) => R

  Defaults for new rows (the add row button, inserts, rows a paste appends). An id is generated when it returns none.

• title
  ReactNode

  The toolbar's title, e.g. the sheet name.

• toolbarActions
  ReactNode

  Your own buttons at the end of the toolbar (export, import, filters).

• emptyStatedefault "an EmptyState with Add the first row"
  ReactNode

  Shown under the headers when there are no rows.

• labelsdefault "DEFAULT_EDITABLE_GRID_LABELS"
  Partial<EditableGridLabels>

  Every string in English: addRow, deleteRows(count, n), insertAbove, insertBelow, duplicate, edit, delete, undo, redo, errors(count, n), required, invalidNumber, invalidDate, notAnOption, tooLow, tooHigh, invalidStep, editRow(index), save, cancel, close, pasted(rows, cols), copied, cleared, rowsDeleted and the rest. Pass only the keys you translate.

• densitydefault "default"
  "compact" | "default"

  Row height 32 / 40px (40 / 44px on touch screens) and cell text 13 / 14px.

• rowHeaderdefault "number"
  EditableGridRowHeader

  number, checkbox or none. The leading column: row numbers (click selects the row, hover shows the row menu) or checkboxes for bulk actions (the toolbar offers Delete N rows).

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The active cell outline, the range and the checkboxes.

• colordefault ""
  string

  Any CSS color for the outline, the range and the checkboxes. Replaces the tone.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg"

  Corner radius of the panel: 0 / 12 / 16 / 24px.

• showToolbardefault true
  boolean

  The toolbar row: title, error count, bulk delete (rows picked by their header or checkbox), undo / redo, and Add row once the rows scroll. A read-only grid with nothing to show there hides it.

• showErrorsdefault "both"
  "cell" | "summary" | "both"

  cell: invalid cells get a tint, a red corner with the message and the message under the active cell. summary: an error count in the toolbar that jumps to the next one. both: the two.

• heightdefault 480
  number

  Max height of the scroller in px; the header sticks inside it. 0 grows with the rows and never virtualizes.

• frozenColumnsdefault 1
  number

  Columns that stay at the start edge while you scroll sideways (next to the row header), with a shadow once scrolled.

• resizableColumnsdefault true
  boolean

  Drag a header's end edge to resize a column; double-click it to fit the content.

• allowAddRowsdefault true
  boolean

  The Add row button and row, inserts from the row menu, and Enter on the last cell adding a row.

• allowDeleteRowsdefault true
  boolean

  Delete in the row menu and the row sheet, and bulk delete in the toolbar.

• allowPasteNewRowsdefault true
  boolean

  A paste taller than the rows left appends rows; off, the extra lines are dropped.

• validateOndefault "change"
  "change" | "blur"

  change: the cell editor flags a bad value while you type. blur: only once it is committed. Committed cells are always checked (required, type, min / max / step, options, validate) and bad values are kept so they can be fixed.

• readOnlydefault false
  boolean

  Selection and copy only: no editing, paste, add or delete. On phones the row sheet shows the row read-only with a Close button.

• responsivedefault true
  boolean

  Below 768px a second tap edits the whole row in a bottom sheet and the row menu is an action sheet.

• localedefault ""
  string

  Numbers, money, dates and paste parsing ("1,234.50" is 1234.5 in en-US, "1.234,50" in ro-RO). Empty uses the UIProvider or LocaleProvider locale, then the browser's. The paste parsers are exported too (see Parts).

• virtualThresholddefault 100
  number

  Above this many rows only the visible ones render (fixed row height). Needs a height; 0 always virtualizes.

• rowReadOnly
  (row: R) => boolean

  Rows that can be selected and copied but not edited (a locked invoice line, an approved timesheet).

• defaultSelection
  GridSelection

  The selection on mount: { anchor: { rowId, columnId }, focus: { rowId, columnId } }.

• onSelectionChange
  (selection: GridSelection | null) => void

  Fires when the active cell or the range changes.

• setApi
  (api: EditableGridApi) => void

  The imperative API: focusCell(ref), startEditing(ref?), addRow(values?, index?) returning the id, deleteRows(ids), undo(), redo(), getSelection(), copySelection(), editRow(id) (opens the row form).

• classNames
  Partial<Record<EditableGridSlot, string>>

  Extra classes for the parts: toolbar, title, scroller, table, header, corner, columnHeader, row, rowHeader, cell, editor, selection, active, add, empty.

• className
  string

  Extra classes for the panel, merged last.

Parts

FAQ

More React table and list components