DataGrid

import { useState } from "react";
import { Badge, DataGrid, Text, Toggle, VStack, type ColumnDefinition } from "@/ohmygui";

const items = [
  { id: "one", name: "Personal studio", status: "Ready" },
  { id: "two", name: "Component garden", status: "In progress" },
  { id: "three", name: "Quiet archive", status: "Paused" },
];
type Workspace = (typeof items)[number];
const columns: ColumnDefinition<Workspace>[] = [
  { key: "name", header: "Workspace" },
  { key: "status", header: "Status", render: (item) => <Badge variant={item.status === "Ready" ? "success" : "default"}>{item.status}</Badge> },
];

export default function Example() {
  const [selected, setSelected] = useState<string | number>("one");
  const [editMode, setEditMode] = useState(false);
  const selectedName = items.find((item) => item.id === selected)?.name ?? "None";

  return (
    <VStack gap="sm" align="stretch">
      <Toggle label="Enable content editing" checked={editMode} onChange={(event) => setEditMode(event.currentTarget.checked)} />
      <DataGrid aria-label="Workspaces" rows={items} getKey={(item) => item.id} columns={columns} selection={selected} onSelectionChange={setSelected} editMode={editMode} />
      <Text as="p" role="status">Selected row: {selectedName}</Text>
      <Text as="p" variant="metadata" color="muted">Cell edits affect the rendered content only; keep saved row data in your application.</Text>
    </VStack>
  );
}