@vuu-ui/vuu-table-extras 4.0.0-alpha.9 → 4.0.0-beta.1

package/package.json

@@ -1,35 +1,33 @@
 {
-  "version": "4.0.0-alpha.9",
+  "version": "4.0.0-beta.1",
   "author": "heswell",
   "main": "./src/index.js",
   "license": "Apache-2.0",
-  "type": "module",
   "scripts": {
     "prebuild": "npm run lezer-generate:column",
     "build:dev": "node ../../scripts/run-build.mjs",
     "build": "node ../../scripts/run-build-rslib.ts",
     "type-defs": "node ../../scripts/build-type-defs.mjs",
-    "lezer-generate:column": "lezer-generator --output ./src/column-expression-input/column-language-parser/generated/column-parser.ts ./src/column-expression-input/column-language-parser/grammar/column.grammar"
+    "lezer-generate:column": "lezer-generator --output ./src/column-expression-input/column-language-parser/generated/column-parser.js ./src/column-expression-input/column-language-parser/grammar/column.grammar"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.9"
+    "@vuu-ui/vuu-filter-types": "4.0.0-beta.1",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-beta.1"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-data-editing": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-data-react": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-popups": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.9",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.9",
+    "@vuu-ui/vuu-codemirror": "4.0.0-beta.1",
+    "@vuu-ui/vuu-data-editing": "4.0.0-beta.1",
+    "@vuu-ui/vuu-data-react": "4.0.0-beta.1",
+    "@vuu-ui/vuu-data-types": "4.0.0-beta.1",
+    "@vuu-ui/vuu-table-types": "4.0.0-beta.1",
+    "@vuu-ui/vuu-popups": "4.0.0-beta.1",
+    "@vuu-ui/vuu-table": "4.0.0-beta.1",
+    "@vuu-ui/vuu-utils": "4.0.0-beta.1",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-beta.1",
     "@lezer/lr": "1.4.2",
-    "@salt-ds/core": "1.67.0",
-    "@salt-ds/lab": "1.0.0-alpha.99",
-    "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1",
+    "@salt-ds/core": "1.72.0",
+    "@salt-ds/styles": "0.4.1",
+    "@salt-ds/window": "0.1.2",
     "csv-parse": "^7.0.0"
   },
   "peerDependencies": {
@@ -38,6 +36,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
+  "type": "module",
   "files": [
     "README.md",
     "src",
@@ -46,6 +45,7 @@
   "exports": {
     ".": {
       "import": "./src/index.js",
+      "default": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },

package/src/cell-renderers/pct-progress-cell/PctProgressCell.css.js

@@ -9,8 +9,8 @@ const css = `
 }
 
 .vuuPctProgressCell-progressBar {
-  background-color: var(--vuu-color-green-60-fade-30);
-  border-right: solid var(--progress-bar-width) var(--vuu-color-green-60);
+  background-color: var(--salt-color-green-600-40a);
+  border-right: solid var(--progress-bar-width) var(--salt-color-green-600);
   height: 20px;
   width: var(--progress-bar-pct, 0);
   display: inline-block;

package/src/cell-renderers/progress-cell/ProgressCell.css.js

@@ -13,7 +13,7 @@ const css = `
 }
 
 .vuuProgressCell-bg {
-  background-color: var(--salt-measured-background);
+  background-color: var(--salt-sentiment-neutral-track);
   width: 100%;
   height: 2px;
   display: inline-block;
@@ -23,7 +23,7 @@ const css = `
 }
 
 .vuuProgressCell-bar {
-  background-color: var(--salt-measured-fill);
+  background-color: var(--salt-sentiment-accent-background);
   height: 100%;
   transform: translateX(var(--progress-bar-pct, -100%));
   width: 100%;

package/src/column-expression-input/ColumnExpressionInput.css.js

@@ -5,15 +5,15 @@ const css = `
   --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);
   --vuuFilterEditor-fontSize: var(--salt-text-fontSize);
   --vuuFilterEditor-cursorColor: var(--salt-content-secondary-foreground);
-  --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);
+  --vuuFilterEditor-selectionBackground: var(--salt-selectable-background-selected);
   --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);
-  --vuuFilterEditor-tooltipBorder: solid 1px var(--vuu-color-purple-10);
+  --vuuFilterEditor-tooltipBorder: solid 1px var(--vuu-color-purple);
   --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);
   --vuuFilterEditor-suggestion-selectedBackground: var(--vuu-color-gray-10);
   --vuuFilterEditor-suggestion-selectedColor: var(--salt-content-primary-foreground);
   --vuuFilterEditor-suggestion-detailColor: var(--salt-content-secondary-foreground-disabled);
   --vuuFilterEditor-suggestion-height: 24px;
-  --vuuFilterEditor-variableColor: var(--vuu-color-purple-10);
+  --vuuFilterEditor-variableColor: var(--vuu-color-purple);
   box-sizing: border-box;
   align-items: center;
   height: 30px;
@@ -72,13 +72,13 @@ const css = `
 }
 
 .vuuFunctionDoc .example-container {
-  background-color: var(--vuu-color-gray-03);
+  background-color: var(--salt-color-gray-100);
   margin: 6px 0;
   padding: 3px;
 }
 
 .vuuFunctionDoc .example-expression {
-  color: var(--vuu-color-gray-80);
+  color: var(--salt-color-gray-800);
   font-family: var(--salt-typography-fontFamily-code);
   padding: 8px;
   font-weight: 500;

package/src/column-expression-input/column-language-parser/column-expression-parse-utils.js

@@ -33,7 +33,7 @@ const isCompleteExpression = (src)=>{
     try {
         strictParser.parse(src);
         return true;
-    } catch (_err) {
+    } catch (err) {
         return false;
     }
 };

package/src/column-expression-input/theme.js

@@ -24,7 +24,7 @@ const vuuTheme = EditorView.theme({
         color: "var(--vuu-color-gray-50)"
     },
     ".cm-completionMatchedText": {
-        color: "var(--vuu-color-gray-80)",
+        color: "var(--salt-color-gray-800)",
         fontWeight: 700,
         textDecoration: "none"
     },

package/src/column-expression-input/useColumnExpressionEditor.js

@@ -116,6 +116,7 @@ const useColumnExpressionEditor = ({ onChange, onSubmitExpression, source, sugge
             viewRef.current?.destroy();
         };
     }, [
+        completionFn,
         createState
     ]);
     const handleBlur = useCallback(()=>{

package/src/column-expression-input/useColumnExpressionSuggestionProvider.js

@@ -1,6 +1,6 @@
 import { AnnotationType, getRelationalOperators, numericOperators, stringOperators, toSuggestions } from "@vuu-ui/vuu-codemirror";
 import { getTypeaheadParams, useTypeaheadSuggestions } from "@vuu-ui/vuu-data-react";
-import { isNumericColumn, isTextColumn } from "@vuu-ui/vuu-utils";
+import { isNumericColumn, isTemporalColumn, isTextColumn } from "@vuu-ui/vuu-utils";
 import { useCallback, useRef } from "react";
 import { columnFunctionDescriptors } from "./column-function-descriptors.js";
 import { functionDocInfo } from "./functionDocInfo.js";
@@ -64,7 +64,7 @@ const arithmeticOperators = [
     }
 ];
 const getOperators = (column)=>{
-    if (void 0 === column || isNumericColumn(column)) return arithmeticOperators;
+    if (void 0 === column || isNumericColumn(column) || isTemporalColumn(column)) return arithmeticOperators;
     return NO_OPERATORS;
 };
 const getConditionOperators = (column)=>{

package/src/column-formatting-settings/ColumnFormattingPanel.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getCellRendererOptions, getConfigurationEditor, isColumnTypeRenderer, isTypeDescriptor } from "@vuu-ui/vuu-utils";
+import { getCellRendererOptions, getConfigurationEditor, isColumnTypeRenderer, isTemporalColumn, isTypeDescriptor } from "@vuu-ui/vuu-utils";
 import { Dropdown, FormField, FormFieldLabel, Option } from "@salt-ds/core";
 import clsx from "clsx";
 import { useCallback, useMemo } from "react";
@@ -88,21 +88,24 @@ const ColumnFormattingPanel = ({ availableRenderers, className, column, onChange
 function getFormattingSettingsComponent(props) {
     const { column } = props;
     switch(column.serverDataType){
+        case "long":
+            return /*#__PURE__*/ jsx(LongTypeFormattingSettings, {
+                ...props
+            });
+        case "epochtimestamp":
+        case "epochtimestampnano":
+            return /*#__PURE__*/ jsx(DateTimeFormattingSettings, {
+                ...props
+            });
         case "double":
         case "scaleddecimal2":
         case "scaleddecimal4":
         case "scaleddecimal6":
         case "scaleddecimal8":
         case "int":
-            return /*#__PURE__*/ jsx(BaseNumericFormattingSettings, {
+            return isTemporalColumn(column) ? /*#__PURE__*/ jsx(DateTimeFormattingSettings, {
                 ...props
-            });
-        case "long":
-            return /*#__PURE__*/ jsx(LongTypeFormattingSettings, {
-                ...props
-            });
-        case "epochtimestamp":
-            return /*#__PURE__*/ jsx(DateTimeFormattingSettings, {
+            }) : /*#__PURE__*/ jsx(BaseNumericFormattingSettings, {
                 ...props
             });
         default:

package/src/column-formatting-settings/DateTimeFormattingSettings.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { dateTimeLabelByType, defaultPatternsByType, fallbackDateTimePattern, getTypeFormattingFromColumn, isDatePattern, isTimePattern, supportedDateTimePatterns } from "@vuu-ui/vuu-utils";
+import { dateTimeLabelByType, dateTimePattern, defaultPatternsByType, fallbackDateTimePattern, getTemporalInfo, getTypeFormattingFromColumn, isDatePattern, isTimePattern, supportedDateTimePatterns } from "@vuu-ui/vuu-utils";
 import { Dropdown, FormField, FormFieldLabel, Option, ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
 import { useCallback, useMemo, useState } from "react";
 const toggleValues = [
@@ -7,6 +7,32 @@ const toggleValues = [
     "time",
     "both"
 ];
+const DEFAULT = "default";
+const fractionalSecondDigitOptions = [
+    DEFAULT,
+    "0",
+    "3",
+    "6",
+    "9"
+];
+const timeZoneOptions = [
+    DEFAULT,
+    "local",
+    "UTC",
+    "Europe/London",
+    "Europe/Paris",
+    "America/New_York",
+    "Asia/Tokyo",
+    "Asia/Hong_Kong"
+];
+const localeOptions = [
+    DEFAULT,
+    "en-GB",
+    "en-US",
+    "de-DE",
+    "fr-FR",
+    "ja-JP"
+];
 function getToggleValue(pattern) {
     return pattern.time ? pattern.date ? "both" : "time" : "date";
 }
@@ -20,7 +46,8 @@ const getSelectedPattern = (pattern)=>{
 };
 const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange })=>{
     const formatting = getTypeFormattingFromColumn(column);
-    const { pattern = fallbackDateTimePattern } = formatting;
+    const temporalInfo = getTemporalInfo(column);
+    const { pattern = temporalInfo ? dateTimePattern(column.type, temporalInfo.kind) : fallbackDateTimePattern } = formatting;
     const toggleValue = useMemo(()=>getToggleValue(pattern), [
         pattern
     ]);
@@ -28,6 +55,26 @@ const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange })=>{
         time: pattern.time ?? defaultPatternsByType.time,
         date: pattern.date ?? defaultPatternsByType.date
     });
+    const onFractionalSecondDigitsChange = useCallback((_, [value])=>{
+        const { fractionalSecondDigits, ...rest } = formatting;
+        onChange(value === DEFAULT ? rest : {
+            ...rest,
+            fractionalSecondDigits: parseInt(value, 10)
+        });
+    }, [
+        formatting,
+        onChange
+    ]);
+    const onFormattingOptionChange = useCallback((key)=>(_, [value])=>{
+            const { [key]: _previous, ...rest } = formatting;
+            onChange(value === DEFAULT ? rest : {
+                ...rest,
+                [key]: value
+            });
+        }, [
+        formatting,
+        onChange
+    ]);
     const onPatternChange = useCallback((pattern)=>onChange({
             ...formatting,
             pattern
@@ -109,7 +156,64 @@ const DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange })=>{
                                 }, i))
                         })
                     ]
-                }, v))
+                }, v)),
+            pattern.time ? /*#__PURE__*/ jsxs(FormField, {
+                labelPlacement: "top",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Fractional second digits"
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown, {
+                        onSelectionChange: onFractionalSecondDigitsChange,
+                        selected: [
+                            `${formatting.fractionalSecondDigits ?? DEFAULT}`
+                        ],
+                        value: `${formatting.fractionalSecondDigits ?? DEFAULT}`,
+                        children: fractionalSecondDigitOptions.filter((digits)=>temporalInfo?.precision === "ns" || "6" !== digits && "9" !== digits).map((digits)=>/*#__PURE__*/ jsx(Option, {
+                                value: digits,
+                                children: digits
+                            }, digits))
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ jsxs(FormField, {
+                labelPlacement: "top",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Time zone"
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown, {
+                        onSelectionChange: onFormattingOptionChange("timeZone"),
+                        selected: [
+                            formatting.timeZone ?? DEFAULT
+                        ],
+                        value: formatting.timeZone ?? DEFAULT,
+                        children: timeZoneOptions.map((timeZone)=>/*#__PURE__*/ jsx(Option, {
+                                value: timeZone,
+                                children: timeZone
+                            }, timeZone))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(FormField, {
+                labelPlacement: "top",
+                children: [
+                    /*#__PURE__*/ jsx(FormFieldLabel, {
+                        children: "Locale"
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown, {
+                        onSelectionChange: onFormattingOptionChange("locale"),
+                        selected: [
+                            formatting.locale ?? DEFAULT
+                        ],
+                        value: formatting.locale ?? DEFAULT,
+                        children: localeOptions.map((locale)=>/*#__PURE__*/ jsx(Option, {
+                                value: locale,
+                                children: locale
+                            }, locale))
+                    })
+                ]
+            })
         ]
     });
 };

package/src/column-formatting-settings/LongTypeFormattingSettings.js

@@ -5,7 +5,8 @@ import { useWindow } from "@salt-ds/window";
 import { useCallback } from "react";
 import { BaseNumericFormattingSettings } from "./BaseNumericFormattingSettings.js";
 import LongTypeFormattingSettings from "./LongTypeFormattingSettings.css";
-import { isTypeDescriptor } from "@vuu-ui/vuu-utils";
+import { isTemporalColumn, isTypeDescriptor } from "@vuu-ui/vuu-utils";
+import { DateTimeFormattingSettings } from "./DateTimeFormattingSettings.js";
 const classBase = "vuuLongColumnFormattingSettings";
 const LongTypeFormattingSettings_LongTypeFormattingSettings = (props)=>{
     const targetWindow = useWindow();
@@ -41,7 +42,9 @@ const LongTypeFormattingSettings_LongTypeFormattingSettings = (props)=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(BaseNumericFormattingSettings, {
+            isTemporalColumn(column) ? /*#__PURE__*/ jsx(DateTimeFormattingSettings, {
+                ...props
+            }) : /*#__PURE__*/ jsx(BaseNumericFormattingSettings, {
                 ...props
             })
         ]
@@ -49,6 +52,8 @@ const LongTypeFormattingSettings_LongTypeFormattingSettings = (props)=>{
 };
 const toggleValues = [
     "number",
-    "date/time"
+    "date/time",
+    "date",
+    "time"
 ];
 export { LongTypeFormattingSettings_LongTypeFormattingSettings as LongTypeFormattingSettings };

package/src/column-picker/ColumnModel.js

@@ -15,6 +15,7 @@ const isColumnAdded = (change)=>change?.type === SelectedColumnChangeType.Column
 const isColumnRemoved = (change)=>change?.type === SelectedColumnChangeType.ColumnRemoved;
 const isColumnUpdated = (change)=>change?.type === SelectedColumnChangeType.ColumnUpdated;
 const isColumnsReordered = (change)=>change?.type === SelectedColumnChangeType.ColumnsReordered;
+const columnDescriptorComparator = (col1, col2)=>col1.name === col2.name;
 class ColumnModel extends EventEmitter {
     allColumns;
     #selectedColumns;
@@ -36,10 +37,10 @@ class ColumnModel extends EventEmitter {
     }
     addRemoveOrReorderSelectedColumns(newSelectedColumns, source) {
         if (!itemsOrOrderChanged(this.#selectedColumns, newSelectedColumns)) throw Error("[ColumnModel] addRemoveOrReorderSelectedColumns no change detected between current and new selected columns");
-        const addedColumns = getAddedItems(this.#selectedColumns, newSelectedColumns);
+        const addedColumns = getAddedItems(this.#selectedColumns, newSelectedColumns, columnDescriptorComparator);
         if (addedColumns.length > 0) if (1 == addedColumns.length) return void this.addItemToSelectedColumns(addedColumns[0].name, source);
         else throw Error("[ColumnModel] addRemoveOrReorderSelectedColumns attempt to add multiple selected columns in a single call");
-        const removedColumns = getRemovedItems(this.#selectedColumns, newSelectedColumns);
+        const removedColumns = getRemovedItems(this.#selectedColumns, newSelectedColumns, columnDescriptorComparator);
         if (removedColumns.length > 0) if (1 == removedColumns.length) return void this.removeItemFromSelectedColumns(removedColumns[0].name, source);
         else throw Error("[ColumnModel] addRemoveOrReorderSelectedColumns attempt to remove multiple selected columns in a single call");
         this.reorderSelectedColumns(newSelectedColumns.map(({ name })=>name), source);

package/src/column-picker/ColumnPicker.js

@@ -28,9 +28,7 @@ const ColumnPicker_ColumnPicker = /*#__PURE__*/ forwardRef(function({ columnMode
         selectedItems: selectedItems,
         itemTypeName: "column",
         onSelectedItemsChange: handleSelectedItemsChange,
-        onSelectionChange: onSelectionChange,
-        ref: forwardedRef,
-        selected: selected
+        ref: forwardedRef
     });
 });
 export { ColumnPicker_ColumnPicker as ColumnPicker, classBaseListItem };

package/src/column-settings-panel/ColumnNameLabel.css.js

@@ -10,7 +10,7 @@ const css = `
 }
 
 .vuuColumnNameLabel-placeholder {
-  color: var(--vuu-color-gray-35);
+  color: var(--salt-color-gray-400);
 }
 
 

package/src/csv-export/export-utils.js

@@ -1,4 +1,4 @@
-import { Range, isSessionTable, metadataKeys } from "@vuu-ui/vuu-utils";
+import { Range, buildColumnMap, getValueFormatter, isSessionTable, metadataKeys } from "@vuu-ui/vuu-utils";
 const EXPORT_EXCLUDED_COLUMNS = new Set([
     "vuuMsg",
     "vuuAction",
@@ -28,10 +28,32 @@ const triggerCsvDownload = (csv, filename)=>{
     document.body.removeChild(a);
     setTimeout(()=>URL.revokeObjectURL(url), 10000);
 };
+const createRowAccessor = (row, columnMap)=>new Proxy({}, {
+        get (_, prop) {
+            if ("string" == typeof prop) {
+                const idx = columnMap[prop];
+                if (void 0 !== idx) return row[idx];
+            }
+        },
+        has (_, prop) {
+            return "string" == typeof prop && void 0 !== columnMap[prop];
+        }
+    });
+const isExportableColumn = (descriptor)=>{
+    if (!descriptor) return true;
+    if (false === descriptor.exportable) return false;
+    if (descriptor.hidden) return false;
+    if (descriptor.isSystemColumn) return false;
+    if (true === descriptor.exportable) return true;
+    if ("client" === descriptor.source && !descriptor.exportFormatter) return false;
+    return true;
+};
 const exportCsvTemplate = async (dataSource, options = {})=>{
     const { filename = "template.csv", excludeColumns = [], columns, overrides, timeout = DEFAULT_TEMPLATE_TIMEOUT, onError, onSuccess } = options;
-    const sessionOverrides = overrides ?? (columns ? {
-        columns
+    const targetColumnNames = columns ? columns.filter((col)=>"string" == typeof col ? true : isExportableColumn(col) && "client" !== col.source).map((col)=>"string" == typeof col ? col : col.name) : void 0;
+    const targetColumns = targetColumnNames ?? overrides?.columns;
+    const sessionOverrides = overrides ?? (targetColumns ? {
+        columns: targetColumns
     } : void 0);
     if (!isSessionTable(dataSource.table) && dataSource.createSessionDataSource && "initialising" !== dataSource.status && "unsubscribed" !== dataSource.status) try {
         const sessionDataSource = await dataSource.createSessionDataSource("Empty", "export", sessionOverrides);
@@ -59,7 +81,16 @@ const exportCsvTemplate = async (dataSource, options = {})=>{
             }, (message)=>{
                 if ("subscribed" === message.type) {
                     const { columns: subColumns } = message;
-                    const exportCols = subColumns.filter((name)=>!excluded.has(name));
+                    const exportCols = targetColumns ? targetColumns.filter((name)=>!excluded.has(name)) : subColumns.filter((name)=>!excluded.has(name));
+                    if (0 === exportCols.length) {
+                        cleanup();
+                        const error = new Error("exportCsvTemplate: no columns available for export");
+                        if (onError) {
+                            onError(error);
+                            resolve();
+                        } else reject(error);
+                        return;
+                    }
                     const header = exportCols.map(csvCell).join(",");
                     triggerCsvDownload(`${header}\r\n`, filename);
                     cleanup();
@@ -72,7 +103,6 @@ const exportCsvTemplate = async (dataSource, options = {})=>{
         console.warn("[exportCsvTemplate] createSessionDataSource failed, falling back to tableSchema", error);
     }
     const schema = dataSource.tableSchema;
-    const targetColumns = columns ?? overrides?.columns;
     if (void 0 !== targetColumns) {
         if (schema) {
             const schemaColumnNames = new Set(schema.columns.map((col)=>col.name));
@@ -99,7 +129,18 @@ const exportCsvTemplate = async (dataSource, options = {})=>{
     onSuccess?.();
 };
 const exportSessionTableToCsv = async (dataSource, options = {})=>{
-    const { filename = "export.csv", copyOption = "All", excludeColumns = [], maxRows = MAX_EXPORT_ROWS, columnDescriptors, overrides, timeout = DEFAULT_EXPORT_TIMEOUT, onError, onSuccess } = options;
+    const { filename = "export.csv", copyOption = "All", excludeColumns = [], maxRows = MAX_EXPORT_ROWS, columnDescriptors: rawColumnDescriptors, columns: rawColumns, overrides, timeout = DEFAULT_EXPORT_TIMEOUT, onError, onSuccess } = options;
+    const rawInputColumns = rawColumns ?? rawColumnDescriptors;
+    const columnDescriptors = rawInputColumns?.map((col)=>"string" == typeof col ? {
+            name: col
+        } : col);
+    const sessionOverrides = overrides ? {
+        ...overrides,
+        columns: overrides.columns?.filter((name)=>{
+            const desc = columnDescriptors?.find((d)=>d.name === name);
+            return desc?.source !== "client";
+        })
+    } : void 0;
     const isRemote = !!dataSource.isRemote;
     if (isRemote && !isSessionTable(dataSource.table) && ("initialising" === dataSource.status || "unsubscribed" === dataSource.status)) {
         const error = new Error(`exportSessionTableToCsv: dataSource must be subscribed before exporting (current status: "${dataSource.status}")`);
@@ -108,7 +149,7 @@ const exportSessionTableToCsv = async (dataSource, options = {})=>{
     }
     let sessionDataSource;
     if (!isSessionTable(dataSource.table) && dataSource.createSessionDataSource) try {
-        sessionDataSource = await dataSource.createSessionDataSource(copyOption, "export", overrides);
+        sessionDataSource = await dataSource.createSessionDataSource(copyOption, "export", sessionOverrides);
     } catch (err) {
         const error = err instanceof Error ? err : new Error(String(err));
         if (onError) return void onError(error);
@@ -152,18 +193,23 @@ const exportSessionTableToCsv = async (dataSource, options = {})=>{
                 const { columns } = message;
                 if (columnDescriptors) {
                     const subscribedSet = new Set(columns);
-                    const unknown = columnDescriptors.filter((d)=>!excluded.has(d.name) && !subscribedSet.has(d.name)).map((d)=>d.name);
+                    const unknown = columnDescriptors.filter((d)=>"client" !== d.source && !excluded.has(d.name) && !subscribedSet.has(d.name)).map((d)=>d.name);
                     if (unknown.length > 0) return void fail(new Error(`exportToCsv: unknown column(s) in columnDescriptors: ${unknown.join(", ")}`));
                     descriptorMap = Object.fromEntries(columnDescriptors.map((d)=>[
                             d.name,
                             d
                         ]));
                 }
-                exportCols = columns.filter((name)=>!excluded.has(name));
-                colNameToRowIdx = Object.fromEntries(columns.map((name, i)=>[
-                        name,
-                        metadataKeys.count + i
-                    ]));
+                if (rawColumns) exportCols = rawColumns.map((c)=>"string" == typeof c ? c : c.name).filter((name)=>!excluded.has(name) && isExportableColumn(descriptorMap[name]));
+                else if (columnDescriptors?.some((d)=>"client" === d.source)) {
+                    const definedNames = new Set(columnDescriptors.map((d)=>d.name));
+                    const remainingSubscribed = columns.filter((name)=>!excluded.has(name) && !definedNames.has(name) && isExportableColumn(descriptorMap[name]));
+                    exportCols = [
+                        ...columnDescriptors.filter((d)=>!excluded.has(d.name) && isExportableColumn(d)).map((d)=>d.name),
+                        ...remainingSubscribed
+                    ];
+                } else exportCols = columns.filter((name)=>!excluded.has(name) && isExportableColumn(descriptorMap[name]));
+                colNameToRowIdx = buildColumnMap(columns);
             } else if ("viewport-update" === message.type) {
                 if ("size-only" === message.mode) {
                     totalSize = message.size ?? 0;
@@ -191,11 +237,21 @@ const exportSessionTableToCsv = async (dataSource, options = {})=>{
                         ];
                         for(let i = 0; i < totalSize; i++){
                             const row = collectedRows.get(i);
-                            if (row) lines.push(exportCols.map((c)=>{
-                                const raw = row[colNameToRowIdx[c]];
-                                const formatter = descriptorMap[c]?.exportFormatter;
-                                return csvCell(formatter ? formatter(raw) : raw);
-                            }).join(","));
+                            if (row) {
+                                const rowAccessor = createRowAccessor(row, colNameToRowIdx);
+                                lines.push(exportCols.map((c)=>{
+                                    const descriptor = descriptorMap[c];
+                                    const isClientCol = descriptor?.source === "client";
+                                    const raw = isClientCol ? void 0 : void 0 !== colNameToRowIdx[c] ? row[colNameToRowIdx[c]] : void 0;
+                                    let formatted;
+                                    if (descriptor?.exportFormatter) formatted = descriptor.exportFormatter(raw, rowAccessor);
+                                    else if (descriptor && ("type" in descriptor || "serverDataType" in descriptor)) {
+                                        const tableFormatter = getValueFormatter(descriptor);
+                                        formatted = tableFormatter(raw);
+                                    } else formatted = raw;
+                                    return csvCell(formatted);
+                                }).join(","));
+                            }
                         }
                         triggerCsvDownload(lines.join("\r\n"), filename);
                         onSuccess?.();
@@ -213,9 +269,9 @@ const exportSessionTableToCsv = async (dataSource, options = {})=>{
         };
         activeSessionDataSource.subscribe({
             range: Range(0, 0),
-            columns: overrides?.columns
+            columns: sessionOverrides?.columns
         }, handleMessage);
     });
 };
 const exportToCsv = async (dataSource, options)=>exportSessionTableToCsv(dataSource, options);
-export { exportCsvTemplate, exportSessionTableToCsv, exportToCsv };
+export { exportCsvTemplate, exportSessionTableToCsv, exportToCsv, isExportableColumn };

package/src/csv-export/index.js

@@ -1,2 +1,2 @@
-export { exportCsvTemplate, exportSessionTableToCsv, exportToCsv } from "./export-utils.js";
+export { exportCsvTemplate, exportSessionTableToCsv, exportToCsv, isExportableColumn } from "./export-utils.js";
 export { useCsvExport } from "./useCsvExport.js";

package/src/csv-export/useCsvExport.js

@@ -6,7 +6,7 @@ function useCsvExport(propsOrDataSource) {
     const config = propsOrDataSource && "table" in propsOrDataSource ? {
         dataSource: propsOrDataSource
     } : propsOrDataSource ?? {};
-    const { dataSource: defaultDataSource, onError, onSuccess } = config;
+    const { dataSource: defaultDataSource, tableConfig, columns: defaultColumns, onError, onSuccess } = config;
     const exportCsv = useCallback(async (options, overrideDataSource)=>{
         const activeDataSource = overrideDataSource ?? defaultDataSource;
         if (!activeDataSource) {
@@ -19,7 +19,9 @@ function useCsvExport(propsOrDataSource) {
         setIsExporting(true);
         setError(null);
         try {
+            const columnsToExport = options?.columns ?? options?.columnDescriptors ?? defaultColumns ?? tableConfig?.columns;
             await exportToCsv(activeDataSource, {
+                columns: columnsToExport,
                 ...options,
                 onError: (err)=>{
                     setError(err);
@@ -42,6 +44,8 @@ function useCsvExport(propsOrDataSource) {
         }
     }, [
         defaultDataSource,
+        defaultColumns,
+        tableConfig,
         onError,
         onSuccess
     ]);
@@ -57,7 +61,9 @@ function useCsvExport(propsOrDataSource) {
         setIsExporting(true);
         setError(null);
         try {
+            const templateColumns = options?.columns ?? defaultColumns ?? tableConfig?.columns;
             await exportCsvTemplate(activeDataSource, {
+                columns: templateColumns,
                 ...options,
                 onError: (err)=>{
                     setError(err);
@@ -80,6 +86,8 @@ function useCsvExport(propsOrDataSource) {
         }
     }, [
         defaultDataSource,
+        defaultColumns,
+        tableConfig,
         onError,
         onSuccess
     ]);