diff --git a/vuu-ui/packages/vuu-data-react/src/data-editing/date-editing-utils.tsx b/vuu-ui/packages/vuu-data-react/src/data-editing/date-editing-utils.tsx
index dd2db7e11..eaf02a61f 100644
--- a/vuu-ui/packages/vuu-data-react/src/data-editing/date-editing-utils.tsx
+++ b/vuu-ui/packages/vuu-data-react/src/data-editing/date-editing-utils.tsx
@@ -1,14 +1,11 @@
 import { ColumnDescriptor } from "@finos/vuu-table-types";
-import {
-  type CommitHandler,
-  VuuInput,
-  VuuTypeaheadInput,
-} from "@finos/vuu-ui-controls";
+import { VuuInput, VuuTypeaheadInput } from "@finos/vuu-ui-controls";
 import { SuggestionProvider, TableSchemaTable } from "@finos/vuu-data-types";
+import { CommitHandler } from "@finos/vuu-utils";
 
 export interface DataItemEditControlProps {
   column: ColumnDescriptor;
-  onCommit: CommitHandler;
+  onCommit: CommitHandler<HTMLInputElement, string | undefined>;
   suggestionProvider?: SuggestionProvider;
   table?: TableSchemaTable;
 }
@@ -23,6 +20,7 @@ export const getDataItemEditControl = ({
     return (
       <VuuTypeaheadInput
         column={column.name}
+        onCommit={onCommit}
         suggestionProvider={suggestionProvider}
         table={table}
       />
diff --git a/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx b/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx
index 9a2d225f7..694ebb9ad 100644
--- a/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx
+++ b/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx
@@ -144,7 +144,7 @@ export const FilterBar = ({
           suggestionProvider={suggestionProvider}
           tableSchema={tableSchema}
         />
-      ) : (
+      ) : QuickFilterProps ? (
         <QuickFilters
           {...QuickFilterProps}
           availableColumns={columnDescriptors}
@@ -152,6 +152,8 @@ export const FilterBar = ({
           suggestionProvider={suggestionProvider}
           tableSchema={tableSchema}
         />
+      ) : (
+        "Missing QuickFilterProps"
       )}
     </div>
   );
diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx
index a772f9818..5fd4ab023 100644
--- a/vuu-ui/packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx
+++ b/vuu-ui/packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx
@@ -6,7 +6,6 @@ import {
   Ref,
   SyntheticEvent,
   forwardRef,
-  useCallback,
   useMemo,
   useState,
 } from "react";
diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClause.ts b/vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClause.ts
index 065b2f64d..dbcc70694 100644
--- a/vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClause.ts
+++ b/vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClause.ts
@@ -1,5 +1,5 @@
 import { FilterClause, FilterClauseOp } from "@finos/vuu-filter-types";
-import { hasOpenOptionList, isDateInput } from "@finos/vuu-utils";
+import { hasOpenOptionList } from "@finos/vuu-utils";
 import {
   KeyboardEvent,
   RefCallback,
diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx
index 7335b7955..af86a55f0 100644
--- a/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx
+++ b/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx
@@ -1,7 +1,10 @@
-import React, { ChangeEvent, useCallback, useState } from "react";
+import React, {
+  useCallback,
+  useState,
+} from "react";
 import cx from "clsx";
 import { getLocalTimeZone, DateValue } from "@internationalized/date";
-import { toCalendarDate } from "@finos/vuu-utils";
+import { CommitHandler, toCalendarDate } from "@finos/vuu-utils";
 import { NumericFilterClauseOp } from "@finos/vuu-filter-types";
 import { FilterClauseValueEditor } from "../filterClauseTypes";
 import { VuuDatePicker } from "@finos/vuu-ui-controls";
@@ -23,8 +26,8 @@ export const FilterClauseValueEditorDate = (
     getInitialState(value),
   );
 
-  const onSelectedDateChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>, selectedDateInputValue?: string) => {
+  const handleCommit = useCallback<CommitHandler<HTMLElement, number>>(
+    (e, selectedDateInputValue) => {
       console.log("change date");
       if (selectedDateInputValue) {
         const dateValue = toCalendarDate(new Date(selectedDateInputValue));
@@ -46,7 +49,7 @@ export const FilterClauseValueEditorDate = (
       inputProps={inputProps}
       className={cx("vuuFilterClause-DatePicker", className)}
       onBlur={onBlur}
-      onCommit={onSelectedDateChange}
+      onCommit={handleCommit}
       selectedDate={date}
     />
   );
diff --git a/vuu-ui/packages/vuu-filters/src/inline-filter/InlineFilter.tsx b/vuu-ui/packages/vuu-filters/src/inline-filter/InlineFilter.tsx
index 074eaff28..7daf44c5a 100644
--- a/vuu-ui/packages/vuu-filters/src/inline-filter/InlineFilter.tsx
+++ b/vuu-ui/packages/vuu-filters/src/inline-filter/InlineFilter.tsx
@@ -1,7 +1,6 @@
 import { getDataItemEditControl } from "@finos/vuu-data-react";
 import { VirtualColSpan, useHeaderProps } from "@finos/vuu-table";
-import { CommitHandler } from "@finos/vuu-ui-controls";
-import { queryClosest } from "@finos/vuu-utils";
+import { CommitHandler, queryClosest } from "@finos/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { HTMLAttributes, useCallback } from "react";
@@ -33,14 +32,16 @@ export const InlineFilter = ({
 
   const { columns, virtualColSpan = 0 } = useHeaderProps();
 
-  const onCommit = useCallback<CommitHandler>(
+  const onCommit = useCallback<
+    CommitHandler<HTMLInputElement, string | number | undefined>
+  >(
     (evt, value) => {
       const field = queryClosest(evt.target, "[data-field]");
-      if (field) {
+      if (field && value !== undefined) {
         const columnName = field.dataset.field;
         const column = columns.find((c) => c.name === columnName);
         if (column) {
-          onChange(column, value);
+          onChange(column, value.toString());
         }
       }
     },
diff --git a/vuu-ui/packages/vuu-filters/src/quick-filters/QuickFilters.tsx b/vuu-ui/packages/vuu-filters/src/quick-filters/QuickFilters.tsx
index cc2168a3a..e72ced3cb 100644
--- a/vuu-ui/packages/vuu-filters/src/quick-filters/QuickFilters.tsx
+++ b/vuu-ui/packages/vuu-filters/src/quick-filters/QuickFilters.tsx
@@ -18,9 +18,10 @@ export interface QuickFilterProps
       FilterBarProps,
       "onApplyFilter" | "suggestionProvider" | "tableSchema"
     > {
+  allowFind?: boolean;
   availableColumns: ColumnDescriptor[];
   onChangeQuickFilterColumns?: (columns: string[]) => void;
-  quickFilterColumns?: string[];
+  quickFilterColumns: string[];
   /**
    * Render a general 'search' control.
    * if true, all columns of type 'string' will be included in the search. Otherwise
@@ -30,6 +31,7 @@ export interface QuickFilterProps
 }
 
 export const QuickFilters = ({
+  allowFind = true,
   availableColumns,
   onApplyFilter,
   onChangeQuickFilterColumns,
@@ -52,7 +54,6 @@ export const QuickFilters = ({
     onColumnsSelectionChange,
     onCommit,
     rootRef,
-    quickFilters,
   } = useQuickFilters({
     availableColumns,
     onApplyFilter,
@@ -61,13 +62,14 @@ export const QuickFilters = ({
   });
 
   const filterColumns = availableColumns.filter(({ name }) =>
-    quickFilters?.includes(name),
+    quickFilterColumns?.includes(name),
   );
 
-  return (
-    <div className={classBase} ref={rootRef}>
-      <div className={`${classBase}-filter-container`}>
-        <FormField data-embedded data-field="find">
+  const getFilterControls = () => {
+    const controls = [];
+    if (allowFind) {
+      controls.push(
+        <FormField data-embedded data-field="find" key="find">
           <FormFieldLabel>Find</FormFieldLabel>
           <VuuInput
             inputProps={{
@@ -77,8 +79,12 @@ export const QuickFilters = ({
             startAdornment={searchIcon}
             variant="secondary"
           />
-        </FormField>
-        {filterColumns?.map((column) => (
+        </FormField>,
+      );
+    }
+    {
+      filterColumns?.forEach((column) =>
+        controls.push(
           <FormField key={column.label ?? column.name} data-field={column.name}>
             <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>
             {getDataItemEditControl({
@@ -87,15 +93,25 @@ export const QuickFilters = ({
               suggestionProvider,
               table: tableSchema?.table,
             })}
-          </FormField>
-        ))}
+          </FormField>,
+        ),
+      );
+    }
+
+    return controls;
+  };
+
+  return (
+    <div className={classBase} ref={rootRef}>
+      <div className={`${classBase}-filter-container`}>
+        {getFilterControls()}
       </div>
       <ColumnPicker
         columns={availableColumnNames}
         icon="more-horiz"
         iconSize={16}
         onSelectionChange={onColumnsSelectionChange}
-        selected={quickFilters}
+        selected={quickFilterColumns}
       />
     </div>
   );
diff --git a/vuu-ui/packages/vuu-filters/src/quick-filters/useQuickFilters.ts b/vuu-ui/packages/vuu-filters/src/quick-filters/useQuickFilters.ts
index 47f109a97..99a7e5c82 100644
--- a/vuu-ui/packages/vuu-filters/src/quick-filters/useQuickFilters.ts
+++ b/vuu-ui/packages/vuu-filters/src/quick-filters/useQuickFilters.ts
@@ -2,15 +2,14 @@ import type { DataSourceFilter } from "@finos/vuu-data-types";
 import type { Filter } from "@finos/vuu-filter-types";
 import type { VuuRowDataItemType } from "@finos/vuu-protocol-types";
 import type { ColumnDescriptor } from "@finos/vuu-table-types";
-import { CommitHandler, MultiSelectionHandler } from "@finos/vuu-ui-controls";
-import { filterAsQuery, queryClosest } from "@finos/vuu-utils";
+import { MultiSelectionHandler } from "@finos/vuu-ui-controls";
+import { CommitHandler, filterAsQuery, queryClosest } from "@finos/vuu-utils";
 import {
   ChangeEventHandler,
   RefCallback,
   useCallback,
   useMemo,
   useRef,
-  useState,
 } from "react";
 import { QuickFilterProps } from "./QuickFilters";
 
@@ -90,10 +89,7 @@ export const useQuickFilters = ({
   availableColumns,
   onApplyFilter,
   onChangeQuickFilterColumns,
-  quickFilterColumns = [],
 }: QuickFilterProps) => {
-  //TODO make controlled
-  const [quickFilters, setQuickFilters] = useState(quickFilterColumns);
   const filters = useRef<QuickFilterValues>({});
   const rootRef = useCallback<RefCallback<HTMLDivElement>>((el) => {
     if (el) {
@@ -109,15 +105,25 @@ export const useQuickFilters = ({
     [],
   );
 
-  const handleCommit = useCallback<CommitHandler>(
+  const handleCommit = useCallback<
+    CommitHandler<HTMLInputElement, string | number | undefined>
+  >(
     (e, value) => {
-      if (value.trim() !== "") {
-        const field = queryClosest(e.target, "[data-field]");
-        const column = field?.dataset.field;
-        if (column) {
+      const field = queryClosest(e.target, "[data-field]");
+      const column = field?.dataset.field;
+      if (column) {
+        if (
+          value === undefined ||
+          (typeof value === "string" && value.trim() === "")
+        ) {
+          if (filters.current[column] === undefined) {
+            return;
+          }
+          delete filters.current[column];
+        } else if (typeof value === "string" && value.trim() !== "") {
           filters.current[column] = value;
-          onApplyFilter?.(buildFilter(filters.current, availableColumns));
         }
+        onApplyFilter?.(buildFilter(filters.current, availableColumns));
       }
     },
     [availableColumns, onApplyFilter],
@@ -126,7 +132,6 @@ export const useQuickFilters = ({
   const handleColumnsSelectionChange = useCallback<MultiSelectionHandler>(
     (evt, newSelected) => {
       onChangeQuickFilterColumns?.(newSelected);
-      setQuickFilters(newSelected);
     },
     [onChangeQuickFilterColumns],
   );
@@ -141,7 +146,6 @@ export const useQuickFilters = ({
     onChange: handleChange,
     onColumnsSelectionChange: handleColumnsSelectionChange,
     onCommit: handleCommit,
-    quickFilters,
     rootRef,
   };
 };
diff --git a/vuu-ui/packages/vuu-table-extras/src/table-settings/useTableSettings.ts b/vuu-ui/packages/vuu-table-extras/src/table-settings/useTableSettings.ts
index 7e80af939..bf444905f 100644
--- a/vuu-ui/packages/vuu-table-extras/src/table-settings/useTableSettings.ts
+++ b/vuu-ui/packages/vuu-table-extras/src/table-settings/useTableSettings.ts
@@ -12,8 +12,8 @@ import {
   moveItem,
   subscribedOnly,
   useLayoutEffectSkipFirst,
+  CommitHandler,
 } from "@finos/vuu-utils";
-import { CommitHandler } from "@finos/vuu-ui-controls/src";
 import {
   MouseEvent,
   SyntheticEvent,
@@ -203,16 +203,22 @@ export const useTableSettings = ({
     [],
   );
 
-  const handleCommitColumnWidth = useCallback<CommitHandler>((_, value) => {
-    const columnDefaultWidth = parseInt(value);
-    if (!isNaN(columnDefaultWidth)) {
-      setColumnState((state) => ({
-        ...state,
-        tableConfig: {
-          ...state.tableConfig,
-          columnDefaultWidth,
-        },
-      }));
+  const handleCommitColumnWidth = useCallback<
+    CommitHandler<HTMLInputElement, string | undefined>
+  >((_, value) => {
+    if (value === undefined) {
+      console.log(`column width is undefined`);
+    } else {
+      const columnDefaultWidth = parseInt(value);
+      if (!isNaN(columnDefaultWidth)) {
+        setColumnState((state) => ({
+          ...state,
+          tableConfig: {
+            ...state.tableConfig,
+            columnDefaultWidth,
+          },
+        }));
+      }
     }
     console.log({ value });
   }, []);
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 2c2a54cb8..86614ee2f 100644
--- a/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditRow.tsx
+++ b/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditRow.tsx
@@ -1,7 +1,6 @@
 import { getDataItemEditControl } from "@finos/vuu-data-react";
 import { ColumnDescriptor } from "@finos/vuu-table-types";
-import { CommitHandler } from "@finos/vuu-ui-controls";
-import { queryClosest } from "@finos/vuu-utils";
+import { CommitHandler, queryClosest } from "@finos/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { HTMLAttributes, useCallback } from "react";
@@ -31,9 +30,11 @@ export const BulkEditRow = ({ onChange, ...htmlAttributes }: BulkEditProps) => {
 
   const { columns, virtualColSpan = 0 } = useHeaderProps();
 
-  const onCommit = useCallback<CommitHandler>(
+  const onCommit = useCallback<
+    CommitHandler<HTMLInputElement, string | undefined>
+  >(
     (evt, value) => {
-      if (String(value).trim() !== "") {
+      if (value !== undefined && String(value).trim() !== "") {
         const field = queryClosest(evt.target, "[data-field]");
         if (field) {
           const columnName = field.dataset.field;
diff --git a/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarNavigation.tsx b/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarNavigation.tsx
index 16209dd79..037d39899 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarNavigation.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarNavigation.tsx
@@ -173,7 +173,6 @@ export const CalendarNavigation = forwardRef<
     years,
     canNavigateNext,
     canNavigatePrevious,
-    visibleMonth,
     selectedMonth,
     selectedYear,
     isOutsideAllowedMonths,
diff --git a/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/useFocusManagement.ts b/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/useFocusManagement.ts
index 5c02b1462..4bd03341b 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/useFocusManagement.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/useFocusManagement.ts
@@ -38,6 +38,7 @@ export function useFocusManagement({ date }: { date: DateValue }) {
         newDate = startOfWeek(date, getCurrentLocale());
         break;
       case "End":
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore TODO bug in @internationalized/date
         newDate = endOfWeek(date, getCurrentLocale());
         break;
diff --git a/vuu-ui/packages/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.tsx b/vuu-ui/packages/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.tsx
index b1a677e8d..415a21bf5 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.tsx
@@ -51,12 +51,15 @@ export const VuuDatePicker = ({
   };
 
   const handleSelectionChange = useCallback(
-    (e: SyntheticEvent<HTMLElement>, date: DateValue) => {
+    (e: SyntheticEvent<Element>, date: DateValue) => {
       if (date && !isSameDate(date, selectedDate)) {
         onSelectionChange?.(e, date);
         setOpen(false);
         console.log(`about to commit date ${date.toString()}`);
-        onCommit?.(e, toEpochMillis(date, localTimeZone));
+        onCommit?.(
+          e as SyntheticEvent<HTMLElement>,
+          toEpochMillis(date, localTimeZone),
+        );
       }
     },
     [onCommit, onSelectionChange, selectedDate],
diff --git a/vuu-ui/packages/vuu-ui-controls/src/vuu-input/VuuInput.tsx b/vuu-ui/packages/vuu-ui-controls/src/vuu-input/VuuInput.tsx
index 28e68f33e..7bf7673d8 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/vuu-input/VuuInput.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/vuu-input/VuuInput.tsx
@@ -24,7 +24,7 @@ const constantInputProps = {
 
 export interface VuuInputProps<T extends VuuRowDataItemType = string>
   extends InputProps {
-  onCommit: CommitHandler<HTMLInputElement, T>;
+  onCommit: CommitHandler<HTMLInputElement, T | undefined>;
   type?: T;
   TooltipProps?: Pick<TooltipHookProps, "placement" | "tooltipContent">;
 }
@@ -61,7 +61,7 @@ export const VuuInput = forwardRef(function VuuInput<
     tooltipContent: TooltipProps?.tooltipContent,
   });
 
-  const commitValue = useCallback<CommitHandler<string>>(
+  const commitValue = useCallback<CommitHandler>(
     (evt, value) => {
       if (type === "number") {
         const numericValue = parseFloat(value);
diff --git a/vuu-ui/packages/vuu-ui-controls/src/vuu-typeahead-input/VuuTypeaheadInput.tsx b/vuu-ui/packages/vuu-ui-controls/src/vuu-typeahead-input/VuuTypeaheadInput.tsx
index 6c82edb7b..575a8567a 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/vuu-typeahead-input/VuuTypeaheadInput.tsx
+++ b/vuu-ui/packages/vuu-ui-controls/src/vuu-typeahead-input/VuuTypeaheadInput.tsx
@@ -8,17 +8,20 @@ import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 
 import vuuTypeaheadInputCss from "./VuuTypeaheadInput.css";
+import { CommitHandler } from "@finos/vuu-utils";
 
 const classBase = "vuuTypeaheadInput";
 
 export interface VuuTypeaheadInputProps {
   column: string;
+  onCommit: CommitHandler<HTMLInputElement>;
   suggestionProvider: SuggestionProvider;
   table: TableSchemaTable;
 }
 
 export const VuuTypeaheadInput = ({
   column,
+  onCommit,
   suggestionProvider,
   table,
 }: VuuTypeaheadInputProps) => {
@@ -39,6 +42,7 @@ export const VuuTypeaheadInput = ({
     value,
   } = useVuuTypeaheadInput({
     column,
+    onCommit,
     suggestionProvider,
     table,
   });
diff --git a/vuu-ui/packages/vuu-ui-controls/src/vuu-typeahead-input/useVuuTypeahead.ts b/vuu-ui/packages/vuu-ui-controls/src/vuu-typeahead-input/useVuuTypeahead.ts
index 7807a6d03..a589a2e0a 100644
--- a/vuu-ui/packages/vuu-ui-controls/src/vuu-typeahead-input/useVuuTypeahead.ts
+++ b/vuu-ui/packages/vuu-ui-controls/src/vuu-typeahead-input/useVuuTypeahead.ts
@@ -16,11 +16,12 @@ const NO_DATA_MATCH = ["No matching data"];
 
 export type VuuTypeaheadInputHookProps = Pick<
   VuuTypeaheadInputProps,
-  "column" | "suggestionProvider" | "table"
+  "column" | "onCommit" | "suggestionProvider" | "table"
 >;
 
 export const useVuuTypeaheadInput = ({
   column,
+  onCommit,
   suggestionProvider,
   table,
 }: VuuTypeaheadInputHookProps) => {
@@ -79,9 +80,11 @@ export const useVuuTypeaheadInput = ({
 
   const handleSelectionChange = (
     evt: SyntheticEvent,
-    [newSelected]: string[]
+    [newSelected]: string[],
   ) => {
+    console.log(`useVuuTypeahead handleSelectionChange ${newSelected}`);
     setValue(newSelected);
+    onCommit(evt as SyntheticEvent<HTMLInputElement>, newSelected);
   };
 
   const handleOpenChange = (newOpen: boolean) => {
diff --git a/vuu-ui/packages/vuu-utils/src/form-utils.ts b/vuu-ui/packages/vuu-utils/src/form-utils.ts
index 91dcbc187..70d1285d6 100644
--- a/vuu-ui/packages/vuu-utils/src/form-utils.ts
+++ b/vuu-ui/packages/vuu-utils/src/form-utils.ts
@@ -22,5 +22,5 @@ export const getFieldName = (
 
 export type CommitHandler<
   E extends HTMLElement = HTMLInputElement,
-  T extends VuuRowDataItemType = string,
+  T extends VuuRowDataItemType | undefined = string,
 > = (evt: SyntheticEvent<E>, value: T) => void;
diff --git a/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/useNewBasketPanel.ts b/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/useNewBasketPanel.ts
index 4a99ba290..ff4362613 100644
--- a/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/useNewBasketPanel.ts
+++ b/vuu-ui/sample-apps/feature-basket-trading/src/new-basket-panel/useNewBasketPanel.ts
@@ -1,7 +1,7 @@
 import { ViewportRpcResponse } from "@finos/vuu-data-types";
 import type { TableRowSelectHandler } from "@finos/vuu-table-types";
-import { CommitHandler, OpenChangeHandler } from "@finos/vuu-ui-controls";
-import { buildColumnMap } from "@finos/vuu-utils";
+import { OpenChangeHandler } from "@finos/vuu-ui-controls";
+import { CommitHandler, buildColumnMap } from "@finos/vuu-utils";
 import { useCallback, useRef, useState } from "react";
 import { NewBasketPanelProps } from "./NewBasketPanel";
 
@@ -53,13 +53,14 @@ export const useNewBasketPanel = ({
     }
   }, []);
 
-  const handleChangeBasketName = useCallback<CommitHandler<string>>(
-    (evt, value) => {
+  const handleChangeBasketName = useCallback<
+    CommitHandler<HTMLInputElement, string | undefined>
+  >((_, value) => {
+    if (value !== undefined) {
       setBasketName(value);
-      return Promise.resolve(true);
-    },
-    [],
-  );
+    }
+    return Promise.resolve(true);
+  }, []);
 
   const handleOpenChangeInstrumentPicker = useCallback<OpenChangeHandler>(
     (open) => {
diff --git a/vuu-ui/showcase/src/examples/DataTable/FilterTable.examples.tsx b/vuu-ui/showcase/src/examples/DataTable/FilterTable.examples.tsx
index 2314e3002..72fb8be44 100644
--- a/vuu-ui/showcase/src/examples/DataTable/FilterTable.examples.tsx
+++ b/vuu-ui/showcase/src/examples/DataTable/FilterTable.examples.tsx
@@ -33,7 +33,7 @@ export const FilterTableVuuInstruments = () => {
     (filter: DataSourceFilter) => {
       dataSource.filter = filter;
     },
-    [dataSource]
+    [dataSource],
   );
 
   const handleFilterStateChange = useCallback((fs: FilterState) => {
@@ -69,7 +69,9 @@ FilterTableVuuInstruments.displaySequence = displaySequence++;
 export const FilterTableArrayDataInstruments = ({
   quickFilterColumns,
   variant = "custom-filters",
-}: Pick<FilterBarProps, "quickFilterColumns" | "variant">) => {
+}: Pick<FilterBarProps, "variant"> & {
+  quickFilterColumns?: string[];
+}) => {
   const schema = schemas.instruments;
   const { dataSource, config, ...restTableProps } = useMemo<
     Pick<TableProps, "config" | "dataSource">
@@ -83,7 +85,7 @@ export const FilterTableArrayDataInstruments = ({
       dataSource:
         vuuModule<SimulTableName>("SIMUL").createDataSource("instruments"),
     }),
-    [schema]
+    [schema],
   );
 
   const { typeaheadHook } = vuuModule("SIMUL");
@@ -98,7 +100,7 @@ export const FilterTableArrayDataInstruments = ({
       console.log("apply filter", { filter });
       dataSource.filter = filter;
     },
-    [dataSource]
+    [dataSource],
   );
 
   const handleFilterStateChange = useCallback((fs: FilterState) => {
@@ -107,11 +109,15 @@ export const FilterTableArrayDataInstruments = ({
   }, []);
 
   const FilterBarProps: FilterBarProps = {
+    QuickFilterProps: quickFilterColumns
+      ? {
+          quickFilterColumns,
+        }
+      : undefined,
     columnDescriptors: config.columns,
     filterState,
     onApplyFilter: handleApplyFilter,
     onFilterStateChanged: handleFilterStateChange,
-    quickFilterColumns,
     suggestionProvider: typeaheadHook,
     tableSchema: getSchema("instruments"),
     variant,
diff --git a/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx b/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx
index 6f6841a32..871d48528 100644
--- a/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/FilterBar/FilterBar.examples.tsx
@@ -50,19 +50,19 @@ const FilterContainer = ({
 };
 
 const DefaultFilterBarCore = ({
+  QuickFilterProps,
   filterState,
   onApplyFilter,
   onFilterDeleted,
   onFilterRenamed,
   onFilterStateChanged,
-  quickFilterColumns,
   variant,
 }: Partial<FilterBarProps>) => {
   const [filterStruct, setFilterStruct] = useState<Filter | null>(null);
   const tableSchema = useMemo(() => getSchema("instruments"), []);
   const columns = useMemo(
     () => [...tableSchema.columns, lastUpdatedColumn],
-    [tableSchema]
+    [tableSchema],
   );
   const { typeaheadHook } = vuuModule("SIMUL");
 
@@ -71,33 +71,34 @@ const DefaultFilterBarCore = ({
       onApplyFilter?.(filter);
       setFilterStruct(filter.filterStruct ?? null);
     },
-    [onApplyFilter]
+    [onApplyFilter],
   );
 
   const handleFilterStateChange = useCallback(
     (filterState: FilterState) => {
       onFilterStateChanged?.(filterState);
     },
-    [onFilterStateChanged]
+    [onFilterStateChanged],
   );
 
   const handleFilterDeleted = useCallback(
     (filter: Filter) => {
       onFilterDeleted?.(filter);
     },
-    [onFilterDeleted]
+    [onFilterDeleted],
   );
 
   const handleFilterRenamed = useCallback(
     (filter: Filter, name: string) => {
       onFilterRenamed?.(filter, name);
     },
-    [onFilterRenamed]
+    [onFilterRenamed],
   );
 
   return (
     <FilterContainer filter={filterStruct}>
       <FilterBar
+        QuickFilterProps={QuickFilterProps}
         columnDescriptors={columns}
         data-testid="filterbar"
         filterState={filterState}
@@ -105,7 +106,6 @@ const DefaultFilterBarCore = ({
         onFilterDeleted={handleFilterDeleted}
         onFilterRenamed={handleFilterRenamed}
         onFilterStateChanged={handleFilterStateChange}
-        quickFilterColumns={quickFilterColumns}
         suggestionProvider={typeaheadHook}
         tableSchema={{ ...tableSchema, columns }}
         variant={variant}
@@ -128,7 +128,7 @@ const FilterBarTemplate = ({
       onFilterStateChanged?.(fs);
       setFilterState(fs);
     },
-    [onFilterStateChanged]
+    [onFilterStateChanged],
   );
 
   return (
@@ -229,7 +229,7 @@ export const FilterBarMultipleFilterSets = () => {
       const index = parseInt(value);
       setSelectedIndex(index);
     },
-    []
+    [],
   );
 
   const handleChangeFilterState = useCallback(
@@ -240,7 +240,7 @@ export const FilterBarMultipleFilterSets = () => {
         ...s.slice(selectedIndex + 1),
       ]);
     },
-    [selectedIndex]
+    [selectedIndex],
   );
 
   return (
@@ -324,7 +324,10 @@ QuickFilters.displaySequence = displaySequence++;
 
 export const QuickFiltersThreeColumns = () => {
   return (
-    <FilterBarTemplate variant="quick-filters" quickFilterColumns={["bbg"]} />
+    <FilterBarTemplate
+      variant="quick-filters"
+      QuickFilterProps={{ quickFilterColumns: ["bbg"] }}
+    />
   );
 };
 QuickFiltersThreeColumns.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/Filters/FilterClause/FilterClause.examples.tsx b/vuu-ui/showcase/src/examples/Filters/FilterClause/FilterClause.examples.tsx
index be5f088b9..16b4bc36d 100644
--- a/vuu-ui/showcase/src/examples/Filters/FilterClause/FilterClause.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/FilterClause/FilterClause.examples.tsx
@@ -183,7 +183,7 @@ export const PartialFilterClauseDateColumnOnly = () => {
     </div>
   );
 };
-PartialFilterClauseColumnOnly.displaySequence = displaySequence++;
+PartialFilterClauseDateColumnOnly.displaySequence = displaySequence++;
 
 const columnDescriptorsByName = (columns: TableSchema["columns"]) =>
   columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});
diff --git a/vuu-ui/showcase/src/examples/Filters/FilterEditor/FilterEditor.examples.tsx b/vuu-ui/showcase/src/examples/Filters/FilterEditor/FilterEditor.examples.tsx
index 4cfc2f5d0..91fd37f96 100644
--- a/vuu-ui/showcase/src/examples/Filters/FilterEditor/FilterEditor.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/FilterEditor/FilterEditor.examples.tsx
@@ -94,7 +94,7 @@ export const NewFilterDateColumns = (props: Partial<FilterEditorProps>) => {
   );
 };
 
-NewFilter.displaySequence = displaySequence++;
+NewFilterDateColumns.displaySequence = displaySequence++;
 
 export const EditSimplerFilter = (props: Partial<FilterEditorProps>) => {
   const filter = useMemo<Filter>(() => {
diff --git a/vuu-ui/showcase/src/examples/Filters/QuickFilters/QuickFilters.examples.tsx b/vuu-ui/showcase/src/examples/Filters/QuickFilters/QuickFilters.examples.tsx
index 95ac100ef..d95d1969b 100644
--- a/vuu-ui/showcase/src/examples/Filters/QuickFilters/QuickFilters.examples.tsx
+++ b/vuu-ui/showcase/src/examples/Filters/QuickFilters/QuickFilters.examples.tsx
@@ -3,32 +3,23 @@ import type { DataSourceFilter } from "@finos/vuu-data-types";
 import type { ColumnDescriptor } from "@finos/vuu-table-types";
 import { useCallback, useMemo, useState } from "react";
 import { getSchema, vuuModule } from "@finos/vuu-data-test";
-import { IPersistenceManager, LocalPersistenceManager } from "@finos/vuu-shell";
-import { basketSchemas } from "@finos/vuu-data-test";
+import { useViewContext, View } from "@finos/vuu-layout";
+import { setPersistentState } from "@finos/vuu-layout";
 
 let displaySequence = 1;
 
 const QuickFiltersTemplate = ({
-  availableColumns = [],
   onApplyFilter,
-  persistenceKey,
-  quickFilterColumns: quickFilterColumnsProp,
-  suggestionProvider,
-  tableSchema,
-}: Partial<QuickFilterProps> & {
-    persistenceKey?: string
-}) => {
-
+  quickFilterColumns: quickFilterColumnsProp = [],
+  suggestionProvider = vuuModule("SIMUL").typeaheadHook,
+  tableSchema = getSchema("instruments"),
+  availableColumns = tableSchema?.columns,
+}: Partial<QuickFilterProps>) => {
   const initialColumns = useMemo(() => {
     return quickFilterColumnsProp;
-  },[quickFilterColumnsProp])
-
-  const [quickFilterColumns, setQuickFilterColumns] = useState(initialColumns)
-
-  const persistenceManager = useMemo<IPersistenceManager | undefined>(() => 
-    persistenceKey ? new LocalPersistenceManager(persistenceKey) : undefined
-  ,[persistenceKey])
+  }, [quickFilterColumnsProp]);
 
+  const [quickFilterColumns, setQuickFilterColumns] = useState(initialColumns);
 
   const handleApplyFilter = useCallback(
     (filter: DataSourceFilter) => {
@@ -37,12 +28,13 @@ const QuickFiltersTemplate = ({
         filter,
       });
     },
-    [onApplyFilter]
+    [onApplyFilter],
   );
 
   const handleChangeQuickFilterColumns = useCallback((columns: string[]) => {
-    console.log('change columns',{columns})
-  },[])
+    console.log("change columns", { columns });
+    setQuickFilterColumns(columns);
+  }, []);
 
   return (
     <QuickFilters
@@ -76,9 +68,6 @@ export const OneColumn = () => {
 OneColumn.displaySequence = displaySequence++;
 
 export const ThreeColumns = () => {
-  const tableSchema = useMemo(() => getSchema("instruments"), []);
-  const { typeaheadHook } = vuuModule("SIMUL");
-
   const [availableColumns, quickFilterColumns] = useMemo<
     [ColumnDescriptor[], string[]]
   >(
@@ -94,30 +83,55 @@ export const ThreeColumns = () => {
       ],
       ["currency", "description", "exchange"],
     ],
-    []
+    [],
   );
   return (
     <QuickFiltersTemplate
       availableColumns={availableColumns}
       quickFilterColumns={quickFilterColumns}
-      suggestionProvider={typeaheadHook}
-      tableSchema={tableSchema}
     />
   );
 };
 ThreeColumns.displaySequence = displaySequence++;
 
-export const WithPersistence = () => {
+const PersistentFilter = () => {
+  const { load, save } = useViewContext();
+  const quickFilters = useMemo<string[]>(
+    () => (load?.("quick-filters") as string[]) ?? [],
+    [load],
+  );
 
-  const columns = useMemo(() => 
-    basketSchemas.basketTradingConstituentJoin.columns
-  ,[])
+  const saveFilters = useCallback(
+    (columns: string[]) => {
+      // this won't do anything useful in this context
+      // state will be saved in persistent-state store but because
+      // we are not rendered within a LayoutProvider, there will be
+      // no interaction with PersistenceManager to save state across
+      // sessions
+      save?.(columns, "quick-filters");
+    },
+    [save],
+  );
 
   return (
     <QuickFiltersTemplate
-      availableColumns={columns}
-      persistenceKey="quick-filters-with-persistence"
+      onChangeQuickFilterColumns={saveFilters}
+      quickFilterColumns={quickFilters}
     />
   );
 };
-SearchOnly.displaySequence = displaySequence++;
+
+export const WithPersistence = () => {
+  const id = "with-persistence-test";
+  useMemo(() => {
+    // 2) load time operation, normally performed during deserialization of UI from JSON
+    setPersistentState(id, { "quick-filters": ["currency"] });
+  }, []);
+
+  return (
+    <View id={id}>
+      <PersistentFilter />
+    </View>
+  );
+};
+WithPersistence.displaySequence = displaySequence++;
diff --git a/vuu-ui/showcase/src/examples/UiControls/Calendar.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/Calendar.examples.tsx
index 9d8ea51a0..ca887378f 100644
--- a/vuu-ui/showcase/src/examples/UiControls/Calendar.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/Calendar.examples.tsx
@@ -31,7 +31,7 @@ export const DefaultCalendar = () => {
 
   useEffect(() => {
     const el = ref.current?.querySelector(
-      ".saltCalendarDay-selected:not(.saltCalendarDay-outOfRange)"
+      ".saltCalendarDay-selected:not(.saltCalendarDay-outOfRange)",
     ) as HTMLElement;
     el?.focus();
   }, []);
@@ -60,7 +60,7 @@ export const ControlledCalendar = () => {
   const hoveredDate = new CalendarDate(2024, 1, 11);
 
   const isDayUnselectable = (d: DateValue) => {
-    return d.compare(new CalendarDate(2024, 1, 11)) === 0;
+    return d.compare(new CalendarDate(2024, 1, 11)) === 0 ? "true" : false;
   };
 
   return (
diff --git a/vuu-ui/showcase/src/examples/UiControls/VuuInput.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/VuuInput.examples.tsx
index 680daee06..d4689acfb 100644
--- a/vuu-ui/showcase/src/examples/UiControls/VuuInput.examples.tsx
+++ b/vuu-ui/showcase/src/examples/UiControls/VuuInput.examples.tsx
@@ -1,4 +1,5 @@
-import { CommitHandler, VuuInput, VuuInputProps } from "@finos/vuu-ui-controls";
+import { VuuInput, VuuInputProps } from "@finos/vuu-ui-controls";
+import { CommitHandler } from "@finos/vuu-utils";
 import { CSSProperties, useCallback, useState } from "react";
 
 let displaySequence = 1;
@@ -88,8 +89,10 @@ export const VuuInputWithValidation = () => {
   const [inputValue, setInputValue] = useState("");
   const valid = isValidInput(inputValue, "number");
   const content = getTooltipContent("number", valid);
-  const handleCommit = useCallback<CommitHandler>((event) => {
-    const fieldElement = event.target as HTMLInputElement;
+  const handleCommit = useCallback<
+    CommitHandler<HTMLInputElement, string | undefined>
+  >((evt) => {
+    const fieldElement = evt.target as HTMLInputElement;
     const fieldValue = fieldElement?.value;
     setInputValue(fieldValue);
   }, []);
diff --git a/vuu-ui/showcase/src/examples/salt/DatePicker.examples.tsx b/vuu-ui/showcase/src/examples/salt/DatePicker.examples.tsx
index a0782c2cd..95cbccf53 100644
--- a/vuu-ui/showcase/src/examples/salt/DatePicker.examples.tsx
+++ b/vuu-ui/showcase/src/examples/salt/DatePicker.examples.tsx
@@ -63,3 +63,4 @@ export const WithFormField = () => {
     </FormField>
   );
 };
+WithFormField.displaySequence = displaySequence++;