@vuu-ui/vuu-datatable 2.1.19-beta.1 → 2.1.19-beta.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.19-beta.1",
+  "version": "2.1.19-beta.2",
   "author": "heswell",
   "type": "module",
   "license": "Apache-2.0",
@@ -7,16 +7,16 @@
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-local": "2.1.19-beta.1",
-    "@vuu-ui/vuu-table-types": "2.1.19-beta.1",
-    "@vuu-ui/vuu-filters": "2.1.19-beta.1",
-    "@vuu-ui/vuu-layout": "2.1.19-beta.1",
-    "@vuu-ui/vuu-popups": "2.1.19-beta.1",
-    "@vuu-ui/vuu-shell": "2.1.19-beta.1",
-    "@vuu-ui/vuu-table": "2.1.19-beta.1",
-    "@vuu-ui/vuu-table-extras": "2.1.19-beta.1",
-    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.1",
-    "@vuu-ui/vuu-utils": "2.1.19-beta.1"
+    "@vuu-ui/vuu-data-local": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.2",
+    "@vuu-ui/vuu-filters": "2.1.19-beta.2",
+    "@vuu-ui/vuu-layout": "2.1.19-beta.2",
+    "@vuu-ui/vuu-popups": "2.1.19-beta.2",
+    "@vuu-ui/vuu-shell": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table": "2.1.19-beta.2",
+    "@vuu-ui/vuu-table-extras": "2.1.19-beta.2",
+    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.2",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.2"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -25,13 +25,12 @@
   },
   "files": [
     "README.md",
-    "esm",
-    "cjs",
+    "src",
     "/types"
   ],
   "exports": {
     ".": {
-      "import": "./index.js",
+      "import": "./src/index.js",
       "types": "./types/index.d.ts"
     }
   },

package/src/filter-table/FilterTable.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FilterBar } from "@vuu-ui/vuu-filters";
+import { Table } from "@vuu-ui/vuu-table";
+import { useFilterTable } from "./useFilterTable.js";
+import { DataSourceProvider } from "@vuu-ui/vuu-utils";
+const classBase = "vuuFilterTable";
+const filterTableStyles = {
+    "--vuuFilterBar-flex": "0 0 auto",
+    "--vuuMeasuredContainer-flex": "1 1 auto",
+    display: "flex",
+    flexDirection: "column"
+};
+const FilterTable = ({ FilterBarProps, TableProps, style: styleProps, ...htmlAttributes })=>{
+    const { filterBarProps } = useFilterTable({
+        TableProps,
+        FilterBarProps
+    });
+    return /*#__PURE__*/ jsx(DataSourceProvider, {
+        dataSource: TableProps.dataSource,
+        children: /*#__PURE__*/ jsxs("div", {
+            ...htmlAttributes,
+            className: classBase,
+            style: {
+                ...styleProps,
+                ...filterTableStyles
+            },
+            children: [
+                /*#__PURE__*/ jsx(FilterBar, {
+                    ...filterBarProps
+                }),
+                /*#__PURE__*/ jsx(Table, {
+                    ...TableProps,
+                    height: "auto",
+                    width: "auto"
+                })
+            ]
+        })
+    });
+};
+export { FilterTable };

package/src/filter-table/index.js

@@ -0,0 +1,2 @@
+export * from "./FilterTable.js";
+export * from "./usePersistFilterState.js";

package/src/filter-table/useFilterTable.js

@@ -0,0 +1,23 @@
+import { useCallback } from "react";
+const useFilterTable = ({ FilterBarProps, TableProps: { config: { columns }, dataSource } })=>{
+    const handleApplyFilter = useCallback((filter)=>{
+        dataSource.setFilter?.(filter);
+    }, [
+        dataSource
+    ]);
+    const handleClearFilter = useCallback(()=>{
+        dataSource.clearFilter?.();
+    }, [
+        dataSource
+    ]);
+    const filterBarProps = {
+        ...FilterBarProps,
+        columnDescriptors: FilterBarProps?.columnDescriptors ?? columns,
+        onApplyFilter: handleApplyFilter,
+        onClearFilter: handleClearFilter
+    };
+    return {
+        filterBarProps
+    };
+};
+export { useFilterTable };

package/src/filter-table/usePersistFilterState.js

@@ -0,0 +1,139 @@
+import { useViewContext } from "@vuu-ui/vuu-layout";
+import { useWorkspace } from "@vuu-ui/vuu-shell";
+import { useCallback, useMemo, useState } from "react";
+const NO_CONFIG = {};
+const hasFilterWithName = (filters, name)=>-1 !== filters.findIndex((f)=>f.name === name);
+const usePersistFilterState = ({ tableSchema })=>{
+    const { load, save } = useViewContext();
+    const { getApplicationSettings, saveApplicationSettings } = useWorkspace();
+    const { "filterbar-config": filterbarConfigFromState } = useMemo(()=>load?.() ?? NO_CONFIG, [
+        load
+    ]);
+    const [filterState, setFilterState] = useState({
+        filters: filterbarConfigFromState?.filterState?.filters ?? [],
+        activeIndices: filterbarConfigFromState?.filterState?.activeIndices ?? []
+    });
+    const savedFilters = useMemo(()=>{
+        const { table: { module, table } } = tableSchema;
+        const savedFilters = getApplicationSettings("filters");
+        const key = `${module}:${table}`;
+        return savedFilters?.[key] ?? [];
+    }, [
+        getApplicationSettings,
+        tableSchema
+    ]);
+    const removeFilterFromSettings = useCallback((filter)=>{
+        if (!tableSchema || !filter.name) return;
+        const savedFilters = getApplicationSettings("filters");
+        if (!savedFilters) return;
+        const { module, table } = tableSchema.table;
+        const key = `${module}:${table}`;
+        if (hasFilterWithName(savedFilters[key], filter.name)) {
+            const newSavedFilters = {
+                ...savedFilters,
+                [key]: savedFilters[key].filter((f)=>f.name !== filter.name)
+            };
+            saveApplicationSettings(newSavedFilters, "filters");
+        }
+    }, [
+        getApplicationSettings,
+        saveApplicationSettings,
+        tableSchema
+    ]);
+    const saveFilterToSettings = useCallback((filter, name)=>{
+        if (tableSchema && name) {
+            const savedFilters = getApplicationSettings("filters");
+            let newFilters = savedFilters;
+            const { module, table } = tableSchema.table;
+            const key = `${module}:${table}`;
+            newFilters = savedFilters ? savedFilters[key] ? hasFilterWithName(savedFilters[key], name) ? {
+                ...savedFilters,
+                [key]: savedFilters[key].map((f)=>f.name === name ? {
+                        ...filter,
+                        name
+                    } : f)
+            } : filter?.name && filter?.name !== name && hasFilterWithName(savedFilters[key], filter.name) ? {
+                ...savedFilters,
+                [key]: savedFilters[key].map((f)=>f.name === filter.name ? {
+                        ...filter,
+                        name
+                    } : f)
+            } : {
+                ...savedFilters,
+                [key]: savedFilters[key].concat({
+                    ...filter,
+                    name
+                })
+            } : {
+                ...savedFilters,
+                [key]: [
+                    {
+                        ...filter,
+                        name
+                    }
+                ]
+            } : {
+                [key]: [
+                    {
+                        ...filter,
+                        name
+                    }
+                ]
+            };
+            if (newFilters !== savedFilters) saveApplicationSettings(newFilters, "filters");
+        }
+    }, [
+        getApplicationSettings,
+        saveApplicationSettings,
+        tableSchema
+    ]);
+    const handleFilterStateChanged = useCallback((filterState)=>{
+        save?.({
+            filterState
+        }, "filterbar-config");
+        setFilterState(filterState);
+    }, [
+        save
+    ]);
+    const handleFilterDeleted = useCallback((filter)=>{
+        removeFilterFromSettings(filter);
+    }, [
+        removeFilterFromSettings
+    ]);
+    const handleFilterRenamed = useCallback((filter, name)=>{
+        saveFilterToSettings(filter, name);
+    }, [
+        saveFilterToSettings
+    ]);
+    const buildFilterTableMenuOptions = useCallback((location)=>{
+        if ("filter-bar-menu" !== location) return [];
+        if (savedFilters.length > 0) return savedFilters.map((filter)=>({
+                id: "add-filter",
+                label: filter.name,
+                options: {
+                    filter
+                }
+            }));
+        return [
+            {
+                label: "You have no saved filters for this table",
+                id: "no-action"
+            }
+        ];
+    }, [
+        savedFilters
+    ]);
+    const handleFilterTableMenuAction = useCallback((menuItemId)=>{
+        if ("add-filter" === menuItemId) return true;
+        return false;
+    }, []);
+    return {
+        buildFilterTableMenuOptions,
+        filterState,
+        handleFilterTableMenuAction,
+        onFilterStateChanged: handleFilterStateChanged,
+        onFilterDeleted: handleFilterDeleted,
+        onFilterRenamed: handleFilterRenamed
+    };
+};
+export { usePersistFilterState };

package/src/index.js

@@ -0,0 +1,4 @@
+export * from "./filter-table/index.js";
+export * from "./json-table/index.js";
+export * from "./tree-table/index.js";
+export * from "./linked-table-view/LinkedTableView.js";

package/src/json-table/JsonCell.css.js

@@ -0,0 +1,21 @@
+const css = `
+.vuuJsonCell {
+  --group-cell-spacer-width: 20px;
+  cursor: pointer;
+  height: var(--row-height);
+  border-right-style: solid;
+  border-right-width: 1px;
+  align-items: center;
+  padding-left: 20px;
+  line-height: 16px;
+  display: inline-flex;
+  position: relative;
+
+  & .vuuToggleIconButton {
+    position: absolute;
+  }
+}
+
+
+`;
+export default css;

package/src/json-table/JsonCell.js

@@ -0,0 +1,40 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { ToggleIconButton } from "@vuu-ui/vuu-ui-controls";
+import JsonCell from "./JsonCell.css";
+const JsonCell_JsonCell = ({ column, dataRow })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-array-cell",
+        css: JsonCell,
+        window: targetWindow
+    });
+    const { name } = column;
+    let { isExpanded, isLeaf, [name]: value } = dataRow;
+    const getDisplayValue = ()=>{
+        if (isLeaf) return value;
+        if ("string" == typeof value && value.endsWith("{")) {
+            value = value.slice(0, -1);
+            if (!isNaN(parseInt(value))) return `${value}: {...}`;
+            return "value {...}";
+        }
+        if ("string" == typeof value && value.endsWith("[")) {
+            value = value.slice(0, -1);
+            return `${value} [...]`;
+        }
+    };
+    const displayValue = getDisplayValue();
+    const isEmpty = "" === displayValue || void 0 === displayValue;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            isLeaf || isEmpty ? null : /*#__PURE__*/ jsx(ToggleIconButton, {
+                isExpanded: isExpanded
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: displayValue
+            })
+        ]
+    });
+};
+export { JsonCell_JsonCell as JsonCell };

package/src/json-table/JsonTable.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { registerComponent } from "@vuu-ui/vuu-utils";
+import { Table } from "@vuu-ui/vuu-table";
+import { JsonDataSource } from "@vuu-ui/vuu-data-local";
+import { useEffect, useMemo, useRef } from "react";
+import { JsonCell } from "./JsonCell.js";
+registerComponent("json", JsonCell, "cell-renderer");
+const JsonTable = ({ config, source: sourceProp, ...tableProps })=>{
+    const sourceRef = useRef(sourceProp);
+    const dataSourceRef = useRef(void 0);
+    useMemo(()=>{
+        dataSourceRef.current = new JsonDataSource({
+            data: sourceRef.current
+        });
+    }, []);
+    const tableConfig = useMemo(()=>({
+            ...config,
+            columns: dataSourceRef.current?.columnDescriptors ?? [],
+            columnSeparators: true,
+            rowSeparators: true
+        }), [
+        config
+    ]);
+    useEffect(()=>{
+        if (dataSourceRef.current) dataSourceRef.current.data = sourceProp;
+    }, [
+        sourceProp
+    ]);
+    if (void 0 === dataSourceRef.current) return null;
+    return /*#__PURE__*/ jsx(Table, {
+        ...tableProps,
+        config: tableConfig,
+        dataSource: dataSourceRef.current,
+        showColumnHeaderMenus: false,
+        selectionModel: "none"
+    });
+};
+export { JsonTable };

package/src/json-table/index.js

@@ -0,0 +1 @@
+export * from "./JsonTable.js";

package/src/linked-table-view/LinkedTableView.css.js

@@ -0,0 +1,24 @@
+const css = `
+.vuuLinkedTableView-header {
+  padding-right: var(--salt-spacing-100);
+  flex: 0 0 28px;
+  align-items: center;
+  display: flex;
+
+  & .vuuTabstrip {
+    width: fit-content;
+  }
+
+  & .vuuLinkedTableView-toolTray {
+    margin-left: auto;
+  }
+}
+
+.vuuLinkedTableView-view {
+  padding: var(--salt-spacing-100);
+  overflow: hidden;
+}
+
+
+`;
+export default css;

package/src/linked-table-view/LinkedTableView.js

@@ -0,0 +1,186 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Flexbox, Stack, View } from "@vuu-ui/vuu-layout";
+import { Table } from "@vuu-ui/vuu-table";
+import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useLinkedTableView } from "./useLinkedTableView.js";
+import LinkedTableView from "./LinkedTableView.css";
+import { TableLayoutToggleButton } from "./TableLayoutToggleButton.js";
+const classBase = "vuuLinkedTableView";
+const LinkedTables = ({ className, linkedDataSources, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-linked-table-view",
+        css: LinkedTableView,
+        window: targetWindow
+    });
+    const { tableConfig, ...config } = useLinkedTableView({
+        linkedDataSources
+    });
+    const getLinkedTables = (tdsConfig, { activeTab, onChangeTabbedView, onTabChange, tabbedView, ...levelConfig })=>false === Array.isArray(tdsConfig) ? /*#__PURE__*/ jsx(View, {
+            ...levelConfig,
+            header: true,
+            resizeable: true,
+            style: {
+                flexBasis: 0,
+                flexGrow: 1,
+                flexShrink: 1
+            },
+            title: tdsConfig.title,
+            children: /*#__PURE__*/ jsx(Table, {
+                config: tdsConfig.config,
+                dataSource: tdsConfig.dataSource
+            })
+        }) : 1 === tabbedView ? /*#__PURE__*/ jsxs("div", {
+            style: {
+                display: "flex",
+                flexDirection: "column",
+                flexBasis: 0,
+                flexGrow: 1,
+                flexShrink: 1
+            },
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: `${classBase}-header`,
+                    children: [
+                        /*#__PURE__*/ jsx(Tabstrip, {
+                            activeTabIndex: activeTab,
+                            onActiveChange: onTabChange,
+                            children: tdsConfig.map(({ title }, i)=>/*#__PURE__*/ jsx(Tab, {
+                                    label: title
+                                }, i))
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: `${classBase}-toolTray`,
+                            children: /*#__PURE__*/ jsx(TableLayoutToggleButton, {
+                                onChange: onChangeTabbedView,
+                                value: tabbedView
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Stack, {
+                    active: activeTab,
+                    "data-resizeable": true,
+                    showTabs: false,
+                    style: {
+                        flexBasis: 0,
+                        flexGrow: 1,
+                        flexShrink: 1
+                    },
+                    children: tdsConfig.map(({ config, dataSource, title }, i)=>/*#__PURE__*/ jsx("div", {
+                            className: `${classBase}-view`,
+                            style: {
+                                flexBasis: 0,
+                                flexGrow: 1,
+                                flexShrink: 1
+                            },
+                            title: title,
+                            children: /*#__PURE__*/ jsx(Table, {
+                                config: config,
+                                dataSource: dataSource
+                            })
+                        }, i))
+                }, levelConfig.key)
+            ]
+        }) : /*#__PURE__*/ jsxs("div", {
+            style: {
+                display: "flex",
+                flexDirection: "column",
+                flexBasis: 0,
+                flexGrow: 1,
+                flexShrink: 1
+            },
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: `${classBase}-header`,
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: `${classBase}-flexHeaders`,
+                            children: tdsConfig.map(({ title }, i)=>/*#__PURE__*/ jsx("span", {
+                                    children: title
+                                }, i))
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: `${classBase}-toolTray`,
+                            children: /*#__PURE__*/ jsx(TableLayoutToggleButton, {
+                                onChange: onChangeTabbedView,
+                                value: tabbedView
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Flexbox, {
+                    style: {
+                        flexDirection: "row",
+                        flexBasis: 0,
+                        flexGrow: 1,
+                        flexShrink: 1
+                    },
+                    children: tdsConfig.map(({ config, dataSource, title }, i)=>/*#__PURE__*/ jsx("div", {
+                            className: `${classBase}-view`,
+                            "data-resizeable": true,
+                            style: {
+                                flexBasis: 0,
+                                flexGrow: 1,
+                                flexShrink: 1
+                            },
+                            title: title,
+                            children: /*#__PURE__*/ jsx(Table, {
+                                config: config,
+                                dataSource: dataSource
+                            })
+                        }, i))
+                })
+            ]
+        });
+    const getAllLinkedTables = (level2, level3, config)=>{
+        const results = [
+            getLinkedTables(level2, config.level2)
+        ];
+        if (level3) results.push(getLinkedTables(level3, config.level3));
+        return results;
+    };
+    if (!tableConfig) return null;
+    {
+        const { 1: level1, 2: level2, 3: level3 } = tableConfig;
+        return /*#__PURE__*/ jsx("div", {
+            ...htmlAttributes,
+            className: clsx(classBase, className),
+            children: /*#__PURE__*/ jsxs(Flexbox, {
+                style: {
+                    flexDirection: "column",
+                    height: "100%"
+                },
+                children: [
+                    /*#__PURE__*/ jsx(View, {
+                        className: `${classBase}-view`,
+                        header: true,
+                        resizeable: true,
+                        style: {
+                            flexBasis: 0,
+                            flexGrow: 1,
+                            flexShrink: 1
+                        },
+                        title: level1.title,
+                        children: /*#__PURE__*/ jsx(Table, {
+                            config: level1.config,
+                            dataSource: level1.dataSource
+                        })
+                    }),
+                    ...getAllLinkedTables(level2, level3, config)
+                ]
+            })
+        });
+    }
+};
+const LinkedTableView_LinkedTableView = ({ className, linkedDataSources, ...htmlAttributes })=>/*#__PURE__*/ jsx(View, {
+        ...htmlAttributes,
+        className: className,
+        children: /*#__PURE__*/ jsx(LinkedTables, {
+            linkedDataSources: linkedDataSources
+        })
+    });
+export { LinkedTableView_LinkedTableView as LinkedTableView };

package/src/linked-table-view/TableLayoutToggleButton.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@vuu-ui/vuu-ui-controls";
+import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+const TableLayoutToggleButton = (props)=>/*#__PURE__*/ jsxs(ToggleButtonGroup, {
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(ToggleButton, {
+                className: "vuuIconToggleButton",
+                value: 0,
+                "aria-label": "Tabbed View",
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "split-v",
+                    size: 18
+                })
+            }),
+            /*#__PURE__*/ jsx(ToggleButton, {
+                className: "vuuIconToggleButton",
+                value: 1,
+                "aria-label": "Side by side view",
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: "tabs",
+                    size: 18
+                })
+            })
+        ]
+    });
+export { TableLayoutToggleButton };

package/src/linked-table-view/useLinkedTableView.js

@@ -0,0 +1,205 @@
+import { useData } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useState } from "react";
+const getSchema = (schemas, { module, table })=>{
+    const schema = schemas.find(({ table: t })=>t.module === module && t.table === table);
+    if (schema) return schema;
+    throw Error(`No schema for table ${module} ${table}`);
+};
+const getTable = (ds)=>{
+    if (ds.table) return ds.table;
+    throw Error("No datasource table specified");
+};
+const getTables = (linkedDataSources)=>{
+    const { 1: linked1, 2: linked2, 3: linked3 } = linkedDataSources;
+    const tables = [];
+    tables.push(getTable(linked1.dataSource));
+    if (Array.isArray(linked2)) linked2.forEach(({ dataSource })=>{
+        tables.push(getTable(dataSource));
+    });
+    else tables.push(getTable(linked2.dataSource));
+    if (Array.isArray(linked3)) linked3.forEach(({ dataSource })=>{
+        tables.push(getTable(dataSource));
+    });
+    else if (linked3) tables.push(getTable(linked3.dataSource));
+    return tables;
+};
+const useLinkedTableView = ({ linkedDataSources })=>{
+    const { VuuDataSource, getServerAPI } = useData();
+    const [tableConfig, setTableConfig] = useState();
+    const [activeTabs, setActiveTab] = useState([
+        0,
+        0,
+        0
+    ]);
+    const [collapsed, setCollapsed] = useState([
+        false,
+        false
+    ]);
+    const [tabbedView, setTabbedView] = useState([
+        1,
+        1
+    ]);
+    useMemo(async ()=>{
+        const tables = getTables(linkedDataSources);
+        const serverAPI = await getServerAPI();
+        const schemas = await Promise.all(tables.map(serverAPI.getTableSchema));
+        const isDataSource = (ds)=>typeof ds === typeof VuuDataSource;
+        const getDataSource = (ds)=>{
+            if (isDataSource(ds)) return ds;
+            return new VuuDataSource(ds);
+        };
+        const createVisualLink = (vuuLink, parentDs)=>{
+            if (parentDs && parentDs.table) {
+                const parentVpId = parentDs.viewport;
+                const toTable = vuuLink.toTable ?? parentDs.table?.table;
+                return {
+                    link: {
+                        ...vuuLink,
+                        toTable
+                    },
+                    parentClientVpId: parentVpId,
+                    parentVpId
+                };
+            }
+            throw Error("visual link cannot be created without parent vp id");
+        };
+        const getLinkedDataSource = (ds, vuuLink, parentDs)=>{
+            if (isDataSource(ds)) return ds;
+            return new VuuDataSource({
+                ...ds,
+                visualLink: createVisualLink(vuuLink, parentDs)
+            });
+        };
+        const getTableConfig = (ds)=>{
+            const schema = getSchema(schemas, getTable(ds));
+            return {
+                columns: schema.columns
+            };
+        };
+        const getRootConfig = ({ dataSource: ds, title })=>({
+                config: getTableConfig(ds),
+                dataSource: getDataSource(ds),
+                title
+            });
+        const getLinkedConfig = ({ dataSource: ds, vuuLink, title }, parentDataSource)=>({
+                config: getTableConfig(ds),
+                dataSource: getLinkedDataSource(ds, vuuLink, parentDataSource),
+                title
+            });
+        const getLinkedConfigs = (linkedTableConfig, parentDataSource)=>{
+            if (Array.isArray(linkedTableConfig)) return linkedTableConfig.map((config)=>getLinkedConfig(config, parentDataSource));
+            return getLinkedConfig(linkedTableConfig, parentDataSource);
+        };
+        const { 1: level1, 2: level2, 3: level3 } = linkedDataSources;
+        const configLevel1 = getRootConfig(level1);
+        const configLevel2 = getLinkedConfigs(level2, configLevel1.dataSource);
+        const dsLevel2 = Array.isArray(configLevel2) ? void 0 : configLevel2.dataSource;
+        const configLevel3 = level3 ? getLinkedConfigs(level3, dsLevel2) : void 0;
+        const results = {
+            1: configLevel1,
+            2: configLevel2,
+            3: configLevel3
+        };
+        setTableConfig(results);
+    }, [
+        VuuDataSource,
+        getServerAPI,
+        linkedDataSources
+    ]);
+    const handleTabChangeLevel1 = useCallback((tabIndex)=>{
+        setActiveTab(([, v2, v3])=>[
+                tabIndex,
+                v2,
+                v3
+            ]);
+    }, []);
+    const handleTabChangeLevel2 = useCallback((tabIndex)=>{
+        setActiveTab(([v1, , v3])=>[
+                v1,
+                tabIndex,
+                v3
+            ]);
+    }, []);
+    const handleTabChangeLevel3 = useCallback((tabIndex)=>{
+        setActiveTab(([v1, v2])=>[
+                v1,
+                v2,
+                tabIndex
+            ]);
+    }, []);
+    const handleCollapseLevel2 = useCallback(()=>{
+        setCollapsed(([, val])=>[
+                true,
+                val
+            ]);
+    }, []);
+    const handleExpandLevel2 = useCallback(()=>{
+        setCollapsed(([, val])=>[
+                false,
+                val
+            ]);
+    }, []);
+    const handleCollapseLevel3 = useCallback(()=>{
+        setCollapsed(([val])=>[
+                val,
+                true
+            ]);
+    }, []);
+    const handleExpandLevel3 = useCallback(()=>{
+        setCollapsed(([val])=>[
+                val,
+                false
+            ]);
+    }, []);
+    const handleChangeTabbedView2 = useCallback((evt)=>{
+        const target = evt.target;
+        const button = target?.closest("button");
+        if (button) {
+            const value = parseInt(button.value);
+            setTabbedView(([, val])=>[
+                    value,
+                    val
+                ]);
+        }
+    }, []);
+    const handleChangeTabbedView3 = useCallback((evt)=>{
+        const target = evt.target;
+        const button = target?.closest("button");
+        if (button) {
+            const value = parseInt(button.value);
+            setTabbedView(([val])=>[
+                    val,
+                    value
+                ]);
+        }
+    }, []);
+    return {
+        level1: {
+            activeTab: activeTabs[0],
+            key: "level1",
+            onTabChange: handleTabChangeLevel1
+        },
+        level2: {
+            activeTab: activeTabs[1],
+            collapsed: collapsed[0],
+            key: "level2",
+            onChangeTabbedView: handleChangeTabbedView2,
+            onCollapse: handleCollapseLevel2,
+            onExpand: handleExpandLevel2,
+            onTabChange: handleTabChangeLevel2,
+            tabbedView: tabbedView[0]
+        },
+        level3: {
+            activeTab: activeTabs[2],
+            collapsed: collapsed[1],
+            key: "level3",
+            onChangeTabbedView: handleChangeTabbedView3,
+            onCollapse: handleCollapseLevel3,
+            onExpand: handleExpandLevel3,
+            onTabChange: handleTabChangeLevel3,
+            tabbedView: tabbedView[1]
+        },
+        tableConfig
+    };
+};
+export { useLinkedTableView };

package/src/tree-table/TreeTable.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { Table } from "@vuu-ui/vuu-table";
+import { TreeDataSource } from "@vuu-ui/vuu-data-local";
+import { useMemo, useRef } from "react";
+const TreeTable = ({ config, dataSource, source, ...tableProps })=>{
+    const dataSourceRef = useRef(void 0);
+    useMemo(()=>{
+        if (dataSource) dataSourceRef.current = dataSource;
+        else if (source) dataSourceRef.current = new TreeDataSource({
+            data: source
+        });
+        else throw Error("TreeTable either source or dataSource must be provided");
+    }, [
+        dataSource,
+        source
+    ]);
+    const tableConfig = useMemo(()=>({
+            ...config,
+            columns: dataSourceRef.current?.columnDescriptors ?? [],
+            columnSeparators: false,
+            selectionBookendWidth: 0,
+            rowSeparators: false
+        }), [
+        config
+    ]);
+    console.log({
+        tableConfig,
+        dataSource: dataSourceRef.current
+    });
+    if (void 0 === dataSourceRef.current) return null;
+    return /*#__PURE__*/ jsx(Table, {
+        ...tableProps,
+        className: "vuuTreeTable",
+        config: tableConfig,
+        dataSource: dataSourceRef.current,
+        groupToggleTarget: "toggle-icon",
+        navigationStyle: "tree",
+        showColumnHeaderMenus: false,
+        selectionModel: "single"
+    });
+};
+export { TreeTable };

package/src/tree-table/index.js

@@ -0,0 +1 @@
+export * from "./TreeTable.js";