Editable Data Components

// EditableList
import { EditableList } from '@/blocks/data-display/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 '@/blocks/data-display/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 '@/blocks/data-display/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 '@/blocks/data-display/financial-table'

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