From 54a17b7b981f55957196dbd3e764a43f62178198 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 02:11:12 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/forms/custom-form-builder.tsx | 52 ++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/src/components/forms/custom-form-builder.tsx b/src/components/forms/custom-form-builder.tsx
index 0e66821..1c52bb9 100644
--- a/src/components/forms/custom-form-builder.tsx
+++ b/src/components/forms/custom-form-builder.tsx
@@ -1239,6 +1239,58 @@ export function CustomFormBuilder() {
           });
         }}
       />
+
+      <Dialog open={tableDialogOpen} onOpenChange={setTableDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Insert table</DialogTitle>
+            <DialogDescription>
+              Choose dimensions. You can toggle borders per cell from the toolbar after inserting.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <Label className="text-xs">Rows</Label>
+              <Input
+                type="number"
+                min={1}
+                max={20}
+                value={tableRows}
+                onChange={(e) => setTableRows(Math.max(1, Math.min(20, parseInt(e.target.value) || 1)))}
+              />
+            </div>
+            <div>
+              <Label className="text-xs">Columns</Label>
+              <Input
+                type="number"
+                min={1}
+                max={12}
+                value={tableCols}
+                onChange={(e) => setTableCols(Math.max(1, Math.min(12, parseInt(e.target.value) || 1)))}
+              />
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Switch checked={tableHeader} onCheckedChange={setTableHeader} id="th-row" />
+            <Label htmlFor="th-row" className="cursor-pointer text-sm">
+              First row as header
+            </Label>
+          </div>
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setTableDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => {
+                insertTable(tableRows, tableCols, tableHeader);
+                setTableDialogOpen(false);
+              }}
+            >
+              Insert
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }