Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

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>
   );
 }