@semcore/data-table 17.0.0-prerelease.36 → 17.0.0-prerelease.37

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [17.0.0] - 2026-04-10
+## [17.0.0] - 2026-04-13
 
 ### BREAK
 

package/lib/esm/components/AccordionRows/AccordionRows.mjs

@@ -3,7 +3,6 @@ import { sstyled } from "@semcore/core";
 import { Box } from "@semcore/base-components";
 import React__default from "react";
 import { Row } from "../Body/Row.mjs";
-/*!__reshadow-styles__:"../Body/style.shadow.css"*/
 const styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(

package/lib/esm/components/Body/Body.mjs

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
+import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
 import { Box } from "@semcore/base-components";
 import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
 import { hasParent } from "@semcore/core/lib/utils/hasParent";
@@ -9,7 +9,6 @@ import { MergedColumnsCell } from "./MergedCells.mjs";
 import { Row } from "./Row.mjs";
 import { RowGroup } from "./RowGroup.mjs";
 import { UNIQ_ROW_KEY, ROW_INDEX, GRID_ROW_INDEX, IS_EMPTY_DATA_ROW } from "../DataTable/DataTable.mjs";
-/*!__reshadow-styles__:"./style.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -85,22 +84,21 @@ class BodyRoot extends Component {
     _defineProperty(this, "spinContainerIsFocused", false);
     _defineProperty(this, "calculateAriaRowIndex", () => {
       requestAnimationFrame(() => {
-        var _a, _b, _c;
-        const collapsedElements = (_a = this.bodyRef.current) == null ? void 0 : _a.querySelectorAll('[role=row][data-ui-name="Collapse"]:not([aria-hidden=true]):not(:scope [data-ui-name="DataTable"] [role=row]:not([aria-hidden=true]))');
-        collapsedElements == null ? void 0 : collapsedElements.forEach((collapsedElement) => {
+        const collapsedElements = this.bodyRef.current?.querySelectorAll('[role=row][data-ui-name="Collapse"]:not([aria-hidden=true]):not(:scope [data-ui-name="DataTable"] [role=row]:not([aria-hidden=true]))');
+        collapsedElements?.forEach((collapsedElement) => {
           const parent = collapsedElement.parentElement;
-          if ((parent == null ? void 0 : parent.getAttribute("role")) === "rowgroup") {
-            parent == null ? void 0 : parent.appendChild(collapsedElement);
+          if (parent?.getAttribute("role") === "rowgroup") {
+            parent?.appendChild(collapsedElement);
           }
         });
-        const visibleRows = (_b = this.bodyRef.current) == null ? void 0 : _b.querySelectorAll('[role=row]:not([aria-hidden=true]):not(:scope [data-ui-name="DataTable"] [role=row]:not([aria-hidden=true]))');
-        visibleRows == null ? void 0 : visibleRows.forEach((row, index) => {
+        const visibleRows = this.bodyRef.current?.querySelectorAll('[role=row]:not([aria-hidden=true]):not(:scope [data-ui-name="DataTable"] [role=row]:not([aria-hidden=true]))');
+        visibleRows?.forEach((row, index) => {
           if (row instanceof HTMLElement) {
             row.setAttribute("aria-rowindex", (index + 2 + this.startIndex).toString());
           }
         });
         if (!this.asProps.totalRows) {
-          (_c = this.asProps.tableRef.current) == null ? void 0 : _c.setAttribute("aria-rowcount", ((visibleRows == null ? void 0 : visibleRows.length) ?? 0).toString());
+          this.asProps.tableRef.current?.setAttribute("aria-rowcount", (visibleRows?.length ?? 0).toString());
         }
       });
     });
@@ -158,15 +156,13 @@ class BodyRoot extends Component {
       if (loading) {
         const activeElement = document.activeElement;
         setTimeout(() => {
-          var _a;
           if (tableRef.current && hasParent(activeElement, tableRef.current)) {
-            (_a = tableRef.current) == null ? void 0 : _a.focus();
+            tableRef.current?.focus();
           }
         });
       } else if (!loading && this.spinContainerIsFocused) {
         setTimeout(() => {
-          var _a;
-          (_a = tableRef.current) == null ? void 0 : _a.focus();
+          tableRef.current?.focus();
         });
         this.spinContainerIsFocused = false;
       }
@@ -209,7 +205,7 @@ class BodyRoot extends Component {
     const index = row[ROW_INDEX];
     const gridRowIndex = row[GRID_ROW_INDEX] + (hasGroups ? INDEX_OFFSET + 1 : INDEX_OFFSET);
     const sideIndentsValue = variant === "card" ? "wide" : sideIndents;
-    const calculatedRowProps = (rowProps == null ? void 0 : rowProps(row, index)) ?? {};
+    const calculatedRowProps = rowProps?.(row, index) ?? {};
     return {
       ...calculatedRowProps,
       use,
@@ -252,7 +248,6 @@ class BodyRoot extends Component {
     };
   }
   render() {
-    var _a, _b, _c, _d;
     var _ref = this.asProps, _ref2;
     const SBody = Box;
     const SSpinContainer = Box;
@@ -276,7 +271,7 @@ class BodyRoot extends Component {
     let lastIndex = -1;
     if (virtualScroll) {
       const rowsBuffer = typeof virtualScroll !== "boolean" && "rowsBuffer" in virtualScroll ? virtualScroll.rowsBuffer ?? ROWS_BUFFER : ROWS_BUFFER;
-      const offsetHeight = ((_a = tableContainerRef.current) == null ? void 0 : _a.offsetHeight) ?? 0;
+      const offsetHeight = tableContainerRef.current?.offsetHeight ?? 0;
       const prevPrepared = scrollDirection === "up" ? rowsBuffer : 4;
       const nextPrepared = scrollDirection === "up" ? 4 : rowsBuffer;
       if (typeof virtualScroll === "boolean" || !("rowHeight" in virtualScroll)) {
@@ -298,7 +293,7 @@ class BodyRoot extends Component {
               break;
             }
           }
-          if (scrollTop + offsetHeight < (((_b = this.rowsHeightMap.get(lastIndex ?? 0)) == null ? void 0 : _b[1]) ?? 0)) {
+          if (scrollTop + offsetHeight < (this.rowsHeightMap.get(lastIndex ?? 0)?.[1] ?? 0)) {
             lastIndex = lastIndex + aproxRowsOnPage;
           }
         } else if (scrollDirection === "up") {
@@ -318,7 +313,7 @@ class BodyRoot extends Component {
               break;
             }
           }
-          if (scrollTop < (((_c = this.rowsHeightMap.get(startIndex ?? 0)) == null ? void 0 : _c[0]) ?? 0)) {
+          if (scrollTop < (this.rowsHeightMap.get(startIndex ?? 0)?.[0] ?? 0)) {
             startIndex = Math.max(startIndex - aproxRowsOnPage, 0);
           }
         }
@@ -339,7 +334,7 @@ class BodyRoot extends Component {
       }
     }
     this.startIndex = startIndex === -1 ? 0 : startIndex;
-    const rowMarginTop = (_d = this.rowsHeightMap.get(this.startIndex - 1)) == null ? void 0 : _d[1];
+    const rowMarginTop = this.rowsHeightMap.get(this.startIndex - 1)?.[1];
     const needMarginTop = typeof virtualScroll === "boolean" || virtualScroll && !("rowHeight" in virtualScroll);
     let emptyRow = null;
     if (rowsToRender.length === 0) {
@@ -368,7 +363,6 @@ class BodyRoot extends Component {
     }), needMarginTop && rowMarginTop && /* @__PURE__ */ React.createElement(Box, _ref2.cn("Box", {
       "h": rowMarginTop
     })), rowsToRender.map((row, index) => {
-      var _a2;
       if (Array.isArray(row)) {
         const groupUniqKey = row[0][UNIQ_ROW_KEY];
         return /* @__PURE__ */ React.createElement(RowGroup, {
@@ -383,12 +377,12 @@ class BodyRoot extends Component {
         });
       }
       return /* @__PURE__ */ React.createElement(Body.Row, {
-        key: (_a2 = row[UNIQ_ROW_KEY]) == null ? void 0 : _a2.toString(),
+        key: row[UNIQ_ROW_KEY]?.toString(),
         row,
         ref: virtualScroll ? this.handleRef(this.startIndex + index, row) : void 0,
         componentRef: this.handleComponentRef(row)
       });
-    }), renderCellOverlay == null ? void 0 : renderCellOverlay(), loading && /* @__PURE__ */ React.createElement(SSpinContainer, _ref2.cn("SSpinContainer", {
+    }), renderCellOverlay?.(), loading && /* @__PURE__ */ React.createElement(SSpinContainer, _ref2.cn("SSpinContainer", {
       "innerOutline": true,
       "headerHeight": `${this.getSpinnerTopOffset()}px`,
       "tabIndex": -1,
@@ -402,12 +396,11 @@ class BodyRoot extends Component {
     }))));
   }
   setRowHeight(index, row) {
-    var _a, _b;
     const {
       expandedRows
     } = this.asProps;
-    const node = (_a = this.rowsHeightMap.get(index)) == null ? void 0 : _a[2];
-    const firstChild = (node == null ? void 0 : node.role) === "rowgroup" ? (_b = node == null ? void 0 : node.children.item(0)) == null ? void 0 : _b.children.item(0) : node == null ? void 0 : node.children.item(0);
+    const node = this.rowsHeightMap.get(index)?.[2];
+    const firstChild = node?.role === "rowgroup" ? node?.children.item(0)?.children.item(0) : node?.children.item(0);
     if (node && firstChild instanceof HTMLElement) {
       const offset = firstChild.offsetTop - this.asProps.headerHeight;
       let height = firstChild.getBoundingClientRect().height;

package/lib/esm/components/Body/Cell.mjs

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
+import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
 import { Box, Flex } from "@semcore/base-components";
 import { getFocusableIn } from "@semcore/core/lib/utils/focus-lock/getFocusableIn";
 import { isFocusInside } from "@semcore/core/lib/utils/focus-lock/isFocusInside";
@@ -7,7 +7,6 @@ import { isInteractiveElement } from "@semcore/core/lib/utils/isInteractiveEleme
 import * as React from "react";
 import { MergedColumnsCell, MergedRowsCell } from "./MergedCells.mjs";
 import { handleKeydownFocusCell, handleFocusCell } from "../../enhancers/focusableCell.mjs";
-/*!__reshadow-styles__:"./style.shadow.css"*/
 const styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -80,7 +79,6 @@ class CellRoot extends Component {
       handleFocusCell(this.lockedCell, e.target, e.currentTarget);
     });
     _defineProperty(this, "handleClickCell", (e) => {
-      var _a, _b;
       const {
         rowIndex,
         columnIndex,
@@ -88,18 +86,18 @@ class CellRoot extends Component {
         row,
         accordionRowIndex
       } = this.asProps;
-      const rowElement = (_a = e.currentTarget.parentElement) == null ? void 0 : _a.parentElement;
-      const ariaRowindex = Number(rowElement == null ? void 0 : rowElement.getAttribute("aria-rowindex"));
+      const rowElement = e.currentTarget.parentElement?.parentElement;
+      const ariaRowindex = Number(rowElement?.getAttribute("aria-rowindex"));
       let rowIndexValue = accordionRowIndex === void 0 ? rowIndex : rowIndex + 1 + accordionRowIndex;
       if (!isNaN(ariaRowindex)) {
         rowIndexValue = ariaRowindex - 2;
       }
-      const focusableChildren = Array.from(((_b = this.cellRef.current) == null ? void 0 : _b.children) ?? []).flatMap((node) => getFocusableIn(node));
+      const focusableChildren = Array.from(this.cellRef.current?.children ?? []).flatMap((node) => getFocusableIn(node));
       if (isInteractiveElement(e.target) && this.cellRef.current && focusableChildren.length > 1) {
         this.lockedCell[0] = this.cellRef.current;
         this.lockedCell[1] = true;
       }
-      onClick == null ? void 0 : onClick(e, {
+      onClick?.(e, {
         rowIndex: rowIndexValue,
         colIndex: columnIndex,
         row
@@ -107,13 +105,12 @@ class CellRoot extends Component {
     });
   }
   componentWillUnmount() {
-    var _a;
     const {
       virtualScroll,
       tableRef
     } = this.asProps;
     if (virtualScroll && this.cellRef.current && isFocusInside(this.cellRef.current)) {
-      (_a = tableRef.current) == null ? void 0 : _a.setAttribute("tabIndex", "0");
+      tableRef.current?.setAttribute("tabIndex", "0");
     }
   }
   render() {

package/lib/esm/components/Body/LimitOverlay.mjs

@@ -1,11 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, Component, sstyled } from "@semcore/core";
+import { sstyled, Component, createComponent } from "@semcore/core";
 import { Flex, Box } from "@semcore/base-components";
 import { hasParent } from "@semcore/core/lib/utils/hasParent";
 import * as React from "react";
 import { handleKeydownFocusCell, handleFocusCell } from "../../enhancers/focusableCell.mjs";
 import { GRID_ROW_INDEX, ACCORDION } from "../DataTable/DataTable.mjs";
-/*!__reshadow-styles__:"./style.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -165,7 +164,7 @@ class LimitOverlayRoot extends Component {
       "tabIndex": -1,
       "onFocus": this.handleFocusableCellFocus,
       "onKeyDown": this.handleFocusableCellKeyDown
-    }), renderOverlay == null ? void 0 : renderOverlay()));
+    }), renderOverlay?.()));
   }
 }
 _defineProperty(LimitOverlayRoot, "displayName", "LimitOverlay");

package/lib/esm/components/Body/Row.mjs

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
+import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
 import { Box, Collapse } from "@semcore/base-components";
 import { ButtonLink } from "@semcore/button";
 import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
@@ -12,7 +12,6 @@ import { MergedRowsCell, MergedColumnsCell } from "./MergedCells.mjs";
 import { AccordionRows } from "../AccordionRows/AccordionRows.mjs";
 import { ACCORDION, UNIQ_ROW_KEY, ROW_INDEX, IS_EMPTY_DATA_ROW, ROW_GROUP } from "../DataTable/DataTable.mjs";
 import { RowSelector } from "../RowSelector/RowsSelector.mjs";
-/*!__reshadow-styles__:"./style.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -133,8 +132,7 @@ class RowRoot extends Component {
             [...previousRows.entries()].forEach(([uniqKey, previousRow]) => {
               if (!this.state.expandedForAnimation) {
                 setTimeout(() => {
-                  var _a;
-                  (_a = this.asProps.componentsMap.get(uniqKey)) == null ? void 0 : _a.closeAccordion(previousRow, closeDuration);
+                  this.asProps.componentsMap.get(uniqKey)?.closeAccordion(previousRow, closeDuration);
                 }, openDuration / 3);
               }
             });
@@ -177,10 +175,9 @@ class RowRoot extends Component {
         clearTimeout(this.openAccordionTimeout);
       }
       this.setState((prevState) => {
-        var _a;
         return {
           expandedForAnimation: true,
-          accordionRows: (_a = prevState.accordionRows) == null ? void 0 : _a.slice(0, accordionAnimationRows)
+          accordionRows: prevState.accordionRows?.slice(0, accordionAnimationRows)
         };
       }, calculateAriaRowIndex);
       this.closeAccordionTimeout = window.setTimeout(() => {
@@ -201,7 +198,7 @@ class RowRoot extends Component {
     const {
       componentRef
     } = this.asProps;
-    componentRef == null ? void 0 : componentRef(this);
+    componentRef?.(this);
     this.setAccordion();
   }
   componentDidUpdate(prevProps) {
@@ -213,8 +210,7 @@ class RowRoot extends Component {
     }
   }
   componentWillUnmount() {
-    var _a, _b;
-    (_b = (_a = this.asProps).componentRef) == null ? void 0 : _b.call(_a, null);
+    this.asProps.componentRef?.(null);
   }
   setAccordion() {
     const {
@@ -247,7 +243,7 @@ class RowRoot extends Component {
     });
   }
   cellHasAccordion(cellValue) {
-    return !(cellValue instanceof MergedRowsCell || cellValue instanceof MergedColumnsCell) && Boolean(cellValue == null ? void 0 : cellValue[ACCORDION]);
+    return !(cellValue instanceof MergedRowsCell || cellValue instanceof MergedColumnsCell) && Boolean(cellValue?.[ACCORDION]);
   }
   handleClickRow(row) {
     return (e) => {
@@ -291,7 +287,7 @@ class RowRoot extends Component {
       value = cellValue;
     }
     const defaultRender = () => {
-      return /* @__PURE__ */ React.isValidElement(value) ? value : value == null ? void 0 : value.toString();
+      return /* @__PURE__ */ React.isValidElement(value) ? value : value?.toString();
     };
     let withoutBorder = props.row[IS_EMPTY_DATA_ROW];
     if (variant === "card") {
@@ -303,7 +299,7 @@ class RowRoot extends Component {
       use,
       virtualScroll: Boolean(virtualScroll),
       tableRef,
-      children: (props == null ? void 0 : props.children) ?? defaultRender(),
+      children: props?.children ?? defaultRender(),
       onClick: onCellClick,
       flatRows: this.asProps.flatRows,
       shadowVertical,
@@ -323,7 +319,7 @@ class RowRoot extends Component {
         columnIndex: props.columnIndex,
         dataKey,
         defaultRender,
-        value: /* @__PURE__ */ React.isValidElement(value) ? value : (value == null ? void 0 : value.toString()) ?? "",
+        value: /* @__PURE__ */ React.isValidElement(value) ? value : value?.toString() ?? "",
         isMergedRows,
         isMergedColumns,
         rawData: rowRawData,
@@ -343,9 +339,9 @@ class RowRoot extends Component {
       }
     }
     const firstColumnIndex = selectedRows ? 1 : 0;
-    if (props.columnIndex === firstColumnIndex && props.row[ACCORDION] || (value == null ? void 0 : value[ACCORDION]) || cellValue instanceof MergedRowsCell && cellValue.accordion) {
+    if (props.columnIndex === firstColumnIndex && props.row[ACCORDION] || value?.[ACCORDION] || cellValue instanceof MergedRowsCell && cellValue.accordion) {
       var _ref2;
-      const expanded = (expandedRows == null ? void 0 : expandedRows.has(props.row[UNIQ_ROW_KEY])) && !this.state.expandedForAnimation;
+      const expanded = expandedRows?.has(props.row[UNIQ_ROW_KEY]) && !this.state.expandedForAnimation;
       extraProps.expanded = expanded;
       if (expanded) {
         extraProps.withoutBorder = false;
@@ -355,7 +351,7 @@ class RowRoot extends Component {
       const handleClick = (e) => {
         this.handleExpandRow(row, rowIndex);
       };
-      if ((value == null ? void 0 : value[ACCORDION]) || cellValue instanceof MergedRowsCell && cellValue.accordion) {
+      if (value?.[ACCORDION] || cellValue instanceof MergedRowsCell && cellValue.accordion) {
         extraProps.onClick = callAllEventHandlers(extraProps.onClick, this.handleClickCell);
       }
       extraProps.children = (_ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SAccordionToggle, _ref2.cn("SAccordionToggle", {
@@ -377,12 +373,11 @@ class RowRoot extends Component {
       rowIndex,
       limit
     } = this.asProps;
-    const rowsLimit = limit == null ? void 0 : limit.fromRow;
-    const columnsLimit = limit == null ? void 0 : limit.fromColumn;
+    const rowsLimit = limit?.fromRow;
+    const columnsLimit = limit?.fromColumn;
     return rowsLimit !== void 0 && !columnsLimit && rowIndex > rowsLimit ? true : void 0;
   }
   render() {
-    var _a;
     var _ref = this.asProps, _ref3;
     const SRow = Box;
     const SCollapseRow = Collapse;
@@ -424,17 +419,17 @@ class RowRoot extends Component {
       accordionRows,
       accordionComponent
     } = this.state;
-    const expanded = (expandedRows == null ? void 0 : expandedRows.has(row[UNIQ_ROW_KEY])) && !expandedForAnimation;
+    const expanded = expandedRows?.has(row[UNIQ_ROW_KEY]) && !expandedForAnimation;
     const accordionType = row[ACCORDION] && !mergedRow ? "row" : void 0;
     let accordionDataGridArea = "";
     if (accordionRows || accordionComponent) {
-      const rowIncrement = ((_a = row[ROW_GROUP]) == null ? void 0 : _a.size) ? row[ROW_GROUP].size + 1 : 1;
+      const rowIncrement = row[ROW_GROUP]?.size ? row[ROW_GROUP].size + 1 : 1;
       accordionDataGridArea = accordionRows ? `${gridRowIndex + rowIncrement} / 1 / ${gridRowIndex + rowIncrement + accordionRows.length} / ${columns.length + 1}` : `${gridRowIndex + rowIncrement} / 1 / ${gridRowIndex + rowIncrement} / ${columns.length + 1}`;
     }
     const rowUniqKey = row[UNIQ_ROW_KEY];
     const accordionId = `${uid}_${rowUniqKey}`;
-    const rowsLimit = limit == null ? void 0 : limit.fromRow;
-    const columnsLimit = limit == null ? void 0 : limit.fromColumn;
+    const rowsLimit = limit?.fromRow;
+    const columnsLimit = limit?.fromColumn;
     const filledColumns = columns.reduce((acc, column) => {
       const cellValue = row[column.name];
       if (cellValue instanceof MergedColumnsCell) {

package/lib/esm/components/Body/RowGroup.mjs

@@ -5,7 +5,6 @@ import * as React from "react";
 import { Body } from "./Body.mjs";
 import { MergedRowsCell } from "./MergedCells.mjs";
 import { UNIQ_ROW_KEY, SELECT_ALL } from "../DataTable/DataTable.mjs";
-/*!__reshadow-styles__:"./style.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -95,11 +94,13 @@ class RowGroup extends React.PureComponent {
       rowIndex
     } = this.props;
     const groupUniqKey = rows[0][UNIQ_ROW_KEY];
+    let isFirstCellAreMergedRows = false;
     if (selectedRows) {
       const nextColumnName = columns[1].name;
       const firstCell = rows[0][nextColumnName];
       if (firstCell instanceof MergedRowsCell) {
         rows[0][SELECT_ALL.toString()] = new MergedRowsCell("", firstCell.rowsCount);
+        isFirstCellAreMergedRows = true;
       }
     }
     return _ref = sstyled(style), /* @__PURE__ */ React.createElement(SRowGroup, _ref.cn("SRowGroup", {
@@ -107,14 +108,13 @@ class RowGroup extends React.PureComponent {
       "key": `gg_${groupUniqKey}`,
       "ref": this.props.handleRef(startIndex + rowIndex, rows[0])
     }), rows.map((item, i) => {
-      var _a;
       const rowProps = {
         row: item,
         mergedRow: i > 0 ? true : false,
         componentRef: this.props.handleComponentRef(item)
       };
       return /* @__PURE__ */ React.createElement(Body.Row, _extends({
-        key: ((_a = item[UNIQ_ROW_KEY]) == null ? void 0 : _a.toString()) ?? `gg_${groupUniqKey}_row_${i}`
+        key: item[UNIQ_ROW_KEY]?.toString() ?? `gg_${groupUniqKey}_row_${i}`
       }, rowProps));
     }));
   }