@vuu-ui/vuu-datatable 4.0.1 → 4.1.1

package/package.json

@@ -1,10 +1,9 @@
 {
-  "version": "4.0.1",
+  "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.0.1",
-    "@vuu-ui/vuu-table-types": "4.0.1",
-    "@vuu-ui/vuu-filters": "4.0.1",
-    "@vuu-ui/vuu-layout": "4.0.1",
-    "@vuu-ui/vuu-popups": "4.0.1",
-    "@vuu-ui/vuu-shell": "4.0.1",
-    "@vuu-ui/vuu-table": "4.0.1",
-    "@vuu-ui/vuu-table-extras": "4.0.1",
-    "@vuu-ui/vuu-ui-controls": "4.0.1",
-    "@vuu-ui/vuu-utils": "4.0.1"
+    "@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/filter-table/FilterTable.d.ts

@@ -5,4 +5,4 @@ export interface FilterTableProps extends HTMLAttributes<HTMLDivElement> {
     FilterBarProps?: Partial<FilterBarProps>;
     TableProps: Omit<TableProps, "height" | "width">;
 }
-export declare const FilterTable: ({ FilterBarProps, TableProps, style: styleProps, ...htmlAttributes }: FilterTableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterTable: ({ FilterBarProps, TableProps, style: styleProps, ...htmlAttributes }: FilterTableProps) => import("react").JSX.Element;

package/types/json-table/JsonCell.d.ts

@@ -1,2 +1,2 @@
 import { TableCellProps } from "@vuu-ui/vuu-table-types";
-export declare const JsonCell: ({ column, dataRow }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const JsonCell: ({ column, dataRow }: TableCellProps) => import("react").JSX.Element;

package/types/json-table/JsonTable.d.ts

@@ -5,4 +5,4 @@ export interface JsonTableProps extends Omit<TableProps, "config" | "dataSource"
     config?: Pick<TableConfig, "columnSeparators" | "rowSeparators" | "zebraStripes">;
     source: JsonData;
 }
-export declare const JsonTable: ({ config, source: sourceProp, ...tableProps }: JsonTableProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const JsonTable: ({ config, source: sourceProp, ...tableProps }: JsonTableProps) => import("react").JSX.Element | null;

package/types/linked-table-view/LinkedTableView.d.ts

@@ -51,4 +51,4 @@ export interface LinkedTableViewProps extends HTMLAttributes<HTMLDivElement> {
     filter?: Filter;
     linkedDataSources: LinkedDataSources;
 }
-export declare const LinkedTableView: ({ className, linkedDataSources, ...htmlAttributes }: LinkedTableViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LinkedTableView: ({ className, linkedDataSources, ...htmlAttributes }: LinkedTableViewProps) => import("react").JSX.Element;

package/types/linked-table-view/TableLayoutToggleButton.d.ts

@@ -1,2 +1,2 @@
 import { ToggleButtonGroupProps } from "@salt-ds/core";
-export declare const TableLayoutToggleButton: (props: ToggleButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableLayoutToggleButton: (props: ToggleButtonGroupProps) => import("react").JSX.Element;

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-runtime").JSX.Element | null;
+export declare const TreeTable: ({ className, config, dataSource: dataSourceProp, renderNodeAdornment, source, ...tableProps }: TreeTableProps) => import("react").JSX.Element;
 export {};