@wavemaker-ai/react-runtime 1.0.0-rc.647684 → 12.0.0-rc.335

package/components/data/table/hooks/useTableEditForms.js

@@ -0,0 +1,30 @@
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+const EDIT_FORM_OPTIONS = {
+  mode: "onChange",
+  // Validate on blur (widgets use updateon="blur")
+  shouldUnregister: true
+  // Drop field on unmount; prevents orphaned errors
+};
+const useTableEditForm = (tableName) => {
+  const { control, trigger, setValue, setError, reset, getFieldState } = useForm(EDIT_FORM_OPTIONS);
+  return useMemo(
+    () => ({
+      formRef: { control, trigger, name: tableName, validationtype: "default" },
+      validate: () => trigger(),
+      getInvalidFields: (fieldNames) => fieldNames.filter((fieldName) => getFieldState(fieldName).invalid),
+      setFieldValue: (fieldName, value) => setValue(fieldName, value, { shouldValidate: false, shouldDirty: true }),
+      setFieldError: (fieldName, message) => setError(fieldName, { type: "native", message }),
+      reset: () => reset()
+    }),
+    [control, trigger, setValue, setError, reset, getFieldState, tableName]
+  );
+};
+const useTableEditForms = (tableName) => {
+  const editForm = useTableEditForm(tableName);
+  const newRowForm = useTableEditForm(tableName);
+  return { editForm, newRowForm };
+};
+export {
+  useTableEditForms
+};

package/components/data/table/index.d.ts

@@ -102,6 +102,7 @@ declare const WmTableStandalone: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -245,6 +246,7 @@ declare const WmTable: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/data/table/index.js

@@ -446,7 +446,9 @@ const WmTableComponent = memo(
       handleMultiSelection,
       handleSelectAll,
       handleRowSelectionClick,
-      isRowSelected
+      isRowSelected,
+      selectItem,
+      deselectItem
     } = useRowSelection({
       radioselect,
       multiselect: effectiveMultiselect,
@@ -532,6 +534,7 @@ const WmTableComponent = memo(
       }),
       [wmTableColumns, columnOverrides]
     );
+    const columnValidatorsRef = useRef({});
     const {
       editingRowId,
       isRowEditing,
@@ -577,7 +580,8 @@ const WmTableComponent = memo(
       onRowdelete,
       tableRef,
       isServerSidePagination: isServerSidePagination(),
-      tableName: name
+      tableName: name,
+      columnValidatorsRef
     });
     const { handleRowClick } = useRowHandlers({
       editingRowId,
@@ -638,9 +642,10 @@ const WmTableComponent = memo(
         if (onSort && newSorting.length > 0) {
           const sortData = {
             field: newSorting[0].id,
-            direction: newSorting[0].desc ? "desc" : "asc"
+            direction: newSorting[0].desc ? "desc" : "asc",
+            sortDirection: newSorting[0].desc ? "desc" : "asc"
           };
-          onSort(null, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name], sortData);
+          onSort(null, (_a2 = viewParent == null ? void 0 : viewParent.Widgets) == null ? void 0 : _a2[name], sortData);
         }
       },
       [sorting, name]
@@ -755,7 +760,13 @@ const WmTableComponent = memo(
       []
     );
     const columnsProxy = useMemo(
-      () => createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef),
+      () => createColumnsProxy(
+        wmTableColumns,
+        applyOverride,
+        setColumnsVersion,
+        setSummaryRowDef,
+        columnValidatorsRef.current
+      ),
       [wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef]
     );
     const {
@@ -779,7 +790,7 @@ const WmTableComponent = memo(
         listener.Widgets[name].nativeElement = tableContainerRef.current;
       }
       const data = internalDataset && internalDataset.length > 0 ? internalDataset : table.getRowModel().rows.map((row) => row.original) || [];
-      onDatarender((_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name], data);
+      onDatarender((_a2 = viewParent == null ? void 0 : viewParent.Widgets) == null ? void 0 : _a2[name], data);
     }, [onDatarender, name]);
     columnsStateRef.current = columns;
     const columnsForTable = useMemo(() => {
@@ -944,7 +955,7 @@ const WmTableComponent = memo(
       listener,
       name
     });
-    const { showPanelHeading, showPagination } = usePanelStructure({
+    const { showPanelHeading, showPagination, showFooter } = usePanelStructure({
       title,
       subheading,
       iconclass,
@@ -968,6 +979,23 @@ const WmTableComponent = memo(
       },
       [name]
     );
+    const selectItemRef = useRef(selectItem);
+    const deselectItemRef = useRef(deselectItem);
+    selectItemRef.current = selectItem;
+    deselectItemRef.current = deselectItem;
+    const widgetSelectItem = useCallback((itemOrIndex) => {
+      selectItemRef.current(itemOrIndex);
+    }, []);
+    const widgetDeselectItem = useCallback((itemOrIndex) => {
+      deselectItemRef.current(itemOrIndex);
+    }, []);
+    useEffect(() => {
+      var _a2;
+      (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, widgetRegistrationKey, {
+        selectItem: widgetSelectItem,
+        deselectItem: widgetDeselectItem
+      });
+    });
     const sortInfoForExport = useMemo(() => {
       if (sorting.length > 0) {
         return {
@@ -1026,7 +1054,8 @@ const WmTableComponent = memo(
         const firstSort = sorting[0];
         return {
           field: firstSort.id,
-          direction: firstSort.desc ? "desc" : "asc"
+          direction: firstSort.desc ? "desc" : "asc",
+          sortDirection: firstSort.desc ? "desc" : "asc"
         };
       }
       return void 0;
@@ -1118,8 +1147,8 @@ const WmTableComponent = memo(
           });
           if (onBeforedatarender) {
             onBeforedatarender(
-              (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name],
-              // widget reference
+              (_a2 = viewParent == null ? void 0 : viewParent.Widgets) == null ? void 0 : _a2[name],
+              // widget reference (reactive proxy, not raw listener)
               data,
               // data
               columnsProxy
@@ -1133,10 +1162,9 @@ const WmTableComponent = memo(
             } else {
               queueOnDatarenderAfterPaint();
             }
-            const nextRows = internalDataset.map(
-              (r) => typeof r === "object" && r !== null ? __spreadValues({}, r) : r
+            setInternalDataset(
+              (prev) => prev.map((r) => typeof r === "object" && r !== null ? __spreadValues({}, r) : r)
             );
-            setInternalDataset(nextRows);
           } else if (onDatarender) {
             queueOnDatarenderAfterPaint();
           }
@@ -1275,7 +1303,7 @@ const WmTableComponent = memo(
           const rowIndex = internalDataset.findIndex(
             (r) => r._wmTableRowId === row._wmTableRowId || r.id !== void 0 && r.id === row.id
           );
-          const result = await onBeforerowdelete(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name], cleanedRow, {
+          const result = await onBeforerowdelete(event, (_a2 = viewParent == null ? void 0 : viewParent.Widgets) == null ? void 0 : _a2[name], cleanedRow, {
             rowIndex,
             data: cleanedRow
           });
@@ -1339,7 +1367,7 @@ const WmTableComponent = memo(
             showToast("Failed to refresh table data", "Error");
           }
           if (onError) {
-            onError(null, (_b2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b2[name], error, "refresh");
+            onError(null, (_b2 = viewParent == null ? void 0 : viewParent.Widgets) == null ? void 0 : _b2[name], error, "refresh");
           }
         }
       },
@@ -1354,7 +1382,10 @@ const WmTableComponent = memo(
       datasource,
       dataset,
       selectPageSize,
-      rowDefInstances
+      rowDefInstances,
+      // Angular parity: table.selectItem / table.deselectItem (accepts a row or an index).
+      selectItem: widgetSelectItem,
+      deselectItem: widgetDeselectItem
     };
     const getRowId = (row) => row._wmTableRowId || String(row.id);
     const pushSelectedItemsToWidget = (selectedIds) => {
@@ -1524,34 +1555,40 @@ const WmTableComponent = memo(
                       } : {})
                     }, { name }), {
                       children: [
-                        showheader && wmTableColumns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx(
-                            TableHeaderComponent,
-                            {
-                              table,
-                              enablesort,
-                              enablecolumnselection,
-                              rowClass,
-                              ColClassSignature,
-                              sorting,
-                              columnSizing,
-                              rowSelection,
-                              rowExpansionConfig: visibleRowExpansionConfig,
-                              columnsVersion,
-                              filterMode: filtermode,
-                              columnFilters,
-                              onColumnFilterChange: setColumnFilter,
-                              renderFormWidget,
-                              listener,
-                              tableStructure,
-                              onColumnSelect: handleColumnSelect,
-                              onColumnDeselect: handleColumnDeselect,
-                              onHeaderclick,
-                              tableName: name
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("colgroup", { children: colGroupSpec.map((c) => /* @__PURE__ */ jsx("col", { style: c.style, width: c.width }, c.key)) })
-                        ] }),
+                        colGroupSpec.length > 0 && /* @__PURE__ */ jsx("colgroup", { children: colGroupSpec.map((c) => /* @__PURE__ */ jsx(
+                          "col",
+                          __spreadValues({
+                            style: c.style,
+                            width: c.width
+                          }, c.domHidden ? { "data-wm-col-hidden": "" } : {}),
+                          c.key
+                        )) }),
+                        showheader && wmTableColumns.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                          TableHeaderComponent,
+                          {
+                            table,
+                            enablesort,
+                            enablecolumnselection,
+                            rowClass,
+                            ColClassSignature,
+                            sorting,
+                            columnSizing,
+                            rowSelection,
+                            rowExpansionConfig: visibleRowExpansionConfig,
+                            columnsVersion,
+                            filterMode: filtermode,
+                            columnFilters,
+                            onColumnFilterChange: setColumnFilter,
+                            renderFormWidget,
+                            listener,
+                            viewParent,
+                            tableStructure,
+                            onColumnSelect: handleColumnSelect,
+                            onColumnDeselect: handleColumnDeselect,
+                            onHeaderclick,
+                            tableName: name
+                          }
+                        ) }),
                         (internalDataset.length > 0 || !isTableLoading) && /* @__PURE__ */ jsx(
                           TableBodyComponent,
                           {
@@ -1601,7 +1638,7 @@ const WmTableComponent = memo(
               }
             ) }) })
           ] }),
-          /* @__PURE__ */ jsxs(Box, { className: "panel-footer clearfix", children: [
+          showFooter && /* @__PURE__ */ jsxs(Box, { className: "panel-footer clearfix", children: [
             showPagination && /* @__PURE__ */ jsx(Box, { className: "app-datagrid-paginator", children: /* @__PURE__ */ jsx(
               WmPagination,
               {

package/components/data/table/live-table/index.d.ts

@@ -35,6 +35,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/data/table/props.d.ts

@@ -6,6 +6,9 @@ import { IAlignment, INavigation } from "../list/props";
 import { EditWidgetType } from "./utils";
 import { StorageType } from "../../../utils/state-persistance";
 import { LiveVariableConfig } from "@wavemaker-ai/react-runtime/variables/live-variable";
+import { ValidatorConfig } from "@wavemaker-ai/react-runtime/components/data/form/form-controller/props";
+import { ColumnValidatorRegistry } from "./utils/columnValidation";
+import { TableEditFormRef } from "./hooks/useTableEditForms";
 export type TableEditMode = "inline" | "dialog" | "form" | "quickedit" | "none";
 export type TableActionPosition = "header" | "footer";
 export type TableFormPosition = "top" | "bottom";
@@ -820,6 +823,7 @@ export interface TableHeaderProps {
     columnsVersion?: number;
     filterMode?: TableFilterMode;
     listener: any;
+    viewParent?: any;
     columnFilters?: Record<string, any>;
     onColumnFilterChange?: (columnId: string, value: string, matchMode?: string) => void;
     renderFormWidget: (fieldName: string, widgetType: string, value: any, onChange: (value: any) => void, additionalProps?: any) => React.ReactNode;
@@ -854,7 +858,7 @@ export interface AddNewRowProps {
     sessionKey: number;
     editingRowData: Record<string, any>;
     renderEditableCell: (column: WmTableColumnProps, fieldName: string, widgetType: string, editValue: any, rowId: string) => ReactElement;
-    onKeyDown?: (e: KeyboardEvent, sourceRowId?: string) => void;
+    onKeyDown?: (e: React.KeyboardEvent, sourceRowId?: string) => void;
     handleSave: () => void;
     handleCancel: () => void;
     listener?: any;
@@ -868,13 +872,17 @@ export interface EditableCellProps {
     fieldName: string;
     widgetType: string;
     editValue: any;
-    fieldValidationErrorsRef: RefObject<Record<string, boolean>>;
-    cellUpdateCallbacksRef: RefObject<Record<string, () => void>>;
+    /** The react-hook-form instance for this edit session, handed to the cell's widget. */
+    formRef: TableEditFormRef;
+    /** Shared `${rowId}_${fieldName}` -> true map of cells currently in error. */
+    cellErrorsRef?: RefObject<Record<string, boolean>>;
+    /** Cell containers, keyed `${rowId}_${fieldName}`. */
     fieldRefs: RefObject<Record<string, HTMLElement | null>>;
-    renderFormWidget: (name: string, type: string, value: any, onChange: (newValue: any) => void, props: any) => ReactElement;
+    columnValidatorsRef?: RefObject<ColumnValidatorRegistry>;
+    renderFormWidget: (name: string, type: string, value: any, onChange: (newValue: any) => void, props: TableEditWidgetProps) => ReactElement;
     updateFieldValue: (fieldName: string, newValue: any, rowId?: string) => void;
     sessionKey?: number;
-    onKeyDown?: (e: KeyboardEvent, sourceRowId?: string) => void;
+    onKeyDown?: (e: React.KeyboardEvent, sourceRowId?: string) => void;
     editMode?: TableEditMode;
     validationmessage?: string;
 }
@@ -980,14 +988,32 @@ export interface UseTableDataReturn {
 export interface UseFormWidgetProps {
     listener?: any;
 }
+/** Everything an editable cell hands to its edit widget beyond the value itself. */
+export interface TableEditWidgetProps {
+    required?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    defaultvalue?: string | number | boolean;
+    sessionKey?: string | number;
+    rowData?: any;
+    column?: any;
+    /**
+     * The edit session's react-hook-form instance. `withFormController` validates the widget
+     * against it and, from the same validators, derives the date/time bounds the picker enforces
+     * on its own input.
+     */
+    formRef?: TableEditFormRef;
+    /** Form field name for the cell — the column field, independent of the row. */
+    formKey?: string;
+    /** Validators set by a page script via `columns.<name>.setValidators([...])`. */
+    validators?: ValidatorConfig[];
+    /** Validators set via `columns.<name>.setAsyncValidators([...])`. */
+    asyncValidators?: ValidatorConfig[];
+    /** Keep the widget out of the form entirely (hidden columns). */
+    ignoreInForm?: boolean;
+}
 export interface UseFormWidgetReturn {
-    renderFormWidget: (fieldName: string, widgetType: string, value: any, onFieldChange?: (newValue: any) => void, widgetProps?: {
-        required?: boolean;
-        disabled?: boolean;
-        placeholder?: string;
-        defaultvalue?: string | number | boolean;
-        sessionKey?: string | number;
-    }) => ReactElement;
+    renderFormWidget: (fieldName: string, widgetType: string, value: any, onFieldChange?: (newValue: any) => void, widgetProps?: TableEditWidgetProps) => ReactElement;
 }
 export interface UseTableEditProps {
     editMode?: TableEditMode;
@@ -1020,6 +1046,8 @@ export interface UseTableEditProps {
     onRowupdate?: (event: any, widget: any, data: any) => void;
     tableRef?: React.RefObject<any>;
     isServerSidePagination?: boolean;
+    /** Validators set by a page script via `columns.<name>.setValidators([...])`. */
+    columnValidatorsRef?: RefObject<Record<string, any>>;
 }
 export interface UseTableEditReturn {
     editingRowId: string | null;
@@ -1095,6 +1123,7 @@ export interface UsePanelStructureProps {
 export interface UsePanelStructureReturn {
     showPanelHeading: boolean;
     showPagination: boolean;
+    showFooter: boolean;
 }
 export interface UseRowSelectionProps {
     radioselect?: boolean;
@@ -1127,6 +1156,8 @@ export interface UseRowSelectionReturn {
     handleRowSelectionClick: (event: MouseEvent, rowId: string, rowData: any) => boolean;
     isRowSelected: (rowId: string) => boolean;
     isInteractiveElement: (event: MouseEvent) => boolean;
+    selectItem: (itemOrIndex: any) => void;
+    deselectItem: (itemOrIndex: any) => void;
 }
 export interface UseTableStateProps {
     editMode?: TableEditMode;
@@ -1301,17 +1332,6 @@ export interface UseRowExpansionReturn {
     registerRowDefInstance: (rowId: string, instance: any, rowData?: any) => void;
     rowDefInstances: Record<string, any>;
 }
-export interface FieldValidationState {
-    fieldRefs: RefObject<Record<string, HTMLElement | null>>;
-    fieldValidationErrors: RefObject<Record<string, boolean>>;
-    cellUpdateCallbacks: RefObject<Record<string, () => void>>;
-}
-export interface ValidationResult {
-    isValid: boolean;
-    invalidElements: HTMLElement[];
-    invalidFieldKeys?: string[];
-    firstInvalidElement?: HTMLElement;
-}
 /**
  * Interface for summary row value with optional styling
  */

package/components/data/table/table-action/index.d.ts

@@ -21,6 +21,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/data/table/table-column/index.d.ts

@@ -21,6 +21,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/data/table/table-row/index.d.ts

@@ -21,6 +21,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/data/table/table-row-action/index.d.ts

@@ -29,6 +29,7 @@ export declare const WmTableRowAction: React.FC<{
     margin?: string;
     width?: number | string;
     height?: number | string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/data/table/utils/buildSelectionColumns.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Radio, FormControlLabel, Tooltip } from "@mui/material";
+import { Box, Tooltip } from "@mui/material";
 import { TABLE_MESSAGES } from "./constants";
 const getSelectionMeta = (ctx) => {
   var _a, _b, _c, _d;
@@ -10,27 +10,22 @@ function RadioSelectCell(ctx) {
   const rowId = row.id;
   const isSelected = row.getIsSelected();
   const { handleRadioSelection, radioselecttitle, radioselectarialabel, tableName } = getSelectionMeta(ctx);
-  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Tooltip, { title: radioselecttitle != null ? radioselecttitle : "", placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "radio app-radio", children: /* @__PURE__ */ jsx(
-    FormControlLabel,
-    {
-      control: /* @__PURE__ */ jsx(
-        Radio,
-        {
-          checked: isSelected,
-          onChange: (e) => handleRadioSelection == null ? void 0 : handleRadioSelection(rowId, row.original, e),
-          value: rowId,
-          name: `wmRadioselect-${tableName != null ? tableName : "table"}`,
-          inputProps: {
-            "aria-label": radioselectarialabel
-          },
-          rowselectinput: "",
-          size: "small"
-        }
-      ),
-      label: "",
-      className: "caption"
-    }
-  ) }) }) });
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center" }, "data-role": "select-row", children: /* @__PURE__ */ jsx(Tooltip, { title: radioselecttitle != null ? radioselecttitle : "", placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "radio app-radio", children: /* @__PURE__ */ jsxs(Box, { component: "label", children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "input",
+        type: "radio",
+        checked: isSelected,
+        onChange: (e) => handleRadioSelection == null ? void 0 : handleRadioSelection(rowId, row.original, e),
+        value: rowId,
+        name: `wmRadioselect-${tableName != null ? tableName : "table"}`,
+        "aria-label": radioselectarialabel,
+        rowselectinput: ""
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { component: "span", className: "caption" })
+  ] }) }) }) });
 }
 RadioSelectCell.displayName = "RadioSelectCell";
 function MultiSelectCell(ctx) {
@@ -38,7 +33,7 @@ function MultiSelectCell(ctx) {
   const rowId = row.id;
   const isSelected = row.getIsSelected();
   const { handleMultiSelection, multiselecttitle, multiselectarialabel } = getSelectionMeta(ctx);
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex" }, children: [
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex" }, "data-role": "select-row", children: [
     /* @__PURE__ */ jsx(Tooltip, { title: multiselecttitle != null ? multiselecttitle : "", placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsxs(Box, { component: "label", className: isSelected ? "" : "unchecked", children: [
       /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", "aria-live": "assertive", children: "Select row" }),
       /* @__PURE__ */ jsx(
@@ -64,7 +59,7 @@ function MultiSelectHeader({ table, column }) {
   var _a, _b;
   const isAllSelected = table.getIsAllRowsSelected();
   const { handleSelectAll } = (_b = (_a = column.columnDef.meta) == null ? void 0 : _a.selection) != null ? _b : {};
-  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", width: "100%" }, children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsxs(Box, { component: "label", className: isAllSelected ? "" : "unchecked", children: [
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", width: "100%" }, "data-role": "select-all", children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsxs(Box, { component: "label", className: isAllSelected ? "" : "unchecked", children: [
     /* @__PURE__ */ jsx(
       Box,
       {

package/components/data/table/utils/columnProxy.d.ts

@@ -1,3 +1,5 @@
+import { ValidatorConfig } from "@wavemaker-ai/react-runtime/components/data/form/form-controller/props";
+import { ColumnValidatorRegistry } from "./columnValidation";
 export declare const keyMap: {
     [key: string]: string;
 };
@@ -17,5 +19,9 @@ export interface ColumnAggregate {
 export interface EnhancedColumnProxy {
     aggregate: ColumnAggregate;
     setSummaryRowData: (data: SummaryRowData | SummaryRowData[]) => void;
+    setValidators: (validators: ValidatorConfig[]) => void;
+    setAsyncValidators: (asyncValidators: ValidatorConfig[]) => void;
 }
-export declare function createColumnsProxy(wmTableColumns: any[], applyOverride: (field: string, key: string, value: any) => void, setColumnsVersion?: (updater: (v: number) => number) => void, setSummaryRowDef?: (columnKey: string, data: any, rowIndex: number, refresh: boolean, show?: boolean) => void): Record<string, any>;
+export declare function createColumnsProxy(wmTableColumns: any[], applyOverride: (field: string, key: string, value: any) => void, setColumnsVersion?: (updater: (v: number) => number) => void, setSummaryRowDef?: (columnKey: string, data: any, rowIndex: number, refresh: boolean, show?: boolean) => void, 
+/** Live validator store, held in a ref so script calls survive column-def rebuilds. */
+validatorRegistry?: ColumnValidatorRegistry): Record<string, any>;

package/components/data/table/utils/columnProxy.js

@@ -17,6 +17,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import {
+  storeColumnValidators
+} from "./columnValidation";
 const keyMap = {
   caption: "header",
   name: "accessorKey",
@@ -29,7 +32,7 @@ const keyMap = {
   "col-class": "meta.className",
   style: "meta"
 };
-function createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef) {
+function createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef, validatorRegistry) {
   const proxy = {};
   wmTableColumns.forEach((col, idx) => {
     const key = col.field;
@@ -39,11 +42,28 @@ function createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion, se
         const newData = Array.isArray(data) ? data : [data];
         invokeSummaryRowData(key, newData, setSummaryRowDef, columnShow);
       };
+      const storeValidators = (kind, method) => (validators) => {
+        if (!validatorRegistry) {
+          console.warn(
+            `${method} called on column "${key}" before the table wired up validation.`
+          );
+          return;
+        }
+        storeColumnValidators(validatorRegistry, key, kind, validators);
+      };
+      const setValidators = storeValidators("validators", "setValidators");
+      const setAsyncValidators = storeValidators("asyncValidators", "setAsyncValidators");
       proxy[key] = new Proxy(col, {
         get(target, prop) {
           if (prop === "setSummaryRowData") {
             return setSummaryRowData;
           }
+          if (prop === "setValidators") {
+            return setValidators;
+          }
+          if (prop === "setAsyncValidators") {
+            return setAsyncValidators;
+          }
           return target[prop];
         },
         set(target, prop, value) {

package/components/data/table/utils/columnValidation.d.ts

@@ -0,0 +1,19 @@
+import { ValidatorConfig } from "@wavemaker-ai/react-runtime/components/data/form/form-controller/props";
+import { WmTableColumnProps } from "../props";
+export interface ColumnValidators {
+    /** From `columns.<field>.setValidators([...])`. */
+    validators: ValidatorConfig[];
+    /** From `columns.<field>.setAsyncValidators([...])`. */
+    asyncValidators: ValidatorConfig[];
+}
+export type ColumnValidatorRegistry = Record<string, ColumnValidators>;
+export declare const isColumnValidatable: (column: WmTableColumnProps | undefined) => boolean;
+export declare const cloneValidators: (validators: ValidatorConfig[]) => ValidatorConfig[];
+export declare const storeColumnValidators: (registry: ColumnValidatorRegistry, field: string, kind: keyof ColumnValidators, validators: ValidatorConfig[]) => void;
+export interface NativeValidityError {
+    /** The column field, i.e. the react-hook-form field name for the cell. */
+    fieldName: string;
+    message: string;
+}
+export declare const collectNativeValidityErrors: (cellElements: Record<string, HTMLElement | null>, rowId: string) => NativeValidityError[];
+export declare const focusFirstInvalidCell: (cellElements: Record<string, HTMLElement | null>, rowId: string, invalidFieldNames: string[]) => void;