@vuu-ui/vuu-table-extras 0.8.8-debug → 0.8.9-debug

package/cjs/index.js

@@ -6,8 +6,8 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -48,11 +48,17 @@ var __privateSet = (obj, member, value, setter) => {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  BackgroundCell: () => BackgroundCell2,
+  CaseValidator: () => CaseValidator,
   ColumnExpressionInput: () => ColumnExpressionInput,
+  ColumnExpressionPanel: () => ColumnExpressionPanel,
+  ColumnFormattingPanel: () => ColumnFormattingPanel,
   ColumnList: () => ColumnList,
   ColumnNamedTerms: () => ColumnNamedTerms,
+  ColumnSettingsPanel: () => ColumnSettingsPanel,
   DataSourceStats: () => DataSourceStats,
-  DatagridSettingsPanel: () => DatagridSettingsPanel,
+  NumericFormattingSettings: () => NumericFormattingSettings,
+  PatternValidator: () => PatternValidator,
   TableSettingsPanel: () => TableSettingsPanel,
   columnExpressionLanguageSupport: () => columnExpressionLanguageSupport,
   isCompleteExpression: () => isCompleteExpression,
@@ -60,17 +66,60 @@ __export(src_exports, {
   lastNamedChild: () => lastNamedChild,
   useColumnExpressionEditor: () => useColumnExpressionEditor,
   useColumnExpressionSuggestionProvider: () => useColumnExpressionSuggestionProvider,
+  useTableAndColumnSettings: () => useTableAndColumnSettings,
   useTableSettings: () => useTableSettings,
   walkTree: () => walkTree
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/cell-renderers/background-cell/BackgroundCell.tsx
+// src/cell-edit-validators/CaseValidator.ts
+var import_vuu_utils = require("@vuu-ui/vuu-utils");
+var isString = (value) => typeof value === "string";
+var CaseValidator = (rule, value) => {
+  if (isString(value)) {
+    if (value === "") {
+      return true;
+    } else if (rule.value === "lower" && value.toLowerCase() !== value) {
+      return "value must be all lowercase";
+    } else if (rule.value === "upper" && value.toUpperCase() !== value) {
+      return "value must be all uppercase";
+    } else {
+      return true;
+    }
+  } else {
+    return "value must be a string";
+  }
+};
+(0, import_vuu_utils.registerComponent)("vuu-case", CaseValidator, "data-edit-validator", {});
+
+// src/cell-edit-validators/PatternValidator.ts
 var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var isString2 = (value) => typeof value === "string";
+var defaultMessage = "value does not match expected pattern";
+var PatternValidator = (rule, value) => {
+  if (typeof rule.value !== "string") {
+    throw Error("Pattern validation rule must provide pattern");
+  }
+  if (isString2(value)) {
+    if (value === "") {
+      return true;
+    } else {
+      const { message = defaultMessage } = rule;
+      const pattern = new RegExp(rule.value);
+      return pattern.test(value) || message;
+    }
+  } else {
+    return "value must be a string";
+  }
+};
+(0, import_vuu_utils2.registerComponent)("vuu-pattern", PatternValidator, "data-edit-validator", {});
+
+// src/cell-renderers/background-cell/BackgroundCell.tsx
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
 var import_classnames = __toESM(require("classnames"), 1);
 
 // src/cell-renderers/background-cell/useDirection.ts
-var import_vuu_utils = require("@vuu-ui/vuu-utils");
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
 var import_react = require("react");
 var INITIAL_VALUE = [void 0, void 0, void 0, void 0];
 function useDirection(key, value, column) {
@@ -78,8 +127,8 @@ function useDirection(key, value, column) {
   const ref = (0, import_react.useRef)();
   const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE;
   const { type: dataType } = column;
-  const decimals = (0, import_vuu_utils.isTypeDescriptor)(dataType) ? (_a = dataType.formatting) == null ? void 0 : _a.decimals : void 0;
-  const direction = key === prevKey && (0, import_vuu_utils.isValidNumber)(value) && (0, import_vuu_utils.isValidNumber)(prevValue) && column === prevColumn ? (0, import_vuu_utils.getMovingValueDirection)(value, prevDirection, prevValue, decimals) : "";
+  const decimals = (0, import_vuu_utils3.isTypeDescriptor)(dataType) ? (_a = dataType.formatting) == null ? void 0 : _a.decimals : void 0;
+  const direction = key === prevKey && (0, import_vuu_utils3.isValidNumber)(value) && (0, import_vuu_utils3.isValidNumber)(prevValue) && column === prevColumn ? (0, import_vuu_utils3.getMovingValueDirection)(value, prevDirection, prevValue, decimals) : "";
   (0, import_react.useEffect)(() => {
     ref.current = [key, value, column, direction];
   });
@@ -90,15 +139,15 @@ function useDirection(key, value, column) {
 var import_jsx_runtime = require("react/jsx-runtime");
 var CHAR_ARROW_UP = String.fromCharCode(11014);
 var CHAR_ARROW_DOWN = String.fromCharCode(11015);
-var { KEY } = import_vuu_utils2.metadataKeys;
-var classBase = "vuuBackgroundCell";
+var { KEY } = import_vuu_utils4.metadataKeys;
+var classBase = "vuuBackgroundCellDeprecated";
 var FlashStyle = {
   ArrowOnly: "arrow",
   BackgroundOnly: "bg-only",
   ArrowBackground: "arrow-bg"
 };
 var getFlashStyle = (colType) => {
-  if ((0, import_vuu_utils2.isTypeDescriptor)(colType) && colType.renderer) {
+  if ((0, import_vuu_utils4.isTypeDescriptor)(colType) && colType.renderer) {
     if ("flashStyle" in colType.renderer) {
       return colType.renderer["flashStyle"];
     }
@@ -110,7 +159,7 @@ var BackgroundCell = ({ column, row }) => {
   const value = row[key];
   const flashStyle = getFlashStyle(type);
   const direction = useDirection(row[KEY], value, column);
-  const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === import_vuu_utils2.UP1 || direction === import_vuu_utils2.UP2 ? CHAR_ARROW_UP : direction === import_vuu_utils2.DOWN1 || direction === import_vuu_utils2.DOWN2 ? CHAR_ARROW_DOWN : null : null;
+  const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === import_vuu_utils4.UP1 || direction === import_vuu_utils4.UP2 ? CHAR_ARROW_UP : direction === import_vuu_utils4.DOWN1 || direction === import_vuu_utils4.DOWN2 ? CHAR_ARROW_DOWN : null : null;
   const dirClass = direction ? ` ` + direction : "";
   const className = (0, import_classnames.default)(classBase, dirClass, {
     [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,
@@ -121,12 +170,14 @@ var BackgroundCell = ({ column, row }) => {
     valueFormatter(row[column.key])
   ] });
 };
-(0, import_vuu_utils2.registerComponent)("background", BackgroundCell, "cell-renderer", {
+(0, import_vuu_utils4.registerComponent)("background", BackgroundCell, "cell-renderer", {
+  description: "Background Cell renderer for VuuTable",
+  label: "Background Cell (deprecated)",
   serverDataType: ["long", "int", "double"]
 });
 
 // src/cell-renderers/progress-cell/ProgressCell.tsx
-var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
 var import_classnames2 = __toESM(require("classnames"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var classBase2 = "vuuProgressCell";
@@ -135,24 +186,29 @@ var ProgressCell = ({ column, columnMap, row }) => {
   const value = row[column.key];
   let showProgress = false;
   let percentage = 0;
-  if ((0, import_vuu_utils3.isTypeDescriptor)(type) && (0, import_vuu_utils3.isColumnTypeRenderer)(type.renderer)) {
+  if ((0, import_vuu_utils5.isTypeDescriptor)(type) && (0, import_vuu_utils5.isColumnTypeRenderer)(type.renderer)) {
     const { associatedField } = type.renderer;
-    const associatedValue = row[columnMap[associatedField]];
-    if (typeof value === "number" && typeof associatedValue === "number") {
-      percentage = Math.min(Math.round(value / associatedValue * 100), 100);
-      showProgress = isFinite(percentage);
-    } else {
-      const floatValue = parseFloat(value);
-      if (Number.isFinite(floatValue)) {
-        const floatOtherValue = parseFloat(associatedValue);
-        if (Number.isFinite(floatOtherValue)) {
-          percentage = Math.min(
-            Math.round(floatValue / floatOtherValue * 100),
-            100
-          );
-          showProgress = isFinite(percentage);
+    if (associatedField) {
+      const associatedValue = row[columnMap[associatedField]];
+      if (typeof (0, import_vuu_utils5.isValidNumber)(value) && (0, import_vuu_utils5.isValidNumber)(associatedValue)) {
+        percentage = Math.min(Math.round(value / associatedValue * 100), 100);
+        percentage = Math.min(Math.round(value / associatedValue * 100), 100);
+        showProgress = isFinite(percentage);
+      } else {
+        const floatValue = parseFloat(value);
+        if (Number.isFinite(floatValue)) {
+          const floatOtherValue = parseFloat(associatedValue);
+          if (Number.isFinite(floatOtherValue)) {
+            percentage = Math.min(
+              Math.round(floatValue / floatOtherValue * 100),
+              100
+            );
+            showProgress = isFinite(percentage);
+          }
         }
       }
+    } else {
+      throw Error("ProgressCell associatedField is required to render");
     }
   }
   const className = (0, import_classnames2.default)(classBase2, {});
@@ -170,7 +226,72 @@ var ProgressCell = ({ column, columnMap, row }) => {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `${classBase2}-text`, children: `${percentage} %` })
   ] });
 };
-(0, import_vuu_utils3.registerComponent)("vuu.progress", ProgressCell, "cell-renderer", {
+(0, import_vuu_utils5.registerComponent)("vuu.progress", ProgressCell, "cell-renderer", {
+  description: "Progress formatter",
+  label: "Progress formatter",
+  serverDataType: ["long", "int", "double"]
+});
+
+// src/cell-renderers-next/background-cell/BackgroundCell.tsx
+var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
+var import_classnames3 = __toESM(require("classnames"), 1);
+
+// src/cell-renderers-next/background-cell/useDirection.ts
+var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_react2 = require("react");
+var INITIAL_VALUE2 = [void 0, void 0, void 0, void 0];
+function useDirection2(key, value, column) {
+  var _a;
+  const ref = (0, import_react2.useRef)();
+  const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE2;
+  const { type: dataType } = column;
+  const decimals = (0, import_vuu_utils6.isTypeDescriptor)(dataType) ? (_a = dataType.formatting) == null ? void 0 : _a.decimals : void 0;
+  const direction = key === prevKey && (0, import_vuu_utils6.isValidNumber)(value) && (0, import_vuu_utils6.isValidNumber)(prevValue) && column === prevColumn ? (0, import_vuu_utils6.getMovingValueDirection)(value, prevDirection, prevValue, decimals) : "";
+  (0, import_react2.useEffect)(() => {
+    ref.current = [key, value, column, direction];
+  });
+  return direction;
+}
+
+// src/cell-renderers-next/background-cell/BackgroundCell.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CHAR_ARROW_UP2 = String.fromCharCode(11014);
+var CHAR_ARROW_DOWN2 = String.fromCharCode(11015);
+var { KEY: KEY2 } = import_vuu_utils7.metadataKeys;
+var classBase3 = "vuuBackgroundCell";
+var FlashStyle2 = {
+  ArrowOnly: "arrow",
+  BackgroundOnly: "bg-only",
+  ArrowBackground: "arrow-bg"
+};
+var getFlashStyle2 = (colType) => {
+  if ((0, import_vuu_utils7.isTypeDescriptor)(colType) && colType.renderer) {
+    if ("flashStyle" in colType.renderer) {
+      return colType.renderer["flashStyle"];
+    }
+  }
+  return FlashStyle2.BackgroundOnly;
+};
+var BackgroundCell2 = ({ column, row }) => {
+  const { key, type, valueFormatter } = column;
+  const value = row[key];
+  const flashStyle = getFlashStyle2(type);
+  const direction = useDirection2(row[KEY2], value, column);
+  const arrow = flashStyle === FlashStyle2.ArrowOnly || flashStyle === FlashStyle2.ArrowBackground ? direction === import_vuu_utils7.UP1 || direction === import_vuu_utils7.UP2 ? CHAR_ARROW_UP2 : direction === import_vuu_utils7.DOWN1 || direction === import_vuu_utils7.DOWN2 ? CHAR_ARROW_DOWN2 : null : null;
+  const dirClass = direction ? ` ` + direction : "";
+  const className = (0, import_classnames3.default)(classBase3, dirClass, {
+    [`${classBase3}-arrowOnly`]: flashStyle === FlashStyle2.ArrowOnly,
+    [`${classBase3}-arrowBackground`]: flashStyle === FlashStyle2.ArrowBackground
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, tabIndex: -1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${classBase3}-flasher`, children: arrow }),
+    valueFormatter(row[column.key])
+  ] });
+};
+console.log("register BackgroundCellNext");
+(0, import_vuu_utils7.registerComponent)("background-next", BackgroundCell2, "cell-renderer", {
+  description: "Change background color of cell when value changes",
+  label: "Background Flash",
   serverDataType: ["long", "int", "double"]
 });
 
@@ -178,10 +299,10 @@ var ProgressCell = ({ column, columnMap, row }) => {
 var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
 var import_core = require("@salt-ds/core");
 var import_lab = require("@salt-ds/lab");
-var import_classnames3 = __toESM(require("classnames"), 1);
-var import_react2 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var classBase3 = "vuuColumnList";
+var import_classnames4 = __toESM(require("classnames"), 1);
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var classBase4 = "vuuColumnList";
 var classBaseListItem = "vuuColumnListItem";
 var ColumnListItem = ({
   className: classNameProp,
@@ -189,19 +310,19 @@ var ColumnListItem = ({
   ...listItemProps
 }) => {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     import_vuu_ui_controls.ListItem,
     {
       ...listItemProps,
-      className: (0, import_classnames3.default)(classNameProp, classBaseListItem),
+      className: (0, import_classnames4.default)(classNameProp, classBaseListItem),
       "data-name": item == null ? void 0 : item.name,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lab.Switch, { className: `${classBase3}-switch`, checked: item == null ? void 0 : item.subscribed }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `${classBase3}-text`, children: (_a = item == null ? void 0 : item.label) != null ? _a : item == null ? void 0 : item.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        (item == null ? void 0 : item.isCalculated) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `${classBase4}-icon`, "data-icon": "function" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lab.Switch, { className: `${classBase4}-switch`, checked: item == null ? void 0 : item.subscribed }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `${classBase4}-text`, children: (_a = item == null ? void 0 : item.label) != null ? _a : item == null ? void 0 : item.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           import_core.Checkbox,
           {
-            className: `${classBase3}-checkBox`,
+            className: `${classBase4}-checkBox`,
             checked: (item == null ? void 0 : item.hidden) !== true,
             disabled: (item == null ? void 0 : item.subscribed) !== true
           }
@@ -216,34 +337,34 @@ var ColumnList = ({
   onMoveListItem,
   ...htmlAttributes
 }) => {
-  const handleChange = (0, import_react2.useCallback)(
+  const handleChange = (0, import_react3.useCallback)(
     (evt) => {
       const input = evt.target;
       const listItem = input.closest(`.${classBaseListItem}`);
       const {
-        dataset: { name }
+        dataset: { name: name2 }
       } = listItem;
-      if (name) {
-        const saltSwitch = input.closest(`.${classBase3}-switch`);
+      if (name2) {
+        const saltSwitch = input.closest(`.${classBase4}-switch`);
         const saltCheckbox = input.closest(
-          `.${classBase3}-checkBox`
+          `.${classBase4}-checkBox`
         );
         if (saltSwitch) {
-          onChange(name, "subscribed", input.checked);
+          onChange(name2, "subscribed", input.checked);
         } else if (saltCheckbox) {
-          onChange(name, "hidden", input.checked === false);
+          onChange(name2, "hidden", input.checked === false);
         }
       }
     },
     [onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...htmlAttributes, className: classBase3, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${classBase3}-header`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Column Selection" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `${classBase3}-colHeadings`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Column subscription" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Visibility" })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ...htmlAttributes, className: classBase4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${classBase4}-header`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Column Selection" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `${classBase4}-colHeadings`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Column subscription" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Visibility" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_vuu_ui_controls.List,
       {
         ListItem: ColumnListItem,
@@ -259,10 +380,387 @@ var ColumnList = ({
   ] });
 };
 
+// src/column-settings/ColumnSettingsPanel.tsx
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
+var import_core5 = require("@salt-ds/core");
+
+// src/column-formatting-settings/ColumnFormattingPanel.tsx
+var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
+var import_core3 = require("@salt-ds/core");
+var import_classnames5 = __toESM(require("classnames"), 1);
+var import_react5 = require("react");
+
+// src/column-formatting-settings/NumericFormattingSettings.tsx
+var import_core2 = require("@salt-ds/core");
+var import_lab2 = require("@salt-ds/lab");
+var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var classBase5 = "vuuFormattingSettings";
+var NumericFormattingSettings = ({
+  column,
+  onChange
+}) => {
+  var _a;
+  const [formattingSettings, setFormattingSettings] = (0, import_react4.useState)(
+    (0, import_vuu_utils8.getTypeSettingsFromColumn)(column)
+  );
+  const handleInputKeyDown = (0, import_react4.useCallback)(
+    (evt) => {
+      if (evt.key === "Enter" || evt.key === "Tab") {
+        onChange(formattingSettings);
+      }
+    },
+    [formattingSettings, onChange]
+  );
+  const handleChangeDecimals = (0, import_react4.useCallback)(
+    (evt) => {
+      const { value } = evt.target;
+      const numericValue = value === "" ? void 0 : isNaN(parseInt(value)) ? void 0 : parseInt(value);
+      const newFormattingSettings = {
+        ...formattingSettings,
+        decimals: numericValue
+      };
+      setFormattingSettings(newFormattingSettings);
+    },
+    [formattingSettings]
+  );
+  const handleChangeAlignDecimals = (0, import_react4.useCallback)(
+    (evt) => {
+      const { checked } = evt.target;
+      const newFormattingSettings = {
+        ...formattingSettings,
+        alignOnDecimals: checked
+      };
+      setFormattingSettings(newFormattingSettings);
+      onChange(newFormattingSettings);
+    },
+    [formattingSettings, onChange]
+  );
+  const handleChangeZeroPad = (0, import_react4.useCallback)(
+    (evt) => {
+      const { checked } = evt.target;
+      const newFormattingSettings = {
+        ...formattingSettings,
+        zeroPad: checked
+      };
+      setFormattingSettings(newFormattingSettings);
+      onChange(newFormattingSettings);
+    },
+    [formattingSettings, onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: classBase5, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core2.FormField, { "data-field": "decimals", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core2.FormFieldLabel, { children: "Number of decimals" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_core2.Input,
+        {
+          className: "vuuInput",
+          onChange: handleChangeDecimals,
+          onKeyDown: handleInputKeyDown,
+          value: (_a = formattingSettings.decimals) != null ? _a : ""
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core2.FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core2.FormFieldLabel, { children: "Align on decimals" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_lab2.Switch,
+        {
+          checked: formattingSettings.alignOnDecimals,
+          onChange: handleChangeAlignDecimals,
+          value: "align-decimals"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core2.FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core2.FormFieldLabel, { children: "Zero pad decimals" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_lab2.Switch,
+        {
+          checked: formattingSettings.zeroPad,
+          onChange: handleChangeZeroPad,
+          value: "zero-pad"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/column-formatting-settings/ColumnFormattingPanel.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var classBase6 = "vuuColumnFormattingPanel";
+var itemToString = (item) => {
+  var _a;
+  return (_a = item.label) != null ? _a : item.name;
+};
+var ColumnFormattingPanel = ({
+  availableRenderers,
+  selectedCellRenderer,
+  className,
+  column,
+  onChangeFormatting,
+  onChangeRenderer,
+  ...htmlAttributes
+}) => {
+  const content = (0, import_react5.useMemo)(() => {
+    switch (column.serverDataType) {
+      case "double":
+      case "int":
+      case "long":
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          NumericFormattingSettings,
+          {
+            column,
+            onChange: onChangeFormatting
+          }
+        );
+      default:
+        return null;
+    }
+  }, [column, onChangeFormatting]);
+  const { serverDataType = "string" } = column;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ...htmlAttributes, className: `vuuColumnSettingsPanel-header`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: "Formatting" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core3.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core3.FormFieldLabel, { children: "Renderer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_vuu_ui_controls2.Dropdown,
+        {
+          className: (0, import_classnames5.default)(`${classBase6}-renderer`),
+          itemToString,
+          onSelectionChange: onChangeRenderer,
+          selected: selectedCellRenderer,
+          source: availableRenderers,
+          width: "100%"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        className: (0, import_classnames5.default)(classBase6, className, `${classBase6}-${serverDataType}`),
+        children: content
+      }
+    )
+  ] });
+};
+
+// src/column-settings/useColumnSettings.ts
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
+var import_react6 = require("react");
+var integerCellRenderers = [
+  {
+    description: "Default formatter for columns with data type integer",
+    label: "Default Renderer (data type int, long)",
+    name: "default-int"
+  }
+];
+var doubleCellRenderers = [
+  {
+    description: "Default formatter for columns with data type double",
+    label: "Default Renderer (data type double)",
+    name: "default-double"
+  },
+  ...(0, import_vuu_utils9.getRegisteredCellRenderers)("double")
+];
+var stringCellRenderers = [
+  {
+    description: "Default formatter for columns with data type string",
+    label: "Default Renderer (data type string)",
+    name: "default-string"
+  }
+];
+var getAvailableCellRenderers = (column) => {
+  switch (column.serverDataType) {
+    case "char":
+    case "string":
+      return stringCellRenderers;
+    case "int":
+    case "long":
+      return integerCellRenderers;
+    case "double":
+      return doubleCellRenderers;
+    default:
+      return stringCellRenderers;
+  }
+};
+var getCellRendererDescriptor = (availableRenderers, column) => {
+  if ((0, import_vuu_utils9.isTypeDescriptor)(column.type)) {
+    const { renderer } = column.type;
+    if ((0, import_vuu_utils9.isColumnTypeRenderer)(renderer)) {
+      const cellRenderer = availableRenderers.find(
+        (r) => r.name === renderer.name
+      );
+      if (cellRenderer) {
+        return cellRenderer;
+      }
+    }
+  }
+  const typedAvailableRenderers = getAvailableCellRenderers(column);
+  return typedAvailableRenderers[0];
+};
+var getFieldName = (input) => {
+  const saltFormField = input.closest(".saltFormField");
+  if (saltFormField && saltFormField.dataset.field) {
+    const {
+      dataset: { field }
+    } = saltFormField;
+    return field;
+  } else {
+    throw Error("named form field not found");
+  }
+};
+var getColumn = (columns, column) => {
+  if (column.name === "::") {
+    return column;
+  } else {
+    const col = columns.find((col2) => col2.name === column.name);
+    if (col) {
+      return col;
+    }
+    throw Error(`columns does not contain column ${name}`);
+  }
+};
+var replaceColumn = (tableConfig, column) => ({
+  ...tableConfig,
+  columns: tableConfig.columns.map(
+    (col) => col.name === column.name ? column : col
+  )
+});
+var useColumnSettings = ({
+  column: columnProp,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  tableConfig
+}) => {
+  const [column, setColumn] = (0, import_react6.useState)(
+    getColumn(tableConfig.columns, columnProp)
+  );
+  const availableRenderers = (0, import_react6.useMemo)(() => {
+    return getAvailableCellRenderers(column);
+  }, [column]);
+  const selectedCellRendererRef = (0, import_react6.useRef)(
+    getCellRendererDescriptor(availableRenderers, column)
+  );
+  const handleInputCommit = (0, import_react6.useCallback)(() => {
+    onConfigChange(replaceColumn(tableConfig, column));
+  }, [column, onConfigChange, tableConfig]);
+  const handleChange = (0, import_react6.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_utils9.setCalculatedColumnName)(state, value));
+          break;
+        case "column-width":
+          setColumn((state) => ({ ...state, width: parseInt(value) }));
+          break;
+        case "column-alignment":
+          if ((0, import_vuu_utils9.isValidColumnAlignment)(value)) {
+            const newColumn = {
+              ...column,
+              align: value || void 0
+            };
+            setColumn(newColumn);
+            onConfigChange(replaceColumn(tableConfig, newColumn));
+          }
+          break;
+        case "column-pin":
+          if ((0, import_vuu_utils9.isValidPinLocation)(value)) {
+            const newColumn = {
+              ...column,
+              pin: value || void 0
+            };
+            setColumn(newColumn);
+            onConfigChange(replaceColumn(tableConfig, newColumn));
+            break;
+          }
+      }
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const handleChangeRenderer = (0, import_react6.useCallback)(
+    (evt, cellRenderer) => {
+      if (cellRenderer) {
+        const newColumn = (0, import_vuu_utils9.updateColumnRenderer)(
+          column,
+          cellRenderer
+        );
+        selectedCellRendererRef.current = cellRenderer;
+        setColumn(newColumn);
+        onConfigChange(replaceColumn(tableConfig, newColumn));
+      }
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const handleChangeFormatting = (0, import_react6.useCallback)(
+    (formatting) => {
+      const newColumn = (0, import_vuu_utils9.updateColumnType)(column, formatting);
+      setColumn(newColumn);
+      onConfigChange(replaceColumn(tableConfig, newColumn));
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const navigateColumn = (0, import_react6.useCallback)(
+    ({ moveBy }) => {
+      const { columns } = tableConfig;
+      const index = columns.indexOf(column) + moveBy;
+      const newColumn = columns[index];
+      if (newColumn) {
+        selectedCellRendererRef.current = getCellRendererDescriptor(
+          availableRenderers,
+          newColumn
+        );
+        setColumn(newColumn);
+      }
+    },
+    [availableRenderers, column, tableConfig]
+  );
+  const navigateNextColumn = (0, import_react6.useCallback)(() => {
+    navigateColumn({ moveBy: 1 });
+  }, [navigateColumn]);
+  const navigatePrevColumn = (0, import_react6.useCallback)(() => {
+    navigateColumn({ moveBy: -1 });
+  }, [navigateColumn]);
+  const handleSaveCalculatedColumn = (0, import_react6.useCallback)(
+    (calculatedColumn) => {
+      onCreateCalculatedColumn({
+        ...column,
+        ...calculatedColumn
+      });
+    },
+    [column, onCreateCalculatedColumn]
+  );
+  return {
+    availableRenderers,
+    selectedCellRenderer: selectedCellRendererRef.current,
+    column,
+    navigateNextColumn,
+    navigatePrevColumn,
+    onChange: handleChange,
+    onChangeFormatting: handleChangeFormatting,
+    onChangeRenderer: handleChangeRenderer,
+    onInputCommit: handleInputCommit,
+    onSave: handleSaveCalculatedColumn
+  };
+};
+
+// src/column-expression-panel/ColumnExpressionPanel.tsx
+var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+var import_core4 = require("@salt-ds/core");
+var import_react11 = require("react");
+
 // src/column-expression-input/useColumnExpressionEditor.ts
 var import_vuu_codemirror5 = require("@vuu-ui/vuu-codemirror");
-var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
-var import_react4 = require("react");
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_react8 = require("react");
 
 // src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts
 var import_vuu_codemirror = require("@vuu-ui/vuu-codemirror");
@@ -705,8 +1203,8 @@ var walkTree = (tree, source) => {
   const columnExpression = new ColumnExpression();
   const cursor = tree.cursor();
   do {
-    const { name, from, to } = cursor;
-    switch (name) {
+    const { name: name2, from, to } = cursor;
+    switch (name2) {
       case "AndCondition":
         columnExpression.setCondition("and");
         break;
@@ -881,7 +1379,7 @@ var vuuTheme = import_vuu_codemirror3.EditorView.theme(
 
 // src/column-expression-input/useColumnAutoComplete.ts
 var import_vuu_codemirror4 = require("@vuu-ui/vuu-codemirror");
-var import_react3 = require("react");
+var import_react7 = require("react");
 var applyPrefix = (completions, prefix) => prefix ? completions.map((completion) => {
   var _a;
   return {
@@ -890,6 +1388,13 @@ var applyPrefix = (completions, prefix) => prefix ? completions.map((completion)
   };
 }) : completions;
 var isOperator = (node) => node === void 0 ? false : ["Times", "Divide", "Plus", "Minus"].includes(node.name);
+var completionDone = (onSubmit) => ({
+  apply: () => {
+    onSubmit == null ? void 0 : onSubmit();
+  },
+  label: "Done",
+  boost: 10
+});
 var getLastChild = (node, context) => {
   var _a;
   let { lastChild: childNode } = node;
@@ -975,33 +1480,17 @@ var handleConditionalExpression = (node, context, suggestionProvider, maybeCompl
       });
     case "CloseBrace":
       if (maybeComplete) {
-        const options = [
-          {
-            apply: () => {
-              onSubmit == null ? void 0 : onSubmit();
-            },
-            label: "Save Expression",
-            boost: 10
-          }
-        ];
+        const options = [completionDone(onSubmit)];
         return { from: context.pos, options };
       }
   }
 };
 var promptToSave = (context, onSubmit) => {
-  const options = [
-    {
-      apply: () => {
-        onSubmit == null ? void 0 : onSubmit();
-      },
-      label: "Save Expression",
-      boost: 10
-    }
-  ];
+  const options = [completionDone(onSubmit)];
   return { from: context.pos, options };
 };
 var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
-  const makeSuggestions2 = (0, import_react3.useCallback)(
+  const makeSuggestions2 = (0, import_react7.useCallback)(
     async (context, suggestionType, optionalArgs = {}) => {
       const options = await suggestionProvider.getSuggestions(
         suggestionType,
@@ -1012,7 +1501,7 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
     },
     [suggestionProvider]
   );
-  return (0, import_react3.useCallback)(
+  return (0, import_react7.useCallback)(
     async (context) => {
       var _a, _b;
       const { state, pos } = context;
@@ -1025,7 +1514,6 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
       const nodeBefore = tree.resolveInner(pos, -1);
       const text = state.doc.toString();
       const maybeComplete = isCompleteExpression(text);
-      console.log({ nodeBeforeName: nodeBefore.name });
       switch (nodeBefore.name) {
         case "If": {
           console.log(`conditional expression  If`);
@@ -1041,9 +1529,6 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
                   columnName: (0, import_vuu_codemirror4.getValue)(lastChild, state)
                 });
               }
-              console.log(
-                `Condition last child Column, prev child ${prevChild == null ? void 0 : prevChild.name}`
-              );
             } else if ((lastChild == null ? void 0 : lastChild.name) === "RelationalOperator") {
               return makeSuggestions2(context, "expression");
             }
@@ -1106,9 +1591,6 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
                 prefix: ", "
               });
             }
-            console.log(
-              `we have a string, column is ${columnName} ${from} ${to}`
-            );
           }
           break;
         case "ArithmeticExpression":
@@ -1161,13 +1643,7 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
             if ((lastChild == null ? void 0 : lastChild.name) === "Column") {
               if (maybeComplete) {
                 const options = [
-                  {
-                    apply: () => {
-                      onSubmit.current();
-                    },
-                    label: "Save Expression",
-                    boost: 10
-                  }
+                  completionDone(onSubmit.current)
                 ];
                 const columnName = (0, import_vuu_codemirror4.getValue)(lastChild, state);
                 const columnOptions = await suggestionProvider.getSuggestions("operator", {
@@ -1180,31 +1656,14 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
               }
             } else if ((lastChild == null ? void 0 : lastChild.name) === "CallExpression") {
               if (maybeComplete) {
-                const options = [
-                  {
-                    apply: () => {
-                      onSubmit.current();
-                    },
-                    label: "Save Expression",
-                    boost: 10
-                  }
-                ];
                 return {
                   from: context.pos,
-                  options
+                  options: [completionDone(onSubmit.current)]
                 };
               }
             } else if ((lastChild == null ? void 0 : lastChild.name) === "ArithmeticExpression") {
               if (maybeComplete) {
-                let options = [
-                  {
-                    apply: () => {
-                      onSubmit.current();
-                    },
-                    label: "Save Expression",
-                    boost: 10
-                  }
-                ];
+                let options = [completionDone(onSubmit.current)];
                 const lastExpressionChild = getLastChild(lastChild, context);
                 if ((lastExpressionChild == null ? void 0 : lastExpressionChild.name) === "Column") {
                   const columnName = (0, import_vuu_codemirror4.getValue)(lastExpressionChild, state);
@@ -1268,9 +1727,6 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
                 return promptToSave(context, onSubmit.current);
               }
             }
-            console.log(
-              `does closebrace denote an ARgList or a parenthetised expression ? ${parentNode}`
-            );
           }
           break;
         default: {
@@ -1298,8 +1754,8 @@ var noop = () => console.log("noooop");
 var hasExpressionType = (completion) => "expressionType" in completion;
 var injectOptionContent = (completion) => {
   if (hasExpressionType(completion)) {
-    const div = (0, import_vuu_utils4.createEl)("div", "expression-type-container");
-    const span = (0, import_vuu_utils4.createEl)("span", "expression-type", completion.expressionType);
+    const div = (0, import_vuu_utils10.createEl)("div", "expression-type-container");
+    const span = (0, import_vuu_utils10.createEl)("span", "expression-type", completion.expressionType);
     div.appendChild(span);
     return div;
   } else {
@@ -1309,20 +1765,21 @@ var injectOptionContent = (completion) => {
 var useColumnExpressionEditor = ({
   onChange,
   onSubmitExpression,
+  source,
   suggestionProvider
 }) => {
-  const editorRef = (0, import_react4.useRef)(null);
-  const onSubmit = (0, import_react4.useRef)(noop);
-  const viewRef = (0, import_react4.useRef)();
-  const completionFn = useColumnAutoComplete(suggestionProvider, onSubmit);
-  const [createState, clearInput] = (0, import_react4.useMemo)(() => {
+  const editorRef = (0, import_react8.useRef)(null);
+  const onSubmitRef = (0, import_react8.useRef)(noop);
+  const viewRef = (0, import_react8.useRef)();
+  const completionFn = useColumnAutoComplete(suggestionProvider, onSubmitRef);
+  const [createState, clearInput] = (0, import_react8.useMemo)(() => {
     const parseExpression = () => {
       const view = getView(viewRef);
-      const source = view.state.doc.toString();
+      const source2 = view.state.doc.toString();
       const tree = (0, import_vuu_codemirror5.ensureSyntaxTree)(view.state, view.state.doc.length, 5e3);
       if (tree) {
-        const expression = walkTree(tree, source);
-        return [source, expression];
+        const expression = walkTree(tree, source2);
+        return [source2, expression];
       } else {
         return ["", void 0];
       }
@@ -1330,35 +1787,23 @@ var useColumnExpressionEditor = ({
     const clearInput2 = () => {
       getView(viewRef).setState(createState2());
     };
-    const submitExpressionAndClearInput = () => {
-      const [source, expression] = parseExpression();
-      onSubmitExpression == null ? void 0 : onSubmitExpression(source, expression);
-      clearInput2();
+    const submitExpression = () => {
+      const [source2, expression] = parseExpression();
+      onSubmitExpression == null ? void 0 : onSubmitExpression(source2, expression);
     };
-    const submitFilter = (key) => {
+    const showSuggestions = (key) => {
       return import_vuu_codemirror5.keymap.of([
         {
           key,
           run() {
-            submitExpressionAndClearInput();
-            return true;
-          }
-        }
-      ]);
-    };
-    const showSuggestions = (key) => {
-      return import_vuu_codemirror5.keymap.of([
-        {
-          key,
-          run() {
-            (0, import_vuu_codemirror5.startCompletion)(getView(viewRef));
+            (0, import_vuu_codemirror5.startCompletion)(getView(viewRef));
             return true;
           }
         }
       ]);
     };
     const createState2 = () => import_vuu_codemirror5.EditorState.create({
-      doc: "",
+      doc: source,
       extensions: [
         import_vuu_codemirror5.minimalSetup,
         (0, import_vuu_codemirror5.autocompletion)({
@@ -1373,14 +1818,13 @@ var useColumnExpressionEditor = ({
         }),
         columnExpressionLanguageSupport(),
         import_vuu_codemirror5.keymap.of(import_vuu_codemirror5.defaultKeymap),
-        submitFilter("Ctrl-Enter"),
         showSuggestions("ArrowDown"),
         import_vuu_codemirror5.EditorView.updateListener.of((v) => {
           const view = getView(viewRef);
           if (v.docChanged) {
             (0, import_vuu_codemirror5.startCompletion)(view);
-            const source = view.state.doc.toString();
-            onChange == null ? void 0 : onChange(source, void 0);
+            const source2 = view.state.doc.toString();
+            onChange == null ? void 0 : onChange(source2);
           }
         }),
         // Enforces single line view
@@ -1391,15 +1835,12 @@ var useColumnExpressionEditor = ({
         vuuHighlighting
       ]
     });
-    onSubmit.current = () => {
-      submitExpressionAndClearInput();
-      setTimeout(() => {
-        getView(viewRef).focus();
-      }, 100);
+    onSubmitRef.current = () => {
+      submitExpression();
     };
     return [createState2, clearInput2];
-  }, [completionFn, onChange, onSubmitExpression]);
-  (0, import_react4.useEffect)(() => {
+  }, [completionFn, onChange, onSubmitExpression, source]);
+  (0, import_react8.useEffect)(() => {
     if (!editorRef.current) {
       throw Error("editor not in dom");
     }
@@ -1416,26 +1857,28 @@ var useColumnExpressionEditor = ({
 };
 
 // src/column-expression-input/ColumnExpressionInput.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var classBase4 = "vuuColumnExpressionInput";
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var classBase7 = "vuuColumnExpressionInput";
 var ColumnExpressionInput = ({
   onChange,
   onSubmitExpression,
+  source = "",
   suggestionProvider
 }) => {
   const { editorRef } = useColumnExpressionEditor({
     onChange,
     onSubmitExpression,
+    source,
     suggestionProvider
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${classBase4}`, ref: editorRef });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase7}`, ref: editorRef });
 };
 
 // src/column-expression-input/useColumnExpressionSuggestionProvider.ts
 var import_vuu_codemirror6 = require("@vuu-ui/vuu-codemirror");
 var import_vuu_data_react = require("@vuu-ui/vuu-data-react");
-var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
-var import_react5 = require("react");
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var import_react9 = require("react");
 
 // src/column-expression-input/column-function-descriptors.ts
 var columnFunctionDescriptors = [
@@ -1710,33 +2153,33 @@ var columnFunctionDescriptors = [
 ];
 
 // src/column-expression-input/functionDocInfo.ts
-var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
 var functionDocInfo = ({
-  name,
+  name: name2,
   description,
   example,
   params,
   type
 }) => {
-  const rootElement = (0, import_vuu_utils5.createEl)("div", "vuuFunctionDoc");
-  const headingElement = (0, import_vuu_utils5.createEl)("div", "function-heading");
-  const nameElement = (0, import_vuu_utils5.createEl)("span", "function-name", name);
-  const paramElement = (0, import_vuu_utils5.createEl)("span", "param-list", params.description);
-  const typeElement = (0, import_vuu_utils5.createEl)("span", "function-type", 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);
   headingElement.appendChild(nameElement);
   headingElement.appendChild(paramElement);
   headingElement.appendChild(typeElement);
-  const child2 = (0, import_vuu_utils5.createEl)("p", void 0, description);
+  const child2 = (0, import_vuu_utils11.createEl)("p", void 0, description);
   rootElement.appendChild(headingElement);
   rootElement.appendChild(child2);
   if (example) {
-    const exampleElement = (0, import_vuu_utils5.createEl)("div", "example-container", "Example:");
-    const expressionElement = (0, import_vuu_utils5.createEl)(
+    const exampleElement = (0, import_vuu_utils11.createEl)("div", "example-container", "Example:");
+    const expressionElement = (0, import_vuu_utils11.createEl)(
       "div",
       "example-expression",
       example.expression
     );
-    const resultElement = (0, import_vuu_utils5.createEl)("div", "example-result", example.result);
+    const resultElement = (0, import_vuu_utils11.createEl)("div", "example-result", example.result);
     exampleElement.appendChild(expressionElement);
     exampleElement.appendChild(resultElement);
     rootElement.appendChild(exampleElement);
@@ -1755,15 +2198,15 @@ var withApplySpace = (suggestions) => suggestions.map((suggestion) => {
 });
 var getValidColumns = (columns, { functionName, operator }) => {
   if (operator) {
-    return columns.filter(import_vuu_utils6.isNumericColumn);
+    return columns.filter(import_vuu_utils12.isNumericColumn);
   } else if (functionName) {
     const fn = columnFunctionDescriptors.find((f) => f.name === functionName);
     if (fn) {
       switch (fn.accepts) {
         case "string":
-          return columns.filter(import_vuu_utils6.isTextColumn);
+          return columns.filter(import_vuu_utils12.isTextColumn);
         case "number":
-          return columns.filter(import_vuu_utils6.isNumericColumn);
+          return columns.filter(import_vuu_utils12.isNumericColumn);
         default:
           return columns;
       }
@@ -1792,7 +2235,7 @@ var arithmeticOperators = [
   { apply: "- ", boost: 2, label: "-", type: "operator" }
 ];
 var getOperators = (column) => {
-  if (column === void 0 || (0, import_vuu_utils6.isNumericColumn)(column)) {
+  if (column === void 0 || (0, import_vuu_utils12.isNumericColumn)(column)) {
     return arithmeticOperators;
   } else {
     return NO_OPERATORS;
@@ -1856,13 +2299,13 @@ var useColumnExpressionSuggestionProvider = ({
   columns,
   table
 }) => {
-  const findColumn3 = (0, import_react5.useCallback)(
-    (name) => name ? columns.find((col) => col.name === name) : void 0,
+  const findColumn2 = (0, import_react9.useCallback)(
+    (name2) => name2 ? columns.find((col) => col.name === name2) : void 0,
     [columns]
   );
-  const latestSuggestionsRef = (0, import_react5.useRef)();
+  const latestSuggestionsRef = (0, import_react9.useRef)();
   const getTypeaheadSuggestions = (0, import_vuu_data_react.useTypeaheadSuggestions)();
-  const getSuggestions = (0, import_react5.useCallback)(
+  const getSuggestions = (0, import_react9.useCallback)(
     async (suggestionType, options = NONE) => {
       const { columnName, functionName, operator, prefix } = options;
       switch (suggestionType) {
@@ -1877,18 +2320,18 @@ var useColumnExpressionSuggestionProvider = ({
           return latestSuggestionsRef.current = withApplySpace(suggestions);
         }
         case "operator": {
-          const suggestions = await getOperators(findColumn3(columnName));
+          const suggestions = await getOperators(findColumn2(columnName));
           return latestSuggestionsRef.current = withApplySpace(suggestions);
         }
         case "relational-operator": {
           const suggestions = await (0, import_vuu_codemirror6.getRelationalOperators)(
-            findColumn3(columnName)
+            findColumn2(columnName)
           );
           return latestSuggestionsRef.current = withApplySpace(suggestions);
         }
         case "condition-operator":
           {
-            const column = findColumn3(columnName);
+            const column = findColumn2(columnName);
             if (column) {
               const suggestions = await getConditionOperators(column);
               if (suggestions) {
@@ -1925,9 +2368,9 @@ var useColumnExpressionSuggestionProvider = ({
       }
       return [];
     },
-    [columns, findColumn3, getTypeaheadSuggestions, table]
+    [columns, findColumn2, getTypeaheadSuggestions, table]
   );
-  const isPartialMatch = (0, import_react5.useCallback)(
+  const isPartialMatch = (0, import_react9.useCallback)(
     async (valueType, columnName, pattern) => {
       const { current: latestSuggestions } = latestSuggestionsRef;
       let maybe = false;
@@ -1951,812 +2394,390 @@ var useColumnExpressionSuggestionProvider = ({
   };
 };
 
-// src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
-var import_core7 = require("@salt-ds/core");
-var import_classnames6 = __toESM(require("classnames"), 1);
-var import_react12 = require("react");
-
-// src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx
-var import_vuu_layout = require("@vuu-ui/vuu-layout");
-var import_lab4 = require("@salt-ds/lab");
-var import_core4 = require("@salt-ds/core");
-var import_classnames5 = __toESM(require("classnames"), 1);
-var import_react8 = require("react");
-
-// src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
-var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
-var import_lab3 = require("@salt-ds/lab");
-var import_core3 = require("@salt-ds/core");
-var import_classnames4 = __toESM(require("classnames"), 1);
-var import_react7 = require("react");
-
-// src/datagrid-configuration-ui/column-type-panel/NumericColumnPanel.tsx
-var import_lab2 = require("@salt-ds/lab");
-var import_core2 = require("@salt-ds/core");
-var import_react6 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var defaultValues = {
-  alignOnDecimals: false,
-  decimals: 4,
-  zeroPad: false
-};
-var getColumnValues = (columnType, gridDefaultValues) => {
-  const columnValue = typeof columnType === "object" && columnType.formatting ? columnType.formatting : {};
-  const properties = ["alignOnDecimals", "decimals", "zeroPad"];
-  return properties.reduce((configValues, property) => {
-    if (columnValue[property] !== void 0) {
-      return {
-        ...configValues,
-        [property]: columnValue[property]
-      };
-    } else if ((gridDefaultValues == null ? void 0 : gridDefaultValues[property]) !== void 0) {
-      return {
-        ...configValues,
-        [property]: gridDefaultValues[property]
-      };
-    }
-    return configValues;
-  }, defaultValues);
-};
-var NumericColumnPanel = ({
-  column,
-  dispatchColumnAction
-}) => {
-  const { decimals, alignOnDecimals, zeroPad } = getColumnValues(column == null ? void 0 : column.type);
-  const dispatchUpdate = (0, import_react6.useCallback)(
-    (values) => dispatchColumnAction({
-      type: "updateColumnTypeFormatting",
-      column,
-      ...values
-    }),
-    [column, dispatchColumnAction]
-  );
-  const handleChangeDecimals = (0, import_react6.useCallback)(
-    (value) => dispatchUpdate({ decimals: parseInt(value.toString(), 10) }),
-    [dispatchUpdate]
-  );
-  const handleChangeAlignOnDecimals = (0, import_react6.useCallback)(
-    (evt) => dispatchUpdate({ alignOnDecimals: Boolean(evt.target.value) }),
-    [dispatchUpdate]
-  );
-  const handleChangeZeroPad = (0, import_react6.useCallback)(
-    (evt) => dispatchUpdate({ zeroPad: Boolean(evt.target.value) }),
-    [dispatchUpdate]
-  );
-  switch (column.serverDataType) {
-    case "double":
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_core2.FormField, { labelPlacement: "top", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core2.FormFieldLabel, { children: "No of Decimals" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lab2.StepperInput, { value: decimals, onChange: handleChangeDecimals })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_lab2.Switch,
-          {
-            checked: alignOnDecimals,
-            label: "Align on decimals",
-            onChange: handleChangeAlignOnDecimals
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_lab2.Switch,
-          {
-            checked: zeroPad,
-            label: "Zero pad",
-            onChange: handleChangeZeroPad
-          }
-        )
-      ] });
-    case "long":
-    case "int":
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core2.Text, { children: "Work in progress" }) });
-    default:
-      return null;
-  }
-};
-
-// src/datagrid-configuration-ui/column-type-panel/StringColumnPanel.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var StringColumnPanel = ({
-  column,
-  dispatchColumnAction
-}) => {
-  console.log({ column, dispatchColumnAction });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: "what" });
-};
-
-// src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var classBase5 = "vuuColumnTypePanel";
-var integerCellRenderers = ["Default Renderer (int, long)"];
-var doubleCellRenderers = ["Default Renderer (double)"];
-var stringCellRenderers = ["Default Renderer (string)"];
-var getAvailableCellRenderers = (column) => {
-  const customCellRenderers = (0, import_vuu_utils7.getRegisteredCellRenderers)(column.serverDataType);
-  const customRendererNames = customCellRenderers.map((r) => r.name);
-  console.log({ customRendererNames });
-  switch (column.serverDataType) {
-    case "char":
-    case "string":
-      return stringCellRenderers;
-    case "int":
-    case "long":
-      return integerCellRenderers;
-    case "double":
-      return doubleCellRenderers.concat(customRendererNames);
-    default:
-      return stringCellRenderers;
+// src/column-expression-panel/useColumnExpression.ts
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_react10 = require("react");
+var applyDefaults = (column) => {
+  const [name2, expression, type] = (0, import_vuu_utils13.getCalculatedColumnDetails)(column);
+  if (type === "") {
+    return {
+      ...column,
+      name: `${name2}:${expression}:string`
+    };
+  } else {
+    return column;
   }
 };
-var ColumnTypePanel = ({
-  className,
-  column,
-  dispatchColumnAction,
-  ...props
+var useColumnExpression = ({
+  column: columnProp,
+  onSave: onSaveProp
 }) => {
-  const content = (0, import_react7.useMemo)(() => {
-    switch (column.serverDataType) {
-      case "double":
-      case "int":
-      case "long":
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          NumericColumnPanel,
-          {
-            column,
-            dispatchColumnAction
-          }
-        );
-      default:
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          StringColumnPanel,
-          {
-            column,
-            dispatchColumnAction
-          }
-        );
+  const [column, setColumn] = (0, import_react10.useState)(
+    applyDefaults(columnProp)
+  );
+  const expressionRef = (0, import_react10.useRef)((0, import_vuu_utils13.getCalculatedColumnDetails)(column)[1]);
+  const onChangeName = (0, import_react10.useCallback)((evt) => {
+    const { value } = evt.target;
+    setColumn((state) => (0, import_vuu_utils13.setCalculatedColumnName)(state, value));
+  }, []);
+  const onChangeExpression = (0, import_react10.useCallback)((value) => {
+    expressionRef.current = value.trim();
+  }, []);
+  const onChangeType = (0, import_react10.useCallback)((evt, value) => {
+    if (typeof value === "string") {
+      setColumn((state) => (0, import_vuu_utils13.setCalculatedColumnType)(state, value));
     }
-  }, [column, dispatchColumnAction]);
-  const { serverDataType = "string" } = column;
-  const availableRenderers = getAvailableCellRenderers(column);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_lab3.Dropdown,
-      {
-        className: (0, import_classnames4.default)(`${classBase5}-renderer`),
-        fullWidth: true,
-        selected: availableRenderers[0],
-        source: availableRenderers
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_core3.Panel,
-      {
-        ...props,
-        className: (0, import_classnames4.default)(classBase5, className, `${classBase5}-${serverDataType}`),
-        children: content
-      }
-    )
-  ] });
+  }, []);
+  const onSave = (0, import_react10.useCallback)(() => {
+    const newColumn = (0, import_vuu_utils13.setCalculatedColumnExpression)(
+      column,
+      expressionRef.current
+    );
+    setColumn(newColumn);
+    onSaveProp(newColumn);
+  }, [column, onSaveProp]);
+  return {
+    column,
+    onChangeExpression,
+    onChangeName,
+    onChangeType,
+    onSave
+  };
 };
 
-// src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx
+// src/column-expression-panel/ColumnExpressionPanel.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var classBase6 = "vuuColumnSettingsPanel";
-var tabstripProps = {
-  className: "salt-density-high"
-};
-var ColumnSettingsPanel = ({
-  column,
-  dispatchColumnAction,
-  style: styleProp,
-  ...props
+var classBase8 = "vuuColumnExpressionPanel";
+var ColumnExpressionPanel = ({
+  column: columnProp,
+  onSave: onSaveProp,
+  tableConfig,
+  vuuTable
 }) => {
-  var _a, _b, _c, _d;
-  const [activeTab, setActiveTab] = (0, import_react8.useState)(0);
-  const dispatchUpdate = (0, import_react8.useCallback)(
-    (values) => dispatchColumnAction({
-      type: "updateColumnProp",
-      column,
-      ...values
-    }),
-    [column, dispatchColumnAction]
-  );
-  const handleChangeAlign = (0, import_react8.useCallback)(
-    (evt) => dispatchUpdate({ align: evt.target.value }),
-    [dispatchUpdate]
-  );
-  const handleChangePin = (0, import_react8.useCallback)(
-    (evt) => dispatchUpdate({ pin: evt.target.value }),
-    [dispatchUpdate]
-  );
-  const handleChangeHidden = (0, import_react8.useCallback)(
-    (evt) => dispatchUpdate({ hidden: evt.target.checked }),
-    [dispatchUpdate]
-  );
-  const handleChangeLabel = (0, import_react8.useCallback)(
-    (evt) => dispatchUpdate({ label: evt.target.value }),
-    [dispatchUpdate]
-  );
-  const handleChangeWidth = (0, import_react8.useCallback)(
-    (value) => dispatchUpdate({ width: parseInt(value.toString(), 10) }),
-    [dispatchUpdate]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    "div",
-    {
-      className: classBase6,
-      ...props,
-      style: {
-        ...styleProp
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.Text, { as: "h4", children: "Column Settings" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-          import_vuu_layout.Stack,
-          {
-            active: activeTab,
-            className: (0, import_classnames5.default)(`${classBase6}-columnTabs`),
-            onTabSelectionChanged: setActiveTab,
-            TabstripProps: tabstripProps,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.Panel, { title: "Column", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Hidden" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    import_core4.Checkbox,
-                    {
-                      checked: column.hidden === true,
-                      onChange: handleChangeHidden
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Label" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    import_core4.Input,
-                    {
-                      value: (_a = column.label) != null ? _a : column.name,
-                      onChange: handleChangeLabel
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Width" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                    import_lab4.StepperInput,
-                    {
-                      value: (_b = column.width) != null ? _b : 100,
-                      onChange: handleChangeWidth
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "ALign" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                    import_core4.RadioButtonGroup,
-                    {
-                      "aria-label": "Column Align",
-                      value: (_c = column.align) != null ? _c : "left",
-                      onChange: handleChangeAlign,
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.RadioButton, { label: "Left", value: "left" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.RadioButton, { label: "Right", value: "right" })
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Pin Column" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                    import_core4.RadioButtonGroup,
-                    {
-                      "aria-label": "Pin Column",
-                      value: (_d = column.pin) != null ? _d : "",
-                      onChange: handleChangePin,
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.RadioButton, { label: "Do not pin", value: "" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.RadioButton, { label: "Left", value: "left" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.RadioButton, { label: "Right", value: "right" })
-                      ]
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-                ColumnTypePanel,
-                {
-                  column,
-                  dispatchColumnAction,
-                  title: "Data Cell"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.Panel, { title: "Vuu", variant: "secondary", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "top", readOnly: true, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Name" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.Input, { value: column.name })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { labelPlacement: "top", readOnly: true, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Vuu Type" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.Input, { value: column.serverDataType })
-                ] })
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
+  const typeRef = (0, import_react11.useRef)(null);
+  const { column, onChangeExpression, onChangeName, onChangeType, onSave } = useColumnExpression({ column: columnProp, onSave: onSaveProp });
+  const suggestionProvider = useColumnExpressionSuggestionProvider({
+    columns: tableConfig.columns,
+    table: vuuTable
+  });
+  const handleSubmitExpression = (0, import_react11.useCallback)(() => {
+    requestAnimationFrame(() => {
+      var _a, _b;
+      (_b = (_a = typeRef.current) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
+    });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: classBase8, 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_core4.FormField, { "data-field": "column-name", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Column Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_core4.Input,
+        {
+          className: "vuuInput",
+          onChange: onChangeName,
+          value: (0, import_vuu_utils14.getCalculatedColumnName)(column)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { "data-field": "column-expression", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Expression" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        ColumnExpressionInput,
+        {
+          onChange: onChangeExpression,
+          onSubmitExpression: handleSubmitExpression,
+          source: (0, import_vuu_utils14.getCalculatedColumnExpression)(column),
+          suggestionProvider
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core4.FormField, { "data-field": "type", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.FormFieldLabel, { children: "Column type" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_vuu_ui_controls3.Dropdown,
+        {
+          className: `${classBase8}-type`,
+          onSelectionChange: onChangeType,
+          ref: typeRef,
+          selected: (0, import_vuu_utils14.getCalculatedColumnType)(column) || null,
+          source: ["double", "long", "string"],
+          width: "100%"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.Button, { className: `${classBase8}-buttonCancel`, tabIndex: -1, children: "cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core4.Button, { className: `${classBase8}-buttonApply`, tabIndex: -1, children: "apply" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_core4.Button,
+        {
+          className: `${classBase8}-buttonSave`,
+          onClick: onSave,
+          variant: "cta",
+          children: "save"
+        }
+      )
+    ] })
+  ] });
 };
 
-// src/datagrid-configuration-ui/settings-panel/GridSettingsPanel.tsx
-var import_core5 = require("@salt-ds/core");
-var import_lab5 = require("@salt-ds/lab");
-var import_react9 = require("react");
+// src/column-settings/ColumnSettingsPanel.tsx
+var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var classBase7 = "vuuGridSettingsPanel";
-var GridSettingsPanel = ({
-  config,
-  dispatchColumnAction,
-  style: styleProp,
-  ...props
+var classBase9 = "vuuColumnSettingsPanel";
+var ColumnSettingsPanel = ({
+  column: columnProp,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  tableConfig,
+  vuuTable
 }) => {
-  var _a;
-  const dispatchUpdate = (0, import_react9.useCallback)(
-    (values) => dispatchColumnAction({
-      type: "updateGridSettings",
-      ...values
-    }),
-    [dispatchColumnAction]
-  );
-  const handleChangeLabelFormatting = (0, import_react9.useCallback)(
-    (evt) => dispatchUpdate({
-      columnFormatHeader: evt.target.value
-    }),
-    [dispatchUpdate]
-  );
-  const handleChangeWidth = (0, import_react9.useCallback)(
-    (value) => dispatchUpdate({ columnDefaultWidth: parseInt(value.toString(), 10) }),
-    [dispatchUpdate]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    "div",
-    {
-      className: classBase7,
-      ...props,
-      style: {
-        ...styleProp
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.Text, { as: "h4", children: "Grid Settings" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core5.Panel, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core5.FormField, { labelPlacement: "left", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.FormFieldLabel, { children: "Format column labels" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-              import_core5.RadioButtonGroup,
+  const isNewCalculatedColumn = columnProp.name === "::";
+  const {
+    availableRenderers,
+    selectedCellRenderer,
+    column,
+    navigateNextColumn,
+    navigatePrevColumn,
+    onChange,
+    onChangeFormatting,
+    onChangeRenderer,
+    onInputCommit,
+    onSave
+  } = useColumnSettings({
+    column: columnProp,
+    onConfigChange,
+    onCreateCalculatedColumn,
+    tableConfig
+  });
+  const {
+    serverDataType,
+    align = (0, import_vuu_utils15.getDefaultAlignment)(serverDataType),
+    name: name2,
+    label = name2,
+    pin,
+    width
+  } = column;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: classBase9, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${classBase9}-header`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: name2 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core5.FormField, { "data-field": "column-label", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.FormFieldLabel, { children: "Column Label" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_vuu_ui_controls4.VuuInput,
+        {
+          className: "vuuInput",
+          onChange,
+          onCommit: onInputCommit,
+          value: label
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core5.FormField, { "data-field": "column-width", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.FormFieldLabel, { children: "Column Width" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_vuu_ui_controls4.VuuInput,
+        {
+          className: "vuuInput",
+          onChange,
+          value: width,
+          onCommit: onInputCommit
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core5.FormField, { "data-field": "column-alignment", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.FormFieldLabel, { children: "Alignment" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        import_core5.ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange,
+          value: align,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_core5.ToggleButton,
+              {
+                "data-icon": "align-left",
+                className: "vuuIconToggleButton",
+                value: "left"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_core5.ToggleButton,
               {
-                "aria-label": "Format column labels",
-                value: config.columnFormatHeader,
-                onChange: handleChangeLabelFormatting,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.RadioButton, { label: "No Formatting", value: void 0 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.RadioButton, { label: "Capitalize", value: "capitalize" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.RadioButton, { label: "Uppercase", value: "uppercase" })
-                ]
+                "data-icon": "align-right",
+                className: "vuuIconToggleButton",
+                value: "right"
               }
             )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core5.FormField, { labelPlacement: "left", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.FormFieldLabel, { children: "Default Column Width" }),
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core5.FormField, { "data-field": "column-pin", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core5.FormFieldLabel, { children: "Pin Column" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        import_core5.ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange,
+          value: pin != null ? pin : "",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_core5.ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "cross-circle",
+                value: ""
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_core5.ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "pin-left",
+                value: "left"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_core5.ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "pin-float",
+                value: "floating"
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              import_lab5.StepperInput,
+              import_core5.ToggleButton,
               {
-                value: (_a = config.columnDefaultWidth) != null ? _a : 100,
-                onChange: handleChangeWidth
+                className: "vuuIconToggleButton",
+                "data-icon": "pin-right",
+                value: "right"
               }
             )
-          ] })
-        ] })
-      ]
-    }
-  );
-};
-
-// src/datagrid-configuration-ui/settings-panel/useGridSettings.ts
-var import_react10 = require("react");
-var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
-var gridSettingsReducer = (state, action) => {
-  console.log(`gridSettingsReducer ${action.type}`);
-  switch (action.type) {
-    case "addColumn":
-      return addColumn(state, action);
-    case "addCalculatedColumn":
-      return addCalculatedColumn(state, action);
-    case "moveColumn":
-      return moveColumn(state, action);
-    case "removeColumn":
-      return removeColumn(state, action);
-    case "updateColumn":
-      return state;
-    case "updateColumnProp":
-      return updateColumnProp(state, action);
-    case "updateGridSettings":
-      return updateGridSettings(state, action);
-    case "updateColumnTypeFormatting":
-      return updateColumnTypeFormatting(state, action);
-    default:
-      return state;
-  }
-};
-var useGridSettings = (config) => {
-  const [state, dispatchColumnAction] = (0, import_react10.useReducer)(
-    gridSettingsReducer,
-    config
-  );
-  return {
-    gridSettings: state,
-    dispatchColumnAction
-  };
-};
-function addColumn(state, { column, columns, index = -1 }) {
-  const { columns: stateColumns } = state;
-  if (index === -1) {
-    if (Array.isArray(columns)) {
-      return { ...state, columns: stateColumns.concat(columns) };
-    } else if (column) {
-      return { ...state, columns: stateColumns.concat(column) };
-    }
-  }
-  return state;
-}
-function addCalculatedColumn(state, { columnName, columnType, expression }) {
-  const { columns: stateColumns } = state;
-  const calculatedColumn = {
-    name: columnName,
-    expression,
-    serverDataType: columnType
-  };
-  return { ...state, columns: stateColumns.concat(calculatedColumn) };
-}
-function removeColumn(state, { column }) {
-  const { columns: stateColumns } = state;
-  return {
-    ...state,
-    columns: stateColumns.filter((col) => col.name !== column.name)
-  };
-}
-function moveColumn(state, { column, moveBy, moveFrom, moveTo }) {
-  const { columns: stateColumns } = state;
-  if (column && typeof moveBy === "number") {
-    const idx = stateColumns.indexOf(column);
-    const newColumns = stateColumns.slice();
-    const [movedColumns] = newColumns.splice(idx, 1);
-    newColumns.splice(idx + moveBy, 0, movedColumns);
-    return {
-      ...state,
-      columns: newColumns
-    };
-  } else if (typeof moveFrom === "number" && typeof moveTo === "number") {
-    return {
-      ...state,
-      columns: (0, import_vuu_ui_controls2.moveItem)(stateColumns, moveFrom, moveTo)
-    };
-  } else {
-    return state;
-  }
-}
-function updateColumnProp(state, { align, column, hidden, label, width }) {
-  let { columns: stateColumns } = state;
-  if (align === "left" || align === "right") {
-    stateColumns = replaceColumn(stateColumns, { ...column, align });
-  }
-  if (typeof hidden === "boolean") {
-    stateColumns = replaceColumn(stateColumns, { ...column, hidden });
-  }
-  if (typeof label === "string") {
-    stateColumns = replaceColumn(stateColumns, { ...column, label });
-  }
-  if (typeof width === "number") {
-    stateColumns = replaceColumn(stateColumns, { ...column, width });
-  }
-  return {
-    ...state,
-    columns: stateColumns
-  };
-}
-function updateGridSettings(state, { columnFormatHeader }) {
-  return {
-    ...state,
-    columnFormatHeader: columnFormatHeader != null ? columnFormatHeader : state.columnFormatHeader
-  };
-}
-function updateColumnTypeFormatting(state, {
-  alignOnDecimals,
-  column,
-  decimals,
-  zeroPad
-}) {
-  const { columns: stateColumns } = state;
-  const targetColumn = stateColumns.find((col) => col.name === column.name);
-  if (targetColumn) {
-    const {
-      serverDataType = "string",
-      type: columnType = (0, import_vuu_utils8.fromServerDataType)(serverDataType)
-    } = column;
-    const type = typeof columnType === "string" ? {
-      name: columnType
-    } : {
-      ...columnType
-    };
-    if (typeof alignOnDecimals === "boolean") {
-      type.formatting = {
-        ...type.formatting,
-        alignOnDecimals
-      };
-    }
-    if (typeof decimals === "number") {
-      type.formatting = {
-        ...type.formatting,
-        decimals
-      };
-    }
-    if (typeof zeroPad === "boolean") {
-      type.formatting = {
-        ...type.formatting,
-        zeroPad
-      };
-    }
-    return {
-      ...state,
-      columns: replaceColumn(stateColumns, { ...column, type })
-    };
-  } else {
-    return state;
-  }
-}
-function replaceColumn(columns, column) {
-  return columns.map((col) => col.name === column.name ? column : col);
-}
-
-// src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
-var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
-
-// src/datagrid-configuration-ui/calculated-column-panel/CalculatedColumnPanel.tsx
-var import_core6 = require("@salt-ds/core");
-var import_react11 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var CalculatedColumnPanel = ({
-  columns,
-  dispatchColumnAction,
-  table
-}) => {
-  const [columnName, setColumnName] = (0, import_react11.useState)("");
-  const [, setExpression] = (0, import_react11.useState)();
-  const sourceRef = (0, import_react11.useRef)("");
-  const suggestionProvider = useColumnExpressionSuggestionProvider({
-    columns,
-    table
-  });
-  const handleChangeName = (0, import_react11.useCallback)(
-    (evt) => {
-      const { value } = evt.target;
-      setColumnName(value);
-    },
-    []
-  );
-  const handleChangeExpression = (0, import_react11.useCallback)((source) => {
-    sourceRef.current = source;
-  }, []);
-  const handleSubmitExpression = (0, import_react11.useCallback)(
-    (source, expression) => {
-      console.log({ source });
-      setExpression(expression);
-    },
-    []
-  );
-  const handleSave = (0, import_react11.useCallback)(() => {
-    if (sourceRef.current) {
-      console.log(
-        `save expression ${JSON.stringify(sourceRef.current, null, 2)}`
-      );
-      dispatchColumnAction({
-        type: "addCalculatedColumn",
-        columnName,
-        expression: sourceRef.current,
-        columnType: "string"
-      });
-    }
-  }, [columnName, dispatchColumnAction]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core6.Panel, { className: "vuuCalculatedColumnPanel", title: "Define Computed Column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core6.Text, { styleAs: "h4", children: "Define Computed Column" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core6.FormField, { labelPlacement: "left", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core6.FormFieldLabel, { children: "Column Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core6.Input, { value: columnName, onChange: handleChangeName })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      ColumnExpressionInput,
-      {
-        onChange: handleChangeExpression,
-        onSubmitExpression: handleSubmitExpression,
-        suggestionProvider
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core6.Button, { onClick: handleSave, children: "Add Column" }) })
-  ] });
-};
-
-// src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var classBase8 = "vuuDatagridSettingsPanel";
-var getTabLabel = () => void 0;
-var icons = [
-  "table-settings",
-  "column-chooser",
-  "column-settings",
-  "define-column"
-];
-var getTabIcon = (component, tabIndex) => icons[tabIndex];
-var DatagridSettingsPanel = ({
-  availableColumns,
-  className,
-  gridConfig,
-  onCancel,
-  onConfigChange,
-  ...props
-}) => {
-  var _a;
-  console.log(`DatagridSettingsPanel render`);
-  const [selectedTabIndex, setSelectedTabIndex] = (0, import_react12.useState)(0);
-  const { gridSettings, dispatchColumnAction } = useGridSettings(gridConfig);
-  const [selectedColumnName, setSelectedColumnName] = (0, import_react12.useState)(
-    null
-  );
-  const handleColumnSelected = (0, import_react12.useCallback)(
-    (selected) => {
-      setSelectedColumnName(selected ? selected.name : null);
-    },
-    []
-  );
-  const handleApply = (0, import_react12.useCallback)(
-    (evt, closePanel = false) => {
-      console.log(`1) DataGridSettingsPanel fire onConfigChange`);
-      onConfigChange == null ? void 0 : onConfigChange(gridSettings, closePanel);
-    },
-    [gridSettings, onConfigChange]
-  );
-  const handleTabSelectionChanged = (0, import_react12.useCallback)((selectedTabIndex2) => {
-    setSelectedTabIndex(selectedTabIndex2);
-  }, []);
-  const handleSave = (0, import_react12.useCallback)(
-    (evt) => handleApply(evt, true),
-    [handleApply]
-  );
-  const selectedColumn = selectedColumnName === null ? null : (_a = gridSettings.columns.find((col) => col.name === selectedColumnName)) != null ? _a : null;
-  const tabstripProps2 = {
-    activeTabIndex: selectedTabIndex,
-    allowRenameTab: false,
-    orientation: "vertical"
-  };
-  const handleAddCalculatedColumn = (0, import_react12.useCallback)(
-    () => setSelectedTabIndex(3),
-    []
-  );
-  const panelShift = selectedTabIndex === 2 ? "right" : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ...props, className: (0, import_classnames6.default)(classBase8, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      import_vuu_layout2.Stack,
-      {
-        TabstripProps: tabstripProps2,
-        className: `${classBase8}-stack`,
-        getTabIcon,
-        getTabLabel,
-        active: selectedTabIndex === 2 ? 1 : selectedTabIndex,
-        onTabSelectionChanged: handleTabSelectionChanged,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            GridSettingsPanel,
-            {
-              config: gridSettings,
-              dispatchColumnAction
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${classBase8}-columnPanels`, "data-align": panelShift, children: selectedColumn === null ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core7.Panel, { className: "vuuColumnSettingsPanel", children: "Select a column" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            ColumnSettingsPanel,
-            {
-              column: selectedColumn,
-              dispatchColumnAction,
-              style: { background: "white", flex: "1 0 150px" }
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { title: "Column Settings", children: "Column Settings" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            CalculatedColumnPanel,
-            {
-              columns: gridSettings.columns,
-              dispatchColumnAction,
-              table: { module: "SIMUL", table: "instruments" }
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase8}-buttonBar`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core7.Button, { onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core7.Button, { onClick: handleApply, children: "Apply" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core7.Button, { onClick: handleSave, children: "Save" })
-    ] })
-  ] });
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ColumnFormattingPanel,
+      {
+        availableRenderers,
+        selectedCellRenderer,
+        column,
+        onChangeFormatting,
+        onChangeRenderer
+      }
+    ),
+    (0, import_vuu_utils15.isCalculatedColumn)(column.name) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ColumnExpressionPanel,
+      {
+        column,
+        onSave,
+        tableConfig,
+        vuuTable
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      {
+        className: `${classBase9}-buttonBar`,
+        "data-align": isNewCalculatedColumn ? "right" : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_core5.Button,
+            {
+              className: `${classBase9}-buttonNavPrev`,
+              variant: "secondary",
+              "data-icon": "arrow-left",
+              onClick: navigatePrevColumn,
+              children: "PREVIOUS"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_core5.Button,
+            {
+              className: `${classBase9}-buttonNavNext`,
+              variant: "secondary",
+              "data-icon": "arrow-right",
+              onClick: navigateNextColumn,
+              children: "NEXT"
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
 
 // src/datasource-stats/DatasourceStats.tsx
-var import_react13 = require("react");
-var import_classnames7 = __toESM(require("classnames"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var classBase9 = "vuuDatasourceStats";
+var import_react12 = require("react");
+var import_classnames6 = __toESM(require("classnames"), 1);
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var classBase10 = "vuuDatasourceStats";
 var numberFormatter = new Intl.NumberFormat();
 var DataSourceStats = ({
   className: classNameProp,
   dataSource
 }) => {
-  const [range, setRange] = (0, import_react13.useState)(dataSource.range);
-  const [size, setSize] = (0, import_react13.useState)(dataSource.size);
-  (0, import_react13.useEffect)(() => {
+  const [range, setRange] = (0, import_react12.useState)(dataSource.range);
+  const [size, setSize] = (0, import_react12.useState)(dataSource.size);
+  (0, import_react12.useEffect)(() => {
     setSize(dataSource.size);
     dataSource.on("resize", setSize);
     dataSource.on("range", setRange);
   }, [dataSource]);
-  const className = (0, import_classnames7.default)(classBase9, classNameProp);
+  const className = (0, import_classnames6.default)(classBase10, classNameProp);
   const from = numberFormatter.format(range.from);
   const to = numberFormatter.format(range.to - 1);
   const value = numberFormatter.format(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Showing rows" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${classBase9}-range`, children: from }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${classBase9}-range`, children: to }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "of" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `${classBase9}-size`, children: value })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase10}-label`, children: "Row count" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase10}-range`, children: from }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "-" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase10}-range`, children: to }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "of" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase10}-size`, children: value })
   ] });
 };
 
 // src/table-settings/TableSettingsPanel.tsx
-var import_core9 = require("@salt-ds/core");
+var import_core8 = require("@salt-ds/core");
 
 // src/table-settings/useTableSettings.ts
 var import_vuu_layout4 = require("@vuu-ui/vuu-layout");
 
 // ../vuu-table/src/table/ColumnResizer.tsx
-var import_react14 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 
 // ../vuu-table/src/table/context-menu/buildContextMenuDescriptors.ts
-var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
 
 // ../vuu-table/src/table/context-menu/useTableContextMenu.ts
-var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
-var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
-var { Average, Count, Distinct, High, Low, Sum } = import_vuu_utils11.AggregationType;
+var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+var { Average, Count, Distinct, High, Low, Sum } = import_vuu_utils18.AggregationType;
 
 // ../vuu-table/src/table/Table.tsx
 var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
-var import_core8 = require("@salt-ds/core");
+var import_core6 = require("@salt-ds/core");
 
 // ../vuu-table/src/table/RowBasedTable.tsx
-var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
-var import_react22 = require("react");
+var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+var import_react21 = require("react");
 
 // ../vuu-table/src/table/TableRow.tsx
-var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
-var import_classnames9 = __toESM(require("classnames"));
-var import_react17 = require("react");
+var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
+var import_classnames8 = __toESM(require("classnames"));
+var import_react16 = require("react");
 
 // ../vuu-table/src/table/TableCell.tsx
-var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
-var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
-var import_classnames8 = __toESM(require("classnames"));
-var import_react15 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var { KEY: KEY2 } = import_vuu_utils12.metadataKeys;
-var TableCell = (0, import_react15.memo)(
+var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
+var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
+var import_classnames7 = __toESM(require("classnames"));
+var import_react14 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var { KEY: KEY3 } = import_vuu_utils19.metadataKeys;
+var TableCell = (0, import_react14.memo)(
   ({
     className: classNameProp,
     column,
@@ -2764,7 +2785,7 @@ var TableCell = (0, import_react15.memo)(
     onClick,
     row
   }) => {
-    const labelFieldRef = (0, import_react15.useRef)(null);
+    const labelFieldRef = (0, import_react14.useRef)(null);
     const {
       align,
       CellRenderer,
@@ -2774,9 +2795,9 @@ var TableCell = (0, import_react15.memo)(
       resizing,
       valueFormatter
     } = column;
-    const [editing, setEditing] = (0, import_react15.useState)(false);
+    const [editing, setEditing] = (0, import_react14.useState)(false);
     const value = valueFormatter(row[key]);
-    const [editableValue, setEditableValue] = (0, import_react15.useState)(value);
+    const [editableValue, setEditableValue] = (0, import_react14.useState)(value);
     const handleTitleMouseDown = () => {
       var _a;
       (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
@@ -2786,7 +2807,7 @@ var TableCell = (0, import_react15.memo)(
         setEditing(true);
       }
     };
-    const handleClick = (0, import_react15.useCallback)(
+    const handleClick = (0, import_react14.useCallback)(
       (evt) => {
         onClick == null ? void 0 : onClick(evt, column);
       },
@@ -2807,15 +2828,15 @@ var TableCell = (0, import_react15.memo)(
         (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
       }
     };
-    const className = (0, import_classnames8.default)(classNameProp, {
+    const className = (0, import_classnames7.default)(classNameProp, {
       vuuAlignRight: align === "right",
       vuuPinFloating: pin === "floating",
       vuuPinLeft: pin === "left",
       vuuPinRight: pin === "right",
       "vuuTableCell-resizing": resizing
     }) || void 0;
-    const style = (0, import_vuu_utils12.getColumnStyle)(column);
-    return editable ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    const style = (0, import_vuu_utils19.getColumnStyle)(column);
+    return editable ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         className,
@@ -2823,8 +2844,8 @@ var TableCell = (0, import_react15.memo)(
         role: "cell",
         style,
         onKeyDown: handleTitleKeyDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_vuu_ui_controls3.EditableLabel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_vuu_ui_controls5.EditableLabel,
           {
             editing,
             value: editableValue,
@@ -2839,14 +2860,14 @@ var TableCell = (0, import_react15.memo)(
           "title"
         )
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         className,
         role: "cell",
         style,
         onClick: handleClick,
-        children: CellRenderer ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CellRenderer, { column, columnMap, row }) : value
+        children: CellRenderer ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CellRenderer, { column, columnMap, row }) : value
       }
     );
   },
@@ -2854,27 +2875,27 @@ var TableCell = (0, import_react15.memo)(
 );
 TableCell.displayName = "TableCell";
 function cellValuesAreEqual(prev, next) {
-  return prev.column === next.column && prev.onClick === next.onClick && prev.row[KEY2] === next.row[KEY2] && prev.row[prev.column.key] === next.row[next.column.key];
+  return prev.column === next.column && prev.onClick === next.onClick && prev.row[KEY3] === next.row[KEY3] && prev.row[prev.column.key] === next.row[next.column.key];
 }
 
 // ../vuu-table/src/table/TableGroupCell.tsx
-var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
-var import_react16 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var { IS_LEAF } = import_vuu_utils13.metadataKeys;
+var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
+var import_react15 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var { IS_LEAF } = import_vuu_utils20.metadataKeys;
 var TableGroupCell = ({ column, onClick, row }) => {
   const { columns } = column;
-  const [value, offset] = (0, import_vuu_utils13.getGroupValueAndOffset)(columns, row);
-  const handleClick = (0, import_react16.useCallback)(
+  const [value, offset] = (0, import_vuu_utils20.getGroupValueAndOffset)(columns, row);
+  const handleClick = (0, import_react15.useCallback)(
     (evt) => {
       onClick == null ? void 0 : onClick(evt, column);
     },
     [column, onClick]
   );
-  const style = (0, import_vuu_utils13.getColumnStyle)(column);
+  const style = (0, import_vuu_utils20.getColumnStyle)(column);
   const isLeaf = row[IS_LEAF];
-  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "vuuTableGroupCell-spacer" }, i));
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "vuuTableGroupCell-spacer" }, i));
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: "vuuTableGroupCell vuuPinLeft",
@@ -2883,18 +2904,19 @@ var TableGroupCell = ({ column, onClick, row }) => {
       style,
       children: [
         spacers,
-        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: value })
+        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: value })
       ]
     }
   );
 };
 
 // ../vuu-table/src/table/TableRow.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils14.metadataKeys;
-var classBase10 = "vuuTableRow";
-var TableRow = (0, import_react17.memo)(function Row({
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils21.metadataKeys;
+var { True, First, Last } = import_vuu_utils21.RowSelected;
+var classBase11 = "vuuTableRow";
+var TableRow = (0, import_react16.memo)(function Row({
   columnMap,
   columns,
   offset,
@@ -2906,14 +2928,16 @@ var TableRow = (0, import_react17.memo)(function Row({
   const {
     [IDX]: rowIndex,
     [IS_EXPANDED]: isExpanded,
-    [SELECTED]: isSelected
+    [SELECTED]: selectionStatus
   } = row;
-  const className = (0, import_classnames9.default)(classBase10, {
-    [`${classBase10}-even`]: rowIndex % 2 === 0,
-    [`${classBase10}-expanded`]: isExpanded,
-    [`${classBase10}-preSelected`]: isSelected === 2
+  const className = (0, import_classnames8.default)(classBase11, {
+    [`${classBase11}-even`]: rowIndex % 2 === 0,
+    [`${classBase11}-expanded`]: isExpanded,
+    [`${classBase11}-selected`]: selectionStatus & True,
+    [`${classBase11}-selectedStart`]: selectionStatus & First,
+    [`${classBase11}-selectedEnd`]: selectionStatus & Last
   });
-  const handleRowClick = (0, import_react17.useCallback)(
+  const handleRowClick = (0, import_react16.useCallback)(
     (evt) => {
       const rangeSelect = evt.shiftKey;
       const keepExistingSelection = evt.ctrlKey || evt.metaKey;
@@ -2921,19 +2945,19 @@ var TableRow = (0, import_react17.memo)(function Row({
     },
     [onClick, row]
   );
-  const handleGroupCellClick = (0, import_react17.useCallback)(
+  const handleGroupCellClick = (0, import_react16.useCallback)(
     (evt, column) => {
-      if ((0, import_vuu_utils14.isGroupColumn)(column) || (0, import_vuu_utils14.isJsonGroup)(column, row)) {
+      if ((0, import_vuu_utils21.isGroupColumn)(column) || (0, import_vuu_utils21.isJsonGroup)(column, row)) {
         evt.stopPropagation();
         onToggleGroup == null ? void 0 : onToggleGroup(row, column);
       }
     },
     [onToggleGroup, row]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
-      "aria-selected": isSelected === 1 ? true : void 0,
+      "aria-selected": selectionStatus & True ? true : void 0,
       "aria-rowindex": rowIndex,
       className,
       onClick: handleRowClick,
@@ -2942,12 +2966,12 @@ var TableRow = (0, import_react17.memo)(function Row({
         transform: `translate3d(0px, ${offset}px, 0px)`
       },
       children: [
-        virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "cell", style: { width: virtualColSpan } }) : null,
-        columns.filter(import_vuu_utils14.notHidden).map((column) => {
-          const isGroup = (0, import_vuu_utils14.isGroupColumn)(column);
-          const isJsonCell = (0, import_vuu_utils14.isJsonColumn)(column);
+        virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "cell", style: { width: virtualColSpan } }) : null,
+        columns.filter(import_vuu_utils21.notHidden).map((column) => {
+          const isGroup = (0, import_vuu_utils21.isGroupColumn)(column);
+          const isJsonCell = (0, import_vuu_utils21.isJsonColumn)(column);
           const Cell = isGroup ? TableGroupCell : TableCell;
-          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             Cell,
             {
               column,
@@ -2964,57 +2988,57 @@ var TableRow = (0, import_react17.memo)(function Row({
 });
 
 // ../vuu-table/src/table/TableGroupHeaderCell.tsx
-var import_classnames10 = __toESM(require("classnames"));
-var import_react19 = require("react");
+var import_classnames9 = __toESM(require("classnames"));
+var import_react18 = require("react");
 
 // ../vuu-table/src/table/useTableColumnResize.tsx
-var import_react18 = require("react");
+var import_react17 = require("react");
 
 // ../vuu-table/src/table/TableGroupHeaderCell.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 
 // ../vuu-table/src/table/TableHeaderCell.tsx
-var import_classnames13 = __toESM(require("classnames"));
-var import_react21 = require("react");
+var import_classnames12 = __toESM(require("classnames"));
+var import_react20 = require("react");
 
 // ../vuu-table/src/table/SortIndicator.tsx
-var import_classnames11 = __toESM(require("classnames"));
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_classnames10 = __toESM(require("classnames"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
 
 // ../vuu-table/src/table/TableHeaderCell.tsx
 var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
 
 // ../vuu-table/src/table/filter-indicator.tsx
 var import_vuu_popups = require("@vuu-ui/vuu-popups");
-var import_classnames12 = __toESM(require("classnames"));
-var import_react20 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_classnames11 = __toESM(require("classnames"));
+var import_react19 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 
 // ../vuu-table/src/table/TableHeaderCell.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 
 // ../vuu-table/src/table/RowBasedTable.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var { RENDER_IDX } = import_vuu_utils15.metadataKeys;
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var { RENDER_IDX } = import_vuu_utils22.metadataKeys;
 
 // ../vuu-table/src/table/useTable.ts
 var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
-var import_react33 = require("react");
+var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
+var import_react32 = require("react");
 
 // ../vuu-table/src/table/useDataSource.ts
 var import_vuu_data_react2 = require("@vuu-ui/vuu-data-react");
-var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
-var import_react23 = require("react");
-var { SELECTED: SELECTED2 } = import_vuu_utils16.metadataKeys;
+var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
+var import_react22 = require("react");
+var { SELECTED: SELECTED2 } = import_vuu_utils23.metadataKeys;
 
 // ../vuu-table/src/table/useDraggableColumn.ts
-var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
-var import_react24 = require("react");
+var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
+var import_react23 = require("react");
 
 // ../vuu-table/src/table/useKeyboardNavigation.ts
-var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
-var import_react25 = require("react");
+var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
+var import_react24 = require("react");
 
 // ../vuu-table/src/table/keyUtils.ts
 function union(set1, ...sets) {
@@ -3070,11 +3094,11 @@ var specialKeys = union(
 );
 
 // ../vuu-table/src/table/useMeasuredContainer.ts
-var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
-var import_react27 = require("react");
+var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
+var import_react26 = require("react");
 
 // ../vuu-table/src/table/useResizeObserver.ts
-var import_react26 = require("react");
+var import_react25 = require("react");
 var observedMap = /* @__PURE__ */ new Map();
 var getTargetSize = (element, size, dimension) => {
   switch (dimension) {
@@ -3126,40 +3150,40 @@ var resizeObserver = new ResizeObserver((entries) => {
 });
 
 // ../vuu-table/src/table/useSelection.ts
-var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
-var import_react28 = require("react");
-var { IDX: IDX2 } = import_vuu_utils19.metadataKeys;
+var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
+var import_react27 = require("react");
+var { IDX: IDX2 } = import_vuu_utils26.metadataKeys;
 
 // ../vuu-table/src/table/useTableModel.ts
-var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
-var import_react29 = require("react");
-var KEY_OFFSET = import_vuu_utils20.metadataKeys.count;
+var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
+var import_react28 = require("react");
+var KEY_OFFSET = import_vuu_utils27.metadataKeys.count;
 
 // ../vuu-table/src/table/useTableScroll.ts
-var import_react30 = require("react");
+var import_react29 = require("react");
 
-// ../vuu-table/src/table/useTableViewport.ts
-var import_react31 = require("react");
-var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
+// ../vuu-table/src/table-next/useTableViewport.ts
+var import_react30 = require("react");
+var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
 
 // ../vuu-table/src/table/useVirtualViewport.ts
-var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
-var import_react32 = require("react");
+var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
+var import_react31 = require("react");
 
 // ../vuu-table/src/table/useTable.ts
-var { KEY: KEY3, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils23.metadataKeys;
+var { KEY: KEY4, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils30.metadataKeys;
 
 // ../vuu-table/src/table/Table.tsx
-var import_classnames14 = __toESM(require("classnames"));
-var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_classnames13 = __toESM(require("classnames"));
+var import_vuu_utils31 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 
 // ../vuu-table/src/table/cell-renderers/json-cell/JsonCell.tsx
-var import_classnames15 = __toESM(require("classnames"));
-var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var classBase11 = "vuuJsonCell";
-var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY4 } = import_vuu_utils25.metadataKeys;
+var import_classnames14 = __toESM(require("classnames"));
+var import_vuu_utils32 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var classBase12 = "vuuJsonCell";
+var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY5 } = import_vuu_utils32.metadataKeys;
 var localKey = (key) => {
   const pos = key.lastIndexOf("|");
   if (pos === -1) {
@@ -3175,133 +3199,189 @@ var JsonCell = ({ column, row }) => {
   } = column;
   let value = row[columnKey];
   let isToggle = false;
-  if ((0, import_vuu_utils25.isJsonAttribute)(value)) {
+  if ((0, import_vuu_utils32.isJsonAttribute)(value)) {
     value = value.slice(0, -1);
     isToggle = true;
   }
-  const rowKey = localKey(row[KEY4]);
-  const className = (0, import_classnames15.default)({
-    [`${classBase11}-name`]: rowKey === value,
-    [`${classBase11}-value`]: rowKey !== value,
-    [`${classBase11}-group`]: isToggle
+  const rowKey = localKey(row[KEY5]);
+  const className = (0, import_classnames14.default)({
+    [`${classBase12}-name`]: rowKey === value,
+    [`${classBase12}-value`]: rowKey !== value,
+    [`${classBase12}-group`]: isToggle
   });
   if (isToggle) {
     const toggleIcon = row[IS_EXPANDED3] ? "minus-box" : "plus-box";
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: `${classBase11}-value`, children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: `${classBase11}-toggle`, "data-icon": toggleIcon })
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `${classBase12}-value`, children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `${classBase12}-toggle`, "data-icon": toggleIcon })
     ] });
   } else if (value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className, children: value });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className, children: value });
   } else {
     return null;
   }
 };
-(0, import_vuu_utils25.registerComponent)("json", JsonCell, "cell-renderer", {});
+(0, import_vuu_utils32.registerComponent)("json", JsonCell, "cell-renderer", {
+  description: "JSON formatter",
+  label: "JSON formatter",
+  serverDataType: "json"
+});
 
-// ../vuu-table/src/table-next/TableNext.tsx
-var import_vuu_popups7 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils31 = require("@vuu-ui/vuu-utils");
+// ../vuu-table/src/table-next/header-cell/GroupHeaderCell.tsx
+var import_classnames17 = __toESM(require("classnames"));
+var import_react37 = require("react");
 
-// ../vuu-table/src/table-next/HeaderCell.tsx
-var import_react38 = require("react");
+// ../vuu-table/src/table-next/column-resizing/ColumnResizer.tsx
+var import_react33 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 
-// ../vuu-table/src/table-next/useCell.ts
-var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
-var import_classnames16 = __toESM(require("classnames"));
+// ../vuu-table/src/table-next/column-resizing/useTableColumnResize.tsx
 var import_react34 = require("react");
-var useCell = (column, classBase14, isHeader) => (
+
+// ../vuu-table/src/table-next/useCell.ts
+var import_vuu_utils33 = require("@vuu-ui/vuu-utils");
+var import_classnames15 = __toESM(require("classnames"));
+var import_react35 = require("react");
+var useCell = (column, classBase19, isHeader) => (
   // TODO measure perf without the memo, might not be worth the cost
-  (0, import_react34.useMemo)(() => {
-    const className = (0, import_classnames16.default)(classBase14, {
+  (0, import_react35.useMemo)(() => {
+    const className = (0, import_classnames15.default)(classBase19, {
       vuuPinFloating: column.pin === "floating",
       vuuPinLeft: column.pin === "left",
       vuuPinRight: column.pin === "right",
       vuuEndPin: isHeader && column.endPin,
-      [`${classBase14}-resizing`]: column.resizing,
-      [`${classBase14}-right`]: column.align === "right"
+      // [`${classBase}-resizing`]: column.resizing,
+      [`${classBase19}-editable`]: column.editable,
+      [`${classBase19}-right`]: column.align === "right"
     });
-    const style = (0, import_vuu_utils26.getColumnStyle)(column);
+    const style = (0, import_vuu_utils33.getColumnStyle)(column);
     return {
       className,
       style
     };
-  }, [column, classBase14, isHeader])
+  }, [column, classBase19, isHeader])
 );
 
-// ../vuu-table/src/table-next/ColumnMenu.tsx
-var import_vuu_popups5 = require("@vuu-ui/vuu-popups");
-var import_classnames17 = __toESM(require("classnames"));
-var import_react35 = require("react");
+// ../vuu-table/src/table-next/column-header-pill/ColumnHeaderPill.tsx
+var import_classnames16 = __toESM(require("classnames"));
+var import_react36 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+
+// ../vuu-table/src/table-next/column-header-pill/GroupColumnPill.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 
-// ../vuu-table/src/table-next/column-resizing/ColumnResizer.tsx
-var import_react36 = require("react");
+// ../vuu-table/src/table-next/column-header-pill/SortIndicator.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
 
-// ../vuu-table/src/table-next/column-resizing/useTableColumnResize.tsx
-var import_react37 = require("react");
-
-// ../vuu-table/src/table-next/HeaderCell.tsx
+// ../vuu-table/src/table-next/header-cell/GroupHeaderCell.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react38 = require("react");
 
-// ../vuu-table/src/table-next/Row.tsx
-var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
+// ../vuu-table/src/table-next/header-cell/GroupHeaderCellNext.tsx
 var import_classnames18 = __toESM(require("classnames"));
+var import_react39 = require("react");
+var import_vuu_layout = require("@vuu-ui/vuu-layout");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var import_react40 = require("react");
 
-// ../vuu-table/src/table-next/TableCell.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var TableCell2 = ({ column, row }) => {
-  const { className, style } = useCell(column, "vuuTableNextCell");
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className, role: "cell", style, children: row[column.key] });
-};
+// ../vuu-table/src/table-next/header-cell/HeaderCell.tsx
+var import_react42 = require("react");
 
-// ../vuu-table/src/table-next/TableGroupCell.tsx
-var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
-var import_react39 = require("react");
+// ../vuu-table/src/table-next/column-menu/ColumnMenu.tsx
+var import_vuu_popups5 = require("@vuu-ui/vuu-popups");
+var import_classnames19 = __toESM(require("classnames"));
+var import_react41 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var { IS_LEAF: IS_LEAF3 } = import_vuu_utils27.metadataKeys;
+
+// ../vuu-table/src/table-next/header-cell/HeaderCell.tsx
+var import_classnames20 = __toESM(require("classnames"));
+var import_jsx_runtime29 = require("react/jsx-runtime");
+
+// ../vuu-table/src/table-next/TableNext.tsx
+var import_vuu_popups7 = require("@vuu-ui/vuu-popups");
+var import_vuu_utils43 = require("@vuu-ui/vuu-utils");
+var import_classnames23 = __toESM(require("classnames"));
+var import_react56 = require("react");
+
+// ../vuu-table/src/table-next/Row.tsx
+var import_vuu_utils36 = require("@vuu-ui/vuu-utils");
+var import_classnames22 = __toESM(require("classnames"));
+var import_react45 = require("react");
+
+// ../vuu-table/src/table-next/table-cell/TableCell.tsx
+var import_vuu_utils34 = require("@vuu-ui/vuu-utils");
+var import_react43 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var { IDX: IDX3 } = import_vuu_utils34.metadataKeys;
+var classBase13 = "vuuTableNextCell";
+var TableCell2 = ({
+  column,
+  columnMap,
+  onDataEdited,
+  row
+}) => {
+  const { className, style } = useCell(column, classBase13);
+  const { CellRenderer, name: name2, valueFormatter } = column;
+  const dataIdx = columnMap[name2];
+  const handleDataItemEdited = (0, import_react43.useCallback)(
+    (value) => {
+      onDataEdited == null ? void 0 : onDataEdited(row[IDX3], name2, value);
+      return true;
+    },
+    [name2, onDataEdited, row]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className, role: "cell", style, children: CellRenderer ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    CellRenderer,
+    {
+      column,
+      columnMap,
+      onCommit: handleDataItemEdited,
+      row
+    }
+  ) : valueFormatter(row[dataIdx]) });
+};
+
+// ../vuu-table/src/table-next/table-cell/TableGroupCell.tsx
+var import_vuu_utils35 = require("@vuu-ui/vuu-utils");
+var import_react44 = require("react");
+var import_classnames21 = __toESM(require("classnames"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var { IS_LEAF: IS_LEAF3 } = import_vuu_utils35.metadataKeys;
+var classBase14 = "vuuTableNextGroupCell";
 var TableGroupCell2 = ({ column, onClick, row }) => {
   const { columns } = column;
-  const [value, offset] = (0, import_vuu_utils27.getGroupValueAndOffset)(columns, row);
-  const { className, style } = useCell(column, "vuuTable2-groupCell");
-  const handleClick = (0, import_react39.useCallback)(
+  const [value, offset] = (0, import_vuu_utils35.getGroupValueAndOffset)(columns, row);
+  const { className, style } = useCell(column, classBase14);
+  const handleClick = (0, import_react44.useCallback)(
     (evt) => {
       onClick == null ? void 0 : onClick(evt, column);
     },
     [column, onClick]
   );
   const isLeaf = row[IS_LEAF3];
-  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "vuuTable2-groupCell-spacer" }, i));
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: `${classBase14}-spacer` }, i));
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
-      className,
+      className: (0, import_classnames21.default)(className, "vuuTableNextCell"),
       role: "cell",
       style,
       onClick: isLeaf ? void 0 : handleClick,
       children: [
         spacers,
-        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          "span",
-          {
-            className: "vuuTable2-groupCell-toggle",
-            "data-icon": "vuu-triangle-right"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: value })
+        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: `${classBase14}-toggle`, "data-icon": "triangle-right" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: value })
       ]
     }
   );
 };
 
 // ../vuu-table/src/table-next/Row.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var import_react41 = require("react");
-var { IDX: IDX3, IS_EXPANDED: IS_EXPANDED4, SELECTED: SELECTED3 } = import_vuu_utils28.metadataKeys;
-var classBase12 = "vuuTableNextRow";
-var Row2 = (0, import_react40.memo)(
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react46 = require("react");
+var { IDX: IDX4, IS_EXPANDED: IS_EXPANDED4, SELECTED: SELECTED3 } = import_vuu_utils36.metadataKeys;
+var classBase15 = "vuuTableNextRow";
+var Row2 = (0, import_react45.memo)(
   ({
     className: classNameProp,
     columnMap,
@@ -3309,15 +3389,17 @@ var Row2 = (0, import_react40.memo)(
     row,
     offset,
     onClick,
+    onDataEdited,
     onToggleGroup,
+    zebraStripes = false,
     ...htmlAttributes
   }) => {
     const {
-      [IDX3]: rowIndex,
+      [IDX4]: rowIndex,
       [IS_EXPANDED4]: isExpanded,
       [SELECTED3]: selectionStatus
     } = row;
-    const handleRowClick = (0, import_react40.useCallback)(
+    const handleRowClick = (0, import_react45.useCallback)(
       (evt) => {
         const rangeSelect = evt.shiftKey;
         const keepExistingSelection = evt.ctrlKey || evt.metaKey;
@@ -3325,43 +3407,69 @@ var Row2 = (0, import_react40.memo)(
       },
       [onClick, row]
     );
-    const { True, First, Last } = import_vuu_utils28.RowSelected;
-    const className = (0, import_classnames18.default)(classBase12, classNameProp, {
-      [`${classBase12}-even`]: rowIndex % 2 === 0,
-      [`${classBase12}-expanded`]: isExpanded,
-      [`${classBase12}-selected`]: selectionStatus & True,
-      [`${classBase12}-selectedStart`]: selectionStatus & First,
-      [`${classBase12}-selectedEnd`]: selectionStatus & Last
+    const { True: True2, First: First2, Last: Last2 } = import_vuu_utils36.RowSelected;
+    const className = (0, import_classnames22.default)(classBase15, classNameProp, {
+      [`${classBase15}-even`]: zebraStripes && rowIndex % 2 === 0,
+      [`${classBase15}-expanded`]: isExpanded,
+      [`${classBase15}-selected`]: selectionStatus & True2,
+      [`${classBase15}-selectedStart`]: selectionStatus & First2,
+      [`${classBase15}-selectedEnd`]: selectionStatus & Last2
     });
-    const style = typeof offset === "number" ? { transform: `translate3d(0px, ${offset}px, 0px)` } : void 0;
-    return /* @__PURE__ */ (0, import_react41.createElement)(
+    const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
+    const handleGroupCellClick = (0, import_react45.useCallback)(
+      (evt, column) => {
+        if ((0, import_vuu_utils36.isGroupColumn)(column) || (0, import_vuu_utils36.isJsonGroup)(column, row)) {
+          evt.stopPropagation();
+          onToggleGroup == null ? void 0 : onToggleGroup(row, column);
+        }
+      },
+      [onToggleGroup, row]
+    );
+    return /* @__PURE__ */ (0, import_react46.createElement)(
       "div",
       {
         ...htmlAttributes,
+        "aria-rowindex": row[0],
         key: `row-${row[0]}`,
         role: "row",
         className,
         onClick: handleRowClick,
         style
       },
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: `${classBase12}-selectionDecorator vuuStickyLeft` }),
-      columns.filter(import_vuu_utils28.notHidden).map((column) => {
-        const isGroup = (0, import_vuu_utils28.isGroupColumn)(column);
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: `${classBase15}-selectionDecorator vuuStickyLeft` }),
+      columns.filter(import_vuu_utils36.notHidden).map((column) => {
+        const isGroup = (0, import_vuu_utils36.isGroupColumn)(column);
+        const isJsonCell = (0, import_vuu_utils36.isJsonColumn)(column);
         const Cell = isGroup ? TableGroupCell2 : TableCell2;
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Cell, { column, row }, column.key);
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          Cell,
+          {
+            column,
+            columnMap,
+            onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
+            onDataEdited,
+            row
+          },
+          column.key
+        );
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: `${classBase12}-selectionDecorator vuuStickyRight` })
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: `${classBase15}-selectionDecorator vuuStickyRight` })
     );
   }
 );
 Row2.displayName = "Row";
 
 // ../vuu-table/src/table-next/useTableNext.ts
-var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
-var import_vuu_popups6 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
+var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
+var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
+
+// ../vuu-table/src/table-next/useKeyboardNavigation.ts
 var import_react47 = require("react");
 
+// ../vuu-table/src/table-next/useTableNext.ts
+var import_vuu_utils42 = require("@vuu-ui/vuu-utils");
+var import_react55 = require("react");
+
 // ../vuu-table/src/table-next/table-config.ts
 var updateTableConfig = (config, action) => {
   switch (action.type) {
@@ -3385,65 +3493,229 @@ var updateTableConfig = (config, action) => {
 };
 
 // ../vuu-table/src/table-next/useDataSource.ts
-var import_react42 = require("react");
+var import_src = require("@vuu-ui/vuu-data-react/src");
+var import_vuu_utils38 = require("@vuu-ui/vuu-utils");
+var import_react48 = require("react");
+
+// ../vuu-table/src/table-next/moving-window.ts
+var import_vuu_utils37 = require("@vuu-ui/vuu-utils");
+var { SELECTED: SELECTED4 } = import_vuu_utils37.metadataKeys;
 
 // ../vuu-table/src/table-next/useInitialValue.ts
-var import_react43 = require("react");
+var import_react49 = require("react");
+
+// ../vuu-table/src/table-next/useTableContextMenu.ts
+var import_vuu_utils39 = require("@vuu-ui/vuu-utils");
+var import_react50 = require("react");
+var import_vuu_popups6 = require("@vuu-ui/vuu-popups");
+
+// ../vuu-table/src/table-next/useCellEditing.ts
+var import_vuu_utils40 = require("@vuu-ui/vuu-utils");
+var import_react51 = require("react");
 
 // ../vuu-table/src/table-next/useTableModel.ts
-var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
-var import_react44 = require("react");
-var { info } = (0, import_vuu_utils29.logger)("useTableModel");
-var KEY_OFFSET2 = import_vuu_utils29.metadataKeys.count;
+var import_vuu_utils41 = require("@vuu-ui/vuu-utils");
+var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
+var import_react52 = require("react");
+var { info } = (0, import_vuu_utils41.logger)("useTableModel");
+var KEY_OFFSET2 = import_vuu_utils41.metadataKeys.count;
 
 // ../vuu-table/src/table-next/useTableScroll.ts
-var import_react45 = require("react");
+var import_react53 = require("react");
 
 // ../vuu-table/src/table-next/useVirtualViewport.ts
-var import_react46 = require("react");
+var import_react54 = require("react");
+
+// ../vuu-table/src/table-next/useTableNext.ts
+var { KEY: KEY6, IS_EXPANDED: IS_EXPANDED5, IS_LEAF: IS_LEAF4 } = import_vuu_utils42.metadataKeys;
 
 // ../vuu-table/src/table-next/TableNext.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var { IDX: IDX4, RENDER_IDX: RENDER_IDX2 } = import_vuu_utils31.metadataKeys;
+var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react57 = require("react");
+var { IDX: IDX5, RENDER_IDX: RENDER_IDX2 } = import_vuu_utils43.metadataKeys;
+
+// ../vuu-table/src/table-next/cell-renderers/dropdown-cell/DropdownCell.tsx
+var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils44 = require("@vuu-ui/vuu-utils");
+var import_react58 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var classBase16 = "vuuTableDropdownCell";
+var openKeys = ["Enter", " "];
+var DropdownCell = ({ column, columnMap, row }) => {
+  var _a, _b, _c;
+  const values = (0, import_vuu_utils44.isTypeDescriptor)(column.type) && (0, import_vuu_utils44.isColumnTypeRenderer)((_a = column.type) == null ? void 0 : _a.renderer) ? (_c = (_b = column.type) == null ? void 0 : _b.renderer) == null ? void 0 : _c.values : [];
+  const dataIdx = columnMap[column.name];
+  const [value, setValue] = (0, import_react58.useState)(row[dataIdx]);
+  const handleSelectionChange = (0, import_react58.useCallback)(
+    (evt, selectedItem) => {
+      if (selectedItem) {
+        setValue(selectedItem);
+      }
+    },
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_vuu_ui_controls9.Dropdown,
+    {
+      className: classBase16,
+      onSelectionChange: handleSelectionChange,
+      openKeys,
+      selected: value,
+      source: values,
+      width: column.width - 17
+    }
+  );
+};
+(0, import_vuu_utils44.registerComponent)("dropdown-cell", DropdownCell, "cell-renderer", {});
+
+// ../vuu-table/src/table-next/cell-renderers/input-cell/InputCell.tsx
+var import_vuu_utils45 = require("@vuu-ui/vuu-utils");
+var import_core7 = require("@salt-ds/core");
+var import_vuu_ui_controls10 = require("@vuu-ui/vuu-ui-controls");
+var import_classnames24 = __toESM(require("classnames"));
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var classBase17 = "vuuTableInputCell";
+var WarnCommit = () => {
+  console.warn(
+    "onCommit handler has not been provided to InputCell cell renderer"
+  );
+  return true;
+};
+var InputCell = ({
+  column,
+  columnMap,
+  onCommit = WarnCommit,
+  row
+}) => {
+  const dataIdx = columnMap[column.name];
+  const {
+    align = "left",
+    clientSideEditValidationCheck,
+    valueFormatter
+  } = column;
+  const { warningMessage, ...editProps } = (0, import_vuu_ui_controls10.useEditableText)({
+    initialValue: valueFormatter(row[dataIdx]),
+    onCommit,
+    clientSideEditValidationCheck
+  });
+  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: `${classBase17}-icon`, "data-icon": "error" }) : void 0;
+  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: `${classBase17}-icon`, "data-icon": "error" }) : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_core7.Input,
+    {
+      ...editProps,
+      className: (0, import_classnames24.default)(classBase17, {
+        [`${classBase17}-error`]: warningMessage !== void 0
+      }),
+      endAdornment,
+      startAdornment
+    }
+  );
+};
+(0, import_vuu_utils45.registerComponent)("input-cell", InputCell, "cell-renderer", {});
 
 // src/table-settings/useTableSettings.ts
-var import_react48 = require("react");
+var import_vuu_utils46 = require("@vuu-ui/vuu-utils");
+var import_react59 = require("react");
+var sortOrderFromAvailableColumns = (availableColumns, columns) => {
+  const sortedColumns = [];
+  for (const { name: name2 } of availableColumns) {
+    const column = columns.find((col) => col.name === name2);
+    if (column) {
+      sortedColumns.push(column);
+    }
+  }
+  return sortedColumns;
+};
 var buildColumnItems = (availableColumns, configuredColumns) => {
-  return availableColumns.map(({ name, serverDataType }) => {
-    const configuredColumn = configuredColumns.find((col) => col.name === name);
+  return availableColumns.map(({ name: name2, serverDataType }) => {
+    const configuredColumn = configuredColumns.find((col) => col.name === name2);
     return {
       hidden: configuredColumn == null ? void 0 : configuredColumn.hidden,
+      isCalculated: (0, import_vuu_utils46.isCalculatedColumn)(name2),
       label: configuredColumn == null ? void 0 : configuredColumn.label,
-      name,
+      name: name2,
       serverDataType,
       subscribed: configuredColumn !== void 0
     };
   });
 };
 var useTableSettings = ({
-  availableColumns,
+  availableColumns: availableColumnsProp,
   onConfigChange,
+  onDataSourceConfigChange,
   tableConfig: tableConfigProp
 }) => {
-  const [tableConfig, setTableConfig] = (0, import_react48.useState)(tableConfigProp);
-  const columnItems = (0, import_react48.useMemo)(
+  const [{ availableColumns, tableConfig }, setColumnState] = (0, import_react59.useState)({
+    availableColumns: availableColumnsProp,
+    tableConfig: tableConfigProp
+  });
+  const columnItems = (0, import_react59.useMemo)(
     () => buildColumnItems(availableColumns, tableConfig.columns),
     [availableColumns, tableConfig.columns]
   );
-  const handleMoveListItem = (0, import_react48.useCallback)(
+  const handleMoveListItem = (0, import_react59.useCallback)(
     (fromIndex, toIndex) => {
-      console.log(`move list item from ${fromIndex} to ${toIndex}`);
+      setColumnState((state) => {
+        const newAvailableColumns = (0, import_vuu_utils46.moveItem)(
+          state.availableColumns,
+          fromIndex,
+          toIndex
+        );
+        const newColumns = sortOrderFromAvailableColumns(
+          newAvailableColumns,
+          tableConfig.columns
+        );
+        return {
+          availableColumns: newAvailableColumns,
+          tableConfig: {
+            ...state.tableConfig,
+            columns: newColumns
+          }
+        };
+      });
     },
-    []
+    [tableConfig.columns]
   );
-  const handleColumnChange = (0, import_react48.useCallback)(
-    (name, property, value) => {
-      const columnItem = columnItems.find((col) => col.name === name);
+  const handleColumnChange = (0, import_react59.useCallback)(
+    (name2, property, value) => {
+      const columnItem = columnItems.find((col) => col.name === name2);
       if (property === "subscribed") {
-        console.log(`unsubscribe from ${name}`);
+        if (columnItem == null ? void 0 : columnItem.subscribed) {
+          const subscribedColumns = tableConfig.columns.filter((col) => col.name !== name2).map((col) => col.name);
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: {
+              ...tableConfig,
+              columns: tableConfig.columns.filter(
+                (0, import_vuu_utils46.subscribedOnly)(subscribedColumns)
+              )
+            }
+          }));
+          onDataSourceConfigChange({
+            columns: subscribedColumns
+          });
+        } else {
+          const newConfig = {
+            ...tableConfig,
+            columns: (0, import_vuu_utils46.addColumnToSubscribedColumns)(
+              tableConfig.columns,
+              availableColumns,
+              name2
+            )
+          };
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: newConfig
+          }));
+          const subscribedColumns = newConfig.columns.map((col) => col.name);
+          onDataSourceConfigChange({
+            columns: subscribedColumns
+          });
+        }
       } else if (columnItem == null ? void 0 : columnItem.subscribed) {
-        const column = tableConfig.columns.find((col) => col.name === name);
+        const column = tableConfig.columns.find((col) => col.name === name2);
         if (column) {
           const newConfig = updateTableConfig(tableConfig, {
             type: "column-prop",
@@ -3451,20 +3723,39 @@ var useTableSettings = ({
             column,
             value
           });
-          setTableConfig(newConfig);
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: newConfig
+          }));
         }
       }
     },
-    [columnItems, tableConfig]
+    [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
   );
-  const handleChangeColumnLabels = (0, import_react48.useCallback)((evt) => {
+  const handleChangeColumnLabels = (0, import_react59.useCallback)((evt) => {
     const { value } = evt.target;
     const columnFormatHeader = value === "0" ? void 0 : value === "1" ? "capitalize" : "uppercase";
-    setTableConfig((config) => ({
-      ...config,
-      columnFormatHeader
+    setColumnState((state) => ({
+      ...state,
+      tableConfig: {
+        ...state.tableConfig,
+        columnFormatHeader
+      }
     }));
   }, []);
+  const handleChangeTableAttribute = (0, import_react59.useCallback)(
+    (evt) => {
+      const { ariaChecked, value } = evt.target;
+      setColumnState((state) => ({
+        ...state,
+        tableConfig: {
+          ...state.tableConfig,
+          [value]: ariaChecked !== "true"
+        }
+      }));
+    },
+    []
+  );
   (0, import_vuu_layout4.useLayoutEffectSkipFirst)(() => {
     onConfigChange == null ? void 0 : onConfigChange(tableConfig);
   }, [onConfigChange, tableConfig]);
@@ -3473,59 +3764,66 @@ var useTableSettings = ({
     columnItems,
     columnLabelsValue,
     onChangeColumnLabels: handleChangeColumnLabels,
+    onChangeTableAttribute: handleChangeTableAttribute,
     onColumnChange: handleColumnChange,
-    onMoveListItem: handleMoveListItem
+    onMoveListItem: handleMoveListItem,
+    tableConfig
   };
 };
 
 // src/table-settings/TableSettingsPanel.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var classBase13 = "vuuTableSettingsPanel";
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var classBase18 = "vuuTableSettingsPanel";
 var TableSettingsPanel = ({
   availableColumns,
+  onAddCalculatedColumn,
   onConfigChange,
-  tableConfig,
+  onDataSourceConfigChange,
+  tableConfig: tableConfigProp,
   ...htmlAttributes
 }) => {
   const {
     columnItems,
     columnLabelsValue,
     onChangeColumnLabels,
+    onChangeTableAttribute,
     onColumnChange,
-    onMoveListItem
+    onMoveListItem,
+    tableConfig
   } = useTableSettings({
     availableColumns,
     onConfigChange,
-    tableConfig
+    onDataSourceConfigChange,
+    tableConfig: tableConfigProp
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ...htmlAttributes, className: classBase13, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core9.FormField, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core9.FormFieldLabel, { children: "Column Labels" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-        import_core9.ToggleButtonGroup,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...htmlAttributes, className: classBase18, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core8.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core8.FormFieldLabel, { children: "Column Labels" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        import_core8.ToggleButtonGroup,
         {
           className: "vuuToggleButtonGroup",
           onChange: onChangeColumnLabels,
           value: columnLabelsValue,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-              import_core9.ToggleButton,
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              import_core8.ToggleButton,
               {
                 className: "vuuIconToggleButton",
                 "data-icon": "text-strikethrough",
                 value: 0
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-              import_core9.ToggleButton,
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              import_core8.ToggleButton,
               {
                 className: "vuuIconToggleButton",
                 "data-icon": "text-Tt",
                 value: 1
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-              import_core9.ToggleButton,
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              import_core8.ToggleButton,
               {
                 className: "vuuIconToggleButton",
                 "data-icon": "text-T",
@@ -3536,18 +3834,159 @@ var TableSettingsPanel = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core9.FormField, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core9.FormFieldLabel, { children: "Default Column Width" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core9.Input, { className: "vuuInput" })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core8.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core8.FormFieldLabel, { children: "Grid separators" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "saltToggleButtonGroup vuuToggleButtonGroup saltToggleButtonGroup-horizontal vuuGridSeparators", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          import_core8.ToggleButton,
+          {
+            className: "vuuIconToggleButton",
+            "data-icon": "row-striping",
+            selected: tableConfig.zebraStripes,
+            onChange: onChangeTableAttribute,
+            value: "zebraStripes"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          import_core8.ToggleButton,
+          {
+            className: "vuuIconToggleButton",
+            "data-icon": "row-lines",
+            selected: tableConfig.rowSeparators,
+            onChange: onChangeTableAttribute,
+            value: "rowSeparators"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          import_core8.ToggleButton,
+          {
+            className: "vuuIconToggleButton",
+            "data-icon": "col-lines",
+            selected: tableConfig.columnSeparators,
+            onChange: onChangeTableAttribute,
+            value: "columnSeparators"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core8.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core8.FormFieldLabel, { children: "Default Column Width" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core8.Input, { className: "vuuInput" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       ColumnList,
       {
         columnItems,
         onChange: onColumnChange,
         onMoveListItem
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: `${classBase18}-calculatedButtonbar`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core8.Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: `${classBase18}-calculatedLabel`, children: "Add calculated column" })
+    ] })
   ] });
 };
+
+// src/useTableAndColumnSettings.ts
+var import_vuu_layout5 = require("@vuu-ui/vuu-layout");
+var import_vuu_utils47 = require("@vuu-ui/vuu-utils");
+var import_react60 = require("react");
+var useTableAndColumnSettings = ({
+  availableColumns: availableColumnsProps,
+  onAvailableColumnsChange,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  onDataSourceConfigChange,
+  tableConfig
+}) => {
+  const dispatchLayoutAction = (0, import_vuu_layout5.useLayoutProviderDispatch)();
+  const showTableSettingsRef = (0, import_react60.useRef)();
+  const [availableColumns, setAvailableColumns] = (0, import_react60.useState)(
+    availableColumnsProps
+  );
+  const showContextPanel = (0, import_react60.useCallback)(
+    (componentType, title, props) => {
+      dispatchLayoutAction({
+        type: "set-props",
+        path: "#context-panel",
+        props: {
+          expanded: true,
+          content: {
+            type: componentType,
+            props
+          },
+          title
+        }
+      });
+    },
+    [dispatchLayoutAction]
+  );
+  const handleCreateCalculatedColumn = (0, import_react60.useCallback)(
+    (column) => {
+      const newAvailableColumns = availableColumns.concat({
+        name: column.name,
+        serverDataType: (0, import_vuu_utils47.getCalculatedColumnType)(column)
+      });
+      setAvailableColumns(newAvailableColumns);
+      onAvailableColumnsChange == null ? void 0 : onAvailableColumnsChange(newAvailableColumns);
+      requestAnimationFrame(() => {
+        var _a;
+        (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
+      });
+      onCreateCalculatedColumn(column);
+    },
+    [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
+  );
+  const showColumnSettingsPanel = (0, import_react60.useCallback)(
+    (action) => {
+      showContextPanel("ColumnSettings", "Column Settings", {
+        column: action.column,
+        onConfigChange,
+        onCreateCalculatedColumn: handleCreateCalculatedColumn,
+        tableConfig,
+        vuuTable: action.vuuTable
+      });
+    },
+    [
+      handleCreateCalculatedColumn,
+      onConfigChange,
+      showContextPanel,
+      tableConfig
+    ]
+  );
+  const handleAddCalculatedColumn = (0, import_react60.useCallback)(() => {
+    showColumnSettingsPanel({
+      column: {
+        name: "::",
+        serverDataType: "string"
+      },
+      type: "columnSettings",
+      vuuTable: { module: "SIMUL", table: "instruments" }
+    });
+  }, [showColumnSettingsPanel]);
+  showTableSettingsRef.current = (0, import_react60.useCallback)(() => {
+    showContextPanel("TableSettings", "DataGrid Settings", {
+      availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name: name2, serverDataType }) => ({
+        name: name2,
+        serverDataType
+      })),
+      onAddCalculatedColumn: handleAddCalculatedColumn,
+      onConfigChange,
+      onDataSourceConfigChange,
+      tableConfig
+    });
+  }, [
+    availableColumns,
+    handleAddCalculatedColumn,
+    onConfigChange,
+    onDataSourceConfigChange,
+    showContextPanel,
+    tableConfig
+  ]);
+  return {
+    showColumnSettingsPanel,
+    showTableSettingsPanel: showTableSettingsRef.current
+  };
+};
 //# sourceMappingURL=index.js.map