@vuu-ui/vuu-datatable 4.1.0 → 4.1.1

package/package.json

@@ -1,10 +1,9 @@
 {
-  "version": "4.1.0",
+  "version": "4.1.1",
   "author": "heswell",
   "main": "./src/index.js",
   "license": "Apache-2.0",
   "scripts": {
-    "build:dev": "node ../../scripts/run-build.mjs",
     "build": "node ../../scripts/run-build-rslib.ts",
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
@@ -12,16 +11,16 @@
     "@salt-ds/core": "1.74.0",
     "@salt-ds/styles": "0.4.2",
     "@salt-ds/window": "0.1.2",
-    "@vuu-ui/vuu-data-local": "4.1.0",
-    "@vuu-ui/vuu-table-types": "4.1.0",
-    "@vuu-ui/vuu-filters": "4.1.0",
-    "@vuu-ui/vuu-layout": "4.1.0",
-    "@vuu-ui/vuu-popups": "4.1.0",
-    "@vuu-ui/vuu-shell": "4.1.0",
-    "@vuu-ui/vuu-table": "4.1.0",
-    "@vuu-ui/vuu-table-extras": "4.1.0",
-    "@vuu-ui/vuu-ui-controls": "4.1.0",
-    "@vuu-ui/vuu-utils": "4.1.0"
+    "@vuu-ui/vuu-data-local": "4.1.1",
+    "@vuu-ui/vuu-table-types": "4.1.1",
+    "@vuu-ui/vuu-filters": "4.1.1",
+    "@vuu-ui/vuu-layout": "4.1.1",
+    "@vuu-ui/vuu-popups": "4.1.1",
+    "@vuu-ui/vuu-shell": "4.1.1",
+    "@vuu-ui/vuu-table": "4.1.1",
+    "@vuu-ui/vuu-table-extras": "4.1.1",
+    "@vuu-ui/vuu-ui-controls": "4.1.1",
+    "@vuu-ui/vuu-utils": "4.1.1"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

package/src/tree-table/TreeTable.js

@@ -1,38 +1,41 @@
 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({
+import { useMemo } from "react";
+import clsx from "clsx";
+const TreeTable = ({ className, config, dataSource: dataSourceProp, renderNodeAdornment, source, ...tableProps })=>{
+    const dataSource = useMemo(()=>{
+        if (dataSourceProp) return dataSourceProp;
+        if (source) return new TreeDataSource({
             data: source
         });
-        else throw Error("TreeTable either source or dataSource must be provided");
+        throw Error("TreeTable either source or dataSource must be provided");
     }, [
-        dataSource,
+        dataSourceProp,
         source
     ]);
-    const tableConfig = useMemo(()=>({
+    const tableConfig = useMemo(()=>{
+        const columns = renderNodeAdornment ? dataSource.columnDescriptors.map((column)=>column.hidden ? column : {
+                ...column,
+                getGroupAdornment: renderNodeAdornment
+            }) : dataSource.columnDescriptors;
+        return {
             ...config,
-            columns: dataSourceRef.current?.columnDescriptors ?? [],
+            columns,
             columnSeparators: false,
             selectionBookendWidth: 0,
             rowSeparators: false
-        }), [
-        config
+        };
+    }, [
+        config,
+        dataSource,
+        renderNodeAdornment
     ]);
-    console.log({
-        tableConfig,
-        dataSource: dataSourceRef.current
-    });
-    if (void 0 === dataSourceRef.current) return null;
     return /*#__PURE__*/ jsx(Table, {
         ...tableProps,
-        className: "vuuTreeTable",
+        className: clsx("vuuTreeTable", className),
         config: tableConfig,
-        dataSource: dataSourceRef.current,
+        dataSource: dataSource,
         groupToggleTarget: "toggle-icon",
         navigationStyle: "tree",
         showColumnHeaderMenus: false,

package/types/tree-table/TreeTable.d.ts

@@ -1,10 +1,16 @@
-import { TableProps } from "@vuu-ui/vuu-table";
+import type { TableProps } from "@vuu-ui/vuu-table";
 import { TreeDataSource } from "@vuu-ui/vuu-data-local";
-import { TableConfig } from "@vuu-ui/vuu-table-types";
-import { type TreeSourceNode } from "@vuu-ui/vuu-utils";
+import { type ReactNode } from "react";
+import type { DataRow, TableConfig } from "@vuu-ui/vuu-table-types";
+import type { TreeSourceNode } from "@vuu-ui/vuu-utils";
 interface Props extends Omit<TableProps, "config" | "dataSource"> {
     config?: Pick<TableConfig, "columnSeparators" | "rowSeparators" | "zebraStripes">;
     dataSource?: TreeDataSource;
+    /**
+     * Content rendered at the end of each tree node, after the label,
+     * e.g. a count, status indicator or action button.
+     */
+    renderNodeAdornment?: (dataRow: DataRow) => ReactNode;
     source?: TreeSourceNode[];
 }
 export type TreeTableProps = Props & ({
@@ -12,5 +18,5 @@ export type TreeTableProps = Props & ({
 } | {
     source: TreeSourceNode[];
 });
-export declare const TreeTable: ({ config, dataSource, source, ...tableProps }: TreeTableProps) => import("react").JSX.Element | null;
+export declare const TreeTable: ({ className, config, dataSource: dataSourceProp, renderNodeAdornment, source, ...tableProps }: TreeTableProps) => import("react").JSX.Element;
 export {};