feat(data-grid): add copy/paste

public/r/registry.json

@@ -329,6 +329,7 @@
         "calendar",
         "checkbox",
         "command",
+        "dialog",
         "dropdown-menu",
         "input",
         "popover",
@@ -375,6 +376,11 @@
           "type": "registry:component",
           "target": "src/components/data-grid/data-grid-context-menu.tsx"
         },
+        {
+          "path": "src/components/data-grid/data-grid-paste-dialog.tsx",
+          "type": "registry:component",
+          "target": "src/components/data-grid/data-grid-paste-dialog.tsx"
+        },
         {
           "path": "src/components/data-grid/data-grid-row.tsx",
           "type": "registry:component",

registry.json

@@ -329,6 +329,7 @@
         "calendar",
         "checkbox",
         "command",
+        "dialog",
         "dropdown-menu",
         "input",
         "popover",
@@ -375,6 +376,11 @@
           "type": "registry:component",
           "target": "src/components/data-grid/data-grid-context-menu.tsx"
         },
+        {
+          "path": "src/components/data-grid/data-grid-paste-dialog.tsx",
+          "type": "registry:component",
+          "target": "src/components/data-grid/data-grid-paste-dialog.tsx"
+        },
         {
           "path": "src/components/data-grid/data-grid-row.tsx",
           "type": "registry:component",

src/components/data-grid/data-grid-demo.tsx

@@ -122,7 +122,7 @@ function generatePerson(id: number): Person {
   });
 
   return {
-    id: id.toString(),
+    id: faker.string.nanoid(8),
     name: `${firstName} ${lastName}`,
     age: faker.number.int({ min: 22, max: 65 }),
     email: faker.internet.email({ firstName, lastName }).toLowerCase(),
@@ -368,18 +368,18 @@ export function DataGridDemo() {
 
   const onRowAdd: NonNullable<UseDataGridProps<Person>["onRowAdd"]> =
     React.useCallback(() => {
+      // Called when user manually adds a single row (e.g., clicking "Add Row" button)
       // In a real app, you would make a server call here:
       // await fetch('/api/people', {
       //   method: 'POST',
       //   body: JSON.stringify({ name: 'New Person' })
       // });
 
       // For this demo, just add a new row to the data
-      const newId = data.length + 1;
       setData((prev) => [
         ...prev,
         {
-          id: newId.toString(),
+          id: faker.string.nanoid(8),
         },
       ]);
 
@@ -389,6 +389,25 @@ export function DataGridDemo() {
       };
     }, [data.length]);
 
+  const onRowsAdd: NonNullable<UseDataGridProps<Person>["onRowsAdd"]> =
+    React.useCallback((count: number) => {
+      // Called when paste operation needs to create multiple rows at once
+      // This is more efficient than calling onRowAdd multiple times - only a single API call needed
+      // In a real app, you would make a server call here:
+      // await fetch('/api/people/bulk', {
+      //   method: 'POST',
+      //   body: JSON.stringify({ count })
+      // });
+
+      // For this demo, create multiple rows in a single state update
+      setData((prev) => {
+        const newRows = Array.from({ length: count }, () => ({
+          id: faker.string.nanoid(8),
+        }));
+        return [...prev, ...newRows];
+      });
+    }, []);
+
   const onRowsDelete: NonNullable<UseDataGridProps<Person>["onRowsDelete"]> =
     React.useCallback((rows) => {
       // In a real app, you would make a server call here:
@@ -406,6 +425,7 @@ export function DataGridDemo() {
     data,
     onDataChange: setData,
     onRowAdd,
+    onRowsAdd,
     onRowsDelete,
     getRowId: (row) => row.id,
     initialState: {
@@ -414,6 +434,7 @@ export function DataGridDemo() {
       },
     },
     enableSearch: true,
+    enablePaste: true,
   });
 
   const height = Math.max(400, windowSize.height - 150);

src/components/data-grid/data-grid-paste-dialog.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import type { Table, TableMeta } from "@tanstack/react-table";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+interface DataGridPasteDialogProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataGridPasteDialog<TData>({
+  table,
+}: DataGridPasteDialogProps<TData>) {
+  const meta = table.options.meta;
+  const pasteDialog = meta?.pasteDialog;
+  const onPasteDialogOpenChange = meta?.onPasteDialogOpenChange;
+  const onPasteWithExpansion = meta?.onPasteWithExpansion;
+  const onPasteWithoutExpansion = meta?.onPasteWithoutExpansion;
+
+  if (!pasteDialog) return null;
+
+  return (
+    <PasteDialog
+      pasteDialog={pasteDialog}
+      onPasteDialogOpenChange={onPasteDialogOpenChange}
+      onPasteWithExpansion={onPasteWithExpansion}
+      onPasteWithoutExpansion={onPasteWithoutExpansion}
+    />
+  );
+}
+
+interface PasteDialogProps
+  extends Pick<
+      TableMeta<unknown>,
+      | "onPasteDialogOpenChange"
+      | "onPasteWithExpansion"
+      | "onPasteWithoutExpansion"
+    >,
+    Required<Pick<TableMeta<unknown>, "pasteDialog">> {}
+
+const PasteDialog = React.memo(PasteDialogImpl, (prev, next) => {
+  if (prev.pasteDialog.open !== next.pasteDialog.open) return false;
+  if (!next.pasteDialog.open) return true;
+  if (prev.pasteDialog.rowsNeeded !== next.pasteDialog.rowsNeeded) return false;
+
+  return true;
+});
+
+function PasteDialogImpl({
+  pasteDialog,
+  onPasteDialogOpenChange,
+  onPasteWithExpansion,
+  onPasteWithoutExpansion,
+}: PasteDialogProps) {
+  const expandRadioRef = React.useRef<HTMLInputElement | null>(null);
+
+  const onCancel = React.useCallback(() => {
+    onPasteDialogOpenChange?.(false);
+  }, [onPasteDialogOpenChange]);
+
+  const onContinue = React.useCallback(() => {
+    if (expandRadioRef.current?.checked) {
+      onPasteWithExpansion?.();
+    } else {
+      onPasteWithoutExpansion?.();
+    }
+  }, [onPasteWithExpansion, onPasteWithoutExpansion]);
+
+  return (
+    <Dialog open={pasteDialog.open} onOpenChange={onPasteDialogOpenChange}>
+      <DialogContent data-grid-popover="">
+        <DialogHeader>
+          <DialogTitle>Do you want to add more rows?</DialogTitle>
+          <DialogDescription>
+            We need <strong>{pasteDialog.rowsNeeded}</strong> additional row
+            {pasteDialog.rowsNeeded !== 1 ? "s" : ""} to paste everything from
+            your clipboard.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-3 py-1">
+          <label className="flex cursor-pointer items-start gap-3">
+            <RadioItem
+              ref={expandRadioRef}
+              name="expand-option"
+              value="expand"
+              defaultChecked
+            />
+            <div className="flex flex-col gap-1">
+              <span className="font-medium text-sm leading-none">
+                Create new rows
+              </span>
+              <span className="text-muted-foreground text-sm">
+                Add {pasteDialog.rowsNeeded} new row
+                {pasteDialog.rowsNeeded !== 1 ? "s" : ""} to the table and paste
+                all data
+              </span>
+            </div>
+          </label>
+          <label className="flex cursor-pointer items-start gap-3">
+            <RadioItem name="expand-option" value="no-expand" />
+            <div className="flex flex-col gap-1">
+              <span className="font-medium text-sm leading-none">
+                Keep current rows
+              </span>
+              <span className="text-muted-foreground text-sm">
+                Paste only what fits in the existing rows
+              </span>
+            </div>
+          </label>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button onClick={onContinue}>Continue</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function RadioItem({ className, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type="radio"
+      className={cn(
+        "relative size-4 shrink-0 appearance-none rounded-full border border-input bg-background shadow-xs outline-none transition-[color,box-shadow]",
+        "text-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "checked:before:-translate-x-1/2 checked:before:-translate-y-1/2 checked:before:absolute checked:before:top-1/2 checked:before:left-1/2 checked:before:size-2 checked:before:rounded-full checked:before:bg-primary checked:before:content-['']",
+        "dark:bg-input/30",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

src/components/data-grid/data-grid.tsx

@@ -5,6 +5,7 @@ import { Plus } from "lucide-react";
 import * as React from "react";
 import { DataGridColumnHeader } from "@/components/data-grid/data-grid-column-header";
 import { DataGridContextMenu } from "@/components/data-grid/data-grid-context-menu";
+import { DataGridPasteDialog } from "@/components/data-grid/data-grid-paste-dialog";
 import { DataGridRow } from "@/components/data-grid/data-grid-row";
 import { DataGridSearch } from "@/components/data-grid/data-grid-search";
 import type { useDataGrid } from "@/hooks/use-data-grid";
@@ -65,6 +66,7 @@ export function DataGrid<TData>({
     >
       {searchState && <DataGridSearch {...searchState} />}
       <DataGridContextMenu table={table} />
+      <DataGridPasteDialog table={table} />
       <div
         role="grid"
         aria-label="Data grid"