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

package/esm/index.js

@@ -142,6 +142,94 @@ registerComponent2("vuu.progress", ProgressCell, "cell-renderer", {
   serverDataType: ["long", "int", "double"]
 });
 
+// src/column-list/ColumnList.tsx
+import {
+  List,
+  ListItem
+} from "@vuu-ui/vuu-ui-controls";
+import { Checkbox } from "@salt-ds/core";
+import { Switch } from "@salt-ds/lab";
+import cx3 from "classnames";
+import { useCallback } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var classBase3 = "vuuColumnList";
+var classBaseListItem = "vuuColumnListItem";
+var ColumnListItem = ({
+  className: classNameProp,
+  item,
+  ...listItemProps
+}) => {
+  var _a;
+  return /* @__PURE__ */ jsxs3(
+    ListItem,
+    {
+      ...listItemProps,
+      className: cx3(classNameProp, classBaseListItem),
+      "data-name": item == null ? void 0 : item.name,
+      children: [
+        /* @__PURE__ */ jsx3(Switch, { className: `${classBase3}-switch`, checked: item == null ? void 0 : item.subscribed }),
+        /* @__PURE__ */ jsx3("span", { className: `${classBase3}-text`, children: (_a = item == null ? void 0 : item.label) != null ? _a : item == null ? void 0 : item.name }),
+        /* @__PURE__ */ jsx3(
+          Checkbox,
+          {
+            className: `${classBase3}-checkBox`,
+            checked: (item == null ? void 0 : item.hidden) !== true,
+            disabled: (item == null ? void 0 : item.subscribed) !== true
+          }
+        )
+      ]
+    }
+  );
+};
+var ColumnList = ({
+  columnItems,
+  onChange,
+  onMoveListItem,
+  ...htmlAttributes
+}) => {
+  const handleChange = useCallback(
+    (evt) => {
+      const input = evt.target;
+      const listItem = input.closest(`.${classBaseListItem}`);
+      const {
+        dataset: { name }
+      } = listItem;
+      if (name) {
+        const saltSwitch = input.closest(`.${classBase3}-switch`);
+        const saltCheckbox = input.closest(
+          `.${classBase3}-checkBox`
+        );
+        if (saltSwitch) {
+          onChange(name, "subscribed", input.checked);
+        } else if (saltCheckbox) {
+          onChange(name, "hidden", input.checked === false);
+        }
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs3("div", { ...htmlAttributes, className: classBase3, children: [
+    /* @__PURE__ */ jsx3("div", { className: `${classBase3}-header`, children: /* @__PURE__ */ jsx3("span", { children: "Column Selection" }) }),
+    /* @__PURE__ */ jsxs3("div", { className: `${classBase3}-colHeadings`, children: [
+      /* @__PURE__ */ jsx3("span", { children: "Column subscription" }),
+      /* @__PURE__ */ jsx3("span", { children: "Visibility" })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      List,
+      {
+        ListItem: ColumnListItem,
+        allowDragDrop: true,
+        height: "100%",
+        onChange: handleChange,
+        onMoveListItem,
+        selectionStrategy: "none",
+        source: columnItems,
+        itemHeight: 33
+      }
+    )
+  ] });
+};
+
 // src/column-expression-input/useColumnExpressionEditor.ts
 import {
   autocompletion,
@@ -788,7 +876,7 @@ import {
   getValue,
   syntaxTree
 } from "@vuu-ui/vuu-codemirror";
-import { useCallback } from "react";
+import { useCallback as useCallback2 } from "react";
 var applyPrefix = (completions, prefix) => prefix ? completions.map((completion) => {
   var _a;
   return {
@@ -908,7 +996,7 @@ var promptToSave = (context, onSubmit) => {
   return { from: context.pos, options };
 };
 var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
-  const makeSuggestions2 = useCallback(
+  const makeSuggestions2 = useCallback2(
     async (context, suggestionType, optionalArgs = {}) => {
       const options = await suggestionProvider.getSuggestions(
         suggestionType,
@@ -919,7 +1007,7 @@ var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
     },
     [suggestionProvider]
   );
-  return useCallback(
+  return useCallback2(
     async (context) => {
       var _a, _b;
       const { state, pos } = context;
@@ -1323,8 +1411,8 @@ var useColumnExpressionEditor = ({
 };
 
 // src/column-expression-input/ColumnExpressionInput.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var classBase3 = "vuuColumnExpressionInput";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var classBase4 = "vuuColumnExpressionInput";
 var ColumnExpressionInput = ({
   onChange,
   onSubmitExpression,
@@ -1335,7 +1423,7 @@ var ColumnExpressionInput = ({
     onSubmitExpression,
     suggestionProvider
   });
-  return /* @__PURE__ */ jsx3("div", { className: `${classBase3}`, ref: editorRef });
+  return /* @__PURE__ */ jsx4("div", { className: `${classBase4}`, ref: editorRef });
 };
 
 // src/column-expression-input/useColumnExpressionSuggestionProvider.ts
@@ -1351,7 +1439,7 @@ import {
   useTypeaheadSuggestions
 } from "@vuu-ui/vuu-data-react";
 import { isNumericColumn, isTextColumn } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback2, useRef as useRef3 } from "react";
+import { useCallback as useCallback3, useRef as useRef3 } from "react";
 
 // src/column-expression-input/column-function-descriptors.ts
 var columnFunctionDescriptors = [
@@ -1772,13 +1860,13 @@ var useColumnExpressionSuggestionProvider = ({
   columns,
   table
 }) => {
-  const findColumn = useCallback2(
+  const findColumn3 = useCallback3(
     (name) => name ? columns.find((col) => col.name === name) : void 0,
     [columns]
   );
   const latestSuggestionsRef = useRef3();
   const getTypeaheadSuggestions = useTypeaheadSuggestions();
-  const getSuggestions = useCallback2(
+  const getSuggestions = useCallback3(
     async (suggestionType, options = NONE) => {
       const { columnName, functionName, operator, prefix } = options;
       switch (suggestionType) {
@@ -1793,18 +1881,18 @@ var useColumnExpressionSuggestionProvider = ({
           return latestSuggestionsRef.current = withApplySpace(suggestions);
         }
         case "operator": {
-          const suggestions = await getOperators(findColumn(columnName));
+          const suggestions = await getOperators(findColumn3(columnName));
           return latestSuggestionsRef.current = withApplySpace(suggestions);
         }
         case "relational-operator": {
           const suggestions = await getRelationalOperators(
-            findColumn(columnName)
+            findColumn3(columnName)
           );
           return latestSuggestionsRef.current = withApplySpace(suggestions);
         }
         case "condition-operator":
           {
-            const column = findColumn(columnName);
+            const column = findColumn3(columnName);
             if (column) {
               const suggestions = await getConditionOperators(column);
               if (suggestions) {
@@ -1841,9 +1929,9 @@ var useColumnExpressionSuggestionProvider = ({
       }
       return [];
     },
-    [columns, findColumn, getTypeaheadSuggestions, table]
+    [columns, findColumn3, getTypeaheadSuggestions, table]
   );
-  const isPartialMatch = useCallback2(
+  const isPartialMatch = useCallback3(
     async (valueType, columnName, pattern) => {
       const { current: latestSuggestions } = latestSuggestionsRef;
       let maybe = false;
@@ -1868,221 +1956,30 @@ var useColumnExpressionSuggestionProvider = ({
 };
 
 // src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
-import { Button as Button3, Panel as Panel5 } from "@salt-ds/core";
+import { Button as Button2, Panel as Panel5 } from "@salt-ds/core";
 import cx6 from "classnames";
 import {
   useCallback as useCallback8,
-  useState as useState4
+  useState as useState3
 } from "react";
 
-// src/datagrid-configuration-ui/column-picker/ColumnPicker.tsx
-import { List } from "@salt-ds/lab";
-import { Button, Text, useIdMemo as useId } from "@salt-ds/core";
-import { useCallback as useCallback3, useState } from "react";
-
-// src/datagrid-configuration-ui/column-picker/ColumnListItem.tsx
-import { ListItem } from "@salt-ds/lab";
-import cx3 from "classnames";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var classBase4 = "vuuColumnListItem";
-var ColumnListItem = ({
-  className: classNameProp,
-  item,
-  label,
-  style: styleProp,
-  ...restProps
-}) => {
-  const className = cx3(classBase4, classNameProp, {
-    [`${classBase4}-calculated`]: item == null ? void 0 : item.expression,
-    [`${classBase4}-hidden`]: item == null ? void 0 : item.hidden
-  });
-  return /* @__PURE__ */ jsxs3(ListItem, { className, ...restProps, children: [
-    /* @__PURE__ */ jsx4("span", { className: `${classBase4}-iconType` }),
-    /* @__PURE__ */ jsx4("label", { className: `${classBase4}-label`, children: label }),
-    /* @__PURE__ */ jsx4("span", { className: `${classBase4}-iconHidden` })
-  ] });
-};
-
-// src/datagrid-configuration-ui/column-picker/ColumnPicker.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var classBase5 = "vuuColumnPicker";
-var removeSelectedColumns = (availableColumns, selectedColumns) => {
-  return availableColumns.filter(
-    (column) => selectedColumns.find((col) => col.name === column.name) == null
-  );
-};
-var ColumnPicker = ({
-  availableColumns,
-  id: idProp,
-  dispatchColumnAction: dispatch,
-  onAddCalculatedColumnClick,
-  onSelectionChange,
-  chosenColumns,
-  selectedColumn
-}) => {
-  const [selected1, setSelected1] = useState([]);
-  const id = useId(idProp);
-  const unusedColumns = removeSelectedColumns(availableColumns, chosenColumns);
-  const addColumn2 = useCallback3(() => {
-    if (selected1.length > 0) {
-      setSelected1([]);
-      dispatch({ type: "addColumn", columns: selected1 });
-    }
-  }, [dispatch, selected1]);
-  const removeColumn2 = useCallback3(
-    () => selectedColumn && dispatch({ type: "removeColumn", column: selectedColumn }),
-    [selectedColumn, dispatch]
-  );
-  const moveColumnUp = useCallback3(
-    () => selectedColumn && dispatch({ type: "moveColumn", column: selectedColumn, moveBy: -1 }),
-    [dispatch, selectedColumn]
-  );
-  const moveColumnDown = useCallback3(
-    () => selectedColumn && dispatch({ type: "moveColumn", column: selectedColumn, moveBy: 1 }),
-    [dispatch, selectedColumn]
-  );
-  const handleSelectionChange1 = useCallback3(
-    (evt, selected) => setSelected1(selected),
-    []
-  );
-  const handleSelectionChange2 = useCallback3(
-    (evt, selected) => onSelectionChange == null ? void 0 : onSelectionChange(selected),
-    [onSelectionChange]
-  );
-  return /* @__PURE__ */ jsxs4("div", { className: classBase5, id, children: [
-    /* @__PURE__ */ jsxs4("div", { className: `${classBase5}-listColumn`, children: [
-      /* @__PURE__ */ jsx5("label", { htmlFor: `available-${id}`, children: /* @__PURE__ */ jsx5(Text, { as: "h4", children: "Available Columns" }) }),
-      /* @__PURE__ */ jsx5(
-        "div",
-        {
-          className: `${classBase5}-listContainer`,
-          style: { flex: 1, overflow: "hidden" },
-          children: /* @__PURE__ */ jsx5(
-            List,
-            {
-              borderless: true,
-              checkable: false,
-              height: "100%",
-              id: `available-${id}`,
-              itemHeight: 24,
-              itemToString: (item) => item.name,
-              onSelectionChange: handleSelectionChange1,
-              selected: selected1,
-              selectionStrategy: "extended",
-              source: unusedColumns
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx5(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            flex: "0 0 32px",
-            marginTop: "var(--salt-size-basis-unit)"
-          },
-          children: /* @__PURE__ */ jsxs4(Button, { onClick: addColumn2, disabled: selected1.length === 0, children: [
-            "Show",
-            /* @__PURE__ */ jsx5("span", { "data-icon": "arrow-thin-right", style: { marginLeft: 8 } })
-          ] })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs4("div", { className: `${classBase5}-listColumn`, children: [
-      /* @__PURE__ */ jsx5("label", { htmlFor: `selected-${id}`, children: /* @__PURE__ */ jsx5(Text, { as: "h4", children: "Included Columns" }) }),
-      /* @__PURE__ */ jsx5(
-        "div",
-        {
-          className: `${classBase5}-listContainer`,
-          style: { flex: 1, overflow: "hidden" },
-          children: /* @__PURE__ */ jsx5(
-            List,
-            {
-              ListItem: ColumnListItem,
-              borderless: true,
-              height: "100%",
-              id: `selected-${id}`,
-              itemHeight: 24,
-              itemToString: (item) => item.name,
-              onSelectionChange: handleSelectionChange2,
-              selected: selectedColumn,
-              style: { flex: 1 },
-              source: chosenColumns
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxs4(
-        "div",
-        {
-          style: {
-            alignItems: "center",
-            flex: "0 0 32px",
-            display: "flex",
-            gap: 6,
-            marginTop: "var(--salt-size-basis-unit)"
-          },
-          children: [
-            /* @__PURE__ */ jsxs4(Button, { onClick: removeColumn2, disabled: selectedColumn === null, children: [
-              /* @__PURE__ */ jsx5("span", { "data-icon": "arrow-thin-left", style: { marginRight: 8 } }),
-              "Hide"
-            ] }),
-            /* @__PURE__ */ jsx5(
-              Button,
-              {
-                "aria-label": "Move column up",
-                onClick: moveColumnUp,
-                disabled: selectedColumn === null || (chosenColumns == null ? void 0 : chosenColumns.indexOf(selectedColumn)) === 0,
-                style: { width: 28 },
-                children: /* @__PURE__ */ jsx5("span", { "data-icon": "arrow-thin-up" })
-              }
-            ),
-            /* @__PURE__ */ jsx5(
-              Button,
-              {
-                "aria-label": "Move column down",
-                onClick: moveColumnDown,
-                disabled: selectedColumn === null || chosenColumns.indexOf(selectedColumn) === chosenColumns.length - 1,
-                style: { width: 28 },
-                children: /* @__PURE__ */ jsx5("span", { "data-icon": "arrow-thin-down" })
-              }
-            ),
-            /* @__PURE__ */ jsx5(
-              Button,
-              {
-                "aria-label": "Add calculated column",
-                className: `${classBase5}-addCalculatedColumn`,
-                onClick: onAddCalculatedColumnClick,
-                variant: "primary",
-                children: /* @__PURE__ */ jsx5("span", { "data-icon": "add" })
-              }
-            )
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-
 // src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx
 import { Stack } from "@vuu-ui/vuu-layout";
 import { StepperInput as StepperInput2 } from "@salt-ds/lab";
 import {
-  Checkbox,
+  Checkbox as Checkbox2,
   FormField as FormField2,
   FormFieldLabel as FormFieldLabel2,
   Input,
   Panel as Panel2,
   RadioButton,
   RadioButtonGroup,
-  Text as Text3
+  Text as Text2
 } from "@salt-ds/core";
 import cx5 from "classnames";
 import {
   useCallback as useCallback5,
-  useState as useState2
+  useState
 } from "react";
 
 // src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
@@ -2093,10 +1990,10 @@ import cx4 from "classnames";
 import { useMemo as useMemo2 } from "react";
 
 // src/datagrid-configuration-ui/column-type-panel/NumericColumnPanel.tsx
-import { StepperInput, Switch } from "@salt-ds/lab";
-import { FormField, FormFieldLabel, Text as Text2 } from "@salt-ds/core";
+import { StepperInput, Switch as Switch2 } from "@salt-ds/lab";
+import { FormField, FormFieldLabel, Text } from "@salt-ds/core";
 import { useCallback as useCallback4 } from "react";
-import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultValues = {
   alignOnDecimals: false,
   decimals: 4,
@@ -2138,60 +2035,58 @@ var NumericColumnPanel = ({
     [dispatchUpdate]
   );
   const handleChangeAlignOnDecimals = useCallback4(
-    (evt, value) => dispatchUpdate({ alignOnDecimals: value }),
+    (evt) => dispatchUpdate({ alignOnDecimals: Boolean(evt.target.value) }),
     [dispatchUpdate]
   );
   const handleChangeZeroPad = useCallback4(
-    (evt, value) => dispatchUpdate({ zeroPad: value }),
+    (evt) => dispatchUpdate({ zeroPad: Boolean(evt.target.value) }),
     [dispatchUpdate]
   );
   switch (column.serverDataType) {
     case "double":
-      return /* @__PURE__ */ jsxs5(Fragment, { children: [
-        /* @__PURE__ */ jsxs5(FormField, { labelPlacement: "top", children: [
-          /* @__PURE__ */ jsx6(FormFieldLabel, { children: "No of Decimals" }),
-          /* @__PURE__ */ jsx6(StepperInput, { value: decimals, onChange: handleChangeDecimals })
+      return /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsxs4(FormField, { labelPlacement: "top", children: [
+          /* @__PURE__ */ jsx5(FormFieldLabel, { children: "No of Decimals" }),
+          /* @__PURE__ */ jsx5(StepperInput, { value: decimals, onChange: handleChangeDecimals })
         ] }),
-        /* @__PURE__ */ jsx6(
-          Switch,
+        /* @__PURE__ */ jsx5(
+          Switch2,
           {
             checked: alignOnDecimals,
             label: "Align on decimals",
-            LabelProps: { className: "vuuColumnPanelSwitch" },
             onChange: handleChangeAlignOnDecimals
           }
         ),
-        /* @__PURE__ */ jsx6(
-          Switch,
+        /* @__PURE__ */ jsx5(
+          Switch2,
           {
             checked: zeroPad,
             label: "Zero pad",
-            LabelProps: { className: "vuuColumnPanelSwitch" },
             onChange: handleChangeZeroPad
           }
         )
       ] });
     case "long":
     case "int":
-      return /* @__PURE__ */ jsx6(Fragment, { children: /* @__PURE__ */ jsx6(Text2, { children: "Work in progress" }) });
+      return /* @__PURE__ */ jsx5(Fragment, { children: /* @__PURE__ */ jsx5(Text, { children: "Work in progress" }) });
     default:
       return null;
   }
 };
 
 // src/datagrid-configuration-ui/column-type-panel/StringColumnPanel.tsx
-import { Fragment as Fragment2, jsx as jsx7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
 var StringColumnPanel = ({
   column,
   dispatchColumnAction
 }) => {
   console.log({ column, dispatchColumnAction });
-  return /* @__PURE__ */ jsx7(Fragment2, { children: "what" });
+  return /* @__PURE__ */ jsx6(Fragment2, { children: "what" });
 };
 
 // src/datagrid-configuration-ui/column-type-panel/ColumnTypePanel.tsx
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var classBase6 = "vuuColumnTypePanel";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var classBase5 = "vuuColumnTypePanel";
 var integerCellRenderers = ["Default Renderer (int, long)"];
 var doubleCellRenderers = ["Default Renderer (double)"];
 var stringCellRenderers = ["Default Renderer (string)"];
@@ -2223,7 +2118,7 @@ var ColumnTypePanel = ({
       case "double":
       case "int":
       case "long":
-        return /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx7(
           NumericColumnPanel,
           {
             column,
@@ -2231,7 +2126,7 @@ var ColumnTypePanel = ({
           }
         );
       default:
-        return /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx7(
           StringColumnPanel,
           {
             column,
@@ -2242,21 +2137,21 @@ var ColumnTypePanel = ({
   }, [column, dispatchColumnAction]);
   const { serverDataType = "string" } = column;
   const availableRenderers = getAvailableCellRenderers(column);
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsx7(
       Dropdown,
       {
-        className: cx4(`${classBase6}-renderer`),
+        className: cx4(`${classBase5}-renderer`),
         fullWidth: true,
         selected: availableRenderers[0],
         source: availableRenderers
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7(
       Panel,
       {
         ...props,
-        className: cx4(classBase6, className, `${classBase6}-${serverDataType}`),
+        className: cx4(classBase5, className, `${classBase5}-${serverDataType}`),
         children: content
       }
     )
@@ -2264,8 +2159,8 @@ var ColumnTypePanel = ({
 };
 
 // src/datagrid-configuration-ui/column-settings-panel/ColumnSettingsPanel.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var classBase7 = "vuuColumnSettingsPanel";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var classBase6 = "vuuColumnSettingsPanel";
 var tabstripProps = {
   className: "salt-density-high"
 };
@@ -2276,7 +2171,7 @@ var ColumnSettingsPanel = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  const [activeTab, setActiveTab] = useState2(0);
+  const [activeTab, setActiveTab] = useState(0);
   const dispatchUpdate = useCallback5(
     (values) => dispatchColumnAction({
       type: "updateColumnProp",
@@ -2305,38 +2200,38 @@ var ColumnSettingsPanel = ({
     (value) => dispatchUpdate({ width: parseInt(value.toString(), 10) }),
     [dispatchUpdate]
   );
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
-      className: classBase7,
+      className: classBase6,
       ...props,
       style: {
         ...styleProp
       },
       children: [
-        /* @__PURE__ */ jsx9(Text3, { as: "h4", children: "Column Settings" }),
-        /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsx8(Text2, { as: "h4", children: "Column Settings" }),
+        /* @__PURE__ */ jsxs6(
           Stack,
           {
             active: activeTab,
-            className: cx5(`${classBase7}-columnTabs`),
+            className: cx5(`${classBase6}-columnTabs`),
             onTabSelectionChanged: setActiveTab,
             TabstripProps: tabstripProps,
             children: [
-              /* @__PURE__ */ jsxs7(Panel2, { title: "Column", children: [
-                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Hidden" }),
-                  /* @__PURE__ */ jsx9(
-                    Checkbox,
+              /* @__PURE__ */ jsxs6(Panel2, { title: "Column", children: [
+                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Hidden" }),
+                  /* @__PURE__ */ jsx8(
+                    Checkbox2,
                     {
                       checked: column.hidden === true,
                       onChange: handleChangeHidden
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Label" }),
-                  /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Label" }),
+                  /* @__PURE__ */ jsx8(
                     Input,
                     {
                       value: (_a = column.label) != null ? _a : column.name,
@@ -2344,9 +2239,9 @@ var ColumnSettingsPanel = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Width" }),
-                  /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Width" }),
+                  /* @__PURE__ */ jsx8(
                     StepperInput2,
                     {
                       value: (_b = column.width) != null ? _b : 100,
@@ -2354,39 +2249,39 @@ var ColumnSettingsPanel = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "ALign" }),
-                  /* @__PURE__ */ jsxs7(
+                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "ALign" }),
+                  /* @__PURE__ */ jsxs6(
                     RadioButtonGroup,
                     {
                       "aria-label": "Column Align",
                       value: (_c = column.align) != null ? _c : "left",
                       onChange: handleChangeAlign,
                       children: [
-                        /* @__PURE__ */ jsx9(RadioButton, { label: "Left", value: "left" }),
-                        /* @__PURE__ */ jsx9(RadioButton, { label: "Right", value: "right" })
+                        /* @__PURE__ */ jsx8(RadioButton, { label: "Left", value: "left" }),
+                        /* @__PURE__ */ jsx8(RadioButton, { label: "Right", value: "right" })
                       ]
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Pin Column" }),
-                  /* @__PURE__ */ jsxs7(
+                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "left", children: [
+                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Pin Column" }),
+                  /* @__PURE__ */ jsxs6(
                     RadioButtonGroup,
                     {
                       "aria-label": "Pin Column",
                       value: (_d = column.pin) != null ? _d : "",
                       onChange: handleChangePin,
                       children: [
-                        /* @__PURE__ */ jsx9(RadioButton, { label: "Do not pin", value: "" }),
-                        /* @__PURE__ */ jsx9(RadioButton, { label: "Left", value: "left" }),
-                        /* @__PURE__ */ jsx9(RadioButton, { label: "Right", value: "right" })
+                        /* @__PURE__ */ jsx8(RadioButton, { label: "Do not pin", value: "" }),
+                        /* @__PURE__ */ jsx8(RadioButton, { label: "Left", value: "left" }),
+                        /* @__PURE__ */ jsx8(RadioButton, { label: "Right", value: "right" })
                       ]
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx8(
                 ColumnTypePanel,
                 {
                   column,
@@ -2394,14 +2289,14 @@ var ColumnSettingsPanel = ({
                   title: "Data Cell"
                 }
               ),
-              /* @__PURE__ */ jsxs7(Panel2, { title: "Vuu", variant: "secondary", children: [
-                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "top", readOnly: true, children: [
-                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Name" }),
-                  /* @__PURE__ */ jsx9(Input, { value: column.name })
+              /* @__PURE__ */ jsxs6(Panel2, { title: "Vuu", variant: "secondary", children: [
+                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "top", readOnly: true, children: [
+                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Name" }),
+                  /* @__PURE__ */ jsx8(Input, { value: column.name })
                 ] }),
-                /* @__PURE__ */ jsxs7(FormField2, { labelPlacement: "top", readOnly: true, children: [
-                  /* @__PURE__ */ jsx9(FormFieldLabel2, { children: "Vuu Type" }),
-                  /* @__PURE__ */ jsx9(Input, { value: column.serverDataType })
+                /* @__PURE__ */ jsxs6(FormField2, { labelPlacement: "top", readOnly: true, children: [
+                  /* @__PURE__ */ jsx8(FormFieldLabel2, { children: "Vuu Type" }),
+                  /* @__PURE__ */ jsx8(Input, { value: column.serverDataType })
                 ] })
               ] })
             ]
@@ -2419,12 +2314,12 @@ import {
   Panel as Panel3,
   RadioButton as RadioButton2,
   RadioButtonGroup as RadioButtonGroup2,
-  Text as Text4
+  Text as Text3
 } from "@salt-ds/core";
 import { StepperInput as StepperInput3 } from "@salt-ds/lab";
 import { useCallback as useCallback6 } from "react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
-var classBase8 = "vuuGridSettingsPanel";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var classBase7 = "vuuGridSettingsPanel";
 var GridSettingsPanel = ({
   config,
   dispatchColumnAction,
@@ -2449,36 +2344,36 @@ var GridSettingsPanel = ({
     (value) => dispatchUpdate({ columnDefaultWidth: parseInt(value.toString(), 10) }),
     [dispatchUpdate]
   );
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: classBase8,
+      className: classBase7,
       ...props,
       style: {
         ...styleProp
       },
       children: [
-        /* @__PURE__ */ jsx10(Text4, { as: "h4", children: "Grid Settings" }),
-        /* @__PURE__ */ jsxs8(Panel3, { children: [
-          /* @__PURE__ */ jsxs8(FormField3, { labelPlacement: "left", children: [
-            /* @__PURE__ */ jsx10(FormFieldLabel3, { children: "Format column labels" }),
-            /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsx9(Text3, { as: "h4", children: "Grid Settings" }),
+        /* @__PURE__ */ jsxs7(Panel3, { children: [
+          /* @__PURE__ */ jsxs7(FormField3, { labelPlacement: "left", children: [
+            /* @__PURE__ */ jsx9(FormFieldLabel3, { children: "Format column labels" }),
+            /* @__PURE__ */ jsxs7(
               RadioButtonGroup2,
               {
                 "aria-label": "Format column labels",
                 value: config.columnFormatHeader,
                 onChange: handleChangeLabelFormatting,
                 children: [
-                  /* @__PURE__ */ jsx10(RadioButton2, { label: "No Formatting", value: void 0 }),
-                  /* @__PURE__ */ jsx10(RadioButton2, { label: "Capitalize", value: "capitalize" }),
-                  /* @__PURE__ */ jsx10(RadioButton2, { label: "Uppercase", value: "uppercase" })
+                  /* @__PURE__ */ jsx9(RadioButton2, { label: "No Formatting", value: void 0 }),
+                  /* @__PURE__ */ jsx9(RadioButton2, { label: "Capitalize", value: "capitalize" }),
+                  /* @__PURE__ */ jsx9(RadioButton2, { label: "Uppercase", value: "uppercase" })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs8(FormField3, { labelPlacement: "left", children: [
-            /* @__PURE__ */ jsx10(FormFieldLabel3, { children: "Default Column Width" }),
-            /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsxs7(FormField3, { labelPlacement: "left", children: [
+            /* @__PURE__ */ jsx9(FormFieldLabel3, { children: "Default Column Width" }),
+            /* @__PURE__ */ jsx9(
               StepperInput3,
               {
                 value: (_a = config.columnDefaultWidth) != null ? _a : 100,
@@ -2654,26 +2549,26 @@ import { Stack as Stack2 } from "@vuu-ui/vuu-layout";
 
 // src/datagrid-configuration-ui/calculated-column-panel/CalculatedColumnPanel.tsx
 import {
-  Button as Button2,
+  Button,
   FormField as FormField4,
   FormFieldLabel as FormFieldLabel4,
   Input as Input2,
   Panel as Panel4,
-  Text as Text5
+  Text as Text4
 } from "@salt-ds/core";
 import {
   useCallback as useCallback7,
   useRef as useRef4,
-  useState as useState3
+  useState as useState2
 } from "react";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var CalculatedColumnPanel = ({
   columns,
   dispatchColumnAction,
   table
 }) => {
-  const [columnName, setColumnName] = useState3("");
-  const [, setExpression] = useState3();
+  const [columnName, setColumnName] = useState2("");
+  const [, setExpression] = useState2();
   const sourceRef = useRef4("");
   const suggestionProvider = useColumnExpressionSuggestionProvider({
     columns,
@@ -2709,13 +2604,13 @@ var CalculatedColumnPanel = ({
       });
     }
   }, [columnName, dispatchColumnAction]);
-  return /* @__PURE__ */ jsxs9(Panel4, { className: "vuuCalculatedColumnPanel", title: "Define Computed Column", children: [
-    /* @__PURE__ */ jsx11(Text5, { styleAs: "h4", children: "Define Computed Column" }),
-    /* @__PURE__ */ jsxs9(FormField4, { labelPlacement: "left", children: [
-      /* @__PURE__ */ jsx11(FormFieldLabel4, { children: "Column Name" }),
-      /* @__PURE__ */ jsx11(Input2, { value: columnName, onChange: handleChangeName })
+  return /* @__PURE__ */ jsxs8(Panel4, { className: "vuuCalculatedColumnPanel", title: "Define Computed Column", children: [
+    /* @__PURE__ */ jsx10(Text4, { styleAs: "h4", children: "Define Computed Column" }),
+    /* @__PURE__ */ jsxs8(FormField4, { labelPlacement: "left", children: [
+      /* @__PURE__ */ jsx10(FormFieldLabel4, { children: "Column Name" }),
+      /* @__PURE__ */ jsx10(Input2, { value: columnName, onChange: handleChangeName })
     ] }),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx10(
       ColumnExpressionInput,
       {
         onChange: handleChangeExpression,
@@ -2723,13 +2618,13 @@ var CalculatedColumnPanel = ({
         suggestionProvider
       }
     ),
-    /* @__PURE__ */ jsx11("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx11(Button2, { onClick: handleSave, children: "Add Column" }) })
+    /* @__PURE__ */ jsx10("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx10(Button, { onClick: handleSave, children: "Add Column" }) })
   ] });
 };
 
 // src/datagrid-configuration-ui/settings-panel/DatagridSettingsPanel.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
-var classBase9 = "vuuDatagridSettingsPanel";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var classBase8 = "vuuDatagridSettingsPanel";
 var getTabLabel = () => void 0;
 var icons = [
   "table-settings",
@@ -2748,9 +2643,9 @@ var DatagridSettingsPanel = ({
 }) => {
   var _a;
   console.log(`DatagridSettingsPanel render`);
-  const [selectedTabIndex, setSelectedTabIndex] = useState4(0);
+  const [selectedTabIndex, setSelectedTabIndex] = useState3(0);
   const { gridSettings, dispatchColumnAction } = useGridSettings(gridConfig);
-  const [selectedColumnName, setSelectedColumnName] = useState4(
+  const [selectedColumnName, setSelectedColumnName] = useState3(
     null
   );
   const handleColumnSelected = useCallback8(
@@ -2774,7 +2669,7 @@ var DatagridSettingsPanel = ({
     [handleApply]
   );
   const selectedColumn = selectedColumnName === null ? null : (_a = gridSettings.columns.find((col) => col.name === selectedColumnName)) != null ? _a : null;
-  const tabstripProps3 = {
+  const tabstripProps2 = {
     activeTabIndex: selectedTabIndex,
     allowRenameTab: false,
     orientation: "vertical"
@@ -2784,47 +2679,34 @@ var DatagridSettingsPanel = ({
     []
   );
   const panelShift = selectedTabIndex === 2 ? "right" : void 0;
-  return /* @__PURE__ */ jsxs10("div", { ...props, className: cx6(classBase9, className), children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs9("div", { ...props, className: cx6(classBase8, className), children: [
+    /* @__PURE__ */ jsxs9(
       Stack2,
       {
-        TabstripProps: tabstripProps3,
-        className: `${classBase9}-stack`,
+        TabstripProps: tabstripProps2,
+        className: `${classBase8}-stack`,
         getTabIcon,
         getTabLabel,
         active: selectedTabIndex === 2 ? 1 : selectedTabIndex,
         onTabSelectionChanged: handleTabSelectionChanged,
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx11(
             GridSettingsPanel,
             {
               config: gridSettings,
               dispatchColumnAction
             }
           ),
-          /* @__PURE__ */ jsxs10("div", { className: `${classBase9}-columnPanels`, "data-align": panelShift, children: [
-            /* @__PURE__ */ jsx12(
-              ColumnPicker,
-              {
-                availableColumns,
-                chosenColumns: gridSettings.columns,
-                dispatchColumnAction,
-                onSelectionChange: handleColumnSelected,
-                onAddCalculatedColumnClick: handleAddCalculatedColumn,
-                selectedColumn
-              }
-            ),
-            selectedColumn === null ? /* @__PURE__ */ jsx12(Panel5, { className: "vuuColumnSettingsPanel", children: "Select a column" }) : /* @__PURE__ */ jsx12(
-              ColumnSettingsPanel,
-              {
-                column: selectedColumn,
-                dispatchColumnAction,
-                style: { background: "white", flex: "1 0 150px" }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx12("div", { title: "Column Settings", children: "Column Settings" }),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx11("div", { className: `${classBase8}-columnPanels`, "data-align": panelShift, children: selectedColumn === null ? /* @__PURE__ */ jsx11(Panel5, { className: "vuuColumnSettingsPanel", children: "Select a column" }) : /* @__PURE__ */ jsx11(
+            ColumnSettingsPanel,
+            {
+              column: selectedColumn,
+              dispatchColumnAction,
+              style: { background: "white", flex: "1 0 150px" }
+            }
+          ) }),
+          /* @__PURE__ */ jsx11("div", { title: "Column Settings", children: "Column Settings" }),
+          /* @__PURE__ */ jsx11(
             CalculatedColumnPanel,
             {
               columns: gridSettings.columns,
@@ -2835,405 +2717,1012 @@ var DatagridSettingsPanel = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs10("div", { className: `${classBase9}-buttonBar`, children: [
-      /* @__PURE__ */ jsx12(Button3, { onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx12(Button3, { onClick: handleApply, children: "Apply" }),
-      /* @__PURE__ */ jsx12(Button3, { onClick: handleSave, children: "Save" })
+    /* @__PURE__ */ jsxs9("div", { className: `${classBase8}-buttonBar`, children: [
+      /* @__PURE__ */ jsx11(Button2, { onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx11(Button2, { onClick: handleApply, children: "Apply" }),
+      /* @__PURE__ */ jsx11(Button2, { onClick: handleSave, children: "Save" })
     ] })
   ] });
 };
 
 // src/datasource-stats/DatasourceStats.tsx
-import { useEffect as useEffect3, useState as useState5 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import cx7 from "classnames";
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
-var classBase10 = "vuuDatasourceStats";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var classBase9 = "vuuDatasourceStats";
 var numberFormatter = new Intl.NumberFormat();
 var DataSourceStats = ({
   className: classNameProp,
   dataSource
 }) => {
-  const [range, setRange] = useState5(dataSource.range);
-  const [size, setSize] = useState5(dataSource.size);
+  const [range, setRange] = useState4(dataSource.range);
+  const [size, setSize] = useState4(dataSource.size);
   useEffect3(() => {
     setSize(dataSource.size);
     dataSource.on("resize", setSize);
     dataSource.on("range", setRange);
   }, [dataSource]);
-  const className = cx7(classBase10, classNameProp);
+  const className = cx7(classBase9, classNameProp);
   const from = numberFormatter.format(range.from);
   const to = numberFormatter.format(range.to - 1);
   const value = numberFormatter.format(size);
-  return /* @__PURE__ */ jsxs11("div", { className, children: [
-    /* @__PURE__ */ jsx13("span", { children: "Showing rows" }),
-    /* @__PURE__ */ jsx13("span", { className: `${classBase10}-range`, children: from }),
-    /* @__PURE__ */ jsx13("span", { className: `${classBase10}-range`, children: to }),
-    /* @__PURE__ */ jsx13("span", { children: "of" }),
-    /* @__PURE__ */ jsx13("span", { className: `${classBase10}-size`, children: value })
+  return /* @__PURE__ */ jsxs10("div", { className, children: [
+    /* @__PURE__ */ jsx12("span", { children: "Showing rows" }),
+    /* @__PURE__ */ jsx12("span", { className: `${classBase9}-range`, children: from }),
+    /* @__PURE__ */ jsx12("span", { className: `${classBase9}-range`, children: to }),
+    /* @__PURE__ */ jsx12("span", { children: "of" }),
+    /* @__PURE__ */ jsx12("span", { className: `${classBase9}-size`, children: value })
   ] });
 };
 
-// src/table-settings/column-settings-panel/ColumnSettingsPanel.tsx
-import { Stack as Stack3 } from "@vuu-ui/vuu-layout";
-import { StepperInput as StepperInput5 } from "@salt-ds/lab";
+// src/table-settings/TableSettingsPanel.tsx
 import {
-  Checkbox as Checkbox2,
-  FormField as FormField6,
-  FormFieldLabel as FormFieldLabel6,
+  FormField as FormField5,
+  FormFieldLabel as FormFieldLabel5,
   Input as Input3,
-  Panel as Panel7,
-  RadioButton as RadioButton3,
-  RadioButtonGroup as RadioButtonGroup3,
-  Text as Text7
+  ToggleButton,
+  ToggleButtonGroup
 } from "@salt-ds/core";
+
+// src/table-settings/useTableSettings.ts
+import { useLayoutEffectSkipFirst as useLayoutEffectSkipFirst2 } from "@vuu-ui/vuu-layout";
+
+// ../vuu-table/src/table/ColumnResizer.tsx
+import { useCallback as useCallback9, useRef as useRef5 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+
+// ../vuu-table/src/table/context-menu/buildContextMenuDescriptors.ts
+import { isNumericColumn as isNumericColumn2 } from "@vuu-ui/vuu-utils";
+
+// ../vuu-table/src/table/context-menu/useTableContextMenu.ts
+import { removeColumnFromFilter } from "@vuu-ui/vuu-utils";
+import {
+  addGroupColumn,
+  addSortColumn,
+  AggregationType,
+  setAggregations,
+  setSortColumn
+} from "@vuu-ui/vuu-utils";
+var { Average, Count, Distinct, High, Low, Sum } = AggregationType;
+
+// ../vuu-table/src/table/Table.tsx
+import { ContextMenuProvider } from "@vuu-ui/vuu-popups";
+import { Button as Button3, useIdMemo } from "@salt-ds/core";
+
+// ../vuu-table/src/table/RowBasedTable.tsx
+import {
+  buildColumnMap,
+  getColumnStyle as getColumnStyle3,
+  isGroupColumn as isGroupColumn2,
+  metadataKeys as metadataKeys5,
+  notHidden as notHidden2,
+  visibleColumnAtIndex
+} from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback16, useMemo as useMemo3 } from "react";
+
+// ../vuu-table/src/table/TableRow.tsx
+import {
+  isGroupColumn,
+  isJsonColumn,
+  isJsonGroup,
+  metadataKeys as metadataKeys4,
+  notHidden
+} from "@vuu-ui/vuu-utils";
 import cx9 from "classnames";
+import { memo as memo2, useCallback as useCallback12 } from "react";
+
+// ../vuu-table/src/table/TableCell.tsx
+import { getColumnStyle, metadataKeys as metadataKeys2 } from "@vuu-ui/vuu-utils";
+import { EditableLabel } from "@vuu-ui/vuu-ui-controls";
+import cx8 from "classnames";
 import {
+  memo,
   useCallback as useCallback10,
-  useState as useState6
+  useRef as useRef6,
+  useState as useState5
 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var { KEY: KEY2 } = metadataKeys2;
+var TableCell = memo(
+  ({
+    className: classNameProp,
+    column,
+    columnMap,
+    onClick,
+    row
+  }) => {
+    const labelFieldRef = useRef6(null);
+    const {
+      align,
+      CellRenderer,
+      key,
+      pin,
+      editable,
+      resizing,
+      valueFormatter
+    } = column;
+    const [editing, setEditing] = useState5(false);
+    const value = valueFormatter(row[key]);
+    const [editableValue, setEditableValue] = useState5(value);
+    const handleTitleMouseDown = () => {
+      var _a;
+      (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+    };
+    const handleTitleKeyDown = (evt) => {
+      if (evt.key === "Enter") {
+        setEditing(true);
+      }
+    };
+    const handleClick = useCallback10(
+      (evt) => {
+        onClick == null ? void 0 : onClick(evt, column);
+      },
+      [column, onClick]
+    );
+    const handleEnterEditMode = () => {
+      setEditing(true);
+    };
+    const handleExitEditMode = (originalValue = "", finalValue = "", allowDeactivation = true, editCancelled = false) => {
+      var _a;
+      setEditing(false);
+      if (editCancelled) {
+        setEditableValue(originalValue);
+      } else if (finalValue !== originalValue) {
+        setEditableValue(finalValue);
+      }
+      if (allowDeactivation === false) {
+        (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    const className = cx8(classNameProp, {
+      vuuAlignRight: align === "right",
+      vuuPinFloating: pin === "floating",
+      vuuPinLeft: pin === "left",
+      vuuPinRight: pin === "right",
+      "vuuTableCell-resizing": resizing
+    }) || void 0;
+    const style = getColumnStyle(column);
+    return editable ? /* @__PURE__ */ jsx14(
+      "div",
+      {
+        className,
+        "data-editable": true,
+        role: "cell",
+        style,
+        onKeyDown: handleTitleKeyDown,
+        children: /* @__PURE__ */ jsx14(
+          EditableLabel,
+          {
+            editing,
+            value: editableValue,
+            onChange: setEditableValue,
+            onMouseDownCapture: handleTitleMouseDown,
+            onEnterEditMode: handleEnterEditMode,
+            onExitEditMode: handleExitEditMode,
+            onKeyDown: handleTitleKeyDown,
+            ref: labelFieldRef,
+            tabIndex: 0
+          },
+          "title"
+        )
+      }
+    ) : /* @__PURE__ */ jsx14(
+      "div",
+      {
+        className,
+        role: "cell",
+        style,
+        onClick: handleClick,
+        children: CellRenderer ? /* @__PURE__ */ jsx14(CellRenderer, { column, columnMap, row }) : value
+      }
+    );
+  },
+  cellValuesAreEqual
+);
+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];
+}
 
-// src/table-settings/column-type-panel/ColumnTypePanel.tsx
-import { getRegisteredCellRenderers as getRegisteredCellRenderers2 } from "@vuu-ui/vuu-utils";
-import { Dropdown as Dropdown2 } from "@salt-ds/lab";
-import { Panel as Panel6 } from "@salt-ds/core";
-import cx8 from "classnames";
-import { useMemo as useMemo3 } from "react";
-
-// src/table-settings/column-type-panel/NumericColumnPanel.tsx
-import { StepperInput as StepperInput4, Switch as Switch2 } from "@salt-ds/lab";
+// ../vuu-table/src/table/TableGroupCell.tsx
 import {
-  FormField as FormField5,
-  FormFieldLabel as FormFieldLabel5,
-  Text as Text6
-} from "@salt-ds/core";
-import { useCallback as useCallback9 } from "react";
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
-var defaultValues2 = {
-  alignOnDecimals: false,
-  decimals: 4,
-  zeroPad: false
-};
-var getColumnValues2 = (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]
-      };
+  getColumnStyle as getColumnStyle2,
+  getGroupValueAndOffset,
+  metadataKeys as metadataKeys3
+} from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback11 } from "react";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var { IS_LEAF } = metadataKeys3;
+var TableGroupCell = ({ column, onClick, row }) => {
+  const { columns } = column;
+  const [value, offset] = getGroupValueAndOffset(columns, row);
+  const handleClick = useCallback11(
+    (evt) => {
+      onClick == null ? void 0 : onClick(evt, column);
+    },
+    [column, onClick]
+  );
+  const style = getColumnStyle2(column);
+  const isLeaf = row[IS_LEAF];
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx15("span", { className: "vuuTableGroupCell-spacer" }, i));
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: "vuuTableGroupCell vuuPinLeft",
+      onClick: isLeaf ? void 0 : handleClick,
+      role: "cell",
+      style,
+      children: [
+        spacers,
+        isLeaf ? null : /* @__PURE__ */ jsx15("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
+        /* @__PURE__ */ jsx15("span", { children: value })
+      ]
     }
-    return configValues;
-  }, defaultValues2);
-};
-var NumericColumnPanel2 = ({
-  column,
-  dispatchColumnAction
-}) => {
-  const { decimals, alignOnDecimals, zeroPad } = getColumnValues2(column == null ? void 0 : column.type);
-  const dispatchUpdate = useCallback9(
-    (values) => dispatchColumnAction({
-      type: "updateColumnTypeFormatting",
-      column,
-      ...values
-    }),
-    [column, dispatchColumnAction]
   );
-  const handleChangeDecimals = useCallback9(
-    (value) => dispatchUpdate({ decimals: parseInt(value.toString(), 10) }),
-    [dispatchUpdate]
+};
+
+// ../vuu-table/src/table/TableRow.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var { IDX, IS_EXPANDED, SELECTED } = metadataKeys4;
+var classBase10 = "vuuTableRow";
+var TableRow = memo2(function Row({
+  columnMap,
+  columns,
+  offset,
+  onClick,
+  onToggleGroup,
+  virtualColSpan = 0,
+  row
+}) {
+  const {
+    [IDX]: rowIndex,
+    [IS_EXPANDED]: isExpanded,
+    [SELECTED]: isSelected
+  } = row;
+  const className = cx9(classBase10, {
+    [`${classBase10}-even`]: rowIndex % 2 === 0,
+    [`${classBase10}-expanded`]: isExpanded,
+    [`${classBase10}-preSelected`]: isSelected === 2
+  });
+  const handleRowClick = useCallback12(
+    (evt) => {
+      const rangeSelect = evt.shiftKey;
+      const keepExistingSelection = evt.ctrlKey || evt.metaKey;
+      onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
+    },
+    [onClick, row]
   );
-  const handleChangeAlignOnDecimals = useCallback9(
-    (evt, value) => dispatchUpdate({ alignOnDecimals: value }),
-    [dispatchUpdate]
+  const handleGroupCellClick = useCallback12(
+    (evt, column) => {
+      if (isGroupColumn(column) || isJsonGroup(column, row)) {
+        evt.stopPropagation();
+        onToggleGroup == null ? void 0 : onToggleGroup(row, column);
+      }
+    },
+    [onToggleGroup, row]
   );
-  const handleChangeZeroPad = useCallback9(
-    (evt, value) => dispatchUpdate({ zeroPad: value }),
-    [dispatchUpdate]
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      "aria-selected": isSelected === 1 ? true : void 0,
+      "aria-rowindex": rowIndex,
+      className,
+      onClick: handleRowClick,
+      role: "row",
+      style: {
+        transform: `translate3d(0px, ${offset}px, 0px)`
+      },
+      children: [
+        virtualColSpan > 0 ? /* @__PURE__ */ jsx16("div", { role: "cell", style: { width: virtualColSpan } }) : null,
+        columns.filter(notHidden).map((column) => {
+          const isGroup = isGroupColumn(column);
+          const isJsonCell = isJsonColumn(column);
+          const Cell = isGroup ? TableGroupCell : TableCell;
+          return /* @__PURE__ */ jsx16(
+            Cell,
+            {
+              column,
+              columnMap,
+              onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
+              row
+            },
+            column.name
+          );
+        })
+      ]
+    }
   );
-  switch (column.serverDataType) {
-    case "double":
-      return /* @__PURE__ */ jsxs12(Fragment4, { children: [
-        /* @__PURE__ */ jsxs12(FormField5, { labelPlacement: "top", children: [
-          /* @__PURE__ */ jsx14(FormFieldLabel5, { children: "No of Decimals" }),
-          /* @__PURE__ */ jsx14(StepperInput4, { value: decimals, onChange: handleChangeDecimals })
-        ] }),
-        /* @__PURE__ */ jsx14(
-          Switch2,
-          {
-            checked: alignOnDecimals,
-            label: "Align on decimals",
-            LabelProps: { className: "vuuColumnPanelSwitch" },
-            onChange: handleChangeAlignOnDecimals
-          }
-        ),
-        /* @__PURE__ */ jsx14(
-          Switch2,
-          {
-            checked: zeroPad,
-            label: "Zero pad",
-            LabelProps: { className: "vuuColumnPanelSwitch" },
-            onChange: handleChangeZeroPad
-          }
-        )
-      ] });
-    case "long":
-    case "int":
-      return /* @__PURE__ */ jsx14(Fragment4, { children: /* @__PURE__ */ jsx14(Text6, { children: "Work in progress" }) });
-    default:
-      return null;
-  }
-};
+});
 
-// src/table-settings/column-type-panel/StringColumnPanel.tsx
-import { Fragment as Fragment5, jsx as jsx15 } from "react/jsx-runtime";
-var StringColumnPanel2 = ({
-  column,
-  dispatchColumnAction
-}) => {
-  console.log(column, dispatchColumnAction);
-  return /* @__PURE__ */ jsx15(Fragment5, { children: "what" });
-};
-
-// src/table-settings/column-type-panel/ColumnTypePanel.tsx
-import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
-var classBase11 = "vuuColumnTypePanel";
-var integerCellRenderers2 = ["Default Renderer (int, long)"];
-var doubleCellRenderers2 = ["Default Renderer (double)"];
-var stringCellRenderers2 = ["Default Renderer (string)"];
-var getAvailableCellRenderers2 = (column) => {
-  const customCellRenderers = getRegisteredCellRenderers2(column.serverDataType);
-  const customRendererNames = customCellRenderers.map((r) => r.name);
-  console.log({ customRendererNames });
-  switch (column.serverDataType) {
-    case "char":
-    case "string":
-      return stringCellRenderers2;
-    case "int":
-    case "long":
-      return integerCellRenderers2;
-    case "double":
-      return doubleCellRenderers2.concat(customRendererNames);
-    default:
-      return stringCellRenderers2;
+// ../vuu-table/src/table/TableGroupHeaderCell.tsx
+import cx10 from "classnames";
+import { useRef as useRef8 } from "react";
+
+// ../vuu-table/src/table/useTableColumnResize.tsx
+import { useCallback as useCallback13, useRef as useRef7 } from "react";
+
+// ../vuu-table/src/table/TableGroupHeaderCell.tsx
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+
+// ../vuu-table/src/table/TableHeaderCell.tsx
+import cx13 from "classnames";
+import { useCallback as useCallback15, useRef as useRef9 } from "react";
+
+// ../vuu-table/src/table/SortIndicator.tsx
+import cx11 from "classnames";
+
+// ../vuu-table/src/table/TableHeaderCell.tsx
+import { useContextMenu as useContextMenu2 } from "@vuu-ui/vuu-popups";
+
+// ../vuu-table/src/table/filter-indicator.tsx
+import { useContextMenu } from "@vuu-ui/vuu-popups";
+import cx12 from "classnames";
+import { useCallback as useCallback14 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+
+// ../vuu-table/src/table/TableHeaderCell.tsx
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+
+// ../vuu-table/src/table/RowBasedTable.tsx
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var { RENDER_IDX } = metadataKeys5;
+
+// ../vuu-table/src/table/useTable.ts
+import { useContextMenu as usePopupContextMenu } from "@vuu-ui/vuu-popups";
+import {
+  applySort,
+  buildColumnMap as buildColumnMap2,
+  isJsonGroup as isJsonGroup2,
+  metadataKeys as metadataKeys9,
+  moveItem as moveItem3
+} from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback26,
+  useEffect as useEffect8,
+  useMemo as useMemo9,
+  useRef as useRef19,
+  useState as useState9
+} from "react";
+
+// ../vuu-table/src/table/useDataSource.ts
+import {
+  isVuuFeatureAction,
+  isVuuFeatureInvocation
+} from "@vuu-ui/vuu-data-react";
+import { getFullRange, metadataKeys as metadataKeys6, WindowRange } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback17, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef10, useState as useState6 } from "react";
+var { SELECTED: SELECTED2 } = metadataKeys6;
+
+// ../vuu-table/src/table/useDraggableColumn.ts
+import { useDragDropNext as useDragDrop } from "@vuu-ui/vuu-ui-controls";
+import { useCallback as useCallback18, useRef as useRef11 } from "react";
+
+// ../vuu-table/src/table/useKeyboardNavigation.ts
+import { withinRange } from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback19,
+  useEffect as useEffect5,
+  useLayoutEffect,
+  useMemo as useMemo5,
+  useRef as useRef12
+} from "react";
+
+// ../vuu-table/src/table/keyUtils.ts
+function union(set1, ...sets) {
+  const result = new Set(set1);
+  for (let set of sets) {
+    for (let element of set) {
+      result.add(element);
+    }
   }
-};
-var ColumnTypePanel2 = ({
-  className,
-  column,
-  dispatchColumnAction,
-  ...props
-}) => {
-  const content = useMemo3(() => {
-    switch (column.serverDataType) {
-      case "double":
-      case "int":
-      case "long":
-        return /* @__PURE__ */ jsx16(
-          NumericColumnPanel2,
-          {
-            column,
-            dispatchColumnAction
-          }
-        );
-      default:
-        return /* @__PURE__ */ jsx16(
-          StringColumnPanel2,
-          {
-            column,
-            dispatchColumnAction
-          }
+  return result;
+}
+var ArrowUp = "ArrowUp";
+var ArrowDown = "ArrowDown";
+var ArrowLeft = "ArrowLeft";
+var ArrowRight = "ArrowRight";
+var Home = "Home";
+var End = "End";
+var PageUp = "PageUp";
+var PageDown = "PageDown";
+var actionKeys = /* @__PURE__ */ new Set(["Enter", "Delete", " "]);
+var focusKeys = /* @__PURE__ */ new Set(["Tab"]);
+var arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+var navigationKeys = /* @__PURE__ */ new Set([
+  Home,
+  End,
+  PageUp,
+  PageDown,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp
+]);
+var functionKeys = /* @__PURE__ */ new Set([
+  "F1",
+  "F2",
+  "F3",
+  "F4",
+  "F5",
+  "F6",
+  "F7",
+  "F8",
+  "F9",
+  "F10",
+  "F11",
+  "F12"
+]);
+var specialKeys = union(
+  actionKeys,
+  navigationKeys,
+  arrowLeftRightKeys,
+  functionKeys,
+  focusKeys
+);
+
+// ../vuu-table/src/table/useMeasuredContainer.ts
+import { isValidNumber as isValidNumber2 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback21, useMemo as useMemo6, useRef as useRef14, useState as useState7 } from "react";
+
+// ../vuu-table/src/table/useResizeObserver.ts
+import { useCallback as useCallback20, useEffect as useEffect6, useRef as useRef13 } from "react";
+var observedMap = /* @__PURE__ */ new Map();
+var getTargetSize = (element, size, dimension) => {
+  switch (dimension) {
+    case "height":
+      return size.height;
+    case "clientHeight":
+      return element.clientHeight;
+    case "clientWidth":
+      return element.clientWidth;
+    case "contentHeight":
+      return size.contentHeight;
+    case "contentWidth":
+      return size.contentWidth;
+    case "scrollHeight":
+      return Math.ceil(element.scrollHeight);
+    case "scrollWidth":
+      return Math.ceil(element.scrollWidth);
+    case "width":
+      return size.width;
+    default:
+      return 0;
+  }
+};
+var resizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    const { target, borderBoxSize, contentBoxSize } = entry;
+    const observedTarget = observedMap.get(target);
+    if (observedTarget) {
+      const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
+      const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
+      const { onResize, measurements } = observedTarget;
+      let sizeChanged = false;
+      for (const [dimension, size] of Object.entries(measurements)) {
+        const newSize = getTargetSize(
+          target,
+          { height, width, contentHeight, contentWidth },
+          dimension
         );
-    }
-  }, [column, dispatchColumnAction]);
-  const { serverDataType = "string" } = column;
-  const availableRenderers = getAvailableCellRenderers2(column);
-  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
-    /* @__PURE__ */ jsx16(
-      Dropdown2,
-      {
-        className: cx8(`${classBase11}-renderer`),
-        fullWidth: true,
-        selected: availableRenderers[0],
-        source: availableRenderers
+        if (newSize !== size) {
+          sizeChanged = true;
+          measurements[dimension] = newSize;
+        }
       }
-    ),
-    /* @__PURE__ */ jsx16(
-      Panel6,
-      {
-        ...props,
-        className: cx8(classBase11, className, `${classBase11}-${serverDataType}`),
-        children: content
+      if (sizeChanged) {
+        onResize && onResize(measurements);
       }
-    )
-  ] });
+    }
+  }
+});
+
+// ../vuu-table/src/table/useSelection.ts
+import {
+  deselectItem,
+  isRowSelected,
+  metadataKeys as metadataKeys7,
+  selectItem
+} from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback22, useRef as useRef15 } from "react";
+var { IDX: IDX2 } = metadataKeys7;
+
+// ../vuu-table/src/table/useTableModel.ts
+import {
+  applyFilterToColumns,
+  applyGroupByToColumns,
+  applySortToColumns,
+  findColumn,
+  getCellRenderer,
+  getColumnName as getColumnName2,
+  getTableHeadings,
+  getValueFormatter,
+  isFilteredColumn,
+  isGroupColumn as isGroupColumn3,
+  isPinned,
+  isTypeDescriptor as isTypeDescriptor4,
+  metadataKeys as metadataKeys8,
+  updateColumn,
+  sortPinnedColumns,
+  stripFilterFromColumns,
+  moveItem as moveItem2
+} from "@vuu-ui/vuu-utils";
+import { useReducer as useReducer2 } from "react";
+var KEY_OFFSET = metadataKeys8.count;
+
+// ../vuu-table/src/table/useTableScroll.ts
+import { useCallback as useCallback23, useRef as useRef16 } from "react";
+
+// ../vuu-table/src/table/useTableViewport.ts
+import { useCallback as useCallback24, useMemo as useMemo7, useRef as useRef17 } from "react";
+import {
+  actualRowPositioning,
+  virtualRowPositioning
+} from "@vuu-ui/vuu-utils";
+
+// ../vuu-table/src/table/useVirtualViewport.ts
+import {
+  getColumnsInViewport,
+  itemsChanged
+} from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback25, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef18, useState as useState8 } from "react";
+
+// ../vuu-table/src/table/useTable.ts
+var { KEY: KEY3, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = metadataKeys9;
+
+// ../vuu-table/src/table/Table.tsx
+import cx14 from "classnames";
+import { isDataLoading } from "@vuu-ui/vuu-utils";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+
+// ../vuu-table/src/table/cell-renderers/json-cell/JsonCell.tsx
+import cx15 from "classnames";
+import {
+  isJsonAttribute,
+  metadataKeys as metadataKeys10,
+  registerComponent as registerComponent3
+} from "@vuu-ui/vuu-utils";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var classBase11 = "vuuJsonCell";
+var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY4 } = metadataKeys10;
+var localKey = (key) => {
+  const pos = key.lastIndexOf("|");
+  if (pos === -1) {
+    return "";
+  } else {
+    return key.slice(pos + 1);
+  }
+};
+var JsonCell = ({ column, row }) => {
+  const {
+    key: columnKey
+    /*, type, valueFormatter */
+  } = column;
+  let value = row[columnKey];
+  let isToggle = false;
+  if (isJsonAttribute(value)) {
+    value = value.slice(0, -1);
+    isToggle = true;
+  }
+  const rowKey = localKey(row[KEY4]);
+  const className = cx15({
+    [`${classBase11}-name`]: rowKey === value,
+    [`${classBase11}-value`]: rowKey !== value,
+    [`${classBase11}-group`]: isToggle
+  });
+  if (isToggle) {
+    const toggleIcon = row[IS_EXPANDED3] ? "minus-box" : "plus-box";
+    return /* @__PURE__ */ jsxs17("span", { className, children: [
+      /* @__PURE__ */ jsx22("span", { className: `${classBase11}-value`, children: value }),
+      /* @__PURE__ */ jsx22("span", { className: `${classBase11}-toggle`, "data-icon": toggleIcon })
+    ] });
+  } else if (value) {
+    return /* @__PURE__ */ jsx22("span", { className, children: value });
+  } else {
+    return null;
+  }
 };
+registerComponent3("json", JsonCell, "cell-renderer", {});
 
-// src/table-settings/column-settings-panel/ColumnSettingsPanel.tsx
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
-var classBase12 = "vuuColumnSettingsPanel";
-var tabstripProps2 = {
-  className: "salt-density-high"
+// ../vuu-table/src/table-next/TableNext.tsx
+import { ContextMenuProvider as ContextMenuProvider2 } from "@vuu-ui/vuu-popups";
+import { metadataKeys as metadataKeys14, notHidden as notHidden4 } from "@vuu-ui/vuu-utils";
+
+// ../vuu-table/src/table-next/HeaderCell.tsx
+import { useCallback as useCallback30, useRef as useRef23 } from "react";
+
+// ../vuu-table/src/table-next/useCell.ts
+import { getColumnStyle as getColumnStyle4 } from "@vuu-ui/vuu-utils";
+import cx16 from "classnames";
+import { useMemo as useMemo10 } from "react";
+var useCell = (column, classBase14, isHeader) => (
+  // TODO measure perf without the memo, might not be worth the cost
+  useMemo10(() => {
+    const className = cx16(classBase14, {
+      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"
+    });
+    const style = getColumnStyle4(column);
+    return {
+      className,
+      style
+    };
+  }, [column, classBase14, isHeader])
+);
+
+// ../vuu-table/src/table-next/ColumnMenu.tsx
+import { useContextMenu as useContextMenu3 } from "@vuu-ui/vuu-popups";
+import cx17 from "classnames";
+import {
+  useCallback as useCallback27,
+  useRef as useRef20,
+  useState as useState10
+} from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+
+// ../vuu-table/src/table-next/column-resizing/ColumnResizer.tsx
+import { useCallback as useCallback28, useRef as useRef21 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+
+// ../vuu-table/src/table-next/column-resizing/useTableColumnResize.tsx
+import { useCallback as useCallback29, useRef as useRef22 } from "react";
+
+// ../vuu-table/src/table-next/HeaderCell.tsx
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+
+// ../vuu-table/src/table-next/Row.tsx
+import {
+  isGroupColumn as isGroupColumn4,
+  metadataKeys as metadataKeys12,
+  notHidden as notHidden3,
+  RowSelected
+} from "@vuu-ui/vuu-utils";
+import cx18 from "classnames";
+import { memo as memo3, useCallback as useCallback32 } from "react";
+
+// ../vuu-table/src/table-next/TableCell.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var TableCell2 = ({ column, row }) => {
+  const { className, style } = useCell(column, "vuuTableNextCell");
+  return /* @__PURE__ */ jsx26("div", { className, role: "cell", style, children: row[column.key] });
 };
-var ColumnSettingsPanel2 = ({
-  column,
-  dispatchColumnAction,
-  style: styleProp,
-  ...props
-}) => {
-  var _a, _b, _c, _d;
-  const [activeTab, setActiveTab] = useState6(0);
-  const dispatchUpdate = useCallback10(
-    (values) => dispatchColumnAction({
-      type: "updateColumnProp",
-      column,
-      ...values
-    }),
-    [column, dispatchColumnAction]
-  );
-  const handleChangeAlign = useCallback10(
-    (evt) => dispatchUpdate({ align: evt.target.value }),
-    [dispatchUpdate]
-  );
-  const handleChangePin = useCallback10(
-    (evt) => dispatchUpdate({ pin: evt.target.value }),
-    [dispatchUpdate]
-  );
-  const handleChangeHidden = useCallback10(
-    (evt) => dispatchUpdate({ hidden: evt.target.checked }),
-    [dispatchUpdate]
-  );
-  const handleChangeLabel = useCallback10(
-    (evt) => dispatchUpdate({ label: evt.target.value }),
-    [dispatchUpdate]
-  );
-  const handleChangeWidth = useCallback10(
-    (value) => dispatchUpdate({ width: parseInt(value.toString(), 10) }),
-    [dispatchUpdate]
+
+// ../vuu-table/src/table-next/TableGroupCell.tsx
+import { getGroupValueAndOffset as getGroupValueAndOffset2, metadataKeys as metadataKeys11 } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback31 } from "react";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+var { IS_LEAF: IS_LEAF3 } = metadataKeys11;
+var TableGroupCell2 = ({ column, onClick, row }) => {
+  const { columns } = column;
+  const [value, offset] = getGroupValueAndOffset2(columns, row);
+  const { className, style } = useCell(column, "vuuTable2-groupCell");
+  const handleClick = useCallback31(
+    (evt) => {
+      onClick == null ? void 0 : onClick(evt, column);
+    },
+    [column, onClick]
   );
-  return /* @__PURE__ */ jsxs14(
+  const isLeaf = row[IS_LEAF3];
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx27("span", { className: "vuuTable2-groupCell-spacer" }, i));
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
-      className: classBase12,
-      ...props,
-      style: {
-        ...styleProp
-      },
+      className,
+      role: "cell",
+      style,
+      onClick: isLeaf ? void 0 : handleClick,
       children: [
-        /* @__PURE__ */ jsx17(Text7, { as: "h4", children: "Column Settings" }),
-        /* @__PURE__ */ jsxs14(
-          Stack3,
+        spacers,
+        isLeaf ? null : /* @__PURE__ */ jsx27(
+          "span",
           {
-            active: activeTab,
-            className: cx9(`${classBase12}-columnTabs`),
-            onTabSelectionChanged: setActiveTab,
-            TabstripProps: tabstripProps2,
-            children: [
-              /* @__PURE__ */ jsxs14(Panel7, { title: "Column", children: [
-                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Hidden" }),
-                  /* @__PURE__ */ jsx17(
-                    Checkbox2,
-                    {
-                      checked: column.hidden === true,
-                      onChange: handleChangeHidden
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Label" }),
-                  /* @__PURE__ */ jsx17(
-                    Input3,
-                    {
-                      value: (_a = column.label) != null ? _a : column.name,
-                      onChange: handleChangeLabel
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Width" }),
-                  /* @__PURE__ */ jsx17(
-                    StepperInput5,
-                    {
-                      value: (_b = column.width) != null ? _b : 100,
-                      onChange: handleChangeWidth
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Align" }),
-                  /* @__PURE__ */ jsxs14(
-                    RadioButtonGroup3,
-                    {
-                      "aria-label": "Column Align",
-                      value: (_c = column.align) != null ? _c : "left",
-                      onChange: handleChangeAlign,
-                      children: [
-                        /* @__PURE__ */ jsx17(RadioButton3, { label: "Left", value: "left" }),
-                        /* @__PURE__ */ jsx17(RadioButton3, { label: "Right", value: "right" })
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "left", children: [
-                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Pin Column" }),
-                  /* @__PURE__ */ jsxs14(
-                    RadioButtonGroup3,
-                    {
-                      "aria-label": "Pin Column",
-                      value: (_d = column.pin) != null ? _d : "",
-                      onChange: handleChangePin,
-                      children: [
-                        /* @__PURE__ */ jsx17(RadioButton3, { label: "Do not pin", value: "" }),
-                        /* @__PURE__ */ jsx17(RadioButton3, { label: "Left", value: "left" }),
-                        /* @__PURE__ */ jsx17(RadioButton3, { label: "Right", value: "right" })
-                      ]
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx17(
-                ColumnTypePanel2,
-                {
-                  column,
-                  dispatchColumnAction,
-                  title: "Data Cell"
-                }
-              ),
-              /* @__PURE__ */ jsxs14(Panel7, { title: "Vuu", variant: "secondary", children: [
-                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "top", readOnly: true, children: [
-                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Name" }),
-                  /* @__PURE__ */ jsx17(Input3, { value: column.name })
-                ] }),
-                /* @__PURE__ */ jsxs14(FormField6, { labelPlacement: "top", readOnly: true, children: [
-                  /* @__PURE__ */ jsx17(FormFieldLabel6, { children: "Vuu Type" }),
-                  /* @__PURE__ */ jsx17(Input3, { value: column.serverDataType })
-                ] })
-              ] })
-            ]
+            className: "vuuTable2-groupCell-toggle",
+            "data-icon": "vuu-triangle-right"
           }
-        )
+        ),
+        /* @__PURE__ */ jsx27("span", { children: value })
       ]
     }
   );
 };
+
+// ../vuu-table/src/table-next/Row.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+import { createElement } from "react";
+var { IDX: IDX3, IS_EXPANDED: IS_EXPANDED4, SELECTED: SELECTED3 } = metadataKeys12;
+var classBase12 = "vuuTableNextRow";
+var Row2 = memo3(
+  ({
+    className: classNameProp,
+    columnMap,
+    columns,
+    row,
+    offset,
+    onClick,
+    onToggleGroup,
+    ...htmlAttributes
+  }) => {
+    const {
+      [IDX3]: rowIndex,
+      [IS_EXPANDED4]: isExpanded,
+      [SELECTED3]: selectionStatus
+    } = row;
+    const handleRowClick = useCallback32(
+      (evt) => {
+        const rangeSelect = evt.shiftKey;
+        const keepExistingSelection = evt.ctrlKey || evt.metaKey;
+        onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
+      },
+      [onClick, row]
+    );
+    const { True, First, Last } = RowSelected;
+    const className = cx18(classBase12, classNameProp, {
+      [`${classBase12}-even`]: rowIndex % 2 === 0,
+      [`${classBase12}-expanded`]: isExpanded,
+      [`${classBase12}-selected`]: selectionStatus & True,
+      [`${classBase12}-selectedStart`]: selectionStatus & First,
+      [`${classBase12}-selectedEnd`]: selectionStatus & Last
+    });
+    const style = typeof offset === "number" ? { transform: `translate3d(0px, ${offset}px, 0px)` } : void 0;
+    return /* @__PURE__ */ createElement(
+      "div",
+      {
+        ...htmlAttributes,
+        key: `row-${row[0]}`,
+        role: "row",
+        className,
+        onClick: handleRowClick,
+        style
+      },
+      /* @__PURE__ */ jsx28("span", { className: `${classBase12}-selectionDecorator vuuStickyLeft` }),
+      columns.filter(notHidden3).map((column) => {
+        const isGroup = isGroupColumn4(column);
+        const Cell = isGroup ? TableGroupCell2 : TableCell2;
+        return /* @__PURE__ */ jsx28(Cell, { column, row }, column.key);
+      }),
+      /* @__PURE__ */ jsx28("span", { className: `${classBase12}-selectionDecorator vuuStickyRight` })
+    );
+  }
+);
+Row2.displayName = "Row";
+
+// ../vuu-table/src/table-next/useTableNext.ts
+import {
+  useLayoutEffectSkipFirst,
+  useLayoutProviderDispatch
+} from "@vuu-ui/vuu-layout";
+import { useContextMenu as usePopupContextMenu2 } from "@vuu-ui/vuu-popups";
+import {
+  applySort as applySort2,
+  buildColumnMap as buildColumnMap3,
+  isValidNumber as isValidNumber3,
+  updateColumn as updateColumn2,
+  visibleColumnAtIndex as visibleColumnAtIndex2
+} from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback36, useMemo as useMemo13, useState as useState12 } from "react";
+
+// ../vuu-table/src/table-next/table-config.ts
+var updateTableConfig = (config, action) => {
+  switch (action.type) {
+    case "col-size":
+      return {
+        ...config,
+        columns: config.columns.map(
+          (col) => col.name === action.column.name ? { ...col, width: action.width } : col
+        )
+      };
+    case "column-prop":
+      return {
+        ...config,
+        columns: config.columns.map(
+          (col) => col.name === action.column.name ? { ...col, [action.property]: action.value } : col
+        )
+      };
+    default:
+      return config;
+  }
+};
+
+// ../vuu-table/src/table-next/useDataSource.ts
+import { useCallback as useCallback33, useMemo as useMemo11, useState as useState11 } from "react";
+
+// ../vuu-table/src/table-next/useInitialValue.ts
+import { useMemo as useMemo12, useRef as useRef24 } from "react";
+
+// ../vuu-table/src/table-next/useTableModel.ts
+import { moveItem as moveItem4 } from "@vuu-ui/vuu-ui-controls";
+import {
+  applyFilterToColumns as applyFilterToColumns2,
+  applyGroupByToColumns as applyGroupByToColumns2,
+  applySortToColumns as applySortToColumns2,
+  findColumn as findColumn2,
+  getCellRenderer as getCellRenderer2,
+  getColumnName as getColumnName3,
+  getTableHeadings as getTableHeadings2,
+  getValueFormatter as getValueFormatter2,
+  isFilteredColumn as isFilteredColumn2,
+  isGroupColumn as isGroupColumn5,
+  isPinned as isPinned2,
+  isTypeDescriptor as isTypeDescriptor5,
+  logger,
+  metadataKeys as metadataKeys13,
+  sortPinnedColumns as sortPinnedColumns2,
+  stripFilterFromColumns as stripFilterFromColumns2
+} from "@vuu-ui/vuu-utils";
+import { useReducer as useReducer3 } from "react";
+var { info } = logger("useTableModel");
+var KEY_OFFSET2 = metadataKeys13.count;
+
+// ../vuu-table/src/table-next/useTableScroll.ts
+import { useCallback as useCallback34, useRef as useRef25 } from "react";
+
+// ../vuu-table/src/table-next/useVirtualViewport.ts
+import { useCallback as useCallback35, useRef as useRef26 } from "react";
+
+// ../vuu-table/src/table-next/TableNext.tsx
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+var { IDX: IDX4, RENDER_IDX: RENDER_IDX2 } = metadataKeys14;
+
+// src/table-settings/useTableSettings.ts
+import { useCallback as useCallback37, useMemo as useMemo14, useState as useState13 } from "react";
+var buildColumnItems = (availableColumns, configuredColumns) => {
+  return availableColumns.map(({ name, serverDataType }) => {
+    const configuredColumn = configuredColumns.find((col) => col.name === name);
+    return {
+      hidden: configuredColumn == null ? void 0 : configuredColumn.hidden,
+      label: configuredColumn == null ? void 0 : configuredColumn.label,
+      name,
+      serverDataType,
+      subscribed: configuredColumn !== void 0
+    };
+  });
+};
+var useTableSettings = ({
+  availableColumns,
+  onConfigChange,
+  tableConfig: tableConfigProp
+}) => {
+  const [tableConfig, setTableConfig] = useState13(tableConfigProp);
+  const columnItems = useMemo14(
+    () => buildColumnItems(availableColumns, tableConfig.columns),
+    [availableColumns, tableConfig.columns]
+  );
+  const handleMoveListItem = useCallback37(
+    (fromIndex, toIndex) => {
+      console.log(`move list item from ${fromIndex} to ${toIndex}`);
+    },
+    []
+  );
+  const handleColumnChange = useCallback37(
+    (name, property, value) => {
+      const columnItem = columnItems.find((col) => col.name === name);
+      if (property === "subscribed") {
+        console.log(`unsubscribe from ${name}`);
+      } else if (columnItem == null ? void 0 : columnItem.subscribed) {
+        const column = tableConfig.columns.find((col) => col.name === name);
+        if (column) {
+          const newConfig = updateTableConfig(tableConfig, {
+            type: "column-prop",
+            property,
+            column,
+            value
+          });
+          setTableConfig(newConfig);
+        }
+      }
+    },
+    [columnItems, tableConfig]
+  );
+  const handleChangeColumnLabels = useCallback37((evt) => {
+    const { value } = evt.target;
+    const columnFormatHeader = value === "0" ? void 0 : value === "1" ? "capitalize" : "uppercase";
+    setTableConfig((config) => ({
+      ...config,
+      columnFormatHeader
+    }));
+  }, []);
+  useLayoutEffectSkipFirst2(() => {
+    onConfigChange == null ? void 0 : onConfigChange(tableConfig);
+  }, [onConfigChange, tableConfig]);
+  const columnLabelsValue = tableConfig.columnFormatHeader === void 0 ? 0 : tableConfig.columnFormatHeader === "capitalize" ? 1 : 2;
+  return {
+    columnItems,
+    columnLabelsValue,
+    onChangeColumnLabels: handleChangeColumnLabels,
+    onColumnChange: handleColumnChange,
+    onMoveListItem: handleMoveListItem
+  };
+};
+
+// src/table-settings/TableSettingsPanel.tsx
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+var classBase13 = "vuuTableSettingsPanel";
+var TableSettingsPanel = ({
+  availableColumns,
+  onConfigChange,
+  tableConfig,
+  ...htmlAttributes
+}) => {
+  const {
+    columnItems,
+    columnLabelsValue,
+    onChangeColumnLabels,
+    onColumnChange,
+    onMoveListItem
+  } = useTableSettings({
+    availableColumns,
+    onConfigChange,
+    tableConfig
+  });
+  return /* @__PURE__ */ jsxs21("div", { ...htmlAttributes, className: classBase13, children: [
+    /* @__PURE__ */ jsxs21(FormField5, { children: [
+      /* @__PURE__ */ jsx30(FormFieldLabel5, { children: "Column Labels" }),
+      /* @__PURE__ */ jsxs21(
+        ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: onChangeColumnLabels,
+          value: columnLabelsValue,
+          children: [
+            /* @__PURE__ */ jsx30(
+              ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "text-strikethrough",
+                value: 0
+              }
+            ),
+            /* @__PURE__ */ jsx30(
+              ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "text-Tt",
+                value: 1
+              }
+            ),
+            /* @__PURE__ */ jsx30(
+              ToggleButton,
+              {
+                className: "vuuIconToggleButton",
+                "data-icon": "text-T",
+                value: 2
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs21(FormField5, { children: [
+      /* @__PURE__ */ jsx30(FormFieldLabel5, { children: "Default Column Width" }),
+      /* @__PURE__ */ jsx30(Input3, { className: "vuuInput" })
+    ] }),
+    /* @__PURE__ */ jsx30(
+      ColumnList,
+      {
+        columnItems,
+        onChange: onColumnChange,
+        onMoveListItem
+      }
+    )
+  ] });
+};
 export {
   ColumnExpressionInput,
+  ColumnList,
   ColumnNamedTerms,
-  ColumnSettingsPanel2 as ColumnSettingsPanel,
   DataSourceStats,
   DatagridSettingsPanel,
+  TableSettingsPanel,
   columnExpressionLanguageSupport,
   isCompleteExpression,
   isCompleteRelationalExpression,
   lastNamedChild,
   useColumnExpressionEditor,
   useColumnExpressionSuggestionProvider,
+  useTableSettings,
   walkTree
 };
 //# sourceMappingURL=index.js.map