feathery-org · joondotcode · Apr 3, 2026 · Apr 1, 2026 · Apr 2, 2026 · Apr 2, 2026
@@ -54,6 +54,7 @@ const Element = ({ node: el, form }: any) => {
     setInlineErrors,
     changeValue,
     updateFieldValues,
+    submitCustom,
     elementOnView,
     onViewElements,
     formSettings,
@@ -94,6 +95,8 @@ const Element = ({ node: el, form }: any) => {
       <Elements.TableElement
         {...basicProps}
         onClick={(payload: any) => tableOnClick(el, payload)}
+        updateFieldValues={updateFieldValues}
+        submitCustom={submitCustom}
         buttonLoaders={buttonLoaders}
       />
     );

@@ -2895,6 +2895,7 @@ function Form({
     changeStep: (nextStepKey: string) =>
       changeFormStep(nextStepKey, activeStep.key, false),
     updateFieldValues,
+    submitCustom: (values: Record<string, any>) => client?.submitCustom(values),
     elementOnView,
     onViewElements: viewElements,
     formSettings,

@@ -5,6 +5,8 @@ import {
   actionButtonStyle,
   actionMenuStyle,
   actionMenuItemStyle,
+  actionMenuSeparatorStyle,
+  actionMenuDeleteItemStyle,
   actionContainerStyle,
   menuIconStyle,
   actionIconButtonStyle
@@ -31,6 +33,8 @@ type ActionButtonsProps = {
   forceInlineButtons?: boolean;
   tableId?: string;
   buttonLoaders?: Record<string, any>;
+  canDeleteRows?: boolean;
+  onDeleteRow?: (rowIndex: number) => void;
 };
 
 export function ActionButtons({
@@ -41,7 +45,9 @@ export function ActionButtons({
   onClick,
   forceInlineButtons = false,
   tableId = '',
-  buttonLoaders = {}
+  buttonLoaders = {},
+  canDeleteRows = false,
+  onDeleteRow
 }: ActionButtonsProps) {
   if (actions.length === 0) return null;
 
@@ -179,6 +185,22 @@ export function ActionButtons({
                     </button>
                   );
                 })}
+                {canDeleteRows && onDeleteRow && (
+                  <>
+                    <div css={actionMenuSeparatorStyle} />
+                    <button
+                      type='button'
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setIsMenuOpen(false);
+                        onDeleteRow(rowIndex);
+                      }}
+                      css={actionMenuDeleteItemStyle}
+                    >
+                      Delete
+                    </button>
+                  </>
+                )}
               </div>,
               featheryDoc().body
             )}

@@ -0,0 +1,102 @@
+import { useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { featheryDoc } from '../../../utils/browser';
+import {
+  confirmPopoverStyle,
+  confirmTextStyle,
+  confirmButtonRowStyle,
+  confirmDeleteButtonStyle,
+  confirmCancelButtonStyle
+} from './styles';
+
+type DeleteConfirmProps = {
+  anchorEl: HTMLElement | null;
+  onConfirm: () => void;
+  onCancel: () => void;
+  message?: string;
+  confirmLabel?: string;
+};
+
+export function DeleteConfirm({
+  anchorEl,
+  onConfirm,
+  onCancel,
+  message = 'Delete this row?',
+  confirmLabel = 'Delete'
+}: DeleteConfirmProps) {
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  if (!anchorEl) return null;
+
+  const anchorRect = anchorEl.getBoundingClientRect();
+  const top = anchorRect.bottom + 4;
+  const left = anchorRect.right;
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as Node) &&
+        anchorEl &&
+        !anchorEl.contains(event.target as Node)
+      ) {
+        onCancel();
+      }
+    };
+
+    const handleScroll = () => onCancel();
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onCancel();
+    };
+
+    const doc = featheryDoc();
+    doc.addEventListener('mousedown', handleClickOutside);
+    doc.addEventListener('scroll', handleScroll, true);
+    doc.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      doc.removeEventListener('mousedown', handleClickOutside);
+      doc.removeEventListener('scroll', handleScroll, true);
+      doc.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onCancel, anchorEl]);
+
+  return createPortal(
+    <div
+      ref={popoverRef}
+      role='alertdialog'
+      aria-label={message}
+      css={{
+        ...confirmPopoverStyle,
+        top: `${top}px`,
+        left: `${left}px`,
+        transform: 'translateX(-100%)'
+      }}
+    >
+      <p css={confirmTextStyle}>{message}</p>
+      <div css={confirmButtonRowStyle}>
+        <button
+          type='button'
+          css={confirmCancelButtonStyle}
+          onClick={(e) => {
+            e.stopPropagation();
+            onCancel();
+          }}
+        >
+          Cancel
+        </button>
+        <button
+          type='button'
+          css={confirmDeleteButtonStyle}
+          onClick={(e) => {
+            e.stopPropagation();
+            onConfirm();
+          }}
+        >
+          {confirmLabel}
+        </button>
+      </div>
+    </div>,
+    featheryDoc().body
+  );
+}