Editable Table

1export type Product = {
2  id: string
3  name: string
4  price: number
5  stock: number
6  category: string
7}
8 
9export type FieldType = 'text' | 'number'
10 
11export interface FieldConfig {
12  id: 'name' | 'price' | 'stock'
13  label: string
14  type: FieldType
15  validate: (raw: string) => string | null
16}
17 
18export const editableFields: FieldConfig[] = [
19  {
20    id: 'name',
21    label: 'Name',
22    type: 'text',
23    validate: (raw) => (raw.trim().length > 0 ? null : 'Name is required'),
24  },
25  {
26    id: 'price',
27    label: 'Price',
28    type: 'number',
29    validate: (raw) => {
30      const n = Number(raw)
31      if (raw.trim() === '' || Number.isNaN(n)) return 'Enter a number'
32      if (n < 0) return 'Must be 0 or more'
33      return null
34    },
35  },
36  {
37    id: 'stock',
38    label: 'Stock',
39    type: 'number',
40    validate: (raw) => {
41      const n = Number(raw)
42      if (raw.trim() === '' || Number.isNaN(n) || !Number.isInteger(n)) {
43        return 'Enter a whole number'
44      }
45      if (n < 0) return 'Must be 0 or more'
46      return null
47    },
48  },
49]