@gisce/react-ooui 2.0.0-alpha.54 → 2.0.0-alpha.55

package/dist/ui/TitleHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TitleHeader.d.ts","sourceRoot":"","sources":["../../src/ui/TitleHeader.tsx"],"names":[],"mappings":"AAaA,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB,CAAC;AAEF,iBAAS,WAAW,CAAC,KAAK,EAAE,KAAK,2CAyFhC;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TitleHeader.d.ts","sourceRoot":"","sources":["../../src/ui/TitleHeader.tsx"],"names":[],"mappings":"AAaA,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB,CAAC;AAEF,iBAAS,WAAW,CAAC,KAAK,EAAE,KAAK,2CAkGhC;AAED,eAAe,WAAW,CAAC"}

package/dist/widgets/views/{Tree.d.ts → Tree/Tree.d.ts}

@@ -1,5 +1,5 @@
-import React from "react";
-import { TreeView } from '../../*/types';
+/// <reference types="react" />
+import { TreeView } from '../../../*/types';
 type Props = {
     total?: number;
     limit: number;
@@ -27,6 +27,6 @@ type Props = {
     readonly?: boolean;
     onSelectAllRecords?: () => Promise<void>;
 };
-declare function Tree(props: Props): React.ReactElement;
-export default Tree;
+export declare const Tree: import("react").MemoExoticComponent<(props: Props) => import("react/jsx-runtime").JSX.Element>;
+export {};
 //# sourceMappingURL=Tree.d.ts.map

package/dist/widgets/views/Tree/Tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../../src/widgets/views/Tree/Tree.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAiBnC,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,gBAAgB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AACF,eAAO,MAAM,IAAI,8CAAgB,KAAK,6CAsPpC,CAAC"}

package/dist/widgets/views/Tree/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tree";
+//# sourceMappingURL=index.d.ts.map

package/dist/widgets/views/Tree/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/widgets/views/Tree/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/widgets/views/Tree/treeComponents.d.ts

@@ -0,0 +1,131 @@
+import { ReactElement } from "react";
+import { One2manyValue } from "../../base/one2many/One2manyInput";
+export declare const BooleanComponent: ({ value, }: {
+    value: boolean;
+}) => ReactElement;
+export declare const Many2OneComponent: ({ value }: {
+    value: any;
+}) => ReactElement;
+export declare const TextComponent: ({ value }: {
+    value: any;
+}) => ReactElement;
+export declare const DateComponent: ({ value }: {
+    value: any;
+}) => ReactElement;
+export declare const DateTimeComponent: ({ value }: {
+    value: any;
+}) => ReactElement;
+export declare const One2ManyComponent: ({ value, }: {
+    value: One2manyValue;
+}) => ReactElement;
+export declare const ProgressBarComponent: ({ value, }: {
+    value: any;
+}) => ReactElement;
+export declare const FloatTimeComponent: ({ value }: {
+    value: any;
+}) => ReactElement;
+export declare const NumberComponent: ({ value }: {
+    value: number;
+}) => ReactElement;
+export declare const ImageComponent: ({ value }: {
+    value: string;
+}) => ReactElement;
+export declare const TagComponent: ({ value, key, ooui, context, }: {
+    value: any;
+    key: string;
+    ooui: any;
+    context: any;
+}) => ReactElement;
+export declare const SelectionComponent: ({ value, key, ooui, context, }: {
+    value: any;
+    key: string;
+    ooui: any;
+    context: any;
+}) => ReactElement;
+export declare const ReferenceComponent: ({ value, key, ooui, context, }: {
+    value: any;
+    key: string;
+    ooui: any;
+    context: any;
+}) => ReactElement;
+export declare const AvatarComponent: ({ value, key, ooui, context, }: {
+    value: any;
+    key: string;
+    ooui: any;
+    context: any;
+}) => ReactElement;
+export declare const TagsComponent: ({ value, key, ooui, context, }: {
+    value: any;
+    key: string;
+    ooui: any;
+    context: any;
+}) => ReactElement;
+export declare const COLUMN_COMPONENTS: {
+    boolean: ({ value, }: {
+        value: boolean;
+    }) => ReactElement;
+    many2one: ({ value }: {
+        value: any;
+    }) => ReactElement;
+    text: ({ value }: {
+        value: any;
+    }) => ReactElement;
+    one2many: ({ value, }: {
+        value: One2manyValue;
+    }) => ReactElement;
+    many2many: ({ value, }: {
+        value: One2manyValue;
+    }) => ReactElement;
+    progressbar: ({ value, }: {
+        value: any;
+    }) => ReactElement;
+    float_time: ({ value }: {
+        value: any;
+    }) => ReactElement;
+    image: ({ value }: {
+        value: string;
+    }) => ReactElement;
+    integer: ({ value }: {
+        value: number;
+    }) => ReactElement;
+    float: ({ value }: {
+        value: number;
+    }) => ReactElement;
+    reference: ({ value, key, ooui, context, }: {
+        value: any;
+        key: string;
+        ooui: any;
+        context: any;
+    }) => ReactElement;
+    tag: ({ value, key, ooui, context, }: {
+        value: any;
+        key: string;
+        ooui: any;
+        context: any;
+    }) => ReactElement;
+    selection: ({ value, key, ooui, context, }: {
+        value: any;
+        key: string;
+        ooui: any;
+        context: any;
+    }) => ReactElement;
+    date: ({ value }: {
+        value: any;
+    }) => ReactElement;
+    datetime: ({ value }: {
+        value: any;
+    }) => ReactElement;
+    avatar: ({ value, key, ooui, context, }: {
+        value: any;
+        key: string;
+        ooui: any;
+        context: any;
+    }) => ReactElement;
+    tags: ({ value, key, ooui, context, }: {
+        value: any;
+        key: string;
+        ooui: any;
+        context: any;
+    }) => ReactElement;
+};
+//# sourceMappingURL=treeComponents.d.ts.map

package/dist/widgets/views/Tree/treeComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeComponents.d.ts","sourceRoot":"","sources":["../../../../src/widgets/views/Tree/treeComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAC;AAIhF,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAWlE,eAAO,MAAM,gBAAgB;WAGpB,OAAO;MACZ,YAeH,CAAC;AAEF,eAAO,MAAM,iBAAiB;WAAwB,GAAG;MAAK,YAE7D,CAAC;AAEF,eAAO,MAAM,aAAa;WAAwB,GAAG;MAAK,YASzD,CAAC;AAEF,eAAO,MAAM,aAAa;WAAwB,GAAG;MAAK,YAUzD,CAAC;AAEF,eAAO,MAAM,iBAAiB;WAAwB,GAAG;MAAK,YAS7D,CAAC;AAEF,eAAO,MAAM,iBAAiB;WAGrB,aAAa;MAClB,YAKH,CAAC;AAEF,eAAO,MAAM,oBAAoB;WAGxB,GAAG;MACR,YAEH,CAAC;AAEF,eAAO,MAAM,kBAAkB;WAAwB,GAAG;MAAK,YAE9D,CAAC;AAEF,eAAO,MAAM,eAAe;WAAwB,MAAM;MAAK,YAK9D,CAAC;AAEF,eAAO,MAAM,cAAc;WAAwB,MAAM;MAAK,YAU7D,CAAC;AAEF,eAAO,MAAM,YAAY;WAMhB,GAAG;SACL,MAAM;UACL,GAAG;aACA,GAAG;MACV,YAEH,CAAC;AAEF,eAAO,MAAM,kBAAkB;WAMtB,GAAG;SACL,MAAM;UACL,GAAG;aACA,GAAG;MACV,YAEH,CAAC;AAEF,eAAO,MAAM,kBAAkB;WAMtB,GAAG;SACL,MAAM;UACL,GAAG;aACA,GAAG;MACV,YAWH,CAAC;AAEF,eAAO,MAAM,eAAe;WAMnB,GAAG;SACL,MAAM;UACL,GAAG;aACA,GAAG;MACV,YAEH,CAAC;AAEF,eAAO,MAAM,aAAa;WAMjB,GAAG;SACL,MAAM;UACL,GAAG;aACA,GAAG;MACV,YAgEH,CAAC;AAEF,eAAO,MAAM,iBAAiB;;eA/OrB,OAAO;UACZ,YAAY;;eAiBsC,GAAG;UAAK,YAAY;;eAIxB,GAAG;UAAK,YAAY;;eAqC7D,aAAa;UAClB,YAAY;;eADP,aAAa;UAClB,YAAY;;eAUP,GAAG;UACR,YAAY;;eAIuC,GAAG;UAAK,YAAY;;eAWxB,MAAM;UAAK,YAAY;;eAPtB,MAAM;UAAK,YAAY;;eAAvB,MAAM;UAAK,YAAY;;eAqDlE,GAAG;aACL,MAAM;cACL,GAAG;iBACA,GAAG;UACV,YAAY;;eAhCP,GAAG;aACL,MAAM;cACL,GAAG;iBACA,GAAG;UACV,YAAY;;eAUP,GAAG;aACL,MAAM;cACL,GAAG;iBACA,GAAG;UACV,YAAY;;eAzFkC,GAAG;UAAK,YAAY;;eAYhB,GAAG;UAAK,YAAY;;eA8GjE,GAAG;aACL,MAAM;cACL,GAAG;iBACA,GAAG;UACV,YAAY;;eAUP,GAAG;aACL,MAAM;cACL,GAAG;iBACA,GAAG;UACV,YAAY;CAoFf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "2.0.0-alpha.54",
+  "version": "2.0.0-alpha.55",
   "engines": {
     "node": "20.5.0"
   },
@@ -36,7 +36,7 @@
     "@gisce/fiber-diagram": "^1.1.0-rc.3",
     "@gisce/ooui": "1.0.0-alpha.21",
     "@gisce/react-formiga-components": "^1.0.9-rc.21",
-    "@gisce/react-formiga-table": "1.0.0-alpha.8",
+    "@gisce/react-formiga-table": "1.0.0-alpha.11",
     "@monaco-editor/react": "^4.4.5",
     "@tabler/icons-react": "^2.11.0",
     "antd": "^5.5.2",

package/src/helpers/{treeHelper.ts → treeHelper.tsx}

@@ -15,6 +15,15 @@ const getTree = (treeView: TreeView): TreeOoui => {
   return tree;
 };
 
+function isPrimitive(value: any): boolean {
+  return (
+    typeof value === "number" ||
+    typeof value === "string" ||
+    typeof value === "boolean" ||
+    value === null
+  );
+}
+
 const getTableColumns = (
   tree: TreeOoui,
   components: any,
@@ -27,8 +36,21 @@ const getTableColumns = (
     let render;
 
     if (component) {
-      render = (item: any) => {
-        return component(item, key, column, context);
+      render = (value: any) => {
+        return component({ value, key, ooui: column, context });
+      };
+    } else {
+      render = (value: any) => {
+        return isPrimitive(value) ? (
+          value
+        ) : (
+          <p style={{ color: "red" }}>
+            Unsupported widget type for a Tree cell:
+            <pre>
+              <strong>{type}:</strong>
+            </pre>
+          </p>
+        );
       };
     }
 
@@ -58,7 +80,7 @@ const getTableColumns = (
 const getTableItems = (treeOoui: TreeOoui, results: any[]): any[] => {
   const tableItems = results.map((item: any) => {
     const parsedItem: any = {};
-    Object.keys(item).map((key) => {
+    Object.keys(item).forEach((key) => {
       if (key === "id") {
         parsedItem[key] = item[key];
       } else {
@@ -67,7 +89,6 @@ const getTableItems = (treeOoui: TreeOoui, results: any[]): any[] => {
         if (widget instanceof Reference) {
           parsedItem[key] = item[key];
         } else if (widget instanceof Selection) {
-          const selection = widget;
           parsedItem[key] = item[key];
         } else if (widget instanceof Many2one) {
           parsedItem[key] = item[key] &&

package/src/index.ts

@@ -5,7 +5,7 @@ import { Selection } from "@/widgets/base/Selection";
 import { Boolean } from "@/widgets/base/Boolean";
 import { Many2one } from "@/widgets/base/many2one/Many2one";
 import { One2many } from "@/widgets/base/one2many/One2many";
-import Tree from "@/widgets/views/Tree";
+import { Tree } from "@/widgets/views/Tree";
 import { Float } from "@/widgets/base/Float";
 import { ProgressBar } from "@/widgets/base/ProgressBar";
 import { FloatTime } from "@/widgets/base/FloatTime";

package/src/ui/TitleHeader.tsx

@@ -82,13 +82,22 @@ function TitleHeader(props: Props) {
     return null;
   }
   return (
-    <div style={{ position: "sticky", top: 80, zIndex: 3 }}>
+    <div
+      style={{
+        position: "sticky",
+        top: 80,
+        zIndex: 3,
+      }}
+    >
       <Row
         className="shadow-md"
         style={{
           padding: "1em",
           borderRadius: token.borderRadius,
           backgroundColor: token.colorPrimaryBg,
+          height: "82px",
+          minHeight: "82px",
+          maxHeight: "82px",
         }}
         align="middle"
       >

package/src/widgets/views/Dashboard/DashboardTree.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import { Alert, Spin } from "antd";
 
-import Tree from "@/widgets/views/Tree";
+import { Tree } from "@/widgets/views/Tree";
 import { FormView, TreeView } from "@/types/index";
 import ConnectionProvider from "@/ConnectionProvider";
 

package/src/widgets/views/Graph/GraphDefaults.ts

@@ -1,4 +1,4 @@
-import dayjs from "dayjs";
+import dayjs from "@/helpers/dayjs";
 
 const formatter = (graphType: "pie" | "default" | "barGrouped") => {
   return (object: any) => {

package/src/widgets/views/SearchTree.tsx

@@ -9,7 +9,7 @@ import React, {
 import { Alert, Spin } from "antd";
 
 import SearchFilter from "@/widgets/views/searchFilter/SearchFilter";
-import Tree from "@/widgets/views/Tree";
+import { Tree } from "@/widgets/views/Tree";
 import { FormView, TreeView } from "@/types/index";
 import ConnectionProvider from "@/ConnectionProvider";
 
@@ -284,7 +284,7 @@ function SearchTree(props: Props, ref: any) {
     if (treeView?.isExpandable) {
       return height - 160;
     }
-    return height - (searchFilterHeight + 210);
+    return height - (searchFilterHeight + 240);
   }
 
   const content = () => {

package/src/widgets/views/Tree/Tree.tsx

@@ -0,0 +1,298 @@
+import { memo, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Pagination as AntPagination, Row, Col, Spin, Badge } from "antd";
+import {
+  getTree,
+  getTableColumns,
+  getTableItems,
+  hasActualValues,
+} from "@/helpers/treeHelper";
+import { Tree as TreeOoui } from "@gisce/ooui";
+import { TreeView } from "@/types";
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+import { calculateColumnsWidth } from "@/helpers/dynamicColumnsHelper";
+import { Table as GisceTable } from "@gisce/react-formiga-table";
+import {
+  PlusSquareOutlined,
+  MinusSquareOutlined,
+  LoadingOutlined,
+} from "@ant-design/icons";
+import {
+  ActionViewContext,
+  ActionViewContextType,
+} from "@/context/ActionViewContext";
+import { SelectAllRecordsRow } from "@/common/SelectAllRecordsRow";
+import { COLUMN_COMPONENTS } from "./treeComponents";
+import ErrorBoundary from "antd/es/alert/ErrorBoundary";
+
+type Props = {
+  total?: number;
+  limit: number;
+  page?: number;
+  loading: boolean;
+  treeView: TreeView;
+  results: any[];
+  showPagination?: boolean;
+  onRequestPageChange?: (page: number, pageSize?: number) => void;
+  onRowClicked?: (record: any) => void;
+  rowSelection?: any;
+  scrollY?: number;
+  colorsForResults?: { [key: number]: string };
+  statusForResults?: { [key: number]: string };
+  onChangeSort?: (results: any) => void;
+  sorter?: any;
+  onFetchChildrenForRecord?: (item: any) => Promise<any[]>;
+  childField?: string;
+  rootTree?: boolean;
+  context?: any;
+  readonly?: boolean;
+  onSelectAllRecords?: () => Promise<void>;
+};
+export const Tree = memo((props: Props) => {
+  const {
+    page = 1,
+    limit,
+    total,
+    treeView,
+    results,
+    onRequestPageChange,
+    loading,
+    onRowClicked,
+    showPagination = true,
+    rowSelection,
+    scrollY,
+    colorsForResults = {},
+    statusForResults = {},
+    onChangeSort,
+    sorter,
+    onFetchChildrenForRecord,
+    childField,
+    rootTree = false,
+    context,
+    readonly,
+    onSelectAllRecords,
+  } = props;
+
+  const [items, setItems] = useState<any[]>([]);
+
+  const errorInParseColors = useRef<boolean>(false);
+
+  const [treeOoui, setTreeOoui] = useState<TreeOoui>();
+
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+  const internalLimit = useRef(limit);
+
+  const actionViewContext = useContext(
+    ActionViewContext,
+  ) as ActionViewContextType;
+  const { title = undefined, setTitle = undefined } =
+    (rootTree ? actionViewContext : {}) || {};
+
+  const columns = useMemo(() => {
+    if (!treeOoui) {
+      return undefined;
+    }
+
+    return getTableColumns(
+      treeOoui,
+      {
+        ...COLUMN_COMPONENTS,
+      },
+      context,
+    );
+  }, [context, treeOoui]);
+
+  useEffect(() => {
+    const treeOoui = getTree(treeView);
+    setTreeOoui(treeOoui);
+    if (treeOoui.string && title !== treeOoui.string) {
+      setTitle?.(treeOoui.string);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [treeView, title]);
+
+  useEffect(() => {
+    if (!treeOoui) {
+      return;
+    }
+    errorInParseColors.current = false;
+    const items = getTableItems(treeOoui, results);
+    setItems(items);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [results]);
+
+  useEffect(() => {
+    internalLimit.current = limit;
+  }, [limit]);
+
+  const from = (page - 1) * internalLimit.current + 1;
+  const to = from - 1 + items.length;
+  const summary =
+    total === undefined
+      ? null
+      : total === 0
+      ? t("no_results")
+      : t("summary")
+          .replace("{from}", from?.toString())
+          .replace("{to}", to?.toString())
+          .replace("{total}", total?.toString());
+
+  const pagination = useMemo(() => {
+    if (!showPagination || treeView.isExpandable) {
+      return null;
+    }
+
+    const numberOfVisibleSelectedRows = items?.filter(
+      (entry) =>
+        rowSelection?.selectedRowKeys &&
+        rowSelection?.selectedRowKeys.includes(entry.id),
+    ).length;
+
+    return loading ? null : total === undefined ? (
+      <Spin className="pb-4" />
+    ) : (
+      <Row align="bottom" className="pb-4">
+        <Col span={onSelectAllRecords ? 8 : 12}>
+          <AntPagination
+            total={total}
+            pageSize={
+              internalLimit.current === 0 ? total : internalLimit.current
+            }
+            current={page}
+            showSizeChanger={false}
+            onChange={onRequestPageChange}
+          />
+        </Col>
+        {onSelectAllRecords && (
+          <Col span={8} className="text-center">
+            <SelectAllRecordsRow
+              numberOfVisibleSelectedRows={numberOfVisibleSelectedRows}
+              numberOfRealSelectedRows={
+                rowSelection?.selectedRowKeys?.length || 0
+              }
+              numberOfTotalRows={items.length}
+              totalRecords={total || 0}
+              onSelectAllRecords={onSelectAllRecords}
+            />
+          </Col>
+        )}
+        <Col span={onSelectAllRecords ? 8 : 12} className="text-right">
+          {summary}
+        </Col>
+      </Row>
+    );
+  }, [
+    items,
+    loading,
+    onRequestPageChange,
+    onSelectAllRecords,
+    page,
+    rowSelection?.selectedRowKeys,
+    showPagination,
+    summary,
+    total,
+    treeView.isExpandable,
+  ]);
+
+  const sums = useMemo(() => {
+    if (!treeOoui) {
+      return null;
+    }
+    const sumFields = treeOoui.columns
+      .filter((it) => it.sum !== undefined)
+      .map((it) => {
+        return { label: it.sum, field: it.id };
+      });
+
+    if (!sumFields || sumFields.length === 0) {
+      return null;
+    }
+
+    const summary: string[] = [];
+    const sumItems =
+      rowSelection?.selectedRowKeys?.length > 0
+        ? items.filter((result: any) => {
+            return rowSelection?.selectedRowKeys.includes(result.id);
+          })
+        : items;
+
+    sumFields.forEach((sumField) => {
+      const total = sumItems.reduce((prev, current) => {
+        if (current[sumField.field] && !isNaN(current[sumField.field]))
+          return prev + current[sumField.field];
+        else return prev;
+      }, 0);
+
+      summary.push(`${sumField.label}: ${Math.round(total * 100) / 100}`);
+    });
+
+    return <div className="p-1 pb-0 pl-2 mt-2 ">{summary.join(", ")}</div>;
+  }, [items, rowSelection?.selectedRowKeys, treeOoui]);
+
+  const dataTable = useMemo(() => {
+    if (treeOoui !== null && columns && columns.length > 0) {
+      const maxWidthPerCell = 600;
+      return calculateColumnsWidth(columns, items, maxWidthPerCell);
+    }
+    return undefined;
+  }, [columns, items, treeOoui]);
+
+  const adjustedHeight = useMemo(() => {
+    if (scrollY && treeOoui?.columns.some((it: any) => it.sum !== undefined)) {
+      return scrollY - 30;
+    }
+    return scrollY;
+  }, [scrollY, treeOoui?.columns]);
+
+  if (treeOoui === null || !dataTable || dataTable?.columns?.length === 0) {
+    return <Spin style={{ padding: "2rem" }} />;
+  }
+
+  return (
+    <ErrorBoundary>
+      {pagination}
+      <GisceTable
+        height={adjustedHeight!}
+        columns={dataTable.columns}
+        dataSource={items}
+        loading={loading}
+        loadingComponent={<Spin />}
+        onRowStyle={(record: any) => {
+          if (colorsForResults![record.id]) {
+            return { color: colorsForResults![record.id] };
+          }
+          return undefined;
+        }}
+        onRowStatus={
+          hasActualValues(statusForResults)
+            ? (record: any) => {
+                if (statusForResults![record.id]) {
+                  return <Badge color={statusForResults[record.id]} />;
+                }
+                return undefined;
+              }
+            : undefined
+        }
+        onRowDoubleClick={onRowClicked}
+        selectionRowKeys={rowSelection?.selectedRowKeys}
+        onRowSelectionChange={rowSelection?.onChange}
+        onChangeSort={onChangeSort}
+        sorter={sorter}
+        readonly={readonly}
+        expandableOpts={
+          onFetchChildrenForRecord
+            ? {
+                expandIcon: PlusSquareOutlined,
+                collapseIcon: MinusSquareOutlined,
+                loadingIcon: LoadingOutlined,
+                onFetchChildrenForRecord,
+                childField: childField!,
+              }
+            : undefined
+        }
+      />
+      {sums}
+    </ErrorBoundary>
+  );
+});
+
+Tree.displayName = "Tree";

package/src/widgets/views/Tree/index.ts

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