Editing & validation

import { useState } from "react";
import type { z } from "zod";
import { DataTable } from "../../Datatable";
import type { ColumnSetting } from "../../Datatable";
import { products as initialProducts, type ProductRow } from "./exampleData";
import type { ExampleProps } from "./types";

const columns: ColumnSetting<ProductRow>[] = [
  {
    id: "product",
    title: "Product",
    width: 220,
    editor: { type: "text", placeholder: "Product name" },
    validation: (zod: typeof z) => zod.string().min(3, "Use at least 3 characters"),
  },
  {
    id: "brand",
    title: "Brand",
    width: 110,
    editor: { type: "text" },
  },
  {
    id: "category",
    title: "Category",
    width: 120,
    editor: { type: "text" },
  },
  {
    id: "status",
    title: "Status",
    width: 130,
    editor: {
      type: "select",
      options: ["Live", "Draft", "Paused"].map((value) => ({ value, label: value })),
    },
  },
  {
    id: "stock",
    title: "Stock",
    width: 110,
    align: "right",
    editor: { type: "number", min: 0, max: 999, step: 1 },
    validation: (zod: typeof z) => zod.coerce.number().min(0).max(999),
  },
  {
    id: "price",
    title: "Price",
    width: 120,
    align: "right",
    editor: { type: "number", min: 0, step: 0.01 },
    validation: (zod: typeof z) => zod.coerce.number().positive("Price must be positive"),
  },
  {
    id: "margin",
    title: "Margin %",
    width: 110,
    align: "right",
    editor: { type: "number", step: 0.1 },
  },
  {
    id: "rating",
    title: "Rating",
    width: 100,
    align: "right",
    editor: { type: "number", min: 0, max: 5, step: 0.1 },
  },
  { id: "owner", title: "Owner", width: 140, editor: "text" },
  { id: "featured", title: "Featured", width: 110, align: "center", headerAlign: "center", editor: "checkbox" },
];

export default function EditingExample({ theme }: ExampleProps) {
  const [rows, setRows] = useState(() => [...initialProducts]);
  return (
    <DataTable
      theme={theme}
      title="Editable products"
      dataSource={rows}
      onChange={setRows}
      columnSettings={columns}
      maxHeight={480}
      enablePagination
      enableEditing
      enableRowIndex
      undoLimit={20}
      redoLimit={20}
    />
  );
}