@harjs/react-ui 1.1.8 → 1.1.9

package/dist/components/data-display/table/IProps.d.ts

@@ -34,7 +34,7 @@ export type Config<T extends object> = {
         button?: boolean;
         render?: {
             styles: React.CSSProperties;
-            element: (item: T[]) => React.JSX.Element;
+            element: (parentItem: T, subItem: unknown) => React.JSX.Element;
         };
     };
     dnd?: {

package/dist/components/data-display/table/body/TBody.d.ts

@@ -9,6 +9,9 @@ interface IProps<T extends object> {
         _selectionItems: React.MutableRefObject<T[]>;
     };
     states: {
+        columnNumber: {
+            get: number;
+        };
         setSelectAll: {
             get: boolean;
             set: Dispatch<SetStateAction<boolean>>;

package/dist/components/data-display/table/body/TBody.js

@@ -6,14 +6,17 @@ import Editable from "./Editable";
 import TableTR from "../../../../libs/core/application/locales/table/tr";
 import TableEN from "../../../../libs/core/application/locales/table/en";
 import { useTranslation } from "@harjs/translation";
-const SubitemList = ({ items, columns, depth, level = 1, parentKey = "", config, methods, states, renderCell, }) => {
+const SubitemList = ({ parentItem, items, columns, depth, level = 1, parentKey = "", config, methods, states, renderCell, }) => {
     const _subrowSelector = config.subrow?.selector ?? "subitems";
     const _subrowButton = config.subrow?.button ?? true;
     if (config.subrow?.render) {
         return (React.createElement("tr", { className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}`, "data-level": level },
             methods.selections && React.createElement("td", { className: "sticky sticky-left", "data-sticky-position": "left" }),
             _subrowButton && React.createElement("td", { className: "sticky sticky-left", "data-sticky-position": "left" }),
-            React.createElement("td", { colSpan: columns.length || 1, style: { ...config.subrow.render.styles, padding: "7.5px 7.5px 7.5px 0" } }, config.subrow?.render.element(items) ?? React.createElement(React.Fragment, null))));
+            React.createElement("td", { colSpan: states.columnNumber.get || columns.length || 1, style: {
+                    ...config.subrow.render.styles,
+                    padding: "var(--space-8)",
+                }, ...(states.columnNumber.get > 0 ? { className: "sticky sticky-left", "data-sticky-position": "left" } : {}) }, config.subrow?.render.element(parentItem, items) ?? React.createElement(React.Fragment, null))));
     }
     return (React.createElement(React.Fragment, null, items.map((subitem, subindex) => {
         const id = methods.trackBy?.(subitem) ?? `sub-${subindex}`;
@@ -40,7 +43,7 @@ const SubitemList = ({ items, columns, depth, level = 1, parentKey = "", config,
                     height: 0,
                     isSubrows: true,
                 }))),
-            states.showSubitems.get[key] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, depth: depth + 0.75, level: level + 1, parentKey: key, config: config, methods: methods, states: states, renderCell: renderCell }))));
+            states.showSubitems.get[key] && _subitem && (React.createElement(SubitemList, { parentItem: subitem, items: _subitem, columns: columns, depth: depth + 0.75, level: level + 1, parentKey: key, config: config, methods: methods, states: states, renderCell: renderCell }))));
     })));
 };
 function TBody({ data, columns, refs, methods, states, config }) {
@@ -147,7 +150,7 @@ function TBody({ data, columns, refs, methods, states, config }) {
                     level: 0,
                     height: currentRowHeight,
                 }))),
-            states.showSubitems.get[key] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, depth: 1.5, parentKey: key, config: config, methods: methods, states: states, renderCell: renderCell }))));
+            states.showSubitems.get[key] && _subitem && (React.createElement(SubitemList, { parentItem: item, items: _subitem, columns: columns, depth: 1.5, parentKey: key, config: config, methods: methods, states: states, renderCell: renderCell }))));
     };
     // useEffects
     useEffect(() => {

package/dist/components/data-display/table/index.js

@@ -24,6 +24,7 @@ import TableTR from "../../../libs/core/application/locales/table/tr";
 import TableEN from "../../../libs/core/application/locales/table/en";
 const { Row, Column } = Grid;
 const Table = forwardRef(({ children, trackBy, title, description, data, columns, actions, rowBackgroundColor, selections, selectionDisabled, previousSelections, sortedParams, searchedParams, onEditable, onDnD, pagination, config = { isSearchable: false }, }, ref) => {
+    // refs
     const _innerRef = useRef(null);
     const _tableWrapper = useRef(null);
     const _tableContent = useRef(null);
@@ -41,6 +42,8 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     const _subrowSelector = config.subrow?.selector ?? "subitems";
     const _subrowButton = config.subrow?.button ?? false;
     const _tableClassName = ["ar-table", "scroll"];
+    // states
+    const [columnNumber, setColumnNumber] = useState(0);
     const [selectAll, setSelectAll] = useState(false);
     const [showSubitems, setShowSubitems] = useState({});
     const [createTrigger, setCreateTrigger] = useState(false);
@@ -323,6 +326,22 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         setTimeout(() => handleScroll(), 0);
         return _data;
     }, [data, searchedText, currentPage, selectedPerPage, sortConfig, config.isServerSide]);
+    useEffect(() => {
+        if (columns.length === 0 && config.subrow?.render)
+            return;
+        const _tableW = _tableWrapper.current;
+        if (!_tableW)
+            return;
+        const { right } = _tableW?.getBoundingClientRect();
+        const _th = _tableW.querySelectorAll("thead > tr > th");
+        let i = 0;
+        _th?.forEach((th) => {
+            const thRect = th.getBoundingClientRect();
+            if (thRect.left < right)
+                i++;
+        });
+        setColumnNumber(i - 1);
+    }, [columns]);
     useEffect(() => {
         if (!previousSelections || previousSelections.length === 0) {
             _selectionItems.current = [];
@@ -604,6 +623,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                         })))),
                 React.createElement("tbody", { ref: _tBody },
                     React.createElement(TBody, { data: getData, columns: columns, refs: { _checkboxItems: _checkboxItems, _selectionItems: _selectionItems }, states: {
+                            columnNumber: { get: columnNumber },
                             setSelectAll: { get: selectAll, set: setSelectAll },
                             showSubitems: { get: showSubitems, set: setShowSubitems },
                         }, methods: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harjs/react-ui",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "publishConfig": {
     "access": "public"
   },