Editable Cell

Inline editable table cell supporting text, number, select, and date types with async save.

Installation

pnpm dlx shadcn@latest add https://jb.desishub.com/r/editable-cell.json

Usage

import { EditableCell } from "@/components/editable-cell";

<EditableCell
  type="text"
  value="John Doe"
  onSave={async (val) => await updateName(val)}
/>
 
<EditableCell
  type="number"
  value={1500}
  displayValue="$1,500"
  onSave={async (val) => await updateAmount(val)}
/>
 
<EditableCell
  type="select"
  value="active"
  options={[
    { label: "Active", value: "active" },
    { label: "Inactive", value: "inactive" },
  ]}
  onSave={async (val) => await updateStatus(val)}
/>
 
<EditableCell
  type="date"
  value="2026-04-01"
  onSave={async (val) => await updateDate(val)}
/>

Props

Prop	Type	Description
`type`	`"text" \| "number" \| "select" \| "date"`	Cell type.
`value`	`string \| number`	Current value.
`displayValue`	`string`	Optional formatted display text.
`onSave`	`(value) => Promise`	Async function to persist the value.
`options`	`{label, value}[]`	Options for select type.