diff --git a/vuu-ui/packages/vuu-data-react/src/data-editing/edit-rule-validation-checker.ts b/vuu-ui/packages/vuu-data-react/src/data-editing/edit-rule-validation-checker.ts
index b1c4073ae..a9ec0a3c8 100644
--- a/vuu-ui/packages/vuu-data-react/src/data-editing/edit-rule-validation-checker.ts
+++ b/vuu-ui/packages/vuu-data-react/src/data-editing/edit-rule-validation-checker.ts
@@ -19,7 +19,7 @@ export function getEditValidationRules(
 ) {
   if (isTypeDescriptor(descriptor.type)) {
     return editPhase === "*"
-      ? descriptor.type.rules
+      ? (descriptor.type.rules ?? [])
       : (descriptor.type.rules?.filter(
           ({ phase: a = "commit" }) => a === editPhase,
         ) ?? NO_VALIDATION_RULES);
diff --git a/vuu-ui/packages/vuu-data-react/src/hooks/useVuuMenuActions.tsx b/vuu-ui/packages/vuu-data-react/src/hooks/useVuuMenuActions.tsx
index c7ee9680e..caf127cd4 100644
--- a/vuu-ui/packages/vuu-data-react/src/hooks/useVuuMenuActions.tsx
+++ b/vuu-ui/packages/vuu-data-react/src/hooks/useVuuMenuActions.tsx
@@ -210,7 +210,7 @@ export const useVuuMenuActions = ({
             dataSource={sessionDs}
             onSubmit={handleSubmit}
             parentDs={dataSource}
-            handleChange={handleChange}
+            onStateChange={handleChange}
           />,
           "Multi Row Edit",
           [
diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.tsx b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.tsx
index 290e13ad4..3684ade8b 100644
--- a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.tsx
+++ b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.tsx
@@ -1,4 +1,4 @@
-import { TableCellProps } from "@finos/vuu-table-types";
+import { TableCellRendererProps } from "@finos/vuu-table-types";
 import {
   dataAndColumnUnchanged,
   DOWN1,
@@ -46,7 +46,7 @@ export const BackgroundCell = memo(function BackgroundCell({
   column,
   columnMap,
   row,
-}: TableCellProps) {
+}: TableCellRendererProps) {
   //TODO what about click handling
 
   const targetWindow = useWindow();
diff --git a/vuu-ui/packages/vuu-table-types/index.d.ts b/vuu-ui/packages/vuu-table-types/index.d.ts
index 1ed301932..9c01c9c89 100644
--- a/vuu-ui/packages/vuu-table-types/index.d.ts
+++ b/vuu-ui/packages/vuu-table-types/index.d.ts
@@ -1,12 +1,10 @@
 import type {
+  DataSourceRow,
   DataSourceRowObject,
   DataValueDescriptor,
   DataValueTypeSimple,
-  EditValidationRule,
-} from "@finos/vuu-data-types";
-import type {
   DataValueValidationChecker,
-  DataSourceRow,
+  EditValidationRule,
 } from "@finos/vuu-data-types";
 import type { Filter } from "@finos/vuu-filter-types";
 import type {
@@ -16,6 +14,7 @@ import type {
   VuuSortType,
   VuuTable,
 } from "@finos/vuu-protocol-types";
+import { CellPos } from "@finos/vuu-table/src/table-dom-utils";
 import type {
   ColumnMap,
   DateTimePattern,
@@ -28,7 +27,6 @@ import type {
   MouseEvent,
   ReactElement,
 } from "react";
-import { CellPos } from "@finos/vuu-table/src/table-dom-utils";
 
 export declare type GroupToggleTarget = "toggle-icon" | "group-column";
 
@@ -46,7 +44,7 @@ export declare type ValueFormatter = (value: unknown) => string;
 export interface EditEventState {
   editType?: EditType;
   isValid?: boolean;
-  value: unknown;
+  // value: unknown;
   previousValue?: VuuRowDataItemType;
   value: VuuRowDataItemType;
 }
@@ -61,6 +59,7 @@ export declare type DataCellEditNotification = (
 ) => void;
 
 export interface TableCellProps {
+  ariaColIndex: number;
   className?: string;
   column: RuntimeColumnDescriptor;
   columnMap: ColumnMap;
@@ -101,7 +100,7 @@ export declare type TableRowClickHandlerInternal = (
 ) => void;
 
 export interface TableCellRendererProps
-  extends Omit<TableCellProps, "onDataEdited"> {
+  extends Omit<TableCellProps, "ariaColIndex" | "onDataEdited"> {
   onEdit?: DataItemEditHandler;
 }
 
@@ -420,6 +419,7 @@ export interface RowProps extends BaseRowProps {
 
 export interface HeaderCellProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
+  ariaColIndex: number;
   classBase?: string;
   column: RuntimeColumnDescriptor;
   onClick?: (evt: React.MouseEvent | React.KeyboardEvent) => void;
diff --git a/vuu-ui/packages/vuu-table/src/Row.tsx b/vuu-ui/packages/vuu-table/src/Row.tsx
index edbb2541c..5b13c4142 100644
--- a/vuu-ui/packages/vuu-table/src/Row.tsx
+++ b/vuu-ui/packages/vuu-table/src/Row.tsx
@@ -1,17 +1,17 @@
 import { RowProps, RuntimeColumnDescriptor } from "@finos/vuu-table-types";
 import {
+  RowSelected,
   isGroupColumn,
   isJsonColumn,
   isJsonGroup,
   isNotHidden,
   metadataKeys,
   queryClosest,
-  RowSelected,
 } from "@finos/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import cx from "clsx";
-import { forwardRef, memo, MouseEvent, useCallback } from "react";
+import { MouseEvent, forwardRef, memo, useCallback } from "react";
 import { TableCell, TableGroupCell } from "./table-cell";
 
 import rowCss from "./Row.css";
@@ -146,13 +146,14 @@ export const Row = memo(
           <span className={`${classBase}-selectionDecorator vuuStickyLeft`} />
         ) : null}
         <VirtualColSpan width={virtualColSpan} />
-        {columns.filter(isNotHidden).map((column) => {
+        {columns.filter(isNotHidden).map((column, i) => {
           const isGroup = isGroupColumn(column);
           const isJsonCell = isJsonColumn(column);
           const Cell = isGroup && !isJsonCell ? TableGroupCell : TableCell;
 
           return (
             <Cell
+              ariaColIndex={i + 1}
               column={column}
               columnMap={columnMap}
               key={column.name}
diff --git a/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditPanel.tsx b/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditPanel.tsx
index 9f7405711..e77ac39b2 100644
--- a/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditPanel.tsx
+++ b/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditPanel.tsx
@@ -10,7 +10,7 @@ import { hasValidationRules, isTypeDescriptor } from "@finos/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import cx from "clsx";
-import { HTMLAttributes, useMemo, useRef } from "react";
+import { HTMLAttributes, useCallback, useMemo, useState } from "react";
 import { Table } from "../Table";
 import { BulkEditRow, type EditValueChangeHandler } from "./BulkEditRow";
 import { useBulkEditPanel } from "./useBulkEditPanel";
@@ -25,7 +25,7 @@ export interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {
   response?: RpcResponse;
   mainTableName?: string;
   parentDs: DataSource;
-  handleChange: (val: boolean) => void;
+  onStateChange: (val: boolean) => void;
 }
 
 const addRenderer = (
@@ -45,7 +45,7 @@ export const BulkEditPanel = ({
   columns,
   dataSource,
   parentDs,
-  handleChange,
+  onStateChange,
   ...htmlAttributes
 }: BulkEditPanelProps): JSX.Element => {
   const targetWindow = useWindow();
@@ -81,7 +81,16 @@ export const BulkEditPanel = ({
     };
   }, [columns, dataSource.columns]);
 
-  const bulkRowValidRef = useRef(true);
+  const [rowState, setRowState] = useState(true);
+
+  const handleRowChange = useCallback(
+    (isValid: boolean) => {
+      if (isValid !== rowState) {
+        setRowState(isValid);
+      }
+    },
+    [rowState],
+  );
 
   const bulkEditRow = useMemo(() => {
     const handleBulkChange: EditValueChangeHandler = (column, value) => {
@@ -97,16 +106,16 @@ export const BulkEditPanel = ({
       <BulkEditRow
         dataSource={parentDs}
         onBulkChange={handleBulkChange}
-        bulkRowValidRef={bulkRowValidRef}
+        onRowChange={handleRowChange}
       />
     );
-  }, [dataSource, parentDs]);
+  }, [dataSource, handleRowChange, parentDs]);
 
-  const { fieldContainerRef, onChange, onFocus } = useBulkEditPanel({
+  const { onDataEdited } = useBulkEditPanel({
     columnDescriptors: config.columns,
     dataSource,
-    bulkRowValidRef,
-    handleChange,
+    onChange: onStateChange,
+    rowState,
   });
 
   return (
@@ -114,7 +123,6 @@ export const BulkEditPanel = ({
       {...htmlAttributes}
       className={cx(classBase, className)}
       style={{ display: "flex", flexDirection: "column" }}
-      ref={fieldContainerRef}
     >
       <div className={`${classBase}-toolbar`} />
       <div className={`${classBase}-table`}>
@@ -127,8 +135,7 @@ export const BulkEditPanel = ({
           width={600}
           showColumnHeaderMenus={false}
           selectionModel="none"
-          onChange={onChange}
-          onFocus={onFocus}
+          onDataEdited={onDataEdited}
         />
       </div>
     </div>
diff --git a/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditPanelDialog.tsx b/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditPanelDialog.tsx
index 567ae4f92..9d67fe2c9 100644
--- a/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditPanelDialog.tsx
+++ b/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditPanelDialog.tsx
@@ -32,10 +32,8 @@ export const BulkEditPanelDialog = ({
   });
 
   const [valid, setValid] = useState(true);
-  const handleChange = useCallback((isValid: boolean) => {
-    //   console.log("setting to: ", isValid);
+  const handleStateChange = useCallback((isValid: boolean) => {
     setValid(isValid);
-    //   console.log("current valid value: ", valid);
   }, []);
 
   const handleSubmit = () => {
@@ -50,7 +48,7 @@ export const BulkEditPanelDialog = ({
         dataSource={sessionDs}
         onSubmit={handleSubmit}
         parentDs={parentDs}
-        handleChange={handleChange}
+        onStateChange={handleStateChange}
       />
       <DialogActions>
         <Button key="cancel" onClick={closeDialog}>
diff --git a/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditRow.tsx b/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditRow.tsx
index 6ac13ff8f..28d268d2a 100644
--- a/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditRow.tsx
+++ b/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditRow.tsx
@@ -1,32 +1,35 @@
 import { getDataItemEditControl } from "@finos/vuu-data-react";
 import { DataSource } from "@finos/vuu-data-types";
-import { ColumnDescriptor } from "@finos/vuu-table-types";
+import { BaseRowProps, ColumnDescriptor } from "@finos/vuu-table-types";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
-import { HTMLAttributes, MutableRefObject } from "react";
+import { HTMLAttributes } from "react";
 import { VirtualColSpan } from "../VirtualColSpan";
 import { useHeaderProps } from "../table-header";
 import { useBulkEditRow } from "./useBulkEditRow";
 
 import bulkEditRowCss from "./BulkEditRow.css";
+import { VuuRowDataItemType } from "@finos/vuu-protocol-types";
 
 const classBase = "vuuBulkEditRow";
 
 export type EditValueChangeHandler = (
   column: ColumnDescriptor,
-  value: string,
+  value: VuuRowDataItemType,
 ) => void;
 export interface BulkEditProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  extends Partial<BaseRowProps>,
+    Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
   dataSource: DataSource;
   onBulkChange: EditValueChangeHandler;
-  bulkRowValidRef: MutableRefObject<boolean>;
+  onRowChange: (isValid: boolean) => void;
 }
 
 export const BulkEditRow = ({
+  ariaRole,
   dataSource,
   onBulkChange,
-  bulkRowValidRef,
+  onRowChange,
   ...htmlAttributes
 }: BulkEditProps) => {
   const targetWindow = useWindow();
@@ -42,7 +45,7 @@ export const BulkEditRow = ({
     useBulkEditRow({
       descriptors: columns,
       onBulkChange,
-      bulkRowValidRef,
+      onRowChange,
     });
 
   return (
@@ -51,6 +54,7 @@ export const BulkEditRow = ({
       className={classBase}
       onFocus={onFocus}
       ref={formFieldsContainerRef}
+      role={ariaRole}
     >
       <VirtualColSpan width={virtualColSpan} />
       {columns.map((column, i) => {
diff --git a/vuu-ui/packages/vuu-table/src/bulk-edit/useBulkEditPanel.ts b/vuu-ui/packages/vuu-table/src/bulk-edit/useBulkEditPanel.ts
index d44163201..56782d814 100644
--- a/vuu-ui/packages/vuu-table/src/bulk-edit/useBulkEditPanel.ts
+++ b/vuu-ui/packages/vuu-table/src/bulk-edit/useBulkEditPanel.ts
@@ -1,16 +1,17 @@
 import { DataSource } from "@finos/vuu-data-types";
 import {
   ColumnDescriptor,
+  DataCellEditNotification,
   RuntimeColumnDescriptor,
 } from "@finos/vuu-table-types";
-import { ColumnMap, buildColumnMap, queryClosest } from "@finos/vuu-utils";
-import { MutableRefObject, SyntheticEvent, useCallback, useRef } from "react";
+import { buildColumnMap } from "@finos/vuu-utils";
+import { useCallback, useRef } from "react";
 
 export interface EditBulkPanelProps {
   columnDescriptors: ColumnDescriptor[];
   dataSource: DataSource;
-  bulkRowValidRef: MutableRefObject<boolean>;
-  handleChange: (val: boolean) => void;
+  onChange: (val: boolean) => void;
+  rowState: boolean;
 }
 
 function find(descriptors: ColumnDescriptor[], fieldname: string) {
@@ -21,7 +22,7 @@ function find(descriptors: ColumnDescriptor[], fieldname: string) {
   throw Error(`DataValueDescriptor not found for field ${fieldname}`);
 }
 
-const isRecorded = (index: string[], record: string[][]) => {
+const isRecorded = (index: number[], record: number[][]) => {
   for (const r of record) {
     if (isSameArray(r, index)) {
       return true;
@@ -30,95 +31,77 @@ const isRecorded = (index: string[], record: string[][]) => {
   return false;
 };
 
-const isSameArray = (arr1: string[], arr2: string[]) => {
-  return arr1[0] === arr2[0] && arr1[1] === arr2[1];
+const isSameArray = (arr1: number[], arr2: number[]) => {
+  return arr1[0] == arr2[0] && arr1[1] == arr2[1];
 };
 
 export const useBulkEditPanel = ({
   columnDescriptors,
   dataSource,
-  bulkRowValidRef,
-  handleChange,
+  onChange,
+  rowState,
 }: EditBulkPanelProps) => {
-  const fieldContainerRef = useRef<HTMLDivElement>(null);
-  const focusIndexRef = useRef<string[]>();
-  const errorsRef = useRef<string[][]>([]);
+  const errorsRef = useRef<number[][]>([]);
 
   const columnMap = buildColumnMap(dataSource.columns);
-  const getFieldFromIndex = (columnMap: ColumnMap, idx: number) => {
-    for (const [fieldName, index] of Object.entries(columnMap)) {
-      if (index === idx + 7) {
-        return fieldName;
-      }
-    }
-    throw Error(`Field name not found for col-index ${idx}`);
-  };
 
-  const handleFocus = useCallback((evt) => {
-    const rowIndex = queryClosest(evt.target, "[aria-rowindex]")?.ariaRowIndex;
-    const colIndex = queryClosest(evt.target, "[aria-colindex]")?.ariaColIndex;
-    if (rowIndex && colIndex) {
-      focusIndexRef.current = [rowIndex, colIndex];
-    }
-  }, []);
+  const handleDataEdited = useCallback<DataCellEditNotification>(
+    ({
+      editType = "commit",
+      isValid = true,
+      row,
+      columnName,
+      value,
+      previousValue = value,
+    }) => {
+      console.log(
+        `data edited [${row[0]}], ${columnName} ${previousValue} => ${value} (${editType}) isValid ${isValid}`,
+      );
 
-  const handleFieldChange = useCallback(
-    (evt: SyntheticEvent<HTMLInputElement>) => {
-      const value = (
-        queryClosest(evt.target, "[value]") as unknown as HTMLInputElement
-      ).value;
-      if (focusIndexRef.current) {
-        const fieldName = getFieldFromIndex(
-          columnMap,
-          parseInt(focusIndexRef.current[1]),
-        );
-        const d = find(columnDescriptors, fieldName);
-        if ((d as RuntimeColumnDescriptor).clientSideEditValidationCheck) {
-          const check = (d as RuntimeColumnDescriptor)
-            .clientSideEditValidationCheck;
-          if (check) {
-            const result = check(value);
-            if (
-              !result.ok &&
-              !isRecorded(focusIndexRef.current, errorsRef.current)
-            ) {
-              console.log("add to errors: ", result);
-              errorsRef.current.push(focusIndexRef.current);
-            } else if (
-              result.ok &&
-              isRecorded(focusIndexRef.current, errorsRef.current)
-            ) {
-              const newRef = [];
-              for (const error of errorsRef.current) {
-                if (!isSameArray(error, focusIndexRef.current)) {
-                  newRef.push(error);
-                }
+      const d = find(columnDescriptors, columnName);
+      if ((d as RuntimeColumnDescriptor).clientSideEditValidationCheck) {
+        const check = (d as RuntimeColumnDescriptor)
+          .clientSideEditValidationCheck;
+        if (check) {
+          const result = check(value.toString(), "change");
+          console.log("result: ", value, result);
+          if (
+            !result.ok &&
+            !isRecorded([row[0], columnMap[columnName]], errorsRef.current)
+          ) {
+            console.log("add to errors: ", result);
+            errorsRef.current.push([row[0], columnMap[columnName]]);
+          } else if (
+            result.ok &&
+            isRecorded([row[0], columnMap[columnName]], errorsRef.current)
+          ) {
+            const newRef = [];
+            for (const error of errorsRef.current) {
+              if (!isSameArray(error, [row[0], columnMap[columnName]])) {
+                newRef.push(error);
               }
-              errorsRef.current = newRef;
             }
+            errorsRef.current = newRef;
           }
         }
       }
-
-      if (bulkRowValidRef) {
-        if (
-          bulkRowValidRef.current === true &&
-          errorsRef.current.length === 0
-        ) {
-          handleChange(true);
-          console.log("can submit", errorsRef.current);
-        } else {
-          handleChange(false);
-          console.log("cannot submit", errorsRef.current);
-        }
+      console.log("errors: ", errorsRef.current);
+      if (rowState === true && errorsRef.current.length === 0) {
+        onChange(true);
+      } else {
+        onChange(false);
       }
     },
-    [],
+    [columnDescriptors, columnMap, onChange, rowState],
   );
 
+  if (rowState === true && errorsRef.current.length === 0) {
+    onChange(true);
+  } else {
+    onChange(false);
+  }
+
   return {
-    fieldContainerRef,
-    onChange: handleFieldChange,
-    onFocus: handleFocus,
+    onDataEdited: handleDataEdited,
   };
 };
diff --git a/vuu-ui/packages/vuu-table/src/bulk-edit/useBulkEditRow.tsx b/vuu-ui/packages/vuu-table/src/bulk-edit/useBulkEditRow.tsx
index 44efa072f..a994d2683 100644
--- a/vuu-ui/packages/vuu-table/src/bulk-edit/useBulkEditRow.tsx
+++ b/vuu-ui/packages/vuu-table/src/bulk-edit/useBulkEditRow.tsx
@@ -2,13 +2,12 @@ import {
   buildValidationChecker,
   getEditValidationRules,
 } from "@finos/vuu-data-react";
-import { DataValueDescriptor } from "@finos/vuu-data-types";
+import { DataValueDescriptor, EditPhase } from "@finos/vuu-data-types";
 import { VuuRowDataItemType } from "@finos/vuu-protocol-types";
 import { ColumnDescriptor } from "@finos/vuu-table-types";
-import { CommitHandler, queryClosest } from "@finos/vuu-utils";
+import { CommitHandler, getTypedValue, queryClosest } from "@finos/vuu-utils";
 import {
   FocusEventHandler,
-  MutableRefObject,
   SyntheticEvent,
   useCallback,
   useRef,
@@ -17,13 +16,13 @@ import {
 
 export type EditValueChangeHandler = (
   column: ColumnDescriptor,
-  value: string,
+  value: VuuRowDataItemType,
 ) => void;
 
 export interface EditableBulkHookProps {
   descriptors: DataValueDescriptor[];
   onBulkChange: EditValueChangeHandler;
-  bulkRowValidRef: MutableRefObject<boolean>;
+  onRowChange: (isValid: boolean) => void;
 }
 type ValidationState = {
   ok: boolean;
@@ -32,9 +31,9 @@ type ValidationState = {
 
 const getValidationChecker = (
   descriptor: DataValueDescriptor,
-  apply: "change" | "commit",
+  editPhase: EditPhase | "*",
 ) => {
-  const rules = getEditValidationRules(descriptor, apply);
+  const rules = getEditValidationRules(descriptor, editPhase);
   return buildValidationChecker(rules);
 };
 
@@ -44,7 +43,7 @@ const nextValidationState = (
   value: VuuRowDataItemType,
 ): ValidationState => {
   const check = getValidationChecker(dataDescriptor, "change");
-  const result = check(value);
+  const result = check(value, "change");
   const { name } = dataDescriptor;
 
   const { ok: wasOk, messages: existingMessages } = state;
@@ -98,7 +97,7 @@ const getField = (target: EventTarget | HTMLElement) => {
 export const useBulkEditRow = ({
   descriptors,
   onBulkChange,
-  bulkRowValidRef,
+  onRowChange,
 }: EditableBulkHookProps) => {
   const formFieldsContainerRef = useRef<HTMLDivElement>(null);
   const focusedFieldRef = useRef("");
@@ -108,13 +107,14 @@ export const useBulkEditRow = ({
     messages: {},
   });
 
-  const bulkRowValidRefationState = useCallback((state: ValidationState) => {
-    validationStateRef.current = state;
-    if (bulkRowValidRef) {
-      bulkRowValidRef.current = state.ok;
-    }
-    forceUpdate({});
-  }, []);
+  const bulkRowValidationState = useCallback(
+    (state: ValidationState) => {
+      validationStateRef.current = state;
+      onRowChange(state.ok);
+      forceUpdate({});
+    },
+    [onRowChange],
+  );
 
   const handleFocus = useCallback<FocusEventHandler>((evt) => {
     // Ignore focus on popup Calendars, Lists etc
@@ -138,11 +138,11 @@ export const useBulkEditRow = ({
         const { current: state } = validationStateRef;
         const newState = nextValidationState(state, dataDescriptor, value);
         if (newState !== state) {
-          bulkRowValidRefationState(newState);
+          bulkRowValidationState(newState);
         }
       }
     },
-    [descriptors, bulkRowValidRefationState],
+    [descriptors, bulkRowValidationState],
   );
 
   const {
@@ -158,7 +158,10 @@ export const useBulkEditRow = ({
         if (columnName) {
           const column = descriptors.find((c) => c.name === columnName);
           if (column && errorMessages[columnName] === undefined) {
-            onBulkChange(column, value);
+            console.log("apply BulkChange on", columnName);
+            const { serverDataType = "string" } = column;
+            const typedValue = getTypedValue(value, serverDataType, true);
+            onBulkChange(column, typedValue);
           }
         }
       }
diff --git a/vuu-ui/packages/vuu-table/src/cell-renderers/input-cell/InputCell.tsx b/vuu-ui/packages/vuu-table/src/cell-renderers/input-cell/InputCell.tsx
index 8b94ccd7c..8b6b3fcc6 100644
--- a/vuu-ui/packages/vuu-table/src/cell-renderers/input-cell/InputCell.tsx
+++ b/vuu-ui/packages/vuu-table/src/cell-renderers/input-cell/InputCell.tsx
@@ -28,7 +28,7 @@ export const InputCell = ({
   const { align = "left", clientSideEditValidationCheck } = column;
 
   const { warningMessage, ...editProps } = useEditableText({
-    initialValue: dataValue,
+    value: dataValue,
     onEdit,
     clientSideEditValidationCheck,
   });
diff --git a/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCell.tsx b/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCell.tsx
index c838782c6..b876e0270 100644
--- a/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCell.tsx
+++ b/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCell.tsx
@@ -1,10 +1,10 @@
-import { OverflowContainer } from "@finos/vuu-ui-controls";
 import {
   ColumnDescriptor,
   GroupColumnDescriptor,
   HeaderCellProps,
   RuntimeColumnDescriptor,
 } from "@finos/vuu-table-types";
+import { OverflowContainer } from "@finos/vuu-ui-controls";
 import { useLayoutEffectSkipFirst } from "@finos/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
@@ -37,12 +37,14 @@ const switchIfChanged = (
 
 export interface GroupHeaderCellProps
   extends Omit<HeaderCellProps, "onDragStart" | "onDrag" | "onDragEnd"> {
+  ariaColIndex: number;
   column: GroupColumnDescriptor;
   onMoveColumn?: (columns: ColumnDescriptor[]) => void;
   onRemoveColumn: (column: RuntimeColumnDescriptor) => void;
 }
 
 export const GroupHeaderCell = ({
+  ariaColIndex,
   column: groupColumn,
   className: classNameProp,
   onMoveColumn,
@@ -109,6 +111,7 @@ export const GroupHeaderCell = ({
   return (
     <div
       {...htmlAttributes}
+      aria-colindex={ariaColIndex}
       className={cx(className, classNameProp, {
         [`${classBase}-pending`]: groupColumn.groupConfirmed === false,
       })}
diff --git a/vuu-ui/packages/vuu-table/src/header-cell/HeaderCell.tsx b/vuu-ui/packages/vuu-table/src/header-cell/HeaderCell.tsx
index e5f54e312..2481d45d0 100644
--- a/vuu-ui/packages/vuu-table/src/header-cell/HeaderCell.tsx
+++ b/vuu-ui/packages/vuu-table/src/header-cell/HeaderCell.tsx
@@ -21,6 +21,7 @@ import headerCellCss from "./HeaderCell.css";
 const classBase = "vuuTableHeaderCell";
 
 export const HeaderCell = ({
+  ariaColIndex,
   className: classNameProp,
   column,
   onClick,
@@ -57,6 +58,7 @@ export const HeaderCell = ({
     const sortIndicator = <SortIndicator column={column} />;
     const columnLabel = HeaderCellLabelRenderer ? (
       <HeaderCellLabelRenderer
+        ariaColIndex={ariaColIndex}
         className={`${classBase}-label`}
         column={column}
       />
@@ -64,7 +66,13 @@ export const HeaderCell = ({
       <div className={`${classBase}-label`}>{column.label ?? column.name}</div>
     );
     const columnContent = HeaderCellContentRenderer
-      ? [<HeaderCellContentRenderer column={column} key="content" />]
+      ? [
+          <HeaderCellContentRenderer
+            ariaColIndex={ariaColIndex}
+            column={column}
+            key="content"
+          />,
+        ]
       : [];
 
     if (showMenu) {
@@ -82,13 +90,19 @@ export const HeaderCell = ({
         return [columnLabel, sortIndicator, columnContent];
       }
     }
-  }, [HeaderCellContentRenderer, HeaderCellLabelRenderer, column, showMenu]);
+  }, [
+    HeaderCellContentRenderer,
+    HeaderCellLabelRenderer,
+    ariaColIndex,
+    column,
+    showMenu,
+  ]);
 
   const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(
     (evt) => {
       !isResizing && onClick?.(evt);
     },
-    [isResizing, onClick]
+    [isResizing, onClick],
   );
 
   const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
@@ -97,7 +111,7 @@ export const HeaderCell = ({
         onClick?.(evt);
       }
     },
-    [onClick]
+    [onClick],
   );
 
   const { className, style } = useCell(column, classBase, true);
@@ -105,6 +119,7 @@ export const HeaderCell = ({
   return (
     <div
       {...htmlAttributes}
+      aria-colindex={ariaColIndex}
       className={cx(className, classNameProp, {
         [`${classBase}-resizing`]: isResizing,
         [`${classBase}-noMenu`]: showMenu === false,
diff --git a/vuu-ui/packages/vuu-table/src/table-cell/TableCell.tsx b/vuu-ui/packages/vuu-table/src/table-cell/TableCell.tsx
index 6a9221b93..6c6bc18ee 100644
--- a/vuu-ui/packages/vuu-table/src/table-cell/TableCell.tsx
+++ b/vuu-ui/packages/vuu-table/src/table-cell/TableCell.tsx
@@ -13,6 +13,7 @@ import tableCellCss from "./TableCell.css";
 const classBase = "vuuTableCell";
 
 export const TableCell = ({
+  ariaColIndex,
   column,
   columnMap,
   onClick,
@@ -29,7 +30,7 @@ export const TableCell = ({
   const [hasError, setHasError] = useState(false);
 
   const { className, style } = useCell(column, classBase, false, hasError);
-  const { CellRenderer, index, valueFormatter } = column;
+  const { CellRenderer, valueFormatter } = column;
   const dataIdx = columnMap[column.name];
 
   const handleDataItemEdited = useCallback<DataItemEditHandler>(
@@ -75,7 +76,7 @@ export const TableCell = ({
 
   return (
     <div
-      aria-colindex={index}
+      aria-colindex={ariaColIndex}
       className={className}
       onClick={onClick ? handleClick : undefined}
       role="cell"
diff --git a/vuu-ui/packages/vuu-table/src/table-header/TableHeader.tsx b/vuu-ui/packages/vuu-table/src/table-header/TableHeader.tsx
index 32271b055..1a5fbcfe4 100644
--- a/vuu-ui/packages/vuu-table/src/table-header/TableHeader.tsx
+++ b/vuu-ui/packages/vuu-table/src/table-header/TableHeader.tsx
@@ -11,8 +11,8 @@ import { isGroupColumn, isNotHidden } from "@finos/vuu-utils";
 import cx from "clsx";
 import { cloneElement, isValidElement, memo, useMemo } from "react";
 import { GroupHeaderCell, HeaderCell } from "../header-cell";
-import { useTableHeader } from "./useTableHeader";
 import { HeaderProvider } from "./HeaderProvider";
+import { useTableHeader } from "./useTableHeader";
 
 export type ColumnSortHandler = (
   column: ColumnDescriptor,
@@ -160,7 +160,8 @@ export const TableHeader = memo(
           {columns.filter(isNotHidden).map((col, i) =>
             isGroupColumn(col) ? (
               <GroupHeaderCell
-                aria-colindex={col.index}
+                // aria-colindex={col.index}
+                ariaColIndex={i + 1}
                 column={col}
                 data-index={i}
                 key={col.name}
@@ -170,7 +171,8 @@ export const TableHeader = memo(
               />
             ) : (
               <HeaderCell
-                aria-colindex={col.index}
+                // aria-colindex={col.index}
+                ariaColIndex={i + 1}
                 className={cx({
                   "vuuDraggable-dragAway": i === draggedColumnIndex,
                 })}
diff --git a/vuu-ui/packages/vuu-table/src/useKeyboardNavigation.ts b/vuu-ui/packages/vuu-table/src/useKeyboardNavigation.ts
index 81300b1d1..5b08ab178 100644
--- a/vuu-ui/packages/vuu-table/src/useKeyboardNavigation.ts
+++ b/vuu-ui/packages/vuu-table/src/useKeyboardNavigation.ts
@@ -270,6 +270,7 @@ export const useKeyboardNavigation = ({
       shiftKey = false,
     ): Promise<undefined> => {
       const { cellPos } = cellFocusStateRef.current;
+      console.log("cellpos: ", cellPos);
       const [rowIdx, colIdx] = cellPos;
       let nextRowIdx = -1,
         nextColIdx = -1;
diff --git a/vuu-ui/packages/vuu-ui-controls/src/editable/useEditableText.ts b/vuu-ui/packages/vuu-ui-controls/src/editable/useEditableText.ts
index 75bd548b2..eccb315cf 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/editable/useEditableText.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/editable/useEditableText.ts
@@ -8,6 +8,7 @@ import {
   FormEventHandler,
   KeyboardEvent,
   useCallback,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -16,7 +17,7 @@ export interface EditableTextHookProps<
   T extends VuuRowDataItemType = VuuRowDataItemType,
 > {
   clientSideEditValidationCheck?: DataValueValidationChecker;
-  initialValue?: T;
+  value?: T;
   onEdit?: DataItemEditHandler;
   type?: "string" | "number" | "boolean";
 }
@@ -28,16 +29,25 @@ type EditState = {
 
 export const useEditableText = <T extends string | number | boolean = string>({
   clientSideEditValidationCheck,
-  initialValue,
+  value,
   onEdit,
   type = "string",
 }: EditableTextHookProps<T>) => {
+  // console.log("initial value: ", initialValue);
   const [editState, setEditState] = useState<EditState>({
-    value: initialValue?.toString() ?? "",
+    value: value?.toString() ?? "",
   });
-  const initialValueRef = useRef<string>(initialValue?.toString() ?? "");
+  console.log("edit state: ", editState);
+  const initialValueRef = useRef<string>(value?.toString() ?? "");
   const isDirtyRef = useRef(false);
 
+  useMemo(() => {
+    if (editState.value !== value?.toString()) {
+      setEditState({ message: "", value: value?.toString() ?? "" });
+      console.log("initial value changed to: ", value);
+    }
+  }, [editState.value, value]);
+
   const commit = useCallback(
     async (target: HTMLElement) => {
       const { value } = editState;
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.tsx b/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.tsx
index 2cb33916d..d8c188fc4 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.tsx
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/basket-toolbar/BasketToolbar.tsx
@@ -71,7 +71,7 @@ export const BasketToolbar = ({
 
   const { warningMessage: unitErrorMessage, ...unitProps } =
     useEditableText<number>({
-      initialValue: basket?.units,
+      value: basket?.units,
       onEdit: handleUnitsEdited,
       type: "number",
     });
diff --git a/vuu-ui/showcase/src/examples/Table/Table.examples.tsx b/vuu-ui/showcase/src/examples/Table/Table.examples.tsx
index d0f81ff89..a6698241e 100644
--- a/vuu-ui/showcase/src/examples/Table/Table.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Table/Table.examples.tsx
@@ -44,8 +44,8 @@ import {
 import { useAutoLoginToVuuServer, useTestDataSource } from "../utils";
 import { columnGenerator, rowGenerator } from "./SimpleTableDataGenerator";
 
-import "./Table.examples.css";
 import { VuuDataSourceProvider } from "@finos/vuu-data-react";
+import "./Table.examples.css";
 
 let displaySequence = 1;
 
@@ -483,7 +483,11 @@ export const GroupHeaderCellOneColumn = () => {
         } as CSSProperties
       }
     >
-      <GroupHeaderCell column={column} onRemoveColumn={handleRemoveColumn} />
+      <GroupHeaderCell
+        ariaColIndex={0}
+        column={column}
+        onRemoveColumn={handleRemoveColumn}
+      />
     </div>
   );
 };
@@ -528,7 +532,11 @@ export const GroupHeaderCellTwoColumn = () => {
         } as CSSProperties
       }
     >
-      <GroupHeaderCell column={column} onRemoveColumn={handleRemoveColumn} />
+      <GroupHeaderCell
+        ariaColIndex={0}
+        column={column}
+        onRemoveColumn={handleRemoveColumn}
+      />
     </div>
   );
 };
@@ -582,6 +590,7 @@ export const GroupHeaderCellThreeColumn = () => {
     >
       <div data-resizeable style={{ flex: "1 1 auto", overflow: "hidden" }}>
         <GroupHeaderCell
+          ariaColIndex={0}
           className="vuuFullWidthExample"
           column={column}
           onRemoveColumn={handleRemoveColumn}
@@ -631,6 +640,7 @@ export const GroupHeaderCellThreeColumnFixedWidth = () => {
   return (
     <div data-resizeable style={{ width: 300, overflow: "hidden" }}>
       <GroupHeaderCell
+        ariaColIndex={0}
         className="vuuFullWidthExample"
         column={column}
         onRemoveColumn={handleRemoveColumn}
diff --git a/vuu-ui/showcase/src/examples/Table/columnMetaData.ts b/vuu-ui/showcase/src/examples/Table/columnMetaData.ts
index 52004ed87..f445bd66a 100644
--- a/vuu-ui/showcase/src/examples/Table/columnMetaData.ts
+++ b/vuu-ui/showcase/src/examples/Table/columnMetaData.ts
@@ -90,12 +90,12 @@ const columnMetaData: { [key: string]: Partial<ColumnDescriptor> } = {
       rules: [
         {
           name: "char-numeric",
-          apply: "change",
+          phase: "change",
           message: "must be numeric",
         },
         {
           name: "value-integer",
-          apply: "commit",
+          phase: "commit",
           message: "must be a integer",
         },
       ],
diff --git a/vuu-ui/showcase/src/examples/TableExtras/CellRenderers.examples.tsx b/vuu-ui/showcase/src/examples/TableExtras/CellRenderers.examples.tsx
index e47c00463..5bf69bcd2 100644
--- a/vuu-ui/showcase/src/examples/TableExtras/CellRenderers.examples.tsx
+++ b/vuu-ui/showcase/src/examples/TableExtras/CellRenderers.examples.tsx
@@ -6,8 +6,8 @@ import {
   ColumnTypeRendering,
   RuntimeColumnDescriptor,
 } from "@finos/vuu-table-types";
-import { getValueFormatter } from "@finos/vuu-utils";
 import { VuuInput } from "@finos/vuu-ui-controls";
+import { getValueFormatter } from "@finos/vuu-utils";
 import { FormEventHandler, useCallback, useMemo, useState } from "react";
 
 let displaySequence = 1;
@@ -49,7 +49,7 @@ export const DefaultBackgroundCell = ({
 
   const handleChange = useCallback<FormEventHandler<HTMLInputElement>>(
     (evt) => setValue((evt.target as HTMLInputElement).value),
-    []
+    [],
   );
   const handlePriceChange = useCallback((evt, value) => {
     const numericValue = parseFloat(value);
@@ -77,6 +77,7 @@ export const DefaultBackgroundCell = ({
         onCommit={handlePriceChange}
       />
       <TableCell
+        ariaColIndex={0}
         column={priceColumn as RuntimeColumnDescriptor}
         columnMap={columnMap}
         row={row as any}