@gisce/react-ooui 2.0.0-alpha.53 → 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.53",
+  "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.tsx → Tree/Tree.tsx}

@@ -1,5 +1,5 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
-import { Pagination, Checkbox, Space, Row, Col, Spin, Tag, Badge } from "antd";
+import { memo, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Pagination as AntPagination, Row, Col, Spin, Badge } from "antd";
 import {
   getTree,
   getTableColumns,
@@ -7,31 +7,22 @@ import {
   hasActualValues,
 } from "@/helpers/treeHelper";
 import { Tree as TreeOoui } from "@gisce/ooui";
-
-import { TreeView, Column } from "@/types";
+import { TreeView } from "@/types";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 import { calculateColumnsWidth } from "@/helpers/dynamicColumnsHelper";
-import { parseFloatToString } from "@/helpers/timeHelper";
-import { ProgressBarInput } from "../base/ProgressBar";
 import { Table as GisceTable } from "@gisce/react-formiga-table";
 import {
   PlusSquareOutlined,
   MinusSquareOutlined,
   LoadingOutlined,
 } from "@ant-design/icons";
-import { One2manyValue } from "../base/one2many/One2manyInput";
-import { Interweave } from "interweave";
 import {
   ActionViewContext,
   ActionViewContextType,
 } from "@/context/ActionViewContext";
-import { Many2oneTree } from "../base/many2one/Many2oneTree";
-import { ReferenceTree } from "../base/ReferenceTree";
-import dayjs from "dayjs";
-import Avatar from "../custom/Avatar";
-import { TagInput } from "../custom/Tag";
-import { DatePickerConfig } from "@/common/DatePicker";
 import { SelectAllRecordsRow } from "@/common/SelectAllRecordsRow";
+import { COLUMN_COMPONENTS } from "./treeComponents";
+import ErrorBoundary from "antd/es/alert/ErrorBoundary";
 
 type Props = {
   total?: number;
@@ -56,121 +47,7 @@ type Props = {
   readonly?: boolean;
   onSelectAllRecords?: () => Promise<void>;
 };
-
-const booleanComponentFn = (value: boolean): React.ReactElement => {
-  return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        alignContent: "center",
-      }}
-    >
-      <Checkbox checked={value} disabled />
-    </div>
-  );
-};
-
-const many2OneComponentFn = (m2oField: any): React.ReactElement => {
-  return <Many2oneTree m2oField={m2oField} />;
-};
-
-const textComponentFn = (value: any): React.ReactElement => {
-  return (
-    <Interweave
-      content={value?.toString().replace(/(?:\r\n|\r|\n)/g, "<br>")}
-    />
-  );
-};
-
-const dateComponentFn = (value: any): React.ReactElement => {
-  if (!value || (value && value.length === 0)) return <></>;
-
-  const formattedValue = dayjs(
-    value,
-    DatePickerConfig.date.dateInternalFormat,
-  ).format(DatePickerConfig.date.dateDisplayFormat);
-  return <>{formattedValue}</>;
-};
-
-const dateTimeComponentFn = (value: any): React.ReactElement => {
-  if (!value || (value && value.length === 0)) return <></>;
-  const formattedValue = dayjs(
-    value,
-    DatePickerConfig.time.dateInternalFormat,
-  ).format(DatePickerConfig.time.dateDisplayFormat);
-  return <>{formattedValue}</>;
-};
-
-const one2ManyComponentFn = (value: One2manyValue): React.ReactElement => {
-  const length = Array.isArray(value?.items) ? value?.items.length : 0;
-  return <>{`( ${length} )`}</>;
-};
-
-const progressBarComponentFn = (value: any): React.ReactElement => {
-  return <ProgressBarInput value={value} />;
-};
-
-const floatTimeComponent = (value: number): React.ReactElement => {
-  return <>{parseFloatToString(value)}</>;
-};
-
-const numberComponent = (value: number): React.ReactElement => {
-  return <div style={{ textAlign: "right" }}>{value}</div>;
-};
-
-const imageComponent = (value: string): React.ReactElement => {
-  return (
-    <img
-      src={`data:image/*;base64,${value}`}
-      style={{ maxWidth: "50px", padding: "5px" }}
-    />
-  );
-};
-
-const TagComponent = (
-  value: any,
-  key: string,
-  ooui: any,
-  context: any,
-): React.ReactElement => {
-  return <TagInput ooui={ooui} value={value} />;
-};
-
-const SelectionComponent = (
-  value: any,
-  key: string,
-  ooui: any,
-  context: any,
-): React.ReactElement => {
-  return <>{ooui.selectionValues.get(value)}</>;
-};
-
-const referenceComponent = (
-  value: any,
-  key: string,
-  ooui: any,
-  context: any,
-): React.ReactElement => {
-  return (
-    <>
-      <ReferenceTree
-        value={value}
-        selectionValues={ooui.selectionValues}
-        context={context}
-      />
-    </>
-  );
-};
-
-const AvatarFn = (
-  value: any,
-  key: string,
-  ooui: any,
-  context: any,
-): React.ReactElement => <Avatar ooui={ooui} value={value} />;
-
-function Tree(props: Props): React.ReactElement {
+export const Tree = memo((props: Props) => {
   const {
     page = 1,
     limit,
@@ -196,11 +73,10 @@ function Tree(props: Props): React.ReactElement {
   } = props;
 
   const [items, setItems] = useState<any[]>([]);
-  const [columns, setColumns] = useState<Column[]>([]);
 
   const errorInParseColors = useRef<boolean>(false);
 
-  const treeOoui = useRef<any>(null);
+  const [treeOoui, setTreeOoui] = useState<TreeOoui>();
 
   const { t } = useContext(LocaleContext) as LocaleContextType;
   const internalLimit = useRef(limit);
@@ -211,46 +87,43 @@ function Tree(props: Props): React.ReactElement {
   const { title = undefined, setTitle = undefined } =
     (rootTree ? actionViewContext : {}) || {};
 
-  useEffect(() => {
-    treeOoui.current = getTree(treeView);
+  const columns = useMemo(() => {
+    if (!treeOoui) {
+      return undefined;
+    }
 
-    const columns = getTableColumns(
-      treeOoui.current,
+    return getTableColumns(
+      treeOoui,
       {
-        boolean: booleanComponentFn,
-        many2one: many2OneComponentFn,
-        text: textComponentFn,
-        one2many: one2ManyComponentFn,
-        many2many: one2ManyComponentFn,
-        progressbar: progressBarComponentFn,
-        float_time: floatTimeComponent,
-        image: imageComponent,
-        integer: numberComponent,
-        float: numberComponent,
-        reference: referenceComponent,
-        tag: TagComponent,
-        selection: SelectionComponent,
-        date: dateComponentFn,
-        datetime: dateTimeComponentFn,
-        avatar: AvatarFn,
+        ...COLUMN_COMPONENTS,
       },
       context,
     );
+  }, [context, treeOoui]);
 
-    setColumns(columns);
-
-    if (treeOoui.current.string && title !== treeOoui.current.string) {
-      setTitle?.(treeOoui.current.string);
+  useEffect(() => {
+    const treeOoui = getTree(treeView);
+    setTreeOoui(treeOoui);
+    if (treeOoui.string && title !== treeOoui.string) {
+      setTitle?.(treeOoui.string);
     }
-  }, [treeView]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [treeView, title]);
 
   useEffect(() => {
+    if (!treeOoui) {
+      return;
+    }
     errorInParseColors.current = false;
-    const items = getTableItems(treeOoui.current, results);
+    const items = getTableItems(treeOoui, results);
     setItems(items);
-    internalLimit.current = limit;
+    // 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 =
@@ -263,7 +136,7 @@ function Tree(props: Props): React.ReactElement {
           .replace("{to}", to?.toString())
           .replace("{total}", total?.toString());
 
-  const pagination = () => {
+  const pagination = useMemo(() => {
     if (!showPagination || treeView.isExpandable) {
       return null;
     }
@@ -279,7 +152,7 @@ function Tree(props: Props): React.ReactElement {
     ) : (
       <Row align="bottom" className="pb-4">
         <Col span={onSelectAllRecords ? 8 : 12}>
-          <Pagination
+          <AntPagination
             total={total}
             pageSize={
               internalLimit.current === 0 ? total : internalLimit.current
@@ -307,12 +180,24 @@ function Tree(props: Props): React.ReactElement {
         </Col>
       </Row>
     );
-  };
-
-  function getSums() {
-    const tree = treeOoui.current as TreeOoui;
+  }, [
+    items,
+    loading,
+    onRequestPageChange,
+    onSelectAllRecords,
+    page,
+    rowSelection?.selectedRowKeys,
+    showPagination,
+    summary,
+    total,
+    treeView.isExpandable,
+  ]);
 
-    const sumFields = tree.columns
+  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 };
@@ -341,29 +226,30 @@ function Tree(props: Props): React.ReactElement {
     });
 
     return <div className="p-1 pb-0 pl-2 mt-2 ">{summary.join(", ")}</div>;
-  }
+  }, [items, rowSelection?.selectedRowKeys, treeOoui]);
 
-  let dataTable;
-  let adjustedHeight = scrollY;
-
-  // This helper function helps to calculate the width for each column
-  // based on all table cells - column cell and source cell
-  if (treeOoui.current !== null) {
-    const maxWidthPerCell = 600;
-    dataTable = calculateColumnsWidth(columns, items, maxWidthPerCell);
-    const tree = treeOoui.current as TreeOoui;
+  const dataTable = useMemo(() => {
+    if (treeOoui !== null && columns && columns.length > 0) {
+      const maxWidthPerCell = 600;
+      return calculateColumnsWidth(columns, items, maxWidthPerCell);
+    }
+    return undefined;
+  }, [columns, items, treeOoui]);
 
-    if (scrollY && tree.columns.some((it) => it.sum !== undefined)) {
-      adjustedHeight = scrollY - 30;
+  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 treeOoui.current === null ||
-    !dataTable ||
-    dataTable.columns?.length === 0 ? (
-    <Spin style={{ padding: "2rem" }} />
-  ) : (
-    <div>
-      {pagination()}
+
+  return (
+    <ErrorBoundary>
+      {pagination}
       <GisceTable
         height={adjustedHeight!}
         columns={dataTable.columns}
@@ -404,9 +290,9 @@ function Tree(props: Props): React.ReactElement {
             : undefined
         }
       />
-      {getSums()}
-    </div>
+      {sums}
+    </ErrorBoundary>
   );
-}
+});
 
-export default Tree;
+Tree.displayName = "Tree";

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

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