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

package/cjs/index.js

@@ -63,6 +63,7 @@ __export(src_exports, {
   DropdownCell: () => DropdownCell,
   LookupCell: () => LookupCell,
   PatternValidator: () => PatternValidator,
+  PctProgressCell: () => PctProgressCell,
   TableSettingsPanel: () => TableSettingsPanel,
   columnExpressionLanguageSupport: () => columnExpressionLanguageSupport,
   isCompleteExpression: () => isCompleteExpression,
@@ -266,12 +267,15 @@ var DropdownCell = (0, import_react4.memo)(
     row
   }) {
     const dataIdx = columnMap[column.name];
-    const { initialValue, values } = (0, import_vuu_data_react.useLookupValues)(column, row[dataIdx]);
-    const [value, setValue] = (0, import_react4.useState)(null);
+    const dataValue = row[dataIdx];
+    const { values } = (0, import_vuu_data_react.useLookupValues)(column, dataValue);
+    const valueRef = (0, import_react4.useRef)(null);
+    (0, import_react4.useMemo)(() => {
+      valueRef.current = (0, import_vuu_data_react.getSelectedOption)(values, dataValue);
+    }, [dataValue, values]);
     const handleSelectionChange = (0, import_react4.useCallback)(
       (evt, selectedOption) => {
         if (selectedOption) {
-          setValue(selectedOption);
           onCommit(selectedOption.value).then((response) => {
             if (response === true && evt) {
               (0, import_vuu_utils6.dispatchCustomEvent)(evt.target, "vuu-commit");
@@ -287,15 +291,17 @@ var DropdownCell = (0, import_react4.memo)(
         className: classBase3,
         onSelectionChange: handleSelectionChange,
         openKeys,
-        selected: value != null ? value : initialValue,
+        selected: valueRef.current,
         source: values,
         width: column.width - 17
       }
     );
   },
-  import_vuu_utils6.dataAndColumnUnchanged
+  import_vuu_utils6.dataColumnAndKeyUnchanged
 );
-(0, import_vuu_utils6.registerComponent)("dropdown-cell", DropdownCell, "cell-renderer", {});
+(0, import_vuu_utils6.registerComponent)("dropdown-cell", DropdownCell, "cell-renderer", {
+  userCanAssign: false
+});
 
 // src/cell-renderers/lookup-cell/LookupCell.tsx
 var import_vuu_data_react2 = require("@vuu-ui/vuu-data-react");
@@ -309,28 +315,80 @@ var LookupCell = (0, import_react5.memo)(
     row
   }) {
     const dataIdx = columnMap[column.name];
-    const { initialValue: value } = (0, import_vuu_data_react2.useLookupValues)(column, row[dataIdx]);
+    const dataValue = row[dataIdx];
+    const { initialValue: value } = (0, import_vuu_data_react2.useLookupValues)(column, dataValue);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: value == null ? void 0 : value.label });
   },
   import_vuu_utils7.dataAndColumnUnchanged
 );
-(0, import_vuu_utils7.registerComponent)("lookup-cell", LookupCell, "cell-renderer", {});
+(0, import_vuu_utils7.registerComponent)("lookup-cell", LookupCell, "cell-renderer", {
+  userCanAssign: false
+});
 
-// src/cell-renderers/progress-cell/ProgressCell.tsx
+// src/cell-renderers/pct-progress-cell/PctProgressCell.tsx
 var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
 var import_clsx2 = __toESM(require("clsx"), 1);
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var classBase4 = "vuuProgressCell";
+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 = (0, import_clsx2.default)(classBase4, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx2.default)(className, {
+        [`${classBase4}-zero`]: percentageValue === 0,
+        [`${classBase4}-complete`]: percentageValue >= 100
+      }),
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            className: `${classBase4}-progressBar`,
+            style: { "--progress-bar-pct": `${percentageValue}%` }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${classBase4}-text`, children: `${percentageValue.toFixed(
+          2
+        )} %` })
+      ]
+    }
+  );
+};
+(0, import_vuu_utils8.registerComponent)("vuu.pct-progress", PctProgressCell, "cell-renderer", {
+  description: "Percentage formatter",
+  label: "Percentage formatter",
+  serverDataType: "double"
+});
+
+// src/cell-renderers/progress-cell/ProgressCell.tsx
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var classBase5 = "vuuProgressCell";
 var ProgressCell = ({ column, columnMap, row }) => {
   const { name: name2, type } = column;
   const value = row[columnMap[name2]];
   let showProgress = false;
   let percentage = 0;
-  if ((0, import_vuu_utils8.isTypeDescriptor)(type) && (0, import_vuu_utils8.isColumnTypeRenderer)(type.renderer)) {
+  if ((0, import_vuu_utils9.isTypeDescriptor)(type) && (0, import_vuu_utils9.isColumnTypeRenderer)(type.renderer)) {
     const { associatedField } = type.renderer;
     if (associatedField) {
       const associatedValue = row[columnMap[associatedField]];
-      if (typeof (0, import_vuu_utils8.isValidNumber)(value) && (0, import_vuu_utils8.isValidNumber)(associatedValue)) {
+      if ((0, import_vuu_utils9.isValidNumber)(value) && (0, import_vuu_utils9.isValidNumber)(associatedValue)) {
         percentage = Math.min(Math.round(value / associatedValue * 100), 100);
         percentage = Math.min(Math.round(value / associatedValue * 100), 100);
         showProgress = isFinite(percentage);
@@ -351,55 +409,57 @@ var ProgressCell = ({ column, columnMap, row }) => {
       throw Error("ProgressCell associatedField is required to render");
     }
   }
-  const className = (0, import_clsx2.default)(classBase4, {});
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, tabIndex: -1, children: [
-    showProgress ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: `${classBase4}-track`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${classBase4}-bg` }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const className = (0, import_clsx3.default)(classBase5, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, tabIndex: -1, children: [
+    showProgress ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: `${classBase5}-track`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${classBase5}-bg` }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "span",
         {
-          className: `${classBase4}-bar`,
+          className: `${classBase5}-bar`,
           style: { "--progress-bar-pct": `-${100 - percentage}%` }
         }
       )
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${classBase4}-text`, children: `${percentage} %` })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${classBase5}-text`, children: `${percentage} %` })
   ] });
 };
-(0, import_vuu_utils8.registerComponent)("vuu.progress", ProgressCell, "cell-renderer", {
+(0, import_vuu_utils9.registerComponent)("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
 var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
 var import_core2 = require("@salt-ds/core");
-var import_clsx3 = __toESM(require("clsx"), 1);
+var import_clsx4 = __toESM(require("clsx"), 1);
 var import_react6 = require("react");
-var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var classBase5 = "vuuColumnList";
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var classBase6 = "vuuColumnList";
 var classBaseListItem = "vuuColumnListItem";
 var ColumnListItem = ({
   className: classNameProp,
   item,
   ...listItemProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     import_vuu_ui_controls3.ListItem,
     {
       ...listItemProps,
-      className: (0, import_clsx3.default)(classNameProp, classBaseListItem),
+      className: (0, import_clsx4.default)(classNameProp, classBaseListItem),
       "data-name": item == null ? void 0 : item.name,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${classBase5}-icon`, "data-icon": "draggable" }),
-        (item == null ? void 0 : item.isCalculated) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${classBase5}-icon`, "data-icon": "function" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core2.Switch, { className: `${classBase5}-switch`, checked: item == null ? void 0 : item.subscribed }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${classBase5}-text`, children: (0, import_vuu_utils9.getColumnLabel)(item) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `${classBase6}-icon`, "data-icon": "draggable" }),
+        (item == null ? void 0 : item.isCalculated) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `${classBase6}-icon`, "data-icon": "function" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core2.Switch, { className: `${classBase6}-switch`, checked: item == null ? void 0 : item.subscribed }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `${classBase6}-text`, children: (0, import_vuu_utils10.getColumnLabel)(item) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           import_core2.Checkbox,
           {
-            className: `${classBase5}-checkBox`,
+            className: `${classBase6}-checkBox`,
             checked: (item == null ? void 0 : item.hidden) !== true,
             disabled: (item == null ? void 0 : item.subscribed) !== true
           }
@@ -423,9 +483,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);
@@ -445,13 +505,13 @@ var ColumnList = ({
       }
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ...htmlAttributes, className: classBase5, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${classBase5}-header`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Column Selection" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `${classBase5}-colHeadings`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Column subscription" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Visibility" })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ...htmlAttributes, className: classBase6, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase6}-header`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Column Selection" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `${classBase6}-colHeadings`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Column subscription" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Visibility" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_vuu_ui_controls3.List,
       {
         ListItem: ColumnListItem,
@@ -470,13 +530,13 @@ var ColumnList = ({
 
 // src/column-settings/ColumnSettingsPanel.tsx
 var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
 var import_core8 = require("@salt-ds/core");
-var import_clsx6 = __toESM(require("clsx"), 1);
+var import_clsx7 = __toESM(require("clsx"), 1);
 
 // src/column-expression-panel/ColumnExpressionPanel.tsx
 var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
 var import_core3 = require("@salt-ds/core");
 var import_react12 = require("react");
 
@@ -485,7 +545,7 @@ var import_react9 = require("react");
 
 // src/column-expression-input/useColumnExpressionEditor.ts
 var import_vuu_codemirror5 = require("@vuu-ui/vuu-codemirror");
-var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
 var import_react8 = require("react");
 
 // src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts
@@ -1491,8 +1551,8 @@ var noop = () => console.log("noooop");
 var hasExpressionType = (completion) => "expressionType" in completion;
 var injectOptionContent = (completion) => {
   if (hasExpressionType(completion)) {
-    const div = (0, import_vuu_utils10.createEl)("div", "expression-type-container");
-    const span = (0, import_vuu_utils10.createEl)("span", "expression-type", completion.expressionType);
+    const div = (0, import_vuu_utils11.createEl)("div", "expression-type-container");
+    const span = (0, import_vuu_utils11.createEl)("span", "expression-type", completion.expressionType);
     div.appendChild(span);
     return div;
   } else {
@@ -1597,8 +1657,8 @@ var useColumnExpressionEditor = ({
 };
 
 // src/column-expression-input/ColumnExpressionInput.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var classBase6 = "vuuColumnExpressionInput";
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var classBase7 = "vuuColumnExpressionInput";
 var ColumnExpressionInput = (0, import_react9.memo)(
   ({
     onChange,
@@ -1612,7 +1672,7 @@ var ColumnExpressionInput = (0, import_react9.memo)(
       source,
       suggestionProvider
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase6}`, onBlur, ref: editorRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase7}`, onBlur, ref: editorRef });
   },
   (prevProps, newProps) => {
     return prevProps.source === newProps.source;
@@ -1623,7 +1683,7 @@ ColumnExpressionInput.displayName = "ColumnExpressionInput";
 // src/column-expression-input/useColumnExpressionSuggestionProvider.ts
 var import_vuu_codemirror6 = require("@vuu-ui/vuu-codemirror");
 var import_vuu_data_react3 = require("@vuu-ui/vuu-data-react");
-var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
 var import_react10 = require("react");
 
 // src/column-expression-input/column-function-descriptors.ts
@@ -1931,7 +1991,7 @@ var columnFunctionDescriptors = [
 ];
 
 // src/column-expression-input/functionDocInfo.ts
-var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
 var functionDocInfo = ({
   name: name2,
   description,
@@ -1939,25 +1999,25 @@ var functionDocInfo = ({
   params,
   type
 }) => {
-  const rootElement = (0, import_vuu_utils11.createEl)("div", "vuuFunctionDoc");
-  const headingElement = (0, import_vuu_utils11.createEl)("div", "function-heading");
-  const nameElement = (0, import_vuu_utils11.createEl)("span", "function-name", name2);
-  const paramElement = (0, import_vuu_utils11.createEl)("span", "param-list", params.description);
-  const typeElement = (0, import_vuu_utils11.createEl)("span", "function-type", type);
+  const rootElement = (0, import_vuu_utils12.createEl)("div", "vuuFunctionDoc");
+  const headingElement = (0, import_vuu_utils12.createEl)("div", "function-heading");
+  const nameElement = (0, import_vuu_utils12.createEl)("span", "function-name", name2);
+  const paramElement = (0, import_vuu_utils12.createEl)("span", "param-list", params.description);
+  const typeElement = (0, import_vuu_utils12.createEl)("span", "function-type", type);
   headingElement.appendChild(nameElement);
   headingElement.appendChild(paramElement);
   headingElement.appendChild(typeElement);
-  const child2 = (0, import_vuu_utils11.createEl)("p", void 0, description);
+  const child2 = (0, import_vuu_utils12.createEl)("p", void 0, description);
   rootElement.appendChild(headingElement);
   rootElement.appendChild(child2);
   if (example) {
-    const exampleElement = (0, import_vuu_utils11.createEl)("div", "example-container");
-    const expressionElement = (0, import_vuu_utils11.createEl)(
+    const exampleElement = (0, import_vuu_utils12.createEl)("div", "example-container");
+    const expressionElement = (0, import_vuu_utils12.createEl)(
       "div",
       "example-expression",
       example.expression
     );
-    const resultElement = (0, import_vuu_utils11.createEl)("div", "example-result", example.result);
+    const resultElement = (0, import_vuu_utils12.createEl)("div", "example-result", example.result);
     exampleElement.appendChild(expressionElement);
     rootElement.appendChild(exampleElement);
     rootElement.appendChild(resultElement);
@@ -1976,15 +2036,15 @@ var withApplySpace = (suggestions) => suggestions.map((suggestion) => {
 });
 var getValidColumns = (columns, { functionName, operator }) => {
   if (operator) {
-    return columns.filter(import_vuu_utils12.isNumericColumn);
+    return columns.filter(import_vuu_utils13.isNumericColumn);
   } else if (functionName) {
     const fn = columnFunctionDescriptors.find((f) => f.name === functionName);
     if (fn) {
       switch (fn.accepts) {
         case "string":
-          return columns.filter(import_vuu_utils12.isTextColumn);
+          return columns.filter(import_vuu_utils13.isTextColumn);
         case "number":
-          return columns.filter(import_vuu_utils12.isNumericColumn);
+          return columns.filter(import_vuu_utils13.isNumericColumn);
         default:
           return columns;
       }
@@ -2013,7 +2073,7 @@ var arithmeticOperators = [
   { apply: "- ", boost: 2, label: "-", type: "operator" }
 ];
 var getOperators = (column) => {
-  if (column === void 0 || (0, import_vuu_utils12.isNumericColumn)(column)) {
+  if (column === void 0 || (0, import_vuu_utils13.isNumericColumn)(column)) {
     return arithmeticOperators;
   } else {
     return NO_OPERATORS;
@@ -2173,10 +2233,10 @@ var useColumnExpressionSuggestionProvider = ({
 };
 
 // src/column-expression-panel/useColumnExpression.ts
-var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
 var import_react11 = require("react");
 var applyDefaults = (column) => {
-  const [name2, expression, type] = (0, import_vuu_utils13.getCalculatedColumnDetails)(column);
+  const [name2, expression, type] = (0, import_vuu_utils14.getCalculatedColumnDetails)(column);
   if (type === "") {
     return {
       ...column,
@@ -2188,7 +2248,8 @@ var applyDefaults = (column) => {
 };
 var useColumnExpression = ({
   column: columnProp,
-  onChangeName: onChangeNameProp
+  onChangeName: onChangeNameProp,
+  onChangeServerDataType: onChangeServerDataTypeProp
 }) => {
   const [column, _setColumn] = (0, import_react11.useState)(
     applyDefaults(columnProp)
@@ -2201,7 +2262,7 @@ var useColumnExpression = ({
   const onChangeName = (0, import_react11.useCallback)(
     (evt) => {
       const { value } = evt.target;
-      const newColumn = (0, import_vuu_utils13.setCalculatedColumnName)(column, value);
+      const newColumn = (0, import_vuu_utils14.setCalculatedColumnName)(column, value);
       setColumn(newColumn);
       onChangeNameProp == null ? void 0 : onChangeNameProp(newColumn.name);
     },
@@ -2211,46 +2272,49 @@ var useColumnExpression = ({
     (value) => {
       const expression = value.trim();
       const { current: column2 } = columnRef;
-      const newColumn = (0, import_vuu_utils13.setCalculatedColumnExpression)(column2, expression);
+      const newColumn = (0, import_vuu_utils14.setCalculatedColumnExpression)(column2, expression);
       setColumn(newColumn);
       onChangeNameProp == null ? void 0 : onChangeNameProp(newColumn.name);
     },
     [onChangeNameProp, setColumn]
   );
-  const onChangeType = (0, import_react11.useCallback)(
+  const onChangeServerDataType = (0, import_react11.useCallback)(
     (evt, value) => {
-      if (typeof value === "string") {
-        const newColumn = (0, import_vuu_utils13.setCalculatedColumnType)(column, value);
+      if ((0, import_vuu_utils14.isVuuColumnDataType)(value)) {
+        const newColumn = (0, import_vuu_utils14.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
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var classBase7 = "vuuColumnExpressionPanel";
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var classBase8 = "vuuColumnExpressionPanel";
 var ColumnExpressionPanel = ({
   column: columnProp,
   onChangeName: onChangeNameProp,
+  onChangeServerDataType: onChangeServerDataTypeProp,
   tableConfig,
   vuuTable
 }) => {
   const typeRef = (0, import_react12.useRef)(null);
-  const { column, onChangeExpression, onChangeName, onChangeType } = useColumnExpression({
+  const { column, onChangeExpression, onChangeName, onChangeServerDataType } = useColumnExpression({
     column: columnProp,
-    onChangeName: onChangeNameProp
+    onChangeName: onChangeNameProp,
+    onChangeServerDataType: onChangeServerDataTypeProp
   });
   const initialExpressionRef = (0, import_react12.useRef)(
-    (0, import_vuu_utils14.getCalculatedColumnExpression)(column)
+    (0, import_vuu_utils15.getCalculatedColumnExpression)(column)
   );
   const suggestionProvider = useColumnExpressionSuggestionProvider({
     columns: tableConfig.columns,
@@ -2262,22 +2326,22 @@ var ColumnExpressionPanel = ({
       (_b = (_a = typeRef.current) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: classBase7, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "vuuColumnSettingsPanel-header", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Calculation" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core3.FormField, { "data-field": "column-name", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core3.FormFieldLabel, { children: "Column Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: classBase8, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "vuuColumnSettingsPanel-header", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Calculation" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core3.FormField, { "data-field": "column-name", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.FormFieldLabel, { children: "Column Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         import_core3.Input,
         {
           className: "vuuInput",
           onChange: onChangeName,
-          value: (0, import_vuu_utils14.getCalculatedColumnName)(column)
+          value: (0, import_vuu_utils15.getCalculatedColumnName)(column)
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core3.FormField, { "data-field": "column-expression", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core3.FormFieldLabel, { children: "Expression" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core3.FormField, { "data-field": "column-expression", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.FormFieldLabel, { children: "Expression" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         ColumnExpressionInput,
         {
           onChange: onChangeExpression,
@@ -2287,16 +2351,16 @@ var ColumnExpressionPanel = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core3.FormField, { "data-field": "type", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core3.FormFieldLabel, { children: "Column type" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core3.FormField, { "data-field": "type", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.FormFieldLabel, { children: "Column type" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         import_vuu_ui_controls4.Dropdown,
         {
-          className: `${classBase7}-type`,
-          onSelectionChange: onChangeType,
+          className: `${classBase8}-type`,
+          onSelectionChange: onChangeServerDataType,
           ref: typeRef,
-          selected: (0, import_vuu_utils14.getCalculatedColumnType)(column) || null,
-          source: ["double", "long", "string"],
+          selected: (0, import_vuu_utils15.getCalculatedColumnType)(column) || null,
+          source: ["double", "long", "string", "boolean"],
           width: "100%"
         }
       )
@@ -2306,23 +2370,23 @@ var ColumnExpressionPanel = ({
 
 // src/column-formatting-settings/ColumnFormattingPanel.tsx
 var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
 var import_core7 = require("@salt-ds/core");
-var import_clsx4 = __toESM(require("clsx"), 1);
+var import_clsx5 = __toESM(require("clsx"), 1);
 var import_react16 = require("react");
 
 // src/column-formatting-settings/BaseNumericFormattingSettings.tsx
 var import_core4 = require("@salt-ds/core");
-var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
 var import_react13 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var classBase8 = "vuuFormattingSettings";
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var classBase9 = "vuuFormattingSettings";
 var BaseNumericFormattingSettings = ({
   column,
   onChangeFormatting: onChange
 }) => {
   var _a, _b, _c;
-  const [formattingSettings, setFormattingSettings] = (0, import_react13.useState)((0, import_vuu_utils15.getTypeFormattingFromColumn)(column));
+  const [formattingSettings, setFormattingSettings] = (0, import_react13.useState)((0, import_vuu_utils16.getTypeFormattingFromColumn)(column));
   const handleInputKeyDown = (0, import_react13.useCallback)(
     (evt) => {
       if (evt.key === "Enter" || evt.key === "Tab") {
@@ -2367,10 +2431,10 @@ var BaseNumericFormattingSettings = ({
     },
     [formattingSettings, onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: classBase8, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.FormField, { "data-field": "decimals", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.FormFieldLabel, { children: "Number of decimals" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: classBase9, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core4.FormField, { "data-field": "decimals", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core4.FormFieldLabel, { children: "Number of decimals" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         import_core4.Input,
         {
           className: "vuuInput",
@@ -2380,9 +2444,9 @@ var BaseNumericFormattingSettings = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.FormFieldLabel, { children: "Align on decimals" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core4.FormFieldLabel, { children: "Align on decimals" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         import_core4.Switch,
         {
           checked: (_b = formattingSettings.alignOnDecimals) != null ? _b : false,
@@ -2391,9 +2455,9 @@ var BaseNumericFormattingSettings = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core4.FormFieldLabel, { children: "Zero pad decimals" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core4.FormFieldLabel, { children: "Zero pad decimals" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         import_core4.Switch,
         {
           checked: (_c = formattingSettings.zeroPad) != null ? _c : false,
@@ -2408,23 +2472,23 @@ var BaseNumericFormattingSettings = ({
 // src/column-formatting-settings/LongTypeFormattingSettings.tsx
 var import_react15 = require("react");
 var import_core6 = require("@salt-ds/core");
-var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
 
 // src/column-formatting-settings/DateTimeFormattingSettings.tsx
 var import_react14 = require("react");
 var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
 var import_core5 = require("@salt-ds/core");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
   var _a, _b;
-  const formatting = (0, import_vuu_utils16.getTypeFormattingFromColumn)(column);
-  const { pattern = import_vuu_utils16.fallbackDateTimePattern } = formatting;
+  const formatting = (0, import_vuu_utils17.getTypeFormattingFromColumn)(column);
+  const { pattern = import_vuu_utils17.fallbackDateTimePattern } = formatting;
   const toggleValue = (0, import_react14.useMemo)(() => getToggleValue(pattern), [pattern]);
   const [fallbackState, setFallbackState] = (0, import_react14.useState)(
     {
-      time: (_a = pattern.time) != null ? _a : import_vuu_utils16.defaultPatternsByType.time,
-      date: (_b = pattern.date) != null ? _b : import_vuu_utils16.defaultPatternsByType.date
+      time: (_a = pattern.time) != null ? _a : import_vuu_utils17.defaultPatternsByType.time,
+      date: (_b = pattern.date) != null ? _b : import_vuu_utils17.defaultPatternsByType.date
     }
   );
   const onPatternChange = (0, import_react14.useCallback)(
@@ -2467,27 +2531,28 @@ var DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
     },
     [onPatternChange, pattern, fallbackState]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core5.FormField, { labelPlacement: "left", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core5.FormFieldLabel, { children: "Display" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core5.FormField, { labelPlacement: "top", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core5.FormFieldLabel, { children: "Display" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_core5.ToggleButtonGroup,
         {
           className: "vuuToggleButtonGroup",
           onChange: onToggleChange,
           value: toggleValue,
-          children: toggleValues.map((v) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core5.ToggleButton, { value: v, children: v.toUpperCase() }, v))
+          "data-variant": "primary",
+          children: toggleValues.map((v) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core5.ToggleButton, { value: v, children: v.toUpperCase() }, v))
         }
       )
     ] }),
-    ["date", "time"].filter((v) => !!pattern[v]).map((v) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core5.FormField, { labelPlacement: "left", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core5.FormFieldLabel, { children: `${labelByType[v]} pattern` }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    ["date", "time"].filter((v) => !!pattern[v]).map((v) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core5.FormField, { labelPlacement: "top", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core5.FormFieldLabel, { children: `${labelByType[v]} pattern` }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_vuu_ui_controls5.Dropdown,
         {
           onSelectionChange: onDropdownChange(v),
           selected: pattern[v],
-          source: import_vuu_utils16.supportedDateTimePatterns[v],
+          source: import_vuu_utils17.supportedDateTimePatterns[v],
           width: "100%"
         }
       )
@@ -2501,11 +2566,11 @@ function getToggleValue(pattern) {
 }
 
 // src/column-formatting-settings/LongTypeFormattingSettings.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var classBase9 = "vuuLongColumnFormattingSettings";
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var classBase10 = "vuuLongColumnFormattingSettings";
 var LongTypeFormattingSettings = (props) => {
-  const { column, onChangeType } = props;
-  const type = (0, import_vuu_utils17.isTypeDescriptor)(column.type) ? column.type.name : column.type;
+  const { column, onChangeColumnType: onChangeType } = props;
+  const type = (0, import_vuu_utils18.isTypeDescriptor)(column.type) ? column.type.name : column.type;
   const handleToggleChange = (0, import_react15.useCallback)(
     (event) => {
       const value = event.currentTarget.value;
@@ -2513,27 +2578,27 @@ var LongTypeFormattingSettings = (props) => {
     },
     [onChangeType]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: classBase9, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core6.FormField, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core6.FormFieldLabel, { children: "Type inferred as" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: classBase10, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core6.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core6.FormFieldLabel, { children: "Type inferred as" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_core6.ToggleButtonGroup,
         {
           className: "vuuToggleButtonGroup",
           onChange: handleToggleChange,
           value: type != null ? type : "number",
-          children: toggleValues2.map((v) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core6.ToggleButton, { value: v, children: v.toUpperCase() }, v))
+          children: toggleValues2.map((v) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core6.ToggleButton, { value: v, children: v.toUpperCase() }, v))
         }
       )
     ] }),
-    (0, import_vuu_utils17.isDateTimeColumn)(column) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DateTimeFormattingSettings, { ...props, column }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BaseNumericFormattingSettings, { ...props })
+    (0, import_vuu_utils18.isDateTimeColumn)(column) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DateTimeFormattingSettings, { ...props, column }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BaseNumericFormattingSettings, { ...props })
   ] });
 };
 var toggleValues2 = ["number", "date/time"];
 
 // src/column-formatting-settings/ColumnFormattingPanel.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var classBase10 = "vuuColumnFormattingPanel";
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var classBase11 = "vuuColumnFormattingPanel";
 var itemToString = (item) => {
   var _a;
   return (_a = item.label) != null ? _a : item.name;
@@ -2543,26 +2608,31 @@ var ColumnFormattingPanel = ({
   className,
   column,
   onChangeFormatting,
-  onChangeType,
+  onChangeColumnType,
   onChangeRendering,
   ...htmlAttributes
 }) => {
-  const formattingSettingsForType = (0, import_react16.useMemo)(
-    () => formattingSettingsByColType({ column, onChangeFormatting, onChangeType }),
-    [column, onChangeFormatting, onChangeType]
+  const formattingSettingsComponent = (0, import_react16.useMemo)(
+    () => getFormattingSettingsComponent({
+      column,
+      onChangeFormatting,
+      onChangeColumnType
+    }),
+    [column, onChangeColumnType, onChangeFormatting]
   );
+  console.log({ formattingSettingsComponent });
   const ConfigEditor = (0, import_react16.useMemo)(() => {
     const { type } = column;
-    if ((0, import_vuu_utils18.isTypeDescriptor)(type) && (0, import_vuu_utils18.isColumnTypeRenderer)(type.renderer)) {
-      const cellRendererOptions = (0, import_vuu_utils18.getCellRendererOptions)(type.renderer.name);
-      return (0, import_vuu_utils18.getConfigurationEditor)(cellRendererOptions == null ? void 0 : cellRendererOptions.configEditor);
+    if ((0, import_vuu_utils19.isTypeDescriptor)(type) && (0, import_vuu_utils19.isColumnTypeRenderer)(type.renderer)) {
+      const cellRendererOptions = (0, import_vuu_utils19.getCellRendererOptions)(type.renderer.name);
+      return (0, import_vuu_utils19.getConfigurationEditor)(cellRendererOptions == null ? void 0 : cellRendererOptions.configEditor);
     }
     return void 0;
   }, [column]);
   const selectedCellRenderer = (0, import_react16.useMemo)(() => {
     const { type } = column;
     const [defaultRenderer] = availableRenderers;
-    const rendererName = (0, import_vuu_utils18.isTypeDescriptor)(type) && (0, import_vuu_utils18.isColumnTypeRenderer)(type.renderer) ? type.renderer.name : void 0;
+    const rendererName = (0, import_vuu_utils19.isTypeDescriptor)(type) && (0, import_vuu_utils19.isColumnTypeRenderer)(type.renderer) ? type.renderer.name : void 0;
     const configuredRenderer = availableRenderers.find(
       (renderer) => renderer.name === rendererName
     );
@@ -2578,14 +2648,14 @@ var ColumnFormattingPanel = ({
     [onChangeRendering]
   );
   const { serverDataType = "string" } = column;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ...htmlAttributes, className: `vuuColumnSettingsPanel-header`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: "Formatting" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core7.FormField, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core7.FormFieldLabel, { children: `Renderer (data type ${column.serverDataType})` }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ...htmlAttributes, className: `vuuColumnSettingsPanel-header`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: "Formatting" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core7.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core7.FormFieldLabel, { children: `Renderer (data type ${column.serverDataType})` }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         import_vuu_ui_controls6.Dropdown,
         {
-          className: (0, import_clsx4.default)(`${classBase10}-renderer`),
+          className: (0, import_clsx5.default)(`${classBase11}-renderer`),
           itemToString,
           onSelectionChange: handleChangeRenderer,
           selected: selectedCellRenderer,
@@ -2594,13 +2664,13 @@ var ColumnFormattingPanel = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
-        className: (0, import_clsx4.default)(classBase10, className, `${classBase10}-${serverDataType}`),
+        className: (0, import_clsx5.default)(classBase11, className, `${classBase11}-${serverDataType}`),
         children: [
-          formattingSettingsForType,
-          ConfigEditor ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          formattingSettingsComponent,
+          ConfigEditor ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             ConfigEditor,
             {
               column,
@@ -2612,93 +2682,88 @@ var ColumnFormattingPanel = ({
     )
   ] });
 };
-function formattingSettingsByColType(props) {
+function getFormattingSettingsComponent(props) {
   const { column } = props;
   switch (column.serverDataType) {
     case "double":
     case "int":
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BaseNumericFormattingSettings, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BaseNumericFormattingSettings, { ...props });
     case "long":
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LongTypeFormattingSettings, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LongTypeFormattingSettings, { ...props });
     default:
       return null;
   }
 }
 
 // src/column-settings/ColumnNameLabel.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
-var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var classBase11 = "vuuColumnNameLabel";
+var import_clsx6 = __toESM(require("clsx"), 1);
+var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var classBase12 = "vuuColumnNameLabel";
 var ColumnNameLabel = ({ column, onClick }) => {
-  if ((0, import_vuu_utils19.isCalculatedColumn)(column.name)) {
-    const [name2, type, expression] = (0, import_vuu_utils19.getCalculatedColumnDetails)(column);
+  if ((0, import_vuu_utils20.isCalculatedColumn)(column.name)) {
+    const [name2, type, expression] = (0, import_vuu_utils20.getCalculatedColumnDetails)(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__ */ (0, import_jsx_runtime13.jsxs)(
+    const nameClass = displayName === "name" ? `${classBase12}-placeholder` : void 0;
+    const expressionClass = expression === "" ? `${classBase12}-placeholder` : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "div",
       {
-        className: (0, import_clsx5.default)(classBase11, `${classBase11}-calculated`),
+        className: (0, import_clsx6.default)(classBase12, `${classBase12}-calculated`),
         onClick,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: nameClass, children: displayName }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: ":" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: type || "string" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: ":" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: expressionClass, children: displayExpression }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `${classBase11}-edit`, "data-icon": "edit" })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: nameClass, children: displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: ":" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: type || "string" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: ":" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: expressionClass, children: displayExpression }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${classBase12}-edit`, "data-icon": "edit" })
         ]
       }
     );
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: classBase11, children: column.name });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: classBase12, children: column.name });
   }
 };
 
 // src/column-settings/useColumnSettings.ts
-var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
 var import_react17 = require("react");
 var integerCellRenderers = [
   {
     description: "Default formatter for columns with data type integer",
     label: "Default Renderer (int, long)",
     name: "default-int"
-  },
-  ...(0, import_vuu_utils20.getRegisteredCellRenderers)("int")
+  }
 ];
 var doubleCellRenderers = [
   {
     description: "Default formatter for columns with data type double",
     label: "Default Renderer (double)",
     name: "default-double"
-  },
-  ...(0, import_vuu_utils20.getRegisteredCellRenderers)("double")
+  }
 ];
 var stringCellRenderers = [
   {
     description: "Default formatter for columns with data type string",
     label: "Default Renderer (string)",
     name: "default-string"
-  },
-  ...(0, import_vuu_utils20.getRegisteredCellRenderers)("string")
-];
-var booleanCellRenderers = [
-  ...(0, import_vuu_utils20.getRegisteredCellRenderers)("boolean")
+  }
 ];
+var booleanCellRenderers = [];
 var getAvailableCellRenderers = (column) => {
   switch (column.serverDataType) {
     case "char":
     case "string":
-      return stringCellRenderers;
+      return stringCellRenderers.concat((0, import_vuu_utils21.getRegisteredCellRenderers)("string"));
     case "int":
     case "long":
-      return integerCellRenderers;
+      return integerCellRenderers.concat((0, import_vuu_utils21.getRegisteredCellRenderers)("int"));
     case "double":
-      return doubleCellRenderers;
+      return doubleCellRenderers.concat((0, import_vuu_utils21.getRegisteredCellRenderers)("double"));
     case "boolean":
-      return booleanCellRenderers;
+      return booleanCellRenderers.concat((0, import_vuu_utils21.getRegisteredCellRenderers)("boolean"));
     default:
       return stringCellRenderers;
   }
@@ -2757,51 +2822,60 @@ var useColumnSettings = ({
   const handleInputCommit = (0, import_react17.useCallback)(() => {
     onConfigChange(replaceColumn(tableConfig, column));
   }, [column, onConfigChange, tableConfig]);
-  const handleChange = (0, import_react17.useCallback)(
+  const handleChangeToggleButton = (0, import_react17.useCallback)(
     (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) => (0, import_vuu_utils20.setCalculatedColumnName)(state, value));
-          break;
-        case "column-width":
-          setColumn((state) => ({ ...state, width: parseInt(value) }));
-          break;
-        case "column-alignment":
-          if ((0, import_vuu_utils20.isValidColumnAlignment)(value)) {
-            const newColumn = {
-              ...column,
-              align: value || void 0
-            };
-            setColumn(newColumn);
-            onConfigChange(replaceColumn(tableConfig, newColumn));
-          }
-          break;
-        case "column-pin":
-          if ((0, import_vuu_utils20.isValidPinLocation)(value)) {
-            const newColumn = {
-              ...column,
-              pin: value || void 0
-            };
-            setColumn(newColumn);
-            onConfigChange(replaceColumn(tableConfig, newColumn));
+      const button = (0, import_vuu_utils21.queryClosest)(evt.target, "button");
+      if (button) {
+        const fieldName = getFieldName(button);
+        const { value } = button;
+        switch (fieldName) {
+          case "column-alignment":
+            if ((0, import_vuu_utils21.isValidColumnAlignment)(value)) {
+              const newColumn = {
+                ...column,
+                align: value || void 0
+              };
+              setColumn(newColumn);
+              onConfigChange(replaceColumn(tableConfig, newColumn));
+            }
             break;
-          }
+          case "column-pin":
+            if ((0, import_vuu_utils21.isValidPinLocation)(value)) {
+              const newColumn = {
+                ...column,
+                pin: value || void 0
+              };
+              setColumn(newColumn);
+              onConfigChange(replaceColumn(tableConfig, newColumn));
+              break;
+            }
+        }
       }
     },
     [column, onConfigChange, tableConfig]
   );
+  const handleChange = (0, import_react17.useCallback)((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) => (0, import_vuu_utils21.setCalculatedColumnName)(state, value));
+        break;
+      case "column-width":
+        setColumn((state) => ({ ...state, width: parseInt(value) }));
+        break;
+    }
+  }, []);
   const handleChangeCalculatedColumnName = (0, import_react17.useCallback)((name2) => {
     setColumn((state) => ({ ...state, name: name2 }));
   }, []);
   const handleChangeFormatting = (0, import_react17.useCallback)(
     (formatting) => {
-      const newColumn = (0, import_vuu_utils20.updateColumnFormatting)(column, formatting);
+      const newColumn = (0, import_vuu_utils21.updateColumnFormatting)(column, formatting);
       setColumn(newColumn);
       onConfigChange(replaceColumn(tableConfig, newColumn));
     },
@@ -2809,16 +2883,22 @@ var useColumnSettings = ({
   );
   const handleChangeType = (0, import_react17.useCallback)(
     (type) => {
-      const updatedColumn = (0, import_vuu_utils20.updateColumnType)(column, type);
+      const updatedColumn = (0, import_vuu_utils21.updateColumnType)(column, type);
       setColumn(updatedColumn);
       onConfigChange(replaceColumn(tableConfig, updatedColumn));
     },
     [column, onConfigChange, tableConfig]
   );
+  const handleChangeServerDataType = (0, import_react17.useCallback)(
+    (serverDataType) => {
+      setColumn((col) => ({ ...col, serverDataType }));
+    },
+    []
+  );
   const handleChangeRendering = (0, import_react17.useCallback)(
     (renderProps) => {
       if (renderProps) {
-        const newColumn = (0, import_vuu_utils20.updateColumnRenderProps)(
+        const newColumn = (0, import_vuu_utils21.updateColumnRenderProps)(
           column,
           renderProps
         );
@@ -2869,6 +2949,8 @@ var useColumnSettings = ({
     onChangeCalculatedColumnName: handleChangeCalculatedColumnName,
     onChangeFormatting: handleChangeFormatting,
     onChangeRendering: handleChangeRendering,
+    onChangeServerDataType: handleChangeServerDataType,
+    onChangeToggleButton: handleChangeToggleButton,
     onChangeType: handleChangeType,
     onEditCalculatedColumn: handleEditCalculatedcolumn,
     onInputCommit: handleInputCommit,
@@ -2877,12 +2959,12 @@ var useColumnSettings = ({
 };
 
 // src/column-settings/ColumnSettingsPanel.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var classBase12 = "vuuColumnSettingsPanel";
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var classBase13 = "vuuColumnSettingsPanel";
 var getColumnLabel2 = (column) => {
   const { name: name2, label } = column;
-  if ((0, import_vuu_utils21.isCalculatedColumn)(name2)) {
-    return label != null ? label : (0, import_vuu_utils21.getCalculatedColumnName)(column);
+  if ((0, import_vuu_utils22.isCalculatedColumn)(name2)) {
+    return label != null ? label : (0, import_vuu_utils22.getCalculatedColumnName)(column);
   } else {
     return label != null ? label : name2;
   }
@@ -2907,6 +2989,8 @@ var ColumnSettingsPanel = ({
     onChangeCalculatedColumnName,
     onChangeFormatting,
     onChangeRendering,
+    onChangeServerDataType,
+    onChangeToggleButton,
     onChangeType,
     onEditCalculatedColumn,
     onInputCommit,
@@ -2920,30 +3004,31 @@ var ColumnSettingsPanel = ({
   });
   const {
     serverDataType,
-    align = (0, import_vuu_utils21.getDefaultAlignment)(serverDataType),
+    align = (0, import_vuu_utils22.getDefaultAlignment)(serverDataType),
     pin,
     width
   } = column;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
-      className: (0, import_clsx6.default)(classBase12, {
-        [`${classBase12}-editing`]: editCalculatedColumn
+      className: (0, import_clsx7.default)(classBase13, {
+        [`${classBase13}-editing`]: editCalculatedColumn
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `${classBase12}-header`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ColumnNameLabel, { column, onClick: onEditCalculatedColumn }) }),
-        editCalculatedColumn ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `${classBase13}-header`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColumnNameLabel, { column, onClick: onEditCalculatedColumn }) }),
+        editCalculatedColumn ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           ColumnExpressionPanel,
           {
             column,
             onChangeName: onChangeCalculatedColumnName,
+            onChangeServerDataType,
             tableConfig,
             vuuTable
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core8.FormField, { "data-field": "column-label", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core8.FormFieldLabel, { children: "Column Label" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core8.FormField, { "data-field": "column-label", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.FormFieldLabel, { children: "Column Label" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             import_vuu_ui_controls7.VuuInput,
             {
               className: "vuuInput",
@@ -2953,9 +3038,9 @@ var ColumnSettingsPanel = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core8.FormField, { "data-field": "column-width", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core8.FormFieldLabel, { children: "Column Width" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core8.FormField, { "data-field": "column-width", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.FormFieldLabel, { children: "Column Width" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             import_vuu_ui_controls7.VuuInput,
             {
               className: "vuuInput",
@@ -2965,129 +3050,71 @@ var ColumnSettingsPanel = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core8.FormField, { "data-field": "column-alignment", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core8.FormFieldLabel, { children: "Alignment" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-            import_core8.ToggleButtonGroup,
-            {
-              className: "vuuToggleButtonGroup",
-              onChange,
-              value: align,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  import_core8.ToggleButton,
-                  {
-                    "data-icon": "align-left",
-                    className: "vuuIconToggleButton",
-                    value: "left"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  import_core8.ToggleButton,
-                  {
-                    "data-icon": "align-right",
-                    className: "vuuIconToggleButton",
-                    value: "right"
-                  }
-                )
-              ]
-            }
-          )
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core8.FormField, { "data-field": "column-alignment", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.FormFieldLabel, { children: "Alignment" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core8.ToggleButtonGroup, { onChange: onChangeToggleButton, value: align, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.ToggleButton, { value: "left", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vuu_ui_controls7.Icon, { name: "align-left", size: 16 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.ToggleButton, { value: "right", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vuu_ui_controls7.Icon, { name: "align-right", size: 16 }) })
+          ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core8.FormField, { "data-field": "column-pin", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core8.FormFieldLabel, { children: "Pin Column" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-            import_core8.ToggleButtonGroup,
-            {
-              className: "vuuToggleButtonGroup",
-              onChange,
-              value: pin != null ? pin : "",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  import_core8.ToggleButton,
-                  {
-                    className: "vuuIconToggleButton",
-                    "data-icon": "cross-circle",
-                    value: ""
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  import_core8.ToggleButton,
-                  {
-                    className: "vuuIconToggleButton",
-                    "data-icon": "pin-left",
-                    value: "left"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  import_core8.ToggleButton,
-                  {
-                    className: "vuuIconToggleButton",
-                    "data-icon": "pin-float",
-                    value: "floating"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  import_core8.ToggleButton,
-                  {
-                    className: "vuuIconToggleButton",
-                    "data-icon": "pin-right",
-                    value: "right"
-                  }
-                )
-              ]
-            }
-          )
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core8.FormField, { "data-field": "column-pin", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.FormFieldLabel, { children: "Pin Column" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core8.ToggleButtonGroup, { onChange: onChangeToggleButton, value: pin != null ? pin : "", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.ToggleButton, { value: "", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vuu_ui_controls7.Icon, { name: "cross-circle", size: 16 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.ToggleButton, { value: "left", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vuu_ui_controls7.Icon, { name: "pin-left", size: 16 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.ToggleButton, { value: "floating", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vuu_ui_controls7.Icon, { name: "pin-float", size: 16 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.ToggleButton, { value: "right", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vuu_ui_controls7.Icon, { name: "pin-right", size: 16 }) })
+          ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           ColumnFormattingPanel,
           {
             availableRenderers,
             column,
             onChangeFormatting,
             onChangeRendering,
-            onChangeType
+            onChangeColumnType: onChangeType
           }
         ),
-        editCalculatedColumn ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        editCalculatedColumn ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             import_core8.Button,
             {
-              className: `${classBase12}-buttonCancel`,
+              className: `${classBase13}-buttonCancel`,
               onClick: onCancel,
               tabIndex: -1,
               children: "cancel"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             import_core8.Button,
             {
-              className: `${classBase12}-buttonSave`,
+              className: `${classBase13}-buttonSave`,
               onClick: onSave,
               variant: "cta",
               children: "save"
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           "div",
           {
-            className: `${classBase12}-buttonBar`,
+            className: `${classBase13}-buttonBar`,
             "data-align": isNewCalculatedColumn ? "right" : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 import_core8.Button,
                 {
-                  className: `${classBase12}-buttonNavPrev`,
+                  className: `${classBase13}-buttonNavPrev`,
                   variant: "secondary",
                   "data-icon": "arrow-left",
                   onClick: navigatePrevColumn,
                   children: "PREVIOUS"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 import_core8.Button,
                 {
-                  className: `${classBase12}-buttonNavNext`,
+                  className: `${classBase13}-buttonNavNext`,
                   variant: "secondary",
                   "data-icon": "arrow-right",
                   onClick: navigateNextColumn,
@@ -3103,10 +3130,10 @@ var ColumnSettingsPanel = ({
 };
 
 // src/datasource-stats/DatasourceStats.tsx
-var import_clsx7 = __toESM(require("clsx"), 1);
+var import_clsx8 = __toESM(require("clsx"), 1);
 var import_react18 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var classBase13 = "vuuDatasourceStats";
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var classBase14 = "vuuDatasourceStats";
 var numberFormatter = new Intl.NumberFormat();
 var DataSourceStats = ({
   className: classNameProp,
@@ -3118,18 +3145,22 @@ var DataSourceStats = ({
     setSize(dataSource.size);
     dataSource.on("resize", setSize);
     dataSource.on("range", setRange);
+    return () => {
+      dataSource.removeListener("resize", setSize);
+      dataSource.removeListener("range", setRange);
+    };
   }, [dataSource]);
-  const className = (0, import_clsx7.default)(classBase13, classNameProp);
+  const className = (0, import_clsx8.default)(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__ */ (0, import_jsx_runtime15.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: `${classBase13}-label`, children: "Row count" }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: `${classBase13}-range`, children: from }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "-" }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: `${classBase13}-range`, children: to }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "of" }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: `${classBase13}-size`, children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `${classBase14}-label`, children: "Row count" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `${classBase14}-range`, children: from }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "-" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `${classBase14}-range`, children: to }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "of" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `${classBase14}-size`, children: value })
   ] });
 };
 
@@ -3138,7 +3169,7 @@ var import_core9 = require("@salt-ds/core");
 
 // src/table-settings/useTableSettings.ts
 var import_vuu_table = require("@vuu-ui/vuu-table");
-var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
 var import_react19 = require("react");
 var sortOrderFromAvailableColumns = (availableColumns, columns) => {
   const sortedColumns = [];
@@ -3155,7 +3186,7 @@ var buildColumnItems = (availableColumns, configuredColumns) => {
     const configuredColumn = configuredColumns.find((col) => col.name === name2);
     return {
       hidden: configuredColumn == null ? void 0 : configuredColumn.hidden,
-      isCalculated: (0, import_vuu_utils22.isCalculatedColumn)(name2),
+      isCalculated: (0, import_vuu_utils23.isCalculatedColumn)(name2),
       label: configuredColumn == null ? void 0 : configuredColumn.label,
       name: name2,
       serverDataType,
@@ -3180,7 +3211,7 @@ var useTableSettings = ({
   const handleMoveListItem = (0, import_react19.useCallback)(
     (fromIndex, toIndex) => {
       setColumnState((state) => {
-        const newAvailableColumns = (0, import_vuu_utils22.moveItem)(
+        const newAvailableColumns = (0, import_vuu_utils23.moveItem)(
           state.availableColumns,
           fromIndex,
           toIndex
@@ -3211,7 +3242,7 @@ var useTableSettings = ({
             tableConfig: {
               ...tableConfig,
               columns: tableConfig.columns.filter(
-                (0, import_vuu_utils22.subscribedOnly)(subscribedColumns)
+                (0, import_vuu_utils23.subscribedOnly)(subscribedColumns)
               )
             }
           }));
@@ -3221,7 +3252,7 @@ var useTableSettings = ({
         } else {
           const newConfig = {
             ...tableConfig,
-            columns: (0, import_vuu_utils22.addColumnToSubscribedColumns)(
+            columns: (0, import_vuu_utils23.addColumnToSubscribedColumns)(
               tableConfig.columns,
               availableColumns,
               name2
@@ -3255,30 +3286,48 @@ var useTableSettings = ({
     [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
   );
   const handleChangeColumnLabels = (0, import_react19.useCallback)((evt) => {
-    const { value } = evt.target;
-    const columnFormatHeader = value === "0" ? void 0 : value === "1" ? "capitalize" : "uppercase";
-    setColumnState((state) => ({
-      ...state,
-      tableConfig: {
-        ...state.tableConfig,
-        columnFormatHeader
-      }
-    }));
+    const button = (0, import_vuu_utils23.queryClosest)(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 = (0, import_react19.useCallback)(
     (evt) => {
-      const { ariaChecked, value } = evt.target;
+      const button = (0, import_vuu_utils23.queryClosest)(evt.target, "button");
+      const { ariaPressed, value } = button;
+      console.log({ ariaPressed, value, button });
       setColumnState((state) => ({
         ...state,
         tableConfig: {
           ...state.tableConfig,
-          [value]: ariaChecked !== "true"
+          [value]: ariaPressed !== "true"
         }
       }));
     },
     []
   );
-  (0, import_vuu_utils22.useLayoutEffectSkipFirst)(() => {
+  const handleCommitColumnWidth = (0, import_react19.useCallback)((_, value) => {
+    const columnDefaultWidth = parseInt(value);
+    if (!isNaN(columnDefaultWidth)) {
+      setColumnState((state) => ({
+        ...state,
+        tableConfig: {
+          ...state.tableConfig,
+          columnDefaultWidth
+        }
+      }));
+    }
+    console.log({ value });
+  }, []);
+  (0, import_vuu_utils23.useLayoutEffectSkipFirst)(() => {
     onConfigChange == null ? void 0 : onConfigChange(tableConfig);
   }, [onConfigChange, tableConfig]);
   const columnLabelsValue = tableConfig.columnFormatHeader === void 0 ? 0 : tableConfig.columnFormatHeader === "capitalize" ? 1 : 2;
@@ -3288,14 +3337,17 @@ var useTableSettings = ({
     onChangeColumnLabels: handleChangeColumnLabels,
     onChangeTableAttribute: handleChangeTableAttribute,
     onColumnChange: handleColumnChange,
+    onCommitColumnWidth: handleCommitColumnWidth,
     onMoveListItem: handleMoveListItem,
     tableConfig
   };
 };
 
 // src/table-settings/TableSettingsPanel.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var classBase14 = "vuuTableSettingsPanel";
+var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var classBase15 = "vuuTableSettingsPanel";
 var TableSettingsPanel = ({
   availableColumns,
   onAddCalculatedColumn,
@@ -3311,6 +3363,7 @@ var TableSettingsPanel = ({
     onChangeColumnLabels,
     onChangeTableAttribute,
     onColumnChange,
+    onCommitColumnWidth,
     onMoveListItem,
     tableConfig
   } = useTableSettings({
@@ -3319,84 +3372,60 @@ var TableSettingsPanel = ({
     onDataSourceConfigChange,
     tableConfig: tableConfigProp
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: classBase14, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core9.FormField, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core9.FormFieldLabel, { children: "Column Labels" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: classBase15, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core9.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.FormFieldLabel, { children: "Column Labels" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         import_core9.ToggleButtonGroup,
         {
           className: "vuuToggleButtonGroup",
           onChange: onChangeColumnLabels,
           value: columnLabelsValue,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_core9.ToggleButton,
-              {
-                className: "vuuIconToggleButton",
-                "data-icon": "text-strikethrough",
-                value: 0
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_core9.ToggleButton,
-              {
-                className: "vuuIconToggleButton",
-                "data-icon": "text-Tt",
-                value: 1
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_core9.ToggleButton,
-              {
-                className: "vuuIconToggleButton",
-                "data-icon": "text-T",
-                value: 2
-              }
-            )
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.ToggleButton, { className: "vuuIconToggleButton", value: 0, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls8.Icon, { name: "text-strikethrough", size: 48 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.ToggleButton, { className: "vuuIconToggleButton", value: 1, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls8.Icon, { name: "text-Tt", size: 48 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.ToggleButton, { className: "vuuIconToggleButton", value: 2, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls8.Icon, { name: "text-T", size: 48 }) })
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core9.FormField, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core9.FormFieldLabel, { children: "Grid separators" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "saltToggleButtonGroup vuuToggleButtonGroup saltToggleButtonGroup-horizontal vuuGridSeparators", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core9.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.FormFieldLabel, { children: "Grid separators" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           import_core9.ToggleButton,
           {
-            className: "vuuIconToggleButton",
-            "data-icon": "row-striping",
             selected: (_a = tableConfig.zebraStripes) != null ? _a : false,
             onChange: onChangeTableAttribute,
-            value: "zebraStripes"
+            value: "zebraStripes",
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls8.Icon, { name: "row-striping", size: 16 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           import_core9.ToggleButton,
           {
-            className: "vuuIconToggleButton",
-            "data-icon": "row-lines",
             selected: (_b = tableConfig.rowSeparators) != null ? _b : false,
             onChange: onChangeTableAttribute,
-            value: "rowSeparators"
+            value: "rowSeparators",
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls8.Icon, { name: "row-lines", size: 16 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           import_core9.ToggleButton,
           {
-            className: "vuuIconToggleButton",
-            "data-icon": "col-lines",
             selected: (_c = tableConfig.columnSeparators) != null ? _c : false,
             onChange: onChangeTableAttribute,
-            value: "columnSeparators"
+            value: "columnSeparators",
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls8.Icon, { name: "col-lines", size: 16 })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_core9.FormField, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core9.FormFieldLabel, { children: "Default Column Width" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core9.Input, { className: "vuuInput" })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core9.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.FormFieldLabel, { children: "Default Column Width" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls9.VuuInput, { className: "vuuInput", onCommit: onCommitColumnWidth })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       ColumnList,
       {
         columnItems,
@@ -3405,9 +3434,9 @@ var TableSettingsPanel = ({
         onNavigateToColumn
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `${classBase14}-calculatedButtonbar`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core9.Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `${classBase14}-calculatedLabel`, children: "Add calculated column" })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `${classBase15}-calculatedButtonbar`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `${classBase15}-calculatedLabel`, children: "Add calculated column" })
     ] })
   ] });
 };