Editable Data Components

Ready

Interactive components for inline editing, task management, and financial data display.

EditableList

Task list with inline checkbox completion, hover-reveal actions, and drag-to-reorder

Complete project proposal
Review design mockups
Update documentation
Schedule team meeting
Send client update

EditableCell

Click-to-edit cells with hover affordance, save/cancel controls, and validation feedback

Field	Value
Name	John Doe
Email	john@example.com
Age	32
Salary	$85,000

EditableTable

Full table with inline editable cells, add/delete rows, and validation support

Name	Department	Salary	Start Date
Alice Johnson	Engineering	$95,000	2022-03-15
Bob Smith	Marketing	$75,000	2021-08-20
Carol White	Design	$82,000	2023-01-10
David Brown	Engineering	$105,000	2020-05-05

FinancialTable - Quarterly Report

Decimal-aligned columns, monospaced numerals, currency in header, with totals row

Quarter	Revenue(USD)	Expenses(USD)	Net Profit(USD)	Margin
Q1 2024	125,000.50	87,500.25	37,500.25	30.0%
Q2 2024	142,000.75	95,200.50	46,800.25	33.0%
Q3 2024	138,500.00	98,300.00	40,200.00	29.0%
Q4 2024	156,000.25	102,500.75	53,499.50	34.3%
FY 2024 Total	561,501.50	383,501.50	178,000.00	126.3

FinancialTable - Product Pricing

Compact density with product pricing and margins

Product	Price(USD)	Cost(USD)	Profit(USD)	Margin
Premium Plan	29.99	12.50	17.49	58.4%
Business Plan	99.99	45.00	54.99	55.0%
Enterprise Plan	299.99	125.00	174.99	58.3%
Starter Plan	9.99	5.00	4.99	49.9%
All Products	439.96	187.50	252.46	221.6

API Reference

Props and usage for editable data components

EditableList Props

Prop	Type	Default	Description
items	EditableListItem[]	required	Array of list items
reorderable	boolean	false	Enable drag-to-reorder
checkable	boolean	true	Show checkboxes
editable	boolean	true	Enable inline editing

EditableTable Props

Prop	Type	Default	Description
columns	EditableTableColumn[]	required	Column definitions with type, validation, formatting
data	T[]	required	Array of row data objects
onChange	function	required	Callback when data changes
addable	boolean	false	Show add row button
deletable	boolean	false	Show delete row buttons
striped	boolean	false	Alternate row background colors

EditableCell Props

Prop	Type	Default	Description
value	string \| number	required	Cell value
type	text \| number \| email \| url \| date	text	Input type
validate	function	-	Validation function
format	function	-	Display formatter

FinancialTable Props

Prop	Type	Default	Description
columns	FinancialColumn[]	required	Column definitions with currency
highlightNegative	boolean	true	Highlight negative values in red
showTotals	boolean	false	Show totals footer row
density	compact \| comfortable \| spacious	comfortable	Row height density

Usage Examples

Code examples for implementing editable data components

// EditableList
import { EditableList } from '@/components/ui/editable-list'

const [tasks, setTasks] = useState([
  { id: 1, text: 'Task 1', completed: false },
  { id: 2, text: 'Task 2', completed: true },
])

<EditableList
  items={tasks}
  onChange={setTasks}
  reorderable
  checkable
  editable
/>

// EditableCell
import { EditableCell } from '@/components/ui/editable-cell'

<EditableCell
  value={userData.email}
  type="email"
  onSave={(value) => setUserData({ ...userData, email: String(value) })}
  validate={(value) => !String(value).includes('@') ? 'Invalid email' : null}
/>

// EditableTable
import { EditableTable } from '@/components/ui/editable-table'

<EditableTable
  columns={[
    { key: 'name', label: 'Name' },
    { key: 'salary', label: 'Salary', type: 'number', align: 'right',
      format: (v) => `$${Number(v).toLocaleString()}` },
  ]}
  data={employees}
  onChange={setEmployees}
  addable
  deletable
/>

// FinancialTable
import { FinancialTable } from '@/components/ui/financial-table'

<FinancialTable
  columns={[
    { key: 'quarter', label: 'Quarter', align: 'left' },
    { key: 'revenue', label: 'Revenue', currency: 'USD', decimals: 2 },
    { key: 'profit', label: 'Profit', currency: 'USD', decimals: 2 },
  ]}
  data={quarterlyData}
  highlightNegative
  showTotals
/>