@vuu-ui/vuu-table-extras 0.8.23-debug → 0.8.24-debug

package/esm/index.js

@@ -208,17 +208,17 @@ registerConfigurationEditor(
 );
 
 // src/cell-renderers/dropdown-cell/DropdownCell.tsx
-import { useLookupValues } from "@vuu-ui/vuu-data-react";
+import { getSelectedOption, useLookupValues } from "@vuu-ui/vuu-data-react";
 import {
   Dropdown as Dropdown2,
   WarnCommit
 } from "@vuu-ui/vuu-ui-controls";
 import {
-  dataAndColumnUnchanged as dataAndColumnUnchanged2,
+  dataColumnAndKeyUnchanged,
   dispatchCustomEvent,
   registerComponent as registerComponent4
 } from "@vuu-ui/vuu-utils";
-import { memo as memo2, useCallback as useCallback2, useState as useState2 } from "react";
+import { memo as memo2, useCallback as useCallback2, useMemo, useRef as useRef2 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var classBase3 = "vuuTableDropdownCell";
 var openKeys = ["Enter", " "];
@@ -230,12 +230,15 @@ var DropdownCell = memo2(
     row
   }) {
     const dataIdx = columnMap[column.name];
-    const { initialValue, values } = useLookupValues(column, row[dataIdx]);
-    const [value, setValue] = useState2(null);
+    const dataValue = row[dataIdx];
+    const { values } = useLookupValues(column, dataValue);
+    const valueRef = useRef2(null);
+    useMemo(() => {
+      valueRef.current = getSelectedOption(values, dataValue);
+    }, [dataValue, values]);
     const handleSelectionChange = useCallback2(
       (evt, selectedOption) => {
         if (selectedOption) {
-          setValue(selectedOption);
           onCommit(selectedOption.value).then((response) => {
             if (response === true && evt) {
               dispatchCustomEvent(evt.target, "vuu-commit");
@@ -251,19 +254,21 @@ var DropdownCell = memo2(
         className: classBase3,
         onSelectionChange: handleSelectionChange,
         openKeys,
-        selected: value != null ? value : initialValue,
+        selected: valueRef.current,
         source: values,
         width: column.width - 17
       }
     );
   },
-  dataAndColumnUnchanged2
+  dataColumnAndKeyUnchanged
 );
-registerComponent4("dropdown-cell", DropdownCell, "cell-renderer", {});
+registerComponent4("dropdown-cell", DropdownCell, "cell-renderer", {
+  userCanAssign: false
+});
 
 // src/cell-renderers/lookup-cell/LookupCell.tsx
 import { useLookupValues as useLookupValues2 } from "@vuu-ui/vuu-data-react";
-import { dataAndColumnUnchanged as dataAndColumnUnchanged3, registerComponent as registerComponent5 } from "@vuu-ui/vuu-utils";
+import { dataAndColumnUnchanged as dataAndColumnUnchanged2, registerComponent as registerComponent5 } from "@vuu-ui/vuu-utils";
 import { memo as memo3 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var LookupCell = memo3(
@@ -273,23 +278,75 @@ var LookupCell = memo3(
     row
   }) {
     const dataIdx = columnMap[column.name];
-    const { initialValue: value } = useLookupValues2(column, row[dataIdx]);
+    const dataValue = row[dataIdx];
+    const { initialValue: value } = useLookupValues2(column, dataValue);
     return /* @__PURE__ */ jsx4("span", { children: value == null ? void 0 : value.label });
   },
-  dataAndColumnUnchanged3
+  dataAndColumnUnchanged2
 );
-registerComponent5("lookup-cell", LookupCell, "cell-renderer", {});
+registerComponent5("lookup-cell", LookupCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+// src/cell-renderers/pct-progress-cell/PctProgressCell.tsx
+import { registerComponent as registerComponent6 } from "@vuu-ui/vuu-utils";
+import cx2 from "clsx";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var classBase4 = "vuuPctProgressCell";
+var getPercentageValue = (value) => {
+  if (value >= 0 && value <= 1) {
+    return value * 100;
+  } else if (value > 2) {
+    return 0;
+  } else if (value > 1) {
+    return 100;
+  } else {
+    return 0;
+  }
+};
+var PctProgressCell = ({ column, columnMap, row }) => {
+  const value = row[columnMap[column.name]];
+  const percentageValue = getPercentageValue(value);
+  const className = cx2(classBase4, {});
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cx2(className, {
+        [`${classBase4}-zero`]: percentageValue === 0,
+        [`${classBase4}-complete`]: percentageValue >= 100
+      }),
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: `${classBase4}-progressBar`,
+            style: { "--progress-bar-pct": `${percentageValue}%` }
+          }
+        ),
+        /* @__PURE__ */ jsx5("span", { className: `${classBase4}-text`, children: `${percentageValue.toFixed(
+          2
+        )} %` })
+      ]
+    }
+  );
+};
+registerComponent6("vuu.pct-progress", PctProgressCell, "cell-renderer", {
+  description: "Percentage formatter",
+  label: "Percentage formatter",
+  serverDataType: "double"
+});
 
 // src/cell-renderers/progress-cell/ProgressCell.tsx
 import {
   isColumnTypeRenderer,
   isTypeDescriptor as isTypeDescriptor3,
   isValidNumber as isValidNumber2,
-  registerComponent as registerComponent6
+  registerComponent as registerComponent7
 } from "@vuu-ui/vuu-utils";
-import cx2 from "clsx";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var classBase4 = "vuuProgressCell";
+import cx3 from "clsx";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var classBase5 = "vuuProgressCell";
 var ProgressCell = ({ column, columnMap, row }) => {
   const { name: name2, type } = column;
   const value = row[columnMap[name2]];
@@ -299,7 +356,7 @@ var ProgressCell = ({ column, columnMap, row }) => {
     const { associatedField } = type.renderer;
     if (associatedField) {
       const associatedValue = row[columnMap[associatedField]];
-      if (typeof isValidNumber2(value) && isValidNumber2(associatedValue)) {
+      if (isValidNumber2(value) && isValidNumber2(associatedValue)) {
         percentage = Math.min(Math.round(value / associatedValue * 100), 100);
         percentage = Math.min(Math.round(value / associatedValue * 100), 100);
         showProgress = isFinite(percentage);
@@ -320,25 +377,27 @@ var ProgressCell = ({ column, columnMap, row }) => {
       throw Error("ProgressCell associatedField is required to render");
     }
   }
-  const className = cx2(classBase4, {});
-  return /* @__PURE__ */ jsxs3("div", { className, tabIndex: -1, children: [
-    showProgress ? /* @__PURE__ */ jsxs3("span", { className: `${classBase4}-track`, children: [
-      /* @__PURE__ */ jsx5("span", { className: `${classBase4}-bg` }),
-      /* @__PURE__ */ jsx5(
+  const className = cx3(classBase5, {});
+  return /* @__PURE__ */ jsxs4("div", { className, tabIndex: -1, children: [
+    showProgress ? /* @__PURE__ */ jsxs4("span", { className: `${classBase5}-track`, children: [
+      /* @__PURE__ */ jsx6("span", { className: `${classBase5}-bg` }),
+      /* @__PURE__ */ jsx6(
         "span",
         {
-          className: `${classBase4}-bar`,
+          className: `${classBase5}-bar`,
           style: { "--progress-bar-pct": `-${100 - percentage}%` }
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsx5("span", { className: `${classBase4}-text`, children: `${percentage} %` })
+    /* @__PURE__ */ jsx6("span", { className: `${classBase5}-text`, children: `${percentage} %` })
   ] });
 };
-registerComponent6("vuu.progress", ProgressCell, "cell-renderer", {
+registerComponent7("vuu.progress", ProgressCell, "cell-renderer", {
   description: "Progress formatter",
   label: "Progress formatter",
-  serverDataType: ["long", "int", "double"]
+  serverDataType: ["long", "int", "double"],
+  // Not until we provide settings for associaetd field
+  userCanAssign: false
 });
 
 // src/column-list/ColumnList.tsx
@@ -347,33 +406,33 @@ import {
   ListItem
 } from "@vuu-ui/vuu-ui-controls";
 import { Checkbox, Switch } from "@salt-ds/core";
-import cx3 from "clsx";
+import cx4 from "clsx";
 import {
   useCallback as useCallback3
 } from "react";
 import { getColumnLabel } from "@vuu-ui/vuu-utils";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var classBase5 = "vuuColumnList";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var classBase6 = "vuuColumnList";
 var classBaseListItem = "vuuColumnListItem";
 var ColumnListItem = ({
   className: classNameProp,
   item,
   ...listItemProps
 }) => {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     ListItem,
     {
       ...listItemProps,
-      className: cx3(classNameProp, classBaseListItem),
+      className: cx4(classNameProp, classBaseListItem),
       "data-name": item == null ? void 0 : item.name,
       children: [
-        /* @__PURE__ */ jsx6("span", { className: `${classBase5}-icon`, "data-icon": "draggable" }),
-        (item == null ? void 0 : item.isCalculated) ? /* @__PURE__ */ jsx6("span", { className: `${classBase5}-icon`, "data-icon": "function" }) : /* @__PURE__ */ jsx6(Switch, { className: `${classBase5}-switch`, checked: item == null ? void 0 : item.subscribed }),
-        /* @__PURE__ */ jsx6("span", { className: `${classBase5}-text`, children: getColumnLabel(item) }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7("span", { className: `${classBase6}-icon`, "data-icon": "draggable" }),
+        (item == null ? void 0 : item.isCalculated) ? /* @__PURE__ */ jsx7("span", { className: `${classBase6}-icon`, "data-icon": "function" }) : /* @__PURE__ */ jsx7(Switch, { className: `${classBase6}-switch`, checked: item == null ? void 0 : item.subscribed }),
+        /* @__PURE__ */ jsx7("span", { className: `${classBase6}-text`, children: getColumnLabel(item) }),
+        /* @__PURE__ */ jsx7(
           Checkbox,
           {
-            className: `${classBase5}-checkBox`,
+            className: `${classBase6}-checkBox`,
             checked: (item == null ? void 0 : item.hidden) !== true,
             disabled: (item == null ? void 0 : item.subscribed) !== true
           }
@@ -397,9 +456,9 @@ var ColumnList = ({
         dataset: { name: name2 }
       } = listItem;
       if (name2) {
-        const saltSwitch = input.closest(`.${classBase5}-switch`);
+        const saltSwitch = input.closest(`.${classBase6}-switch`);
         const saltCheckbox = input.closest(
-          `.${classBase5}-checkBox`
+          `.${classBase6}-checkBox`
         );
         if (saltSwitch) {
           onChange(name2, "subscribed", input.checked);
@@ -419,13 +478,13 @@ var ColumnList = ({
       }
     }
   }, []);
-  return /* @__PURE__ */ jsxs4("div", { ...htmlAttributes, className: classBase5, children: [
-    /* @__PURE__ */ jsx6("div", { className: `${classBase5}-header`, children: /* @__PURE__ */ jsx6("span", { children: "Column Selection" }) }),
-    /* @__PURE__ */ jsxs4("div", { className: `${classBase5}-colHeadings`, children: [
-      /* @__PURE__ */ jsx6("span", { children: "Column subscription" }),
-      /* @__PURE__ */ jsx6("span", { children: "Visibility" })
+  return /* @__PURE__ */ jsxs5("div", { ...htmlAttributes, className: classBase6, children: [
+    /* @__PURE__ */ jsx7("div", { className: `${classBase6}-header`, children: /* @__PURE__ */ jsx7("span", { children: "Column Selection" }) }),
+    /* @__PURE__ */ jsxs5("div", { className: `${classBase6}-colHeadings`, children: [
+      /* @__PURE__ */ jsx7("span", { children: "Column subscription" }),
+      /* @__PURE__ */ jsx7("span", { children: "Visibility" })
     ] }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       List,
       {
         ListItem: ColumnListItem,
@@ -443,7 +502,7 @@ var ColumnList = ({
 };
 
 // src/column-settings/ColumnSettingsPanel.tsx
-import { VuuInput } from "@vuu-ui/vuu-ui-controls";
+import { Icon, VuuInput } from "@vuu-ui/vuu-ui-controls";
 import {
   getCalculatedColumnName as getCalculatedColumnName2,
   getDefaultAlignment,
@@ -456,7 +515,7 @@ import {
   ToggleButton as ToggleButton3,
   ToggleButtonGroup as ToggleButtonGroup3
 } from "@salt-ds/core";
-import cx6 from "clsx";
+import cx7 from "clsx";
 
 // src/column-expression-panel/ColumnExpressionPanel.tsx
 import { Dropdown as Dropdown3 } from "@vuu-ui/vuu-ui-controls";
@@ -466,7 +525,7 @@ import {
   getCalculatedColumnType
 } from "@vuu-ui/vuu-utils";
 import { FormField as FormField2, FormFieldLabel as FormFieldLabel2, Input } from "@salt-ds/core";
-import { useCallback as useCallback8, useRef as useRef5 } from "react";
+import { useCallback as useCallback8, useRef as useRef6 } from "react";
 
 // src/column-expression-input/ColumnExpressionInput.tsx
 import { memo as memo4 } from "react";
@@ -486,8 +545,8 @@ import { createEl } from "@vuu-ui/vuu-utils";
 import {
   useCallback as useCallback5,
   useEffect as useEffect2,
-  useMemo,
-  useRef as useRef2
+  useMemo as useMemo2,
+  useRef as useRef3
 } from "react";
 
 // src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts
@@ -1522,11 +1581,11 @@ var useColumnExpressionEditor = ({
   source,
   suggestionProvider
 }) => {
-  const editorRef = useRef2(null);
-  const onSubmitRef = useRef2(noop);
-  const viewRef = useRef2();
+  const editorRef = useRef3(null);
+  const onSubmitRef = useRef3(noop);
+  const viewRef = useRef3();
   const completionFn = useColumnAutoComplete(suggestionProvider, onSubmitRef);
-  const [createState, clearInput, submit] = useMemo(() => {
+  const [createState, clearInput, submit] = useMemo2(() => {
     const parseExpression = () => {
       const view = getView(viewRef);
       const source2 = view.state.doc.toString();
@@ -1614,8 +1673,8 @@ var useColumnExpressionEditor = ({
 };
 
 // src/column-expression-input/ColumnExpressionInput.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var classBase6 = "vuuColumnExpressionInput";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var classBase7 = "vuuColumnExpressionInput";
 var ColumnExpressionInput = memo4(
   ({
     onChange,
@@ -1629,7 +1688,7 @@ var ColumnExpressionInput = memo4(
       source,
       suggestionProvider
     });
-    return /* @__PURE__ */ jsx7("div", { className: `${classBase6}`, onBlur, ref: editorRef });
+    return /* @__PURE__ */ jsx8("div", { className: `${classBase7}`, onBlur, ref: editorRef });
   },
   (prevProps, newProps) => {
     return prevProps.source === newProps.source;
@@ -1650,7 +1709,7 @@ import {
   useTypeaheadSuggestions
 } from "@vuu-ui/vuu-data-react";
 import { isNumericColumn, isTextColumn } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback6, useRef as useRef3 } from "react";
+import { useCallback as useCallback6, useRef as useRef4 } from "react";
 
 // src/column-expression-input/column-function-descriptors.ts
 var columnFunctionDescriptors = [
@@ -2107,7 +2166,7 @@ var useColumnExpressionSuggestionProvider = ({
     (name2) => name2 ? columns.find((col) => col.name === name2) : void 0,
     [columns]
   );
-  const latestSuggestionsRef = useRef3();
+  const latestSuggestionsRef = useRef4();
   const getTypeaheadSuggestions = useTypeaheadSuggestions();
   const getSuggestions = useCallback6(
     async (suggestionType, options = NONE) => {
@@ -2201,11 +2260,12 @@ var useColumnExpressionSuggestionProvider = ({
 // src/column-expression-panel/useColumnExpression.ts
 import {
   getCalculatedColumnDetails,
+  isVuuColumnDataType,
   setCalculatedColumnExpression,
   setCalculatedColumnName,
   setCalculatedColumnType
 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback7, useRef as useRef4, useState as useState3 } from "react";
+import { useCallback as useCallback7, useRef as useRef5, useState as useState2 } from "react";
 var applyDefaults = (column) => {
   const [name2, expression, type] = getCalculatedColumnDetails(column);
   if (type === "") {
@@ -2219,12 +2279,13 @@ var applyDefaults = (column) => {
 };
 var useColumnExpression = ({
   column: columnProp,
-  onChangeName: onChangeNameProp
+  onChangeName: onChangeNameProp,
+  onChangeServerDataType: onChangeServerDataTypeProp
 }) => {
-  const [column, _setColumn] = useState3(
+  const [column, _setColumn] = useState2(
     applyDefaults(columnProp)
   );
-  const columnRef = useRef4(columnProp);
+  const columnRef = useRef5(columnProp);
   const setColumn = useCallback7((column2) => {
     columnRef.current = column2;
     _setColumn(column2);
@@ -2248,39 +2309,42 @@ var useColumnExpression = ({
     },
     [onChangeNameProp, setColumn]
   );
-  const onChangeType = useCallback7(
+  const onChangeServerDataType = useCallback7(
     (evt, value) => {
-      if (typeof value === "string") {
+      if (isVuuColumnDataType(value)) {
         const newColumn = setCalculatedColumnType(column, value);
         setColumn(newColumn);
         onChangeNameProp == null ? void 0 : onChangeNameProp(newColumn.name);
+        onChangeServerDataTypeProp == null ? void 0 : onChangeServerDataTypeProp(value);
       }
     },
-    [column, onChangeNameProp, setColumn]
+    [column, onChangeNameProp, onChangeServerDataTypeProp, setColumn]
   );
   return {
     column,
     onChangeExpression,
     onChangeName,
-    onChangeType
+    onChangeServerDataType
   };
 };
 
 // src/column-expression-panel/ColumnExpressionPanel.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var classBase7 = "vuuColumnExpressionPanel";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var classBase8 = "vuuColumnExpressionPanel";
 var ColumnExpressionPanel = ({
   column: columnProp,
   onChangeName: onChangeNameProp,
+  onChangeServerDataType: onChangeServerDataTypeProp,
   tableConfig,
   vuuTable
 }) => {
-  const typeRef = useRef5(null);
-  const { column, onChangeExpression, onChangeName, onChangeType } = useColumnExpression({
+  const typeRef = useRef6(null);
+  const { column, onChangeExpression, onChangeName, onChangeServerDataType } = useColumnExpression({
     column: columnProp,
-    onChangeName: onChangeNameProp
+    onChangeName: onChangeNameProp,
+    onChangeServerDataType: onChangeServerDataTypeProp
   });
-  const initialExpressionRef = useRef5(
+  const initialExpressionRef = useRef6(
     getCalculatedColumnExpression(column)
   );
   const suggestionProvider = useColumnExpressionSuggestionProvider({
@@ -2293,11 +2357,11 @@ var ColumnExpressionPanel = ({
       (_b = (_a = typeRef.current) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
     }
   }, []);
-  return /* @__PURE__ */ jsxs5("div", { className: classBase7, children: [
-    /* @__PURE__ */ jsx8("div", { className: "vuuColumnSettingsPanel-header", children: /* @__PURE__ */ jsx8("span", { children: "Calculation" }) }),
-    /* @__PURE__ */ jsxs5(FormField2, { "data-field": "column-name", children: [
-      /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Column Name" }),
-      /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6("div", { className: classBase8, children: [
+    /* @__PURE__ */ jsx9("div", { className: "vuuColumnSettingsPanel-header", children: /* @__PURE__ */ jsx9("span", { children: "Calculation" }) }),
+    /* @__PURE__ */ jsxs6(FormField2, { "data-field": "column-name", children: [
+      /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Column Name" }),
+      /* @__PURE__ */ jsx9(
         Input,
         {
           className: "vuuInput",
@@ -2306,9 +2370,9 @@ var ColumnExpressionPanel = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs5(FormField2, { "data-field": "column-expression", children: [
-      /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Expression" }),
-      /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs6(FormField2, { "data-field": "column-expression", children: [
+      /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Expression" }),
+      /* @__PURE__ */ jsx9(
         ColumnExpressionInput,
         {
           onChange: onChangeExpression,
@@ -2318,16 +2382,16 @@ var ColumnExpressionPanel = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs5(FormField2, { "data-field": "type", children: [
-      /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Column type" }),
-      /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs6(FormField2, { "data-field": "type", children: [
+      /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Column type" }),
+      /* @__PURE__ */ jsx9(
         Dropdown3,
         {
-          className: `${classBase7}-type`,
-          onSelectionChange: onChangeType,
+          className: `${classBase8}-type`,
+          onSelectionChange: onChangeServerDataType,
           ref: typeRef,
           selected: getCalculatedColumnType(column) || null,
-          source: ["double", "long", "string"],
+          source: ["double", "long", "string", "boolean"],
           width: "100%"
         }
       )
@@ -2344,24 +2408,24 @@ import {
   isTypeDescriptor as isTypeDescriptor5
 } from "@vuu-ui/vuu-utils";
 import { FormField as FormField6, FormFieldLabel as FormFieldLabel6 } from "@salt-ds/core";
-import cx4 from "clsx";
-import { useCallback as useCallback12, useMemo as useMemo3 } from "react";
+import cx5 from "clsx";
+import { useCallback as useCallback12, useMemo as useMemo4 } from "react";
 
 // src/column-formatting-settings/BaseNumericFormattingSettings.tsx
 import { FormField as FormField3, FormFieldLabel as FormFieldLabel3, Input as Input2, Switch as Switch2 } from "@salt-ds/core";
 import { getTypeFormattingFromColumn } from "@vuu-ui/vuu-utils";
 import {
   useCallback as useCallback9,
-  useState as useState4
+  useState as useState3
 } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var classBase8 = "vuuFormattingSettings";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var classBase9 = "vuuFormattingSettings";
 var BaseNumericFormattingSettings = ({
   column,
   onChangeFormatting: onChange
 }) => {
   var _a, _b, _c;
-  const [formattingSettings, setFormattingSettings] = useState4(getTypeFormattingFromColumn(column));
+  const [formattingSettings, setFormattingSettings] = useState3(getTypeFormattingFromColumn(column));
   const handleInputKeyDown = useCallback9(
     (evt) => {
       if (evt.key === "Enter" || evt.key === "Tab") {
@@ -2406,10 +2470,10 @@ var BaseNumericFormattingSettings = ({
     },
     [formattingSettings, onChange]
   );
-  return /* @__PURE__ */ jsxs6("div", { className: classBase8, children: [
-    /* @__PURE__ */ jsxs6(FormField3, { "data-field": "decimals", children: [
-      /* @__PURE__ */ jsx9(FormFieldLabel3, { children: "Number of decimals" }),
-      /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs7("div", { className: classBase9, children: [
+    /* @__PURE__ */ jsxs7(FormField3, { "data-field": "decimals", children: [
+      /* @__PURE__ */ jsx10(FormFieldLabel3, { children: "Number of decimals" }),
+      /* @__PURE__ */ jsx10(
         Input2,
         {
           className: "vuuInput",
@@ -2419,9 +2483,9 @@ var BaseNumericFormattingSettings = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs6(FormField3, { labelPlacement: "left", children: [
-      /* @__PURE__ */ jsx9(FormFieldLabel3, { children: "Align on decimals" }),
-      /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs7(FormField3, { labelPlacement: "left", children: [
+      /* @__PURE__ */ jsx10(FormFieldLabel3, { children: "Align on decimals" }),
+      /* @__PURE__ */ jsx10(
         Switch2,
         {
           checked: (_b = formattingSettings.alignOnDecimals) != null ? _b : false,
@@ -2430,9 +2494,9 @@ var BaseNumericFormattingSettings = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs6(FormField3, { labelPlacement: "left", children: [
-      /* @__PURE__ */ jsx9(FormFieldLabel3, { children: "Zero pad decimals" }),
-      /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs7(FormField3, { labelPlacement: "left", children: [
+      /* @__PURE__ */ jsx10(FormFieldLabel3, { children: "Zero pad decimals" }),
+      /* @__PURE__ */ jsx10(
         Switch2,
         {
           checked: (_c = formattingSettings.zeroPad) != null ? _c : false,
@@ -2455,7 +2519,7 @@ import {
 import { isDateTimeColumn, isTypeDescriptor as isTypeDescriptor4 } from "@vuu-ui/vuu-utils";
 
 // src/column-formatting-settings/DateTimeFormattingSettings.tsx
-import { useCallback as useCallback10, useMemo as useMemo2, useState as useState5 } from "react";
+import { useCallback as useCallback10, useMemo as useMemo3, useState as useState4 } from "react";
 import { Dropdown as Dropdown4 } from "@vuu-ui/vuu-ui-controls";
 import {
   defaultPatternsByType,
@@ -2469,13 +2533,13 @@ import {
   ToggleButton,
   ToggleButtonGroup
 } from "@salt-ds/core";
-import { Fragment, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
   var _a, _b;
   const formatting = getTypeFormattingFromColumn2(column);
   const { pattern = fallbackDateTimePattern } = formatting;
-  const toggleValue = useMemo2(() => getToggleValue(pattern), [pattern]);
-  const [fallbackState, setFallbackState] = useState5(
+  const toggleValue = useMemo3(() => getToggleValue(pattern), [pattern]);
+  const [fallbackState, setFallbackState] = useState4(
     {
       time: (_a = pattern.time) != null ? _a : defaultPatternsByType.time,
       date: (_b = pattern.date) != null ? _b : defaultPatternsByType.date
@@ -2521,22 +2585,23 @@ var DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
     },
     [onPatternChange, pattern, fallbackState]
   );
-  return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsxs7(FormField4, { labelPlacement: "left", children: [
-      /* @__PURE__ */ jsx10(FormFieldLabel4, { children: "Display" }),
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsxs8(FormField4, { labelPlacement: "top", children: [
+      /* @__PURE__ */ jsx11(FormFieldLabel4, { children: "Display" }),
+      /* @__PURE__ */ jsx11(
         ToggleButtonGroup,
         {
           className: "vuuToggleButtonGroup",
           onChange: onToggleChange,
           value: toggleValue,
-          children: toggleValues.map((v) => /* @__PURE__ */ jsx10(ToggleButton, { value: v, children: v.toUpperCase() }, v))
+          "data-variant": "primary",
+          children: toggleValues.map((v) => /* @__PURE__ */ jsx11(ToggleButton, { value: v, children: v.toUpperCase() }, v))
         }
       )
     ] }),
-    ["date", "time"].filter((v) => !!pattern[v]).map((v) => /* @__PURE__ */ jsxs7(FormField4, { labelPlacement: "left", children: [
-      /* @__PURE__ */ jsx10(FormFieldLabel4, { children: `${labelByType[v]} pattern` }),
-      /* @__PURE__ */ jsx10(
+    ["date", "time"].filter((v) => !!pattern[v]).map((v) => /* @__PURE__ */ jsxs8(FormField4, { labelPlacement: "top", children: [
+      /* @__PURE__ */ jsx11(FormFieldLabel4, { children: `${labelByType[v]} pattern` }),
+      /* @__PURE__ */ jsx11(
         Dropdown4,
         {
           onSelectionChange: onDropdownChange(v),
@@ -2555,10 +2620,10 @@ function getToggleValue(pattern) {
 }
 
 // src/column-formatting-settings/LongTypeFormattingSettings.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-var classBase9 = "vuuLongColumnFormattingSettings";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var classBase10 = "vuuLongColumnFormattingSettings";
 var LongTypeFormattingSettings = (props) => {
-  const { column, onChangeType } = props;
+  const { column, onChangeColumnType: onChangeType } = props;
   const type = isTypeDescriptor4(column.type) ? column.type.name : column.type;
   const handleToggleChange = useCallback11(
     (event) => {
@@ -2567,27 +2632,27 @@ var LongTypeFormattingSettings = (props) => {
     },
     [onChangeType]
   );
-  return /* @__PURE__ */ jsxs8("div", { className: classBase9, children: [
-    /* @__PURE__ */ jsxs8(FormField5, { children: [
-      /* @__PURE__ */ jsx11(FormFieldLabel5, { children: "Type inferred as" }),
-      /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs9("div", { className: classBase10, children: [
+    /* @__PURE__ */ jsxs9(FormField5, { children: [
+      /* @__PURE__ */ jsx12(FormFieldLabel5, { children: "Type inferred as" }),
+      /* @__PURE__ */ jsx12(
         ToggleButtonGroup2,
         {
           className: "vuuToggleButtonGroup",
           onChange: handleToggleChange,
           value: type != null ? type : "number",
-          children: toggleValues2.map((v) => /* @__PURE__ */ jsx11(ToggleButton2, { value: v, children: v.toUpperCase() }, v))
+          children: toggleValues2.map((v) => /* @__PURE__ */ jsx12(ToggleButton2, { value: v, children: v.toUpperCase() }, v))
         }
       )
     ] }),
-    isDateTimeColumn(column) ? /* @__PURE__ */ jsx11(DateTimeFormattingSettings, { ...props, column }) : /* @__PURE__ */ jsx11(BaseNumericFormattingSettings, { ...props })
+    isDateTimeColumn(column) ? /* @__PURE__ */ jsx12(DateTimeFormattingSettings, { ...props, column }) : /* @__PURE__ */ jsx12(BaseNumericFormattingSettings, { ...props })
   ] });
 };
 var toggleValues2 = ["number", "date/time"];
 
 // src/column-formatting-settings/ColumnFormattingPanel.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-var classBase10 = "vuuColumnFormattingPanel";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var classBase11 = "vuuColumnFormattingPanel";
 var itemToString = (item) => {
   var _a;
   return (_a = item.label) != null ? _a : item.name;
@@ -2597,15 +2662,20 @@ var ColumnFormattingPanel = ({
   className,
   column,
   onChangeFormatting,
-  onChangeType,
+  onChangeColumnType,
   onChangeRendering,
   ...htmlAttributes
 }) => {
-  const formattingSettingsForType = useMemo3(
-    () => formattingSettingsByColType({ column, onChangeFormatting, onChangeType }),
-    [column, onChangeFormatting, onChangeType]
+  const formattingSettingsComponent = useMemo4(
+    () => getFormattingSettingsComponent({
+      column,
+      onChangeFormatting,
+      onChangeColumnType
+    }),
+    [column, onChangeColumnType, onChangeFormatting]
   );
-  const ConfigEditor = useMemo3(() => {
+  console.log({ formattingSettingsComponent });
+  const ConfigEditor = useMemo4(() => {
     const { type } = column;
     if (isTypeDescriptor5(type) && isColumnTypeRenderer2(type.renderer)) {
       const cellRendererOptions = getCellRendererOptions(type.renderer.name);
@@ -2613,7 +2683,7 @@ var ColumnFormattingPanel = ({
     }
     return void 0;
   }, [column]);
-  const selectedCellRenderer = useMemo3(() => {
+  const selectedCellRenderer = useMemo4(() => {
     const { type } = column;
     const [defaultRenderer] = availableRenderers;
     const rendererName = isTypeDescriptor5(type) && isColumnTypeRenderer2(type.renderer) ? type.renderer.name : void 0;
@@ -2632,14 +2702,14 @@ var ColumnFormattingPanel = ({
     [onChangeRendering]
   );
   const { serverDataType = "string" } = column;
-  return /* @__PURE__ */ jsxs9("div", { ...htmlAttributes, className: `vuuColumnSettingsPanel-header`, children: [
-    /* @__PURE__ */ jsx12("div", { children: "Formatting" }),
-    /* @__PURE__ */ jsxs9(FormField6, { children: [
-      /* @__PURE__ */ jsx12(FormFieldLabel6, { children: `Renderer (data type ${column.serverDataType})` }),
-      /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs10("div", { ...htmlAttributes, className: `vuuColumnSettingsPanel-header`, children: [
+    /* @__PURE__ */ jsx13("div", { children: "Formatting" }),
+    /* @__PURE__ */ jsxs10(FormField6, { children: [
+      /* @__PURE__ */ jsx13(FormFieldLabel6, { children: `Renderer (data type ${column.serverDataType})` }),
+      /* @__PURE__ */ jsx13(
         Dropdown5,
         {
-          className: cx4(`${classBase10}-renderer`),
+          className: cx5(`${classBase11}-renderer`),
           itemToString,
           onSelectionChange: handleChangeRenderer,
           selected: selectedCellRenderer,
@@ -2648,13 +2718,13 @@ var ColumnFormattingPanel = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs10(
       "div",
       {
-        className: cx4(classBase10, className, `${classBase10}-${serverDataType}`),
+        className: cx5(classBase11, className, `${classBase11}-${serverDataType}`),
         children: [
-          formattingSettingsForType,
-          ConfigEditor ? /* @__PURE__ */ jsx12(
+          formattingSettingsComponent,
+          ConfigEditor ? /* @__PURE__ */ jsx13(
             ConfigEditor,
             {
               column,
@@ -2666,51 +2736,51 @@ var ColumnFormattingPanel = ({
     )
   ] });
 };
-function formattingSettingsByColType(props) {
+function getFormattingSettingsComponent(props) {
   const { column } = props;
   switch (column.serverDataType) {
     case "double":
     case "int":
-      return /* @__PURE__ */ jsx12(BaseNumericFormattingSettings, { ...props });
+      return /* @__PURE__ */ jsx13(BaseNumericFormattingSettings, { ...props });
     case "long":
-      return /* @__PURE__ */ jsx12(LongTypeFormattingSettings, { ...props });
+      return /* @__PURE__ */ jsx13(LongTypeFormattingSettings, { ...props });
     default:
       return null;
   }
 }
 
 // src/column-settings/ColumnNameLabel.tsx
-import cx5 from "clsx";
+import cx6 from "clsx";
 import {
   getCalculatedColumnDetails as getCalculatedColumnDetails2,
   isCalculatedColumn
 } from "@vuu-ui/vuu-utils";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-var classBase11 = "vuuColumnNameLabel";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var classBase12 = "vuuColumnNameLabel";
 var ColumnNameLabel = ({ column, onClick }) => {
   if (isCalculatedColumn(column.name)) {
     const [name2, type, expression] = getCalculatedColumnDetails2(column);
     const displayName = name2 || "name";
     const displayExpression = "=expression";
-    const nameClass = displayName === "name" ? `${classBase11}-placeholder` : void 0;
-    const expressionClass = expression === "" ? `${classBase11}-placeholder` : void 0;
-    return /* @__PURE__ */ jsxs10(
+    const nameClass = displayName === "name" ? `${classBase12}-placeholder` : void 0;
+    const expressionClass = expression === "" ? `${classBase12}-placeholder` : void 0;
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
-        className: cx5(classBase11, `${classBase11}-calculated`),
+        className: cx6(classBase12, `${classBase12}-calculated`),
         onClick,
         children: [
-          /* @__PURE__ */ jsx13("span", { className: nameClass, children: displayName }),
-          /* @__PURE__ */ jsx13("span", { children: ":" }),
-          /* @__PURE__ */ jsx13("span", { children: type || "string" }),
-          /* @__PURE__ */ jsx13("span", { children: ":" }),
-          /* @__PURE__ */ jsx13("span", { className: expressionClass, children: displayExpression }),
-          /* @__PURE__ */ jsx13("span", { className: `${classBase11}-edit`, "data-icon": "edit" })
+          /* @__PURE__ */ jsx14("span", { className: nameClass, children: displayName }),
+          /* @__PURE__ */ jsx14("span", { children: ":" }),
+          /* @__PURE__ */ jsx14("span", { children: type || "string" }),
+          /* @__PURE__ */ jsx14("span", { children: ":" }),
+          /* @__PURE__ */ jsx14("span", { className: expressionClass, children: displayExpression }),
+          /* @__PURE__ */ jsx14("span", { className: `${classBase12}-edit`, "data-icon": "edit" })
         ]
       }
     );
   } else {
-    return /* @__PURE__ */ jsx13("div", { className: classBase11, children: column.name });
+    return /* @__PURE__ */ jsx14("div", { className: classBase12, children: column.name });
   }
 };
 
@@ -2722,54 +2792,50 @@ import {
   setCalculatedColumnName as setCalculatedColumnName2,
   updateColumnRenderProps,
   updateColumnFormatting,
-  updateColumnType
+  updateColumnType,
+  queryClosest
 } from "@vuu-ui/vuu-utils";
 import {
   useCallback as useCallback13,
   useEffect as useEffect3,
-  useMemo as useMemo4,
-  useRef as useRef6,
-  useState as useState6
+  useMemo as useMemo5,
+  useRef as useRef7,
+  useState as useState5
 } from "react";
 var integerCellRenderers = [
   {
     description: "Default formatter for columns with data type integer",
     label: "Default Renderer (int, long)",
     name: "default-int"
-  },
-  ...getRegisteredCellRenderers("int")
+  }
 ];
 var doubleCellRenderers = [
   {
     description: "Default formatter for columns with data type double",
     label: "Default Renderer (double)",
     name: "default-double"
-  },
-  ...getRegisteredCellRenderers("double")
+  }
 ];
 var stringCellRenderers = [
   {
     description: "Default formatter for columns with data type string",
     label: "Default Renderer (string)",
     name: "default-string"
-  },
-  ...getRegisteredCellRenderers("string")
-];
-var booleanCellRenderers = [
-  ...getRegisteredCellRenderers("boolean")
+  }
 ];
+var booleanCellRenderers = [];
 var getAvailableCellRenderers = (column) => {
   switch (column.serverDataType) {
     case "char":
     case "string":
-      return stringCellRenderers;
+      return stringCellRenderers.concat(getRegisteredCellRenderers("string"));
     case "int":
     case "long":
-      return integerCellRenderers;
+      return integerCellRenderers.concat(getRegisteredCellRenderers("int"));
     case "double":
-      return doubleCellRenderers;
+      return doubleCellRenderers.concat(getRegisteredCellRenderers("double"));
     case "boolean":
-      return booleanCellRenderers;
+      return booleanCellRenderers.concat(getRegisteredCellRenderers("boolean"));
     default:
       return stringCellRenderers;
   }
@@ -2809,11 +2875,11 @@ var useColumnSettings = ({
   onCreateCalculatedColumn,
   tableConfig
 }) => {
-  const [column, setColumn] = useState6(
+  const [column, setColumn] = useState5(
     getColumn(tableConfig.columns, columnProp)
   );
-  const columnRef = useRef6(column);
-  const [inEditMode, setEditMode] = useState6(column.name === "::");
+  const columnRef = useRef7(column);
+  const [inEditMode, setEditMode] = useState5(column.name === "::");
   const handleEditCalculatedcolumn = useCallback13(() => {
     columnRef.current = column;
     setEditMode(true);
@@ -2822,51 +2888,60 @@ var useColumnSettings = ({
     setColumn(columnProp);
     setEditMode(columnProp.name === "::");
   }, [columnProp]);
-  const availableRenderers = useMemo4(() => {
+  const availableRenderers = useMemo5(() => {
     return getAvailableCellRenderers(column);
   }, [column]);
   const handleInputCommit = useCallback13(() => {
     onConfigChange(replaceColumn(tableConfig, column));
   }, [column, onConfigChange, tableConfig]);
-  const handleChange = useCallback13(
+  const handleChangeToggleButton = useCallback13(
     (evt) => {
-      const input = evt.target;
-      const fieldName = getFieldName(input);
-      const { value } = input;
-      switch (fieldName) {
-        case "column-label":
-          setColumn((state) => ({ ...state, label: value }));
-          break;
-        case "column-name":
-          setColumn((state) => setCalculatedColumnName2(state, value));
-          break;
-        case "column-width":
-          setColumn((state) => ({ ...state, width: parseInt(value) }));
-          break;
-        case "column-alignment":
-          if (isValidColumnAlignment(value)) {
-            const newColumn = {
-              ...column,
-              align: value || void 0
-            };
-            setColumn(newColumn);
-            onConfigChange(replaceColumn(tableConfig, newColumn));
-          }
-          break;
-        case "column-pin":
-          if (isValidPinLocation(value)) {
-            const newColumn = {
-              ...column,
-              pin: value || void 0
-            };
-            setColumn(newColumn);
-            onConfigChange(replaceColumn(tableConfig, newColumn));
+      const button = queryClosest(evt.target, "button");
+      if (button) {
+        const fieldName = getFieldName(button);
+        const { value } = button;
+        switch (fieldName) {
+          case "column-alignment":
+            if (isValidColumnAlignment(value)) {
+              const newColumn = {
+                ...column,
+                align: value || void 0
+              };
+              setColumn(newColumn);
+              onConfigChange(replaceColumn(tableConfig, newColumn));
+            }
             break;
-          }
+          case "column-pin":
+            if (isValidPinLocation(value)) {
+              const newColumn = {
+                ...column,
+                pin: value || void 0
+              };
+              setColumn(newColumn);
+              onConfigChange(replaceColumn(tableConfig, newColumn));
+              break;
+            }
+        }
       }
     },
     [column, onConfigChange, tableConfig]
   );
+  const handleChange = useCallback13((evt) => {
+    const input = evt.target;
+    const fieldName = getFieldName(input);
+    const { value } = input;
+    switch (fieldName) {
+      case "column-label":
+        setColumn((state) => ({ ...state, label: value }));
+        break;
+      case "column-name":
+        setColumn((state) => setCalculatedColumnName2(state, value));
+        break;
+      case "column-width":
+        setColumn((state) => ({ ...state, width: parseInt(value) }));
+        break;
+    }
+  }, []);
   const handleChangeCalculatedColumnName = useCallback13((name2) => {
     setColumn((state) => ({ ...state, name: name2 }));
   }, []);
@@ -2886,6 +2961,12 @@ var useColumnSettings = ({
     },
     [column, onConfigChange, tableConfig]
   );
+  const handleChangeServerDataType = useCallback13(
+    (serverDataType) => {
+      setColumn((col) => ({ ...col, serverDataType }));
+    },
+    []
+  );
   const handleChangeRendering = useCallback13(
     (renderProps) => {
       if (renderProps) {
@@ -2940,6 +3021,8 @@ var useColumnSettings = ({
     onChangeCalculatedColumnName: handleChangeCalculatedColumnName,
     onChangeFormatting: handleChangeFormatting,
     onChangeRendering: handleChangeRendering,
+    onChangeServerDataType: handleChangeServerDataType,
+    onChangeToggleButton: handleChangeToggleButton,
     onChangeType: handleChangeType,
     onEditCalculatedColumn: handleEditCalculatedcolumn,
     onInputCommit: handleInputCommit,
@@ -2948,8 +3031,8 @@ var useColumnSettings = ({
 };
 
 // src/column-settings/ColumnSettingsPanel.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
-var classBase12 = "vuuColumnSettingsPanel";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+var classBase13 = "vuuColumnSettingsPanel";
 var getColumnLabel2 = (column) => {
   const { name: name2, label } = column;
   if (isCalculatedColumn2(name2)) {
@@ -2978,6 +3061,8 @@ var ColumnSettingsPanel = ({
     onChangeCalculatedColumnName,
     onChangeFormatting,
     onChangeRendering,
+    onChangeServerDataType,
+    onChangeToggleButton,
     onChangeType,
     onEditCalculatedColumn,
     onInputCommit,
@@ -2995,26 +3080,27 @@ var ColumnSettingsPanel = ({
     pin,
     width
   } = column;
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
-      className: cx6(classBase12, {
-        [`${classBase12}-editing`]: editCalculatedColumn
+      className: cx7(classBase13, {
+        [`${classBase13}-editing`]: editCalculatedColumn
       }),
       children: [
-        /* @__PURE__ */ jsx14("div", { className: `${classBase12}-header`, children: /* @__PURE__ */ jsx14(ColumnNameLabel, { column, onClick: onEditCalculatedColumn }) }),
-        editCalculatedColumn ? /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15("div", { className: `${classBase13}-header`, children: /* @__PURE__ */ jsx15(ColumnNameLabel, { column, onClick: onEditCalculatedColumn }) }),
+        editCalculatedColumn ? /* @__PURE__ */ jsx15(
           ColumnExpressionPanel,
           {
             column,
             onChangeName: onChangeCalculatedColumnName,
+            onChangeServerDataType,
             tableConfig,
             vuuTable
           }
         ) : null,
-        /* @__PURE__ */ jsxs11(FormField7, { "data-field": "column-label", children: [
-          /* @__PURE__ */ jsx14(FormFieldLabel7, { children: "Column Label" }),
-          /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsxs12(FormField7, { "data-field": "column-label", children: [
+          /* @__PURE__ */ jsx15(FormFieldLabel7, { children: "Column Label" }),
+          /* @__PURE__ */ jsx15(
             VuuInput,
             {
               className: "vuuInput",
@@ -3024,9 +3110,9 @@ var ColumnSettingsPanel = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs11(FormField7, { "data-field": "column-width", children: [
-          /* @__PURE__ */ jsx14(FormFieldLabel7, { children: "Column Width" }),
-          /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsxs12(FormField7, { "data-field": "column-width", children: [
+          /* @__PURE__ */ jsx15(FormFieldLabel7, { children: "Column Width" }),
+          /* @__PURE__ */ jsx15(
             VuuInput,
             {
               className: "vuuInput",
@@ -3036,129 +3122,71 @@ var ColumnSettingsPanel = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs11(FormField7, { "data-field": "column-alignment", children: [
-          /* @__PURE__ */ jsx14(FormFieldLabel7, { children: "Alignment" }),
-          /* @__PURE__ */ jsxs11(
-            ToggleButtonGroup3,
-            {
-              className: "vuuToggleButtonGroup",
-              onChange,
-              value: align,
-              children: [
-                /* @__PURE__ */ jsx14(
-                  ToggleButton3,
-                  {
-                    "data-icon": "align-left",
-                    className: "vuuIconToggleButton",
-                    value: "left"
-                  }
-                ),
-                /* @__PURE__ */ jsx14(
-                  ToggleButton3,
-                  {
-                    "data-icon": "align-right",
-                    className: "vuuIconToggleButton",
-                    value: "right"
-                  }
-                )
-              ]
-            }
-          )
+        /* @__PURE__ */ jsxs12(FormField7, { "data-field": "column-alignment", children: [
+          /* @__PURE__ */ jsx15(FormFieldLabel7, { children: "Alignment" }),
+          /* @__PURE__ */ jsxs12(ToggleButtonGroup3, { onChange: onChangeToggleButton, value: align, children: [
+            /* @__PURE__ */ jsx15(ToggleButton3, { value: "left", children: /* @__PURE__ */ jsx15(Icon, { name: "align-left", size: 16 }) }),
+            /* @__PURE__ */ jsx15(ToggleButton3, { value: "right", children: /* @__PURE__ */ jsx15(Icon, { name: "align-right", size: 16 }) })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs11(FormField7, { "data-field": "column-pin", children: [
-          /* @__PURE__ */ jsx14(FormFieldLabel7, { children: "Pin Column" }),
-          /* @__PURE__ */ jsxs11(
-            ToggleButtonGroup3,
-            {
-              className: "vuuToggleButtonGroup",
-              onChange,
-              value: pin != null ? pin : "",
-              children: [
-                /* @__PURE__ */ jsx14(
-                  ToggleButton3,
-                  {
-                    className: "vuuIconToggleButton",
-                    "data-icon": "cross-circle",
-                    value: ""
-                  }
-                ),
-                /* @__PURE__ */ jsx14(
-                  ToggleButton3,
-                  {
-                    className: "vuuIconToggleButton",
-                    "data-icon": "pin-left",
-                    value: "left"
-                  }
-                ),
-                /* @__PURE__ */ jsx14(
-                  ToggleButton3,
-                  {
-                    className: "vuuIconToggleButton",
-                    "data-icon": "pin-float",
-                    value: "floating"
-                  }
-                ),
-                /* @__PURE__ */ jsx14(
-                  ToggleButton3,
-                  {
-                    className: "vuuIconToggleButton",
-                    "data-icon": "pin-right",
-                    value: "right"
-                  }
-                )
-              ]
-            }
-          )
+        /* @__PURE__ */ jsxs12(FormField7, { "data-field": "column-pin", children: [
+          /* @__PURE__ */ jsx15(FormFieldLabel7, { children: "Pin Column" }),
+          /* @__PURE__ */ jsxs12(ToggleButtonGroup3, { onChange: onChangeToggleButton, value: pin != null ? pin : "", children: [
+            /* @__PURE__ */ jsx15(ToggleButton3, { value: "", children: /* @__PURE__ */ jsx15(Icon, { name: "cross-circle", size: 16 }) }),
+            /* @__PURE__ */ jsx15(ToggleButton3, { value: "left", children: /* @__PURE__ */ jsx15(Icon, { name: "pin-left", size: 16 }) }),
+            /* @__PURE__ */ jsx15(ToggleButton3, { value: "floating", children: /* @__PURE__ */ jsx15(Icon, { name: "pin-float", size: 16 }) }),
+            /* @__PURE__ */ jsx15(ToggleButton3, { value: "right", children: /* @__PURE__ */ jsx15(Icon, { name: "pin-right", size: 16 }) })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           ColumnFormattingPanel,
           {
             availableRenderers,
             column,
             onChangeFormatting,
             onChangeRendering,
-            onChangeType
+            onChangeColumnType: onChangeType
           }
         ),
-        editCalculatedColumn ? /* @__PURE__ */ jsxs11("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
-          /* @__PURE__ */ jsx14(
+        editCalculatedColumn ? /* @__PURE__ */ jsxs12("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
+          /* @__PURE__ */ jsx15(
             Button,
             {
-              className: `${classBase12}-buttonCancel`,
+              className: `${classBase13}-buttonCancel`,
               onClick: onCancel,
               tabIndex: -1,
               children: "cancel"
             }
           ),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             Button,
             {
-              className: `${classBase12}-buttonSave`,
+              className: `${classBase13}-buttonSave`,
               onClick: onSave,
               variant: "cta",
               children: "save"
             }
           )
-        ] }) : /* @__PURE__ */ jsxs11(
+        ] }) : /* @__PURE__ */ jsxs12(
           "div",
           {
-            className: `${classBase12}-buttonBar`,
+            className: `${classBase13}-buttonBar`,
             "data-align": isNewCalculatedColumn ? "right" : void 0,
             children: [
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 Button,
                 {
-                  className: `${classBase12}-buttonNavPrev`,
+                  className: `${classBase13}-buttonNavPrev`,
                   variant: "secondary",
                   "data-icon": "arrow-left",
                   onClick: navigatePrevColumn,
                   children: "PREVIOUS"
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 Button,
                 {
-                  className: `${classBase12}-buttonNavNext`,
+                  className: `${classBase13}-buttonNavNext`,
                   variant: "secondary",
                   "data-icon": "arrow-right",
                   onClick: navigateNextColumn,
@@ -3174,33 +3202,37 @@ var ColumnSettingsPanel = ({
 };
 
 // src/datasource-stats/DatasourceStats.tsx
-import cx7 from "clsx";
-import { useEffect as useEffect4, useState as useState7 } from "react";
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
-var classBase13 = "vuuDatasourceStats";
+import cx8 from "clsx";
+import { useEffect as useEffect4, useState as useState6 } from "react";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+var classBase14 = "vuuDatasourceStats";
 var numberFormatter = new Intl.NumberFormat();
 var DataSourceStats = ({
   className: classNameProp,
   dataSource
 }) => {
-  const [range, setRange] = useState7(dataSource.range);
-  const [size, setSize] = useState7(dataSource.size);
+  const [range, setRange] = useState6(dataSource.range);
+  const [size, setSize] = useState6(dataSource.size);
   useEffect4(() => {
     setSize(dataSource.size);
     dataSource.on("resize", setSize);
     dataSource.on("range", setRange);
+    return () => {
+      dataSource.removeListener("resize", setSize);
+      dataSource.removeListener("range", setRange);
+    };
   }, [dataSource]);
-  const className = cx7(classBase13, classNameProp);
+  const className = cx8(classBase14, classNameProp);
   const from = numberFormatter.format(range.from + 1);
   const to = numberFormatter.format(Math.min(range.to, size));
   const value = numberFormatter.format(size);
-  return /* @__PURE__ */ jsxs12("div", { className, children: [
-    /* @__PURE__ */ jsx15("span", { className: `${classBase13}-label`, children: "Row count" }),
-    /* @__PURE__ */ jsx15("span", { className: `${classBase13}-range`, children: from }),
-    /* @__PURE__ */ jsx15("span", { children: "-" }),
-    /* @__PURE__ */ jsx15("span", { className: `${classBase13}-range`, children: to }),
-    /* @__PURE__ */ jsx15("span", { children: "of" }),
-    /* @__PURE__ */ jsx15("span", { className: `${classBase13}-size`, children: value })
+  return /* @__PURE__ */ jsxs13("div", { className, children: [
+    /* @__PURE__ */ jsx16("span", { className: `${classBase14}-label`, children: "Row count" }),
+    /* @__PURE__ */ jsx16("span", { className: `${classBase14}-range`, children: from }),
+    /* @__PURE__ */ jsx16("span", { children: "-" }),
+    /* @__PURE__ */ jsx16("span", { className: `${classBase14}-range`, children: to }),
+    /* @__PURE__ */ jsx16("span", { children: "of" }),
+    /* @__PURE__ */ jsx16("span", { className: `${classBase14}-size`, children: value })
   ] });
 };
 
@@ -3209,7 +3241,6 @@ import {
   Button as Button2,
   FormField as FormField8,
   FormFieldLabel as FormFieldLabel8,
-  Input as Input3,
   ToggleButton as ToggleButton4,
   ToggleButtonGroup as ToggleButtonGroup4
 } from "@salt-ds/core";
@@ -3218,6 +3249,7 @@ import {
 import { updateTableConfig } from "@vuu-ui/vuu-table";
 import {
   addColumnToSubscribedColumns,
+  queryClosest as queryClosest2,
   isCalculatedColumn as isCalculatedColumn3,
   moveItem,
   subscribedOnly,
@@ -3225,8 +3257,8 @@ import {
 } from "@vuu-ui/vuu-utils";
 import {
   useCallback as useCallback14,
-  useMemo as useMemo5,
-  useState as useState8
+  useMemo as useMemo6,
+  useState as useState7
 } from "react";
 var sortOrderFromAvailableColumns = (availableColumns, columns) => {
   const sortedColumns = [];
@@ -3257,11 +3289,11 @@ var useTableSettings = ({
   onDataSourceConfigChange,
   tableConfig: tableConfigProp
 }) => {
-  const [{ availableColumns, tableConfig }, setColumnState] = useState8({
+  const [{ availableColumns, tableConfig }, setColumnState] = useState7({
     availableColumns: availableColumnsProp,
     tableConfig: tableConfigProp
   });
-  const columnItems = useMemo5(
+  const columnItems = useMemo6(
     () => buildColumnItems(availableColumns, tableConfig.columns),
     [availableColumns, tableConfig.columns]
   );
@@ -3343,29 +3375,47 @@ var useTableSettings = ({
     [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
   );
   const handleChangeColumnLabels = useCallback14((evt) => {
-    const { value } = evt.target;
-    const columnFormatHeader = value === "0" ? void 0 : value === "1" ? "capitalize" : "uppercase";
-    setColumnState((state) => ({
-      ...state,
-      tableConfig: {
-        ...state.tableConfig,
-        columnFormatHeader
-      }
-    }));
+    const button = queryClosest2(evt.target, "button");
+    if (button) {
+      const value = parseInt(button.value);
+      const columnFormatHeader = value === 0 ? void 0 : value === 1 ? "capitalize" : "uppercase";
+      setColumnState((state) => ({
+        ...state,
+        tableConfig: {
+          ...state.tableConfig,
+          columnFormatHeader
+        }
+      }));
+    }
   }, []);
   const handleChangeTableAttribute = useCallback14(
     (evt) => {
-      const { ariaChecked, value } = evt.target;
+      const button = queryClosest2(evt.target, "button");
+      const { ariaPressed, value } = button;
+      console.log({ ariaPressed, value, button });
       setColumnState((state) => ({
         ...state,
         tableConfig: {
           ...state.tableConfig,
-          [value]: ariaChecked !== "true"
+          [value]: ariaPressed !== "true"
         }
       }));
     },
     []
   );
+  const handleCommitColumnWidth = useCallback14((_, value) => {
+    const columnDefaultWidth = parseInt(value);
+    if (!isNaN(columnDefaultWidth)) {
+      setColumnState((state) => ({
+        ...state,
+        tableConfig: {
+          ...state.tableConfig,
+          columnDefaultWidth
+        }
+      }));
+    }
+    console.log({ value });
+  }, []);
   useLayoutEffectSkipFirst(() => {
     onConfigChange == null ? void 0 : onConfigChange(tableConfig);
   }, [onConfigChange, tableConfig]);
@@ -3376,14 +3426,17 @@ var useTableSettings = ({
     onChangeColumnLabels: handleChangeColumnLabels,
     onChangeTableAttribute: handleChangeTableAttribute,
     onColumnChange: handleColumnChange,
+    onCommitColumnWidth: handleCommitColumnWidth,
     onMoveListItem: handleMoveListItem,
     tableConfig
   };
 };
 
 // src/table-settings/TableSettingsPanel.tsx
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
-var classBase14 = "vuuTableSettingsPanel";
+import { Icon as Icon2 } from "@vuu-ui/vuu-ui-controls";
+import { VuuInput as VuuInput2 } from "@vuu-ui/vuu-ui-controls";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+var classBase15 = "vuuTableSettingsPanel";
 var TableSettingsPanel = ({
   availableColumns,
   onAddCalculatedColumn,
@@ -3399,6 +3452,7 @@ var TableSettingsPanel = ({
     onChangeColumnLabels,
     onChangeTableAttribute,
     onColumnChange,
+    onCommitColumnWidth,
     onMoveListItem,
     tableConfig
   } = useTableSettings({
@@ -3407,84 +3461,60 @@ var TableSettingsPanel = ({
     onDataSourceConfigChange,
     tableConfig: tableConfigProp
   });
-  return /* @__PURE__ */ jsxs13("div", { className: classBase14, children: [
-    /* @__PURE__ */ jsxs13(FormField8, { children: [
-      /* @__PURE__ */ jsx16(FormFieldLabel8, { children: "Column Labels" }),
-      /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14("div", { className: classBase15, children: [
+    /* @__PURE__ */ jsxs14(FormField8, { children: [
+      /* @__PURE__ */ jsx17(FormFieldLabel8, { children: "Column Labels" }),
+      /* @__PURE__ */ jsxs14(
         ToggleButtonGroup4,
         {
           className: "vuuToggleButtonGroup",
           onChange: onChangeColumnLabels,
           value: columnLabelsValue,
           children: [
-            /* @__PURE__ */ jsx16(
-              ToggleButton4,
-              {
-                className: "vuuIconToggleButton",
-                "data-icon": "text-strikethrough",
-                value: 0
-              }
-            ),
-            /* @__PURE__ */ jsx16(
-              ToggleButton4,
-              {
-                className: "vuuIconToggleButton",
-                "data-icon": "text-Tt",
-                value: 1
-              }
-            ),
-            /* @__PURE__ */ jsx16(
-              ToggleButton4,
-              {
-                className: "vuuIconToggleButton",
-                "data-icon": "text-T",
-                value: 2
-              }
-            )
+            /* @__PURE__ */ jsx17(ToggleButton4, { className: "vuuIconToggleButton", value: 0, children: /* @__PURE__ */ jsx17(Icon2, { name: "text-strikethrough", size: 48 }) }),
+            /* @__PURE__ */ jsx17(ToggleButton4, { className: "vuuIconToggleButton", value: 1, children: /* @__PURE__ */ jsx17(Icon2, { name: "text-Tt", size: 48 }) }),
+            /* @__PURE__ */ jsx17(ToggleButton4, { className: "vuuIconToggleButton", value: 2, children: /* @__PURE__ */ jsx17(Icon2, { name: "text-T", size: 48 }) })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs13(FormField8, { children: [
-      /* @__PURE__ */ jsx16(FormFieldLabel8, { children: "Grid separators" }),
-      /* @__PURE__ */ jsxs13("div", { className: "saltToggleButtonGroup vuuToggleButtonGroup saltToggleButtonGroup-horizontal vuuGridSeparators", children: [
-        /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsxs14(FormField8, { children: [
+      /* @__PURE__ */ jsx17(FormFieldLabel8, { children: "Grid separators" }),
+      /* @__PURE__ */ jsxs14("div", { className: "saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal", children: [
+        /* @__PURE__ */ jsx17(
           ToggleButton4,
           {
-            className: "vuuIconToggleButton",
-            "data-icon": "row-striping",
             selected: (_a = tableConfig.zebraStripes) != null ? _a : false,
             onChange: onChangeTableAttribute,
-            value: "zebraStripes"
+            value: "zebraStripes",
+            children: /* @__PURE__ */ jsx17(Icon2, { name: "row-striping", size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           ToggleButton4,
           {
-            className: "vuuIconToggleButton",
-            "data-icon": "row-lines",
             selected: (_b = tableConfig.rowSeparators) != null ? _b : false,
             onChange: onChangeTableAttribute,
-            value: "rowSeparators"
+            value: "rowSeparators",
+            children: /* @__PURE__ */ jsx17(Icon2, { name: "row-lines", size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           ToggleButton4,
           {
-            className: "vuuIconToggleButton",
-            "data-icon": "col-lines",
             selected: (_c = tableConfig.columnSeparators) != null ? _c : false,
             onChange: onChangeTableAttribute,
-            value: "columnSeparators"
+            value: "columnSeparators",
+            children: /* @__PURE__ */ jsx17(Icon2, { name: "col-lines", size: 16 })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs13(FormField8, { children: [
-      /* @__PURE__ */ jsx16(FormFieldLabel8, { children: "Default Column Width" }),
-      /* @__PURE__ */ jsx16(Input3, { className: "vuuInput" })
+    /* @__PURE__ */ jsxs14(FormField8, { children: [
+      /* @__PURE__ */ jsx17(FormFieldLabel8, { children: "Default Column Width" }),
+      /* @__PURE__ */ jsx17(VuuInput2, { className: "vuuInput", onCommit: onCommitColumnWidth })
     ] }),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       ColumnList,
       {
         columnItems,
@@ -3493,9 +3523,9 @@ var TableSettingsPanel = ({
         onNavigateToColumn
       }
     ),
-    /* @__PURE__ */ jsxs13("div", { className: `${classBase14}-calculatedButtonbar`, children: [
-      /* @__PURE__ */ jsx16(Button2, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
-      /* @__PURE__ */ jsx16("span", { className: `${classBase14}-calculatedLabel`, children: "Add calculated column" })
+    /* @__PURE__ */ jsxs14("div", { className: `${classBase15}-calculatedButtonbar`, children: [
+      /* @__PURE__ */ jsx17(Button2, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
+      /* @__PURE__ */ jsx17("span", { className: `${classBase15}-calculatedLabel`, children: "Add calculated column" })
     ] })
   ] });
 };
@@ -3515,6 +3545,7 @@ export {
   DropdownCell,
   LookupCell,
   PatternValidator,
+  PctProgressCell,
   TableSettingsPanel,
   columnExpressionLanguageSupport,
   isCompleteExpression,