Editable Table

import { EditableTable, EditableTableColumn } from '@/blocks/data-display/editable-table'

interface ProductRow {
  id: number
  name: string
  price: number
  sku: string
}

export default function Example() {
  const [data, setData] = useState<ProductRow[]>([
    { id: 1, name: 'Product 1', price: 99.99, sku: 'SKU-001' },
  ])

  const columns: EditableTableColumn[] = [
    { key: 'name', label: 'Name', type: 'text' },
    { key: 'price', label: 'Price', type: 'number', align: 'right' },
    { key: 'sku', label: 'SKU', editable: false }, // Read-only
  ]

  return (
    <>
      {/* Basic table */}
      <EditableTable
        columns={columns}
        data={data}
        onChange={setData}
      />

      {/* With add/delete functionality */}
      <EditableTable
        columns={columns}
        data={data}
        onChange={setData}
        addable
        deletable
        onAddRow={() => ({
          id: Date.now(),
          name: '',
          price: 0,
          sku: `SKU-${Date.now()}`,
        })}
      />

      {/* With validation and formatting */}
      <EditableTable
        columns={[
          {
            key: 'price',
            label: 'Price',
            type: 'number',
            format: (v) => `$${Number(v).toFixed(2)}`,
            validate: (v) => Number(v) < 0 ? 'Must be positive' : null,
          },
        ]}
        data={data}
        onChange={setData}
      />

      {/* Striped rows */}
      <EditableTable
        columns={columns}
        data={data}
        onChange={setData}
        striped
      />
    </>
  )
}