@qoretechnologies/reqore 0.36.4 → 0.36.6

package/dist/hooks/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/hooks/useTooltip.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGrE,eAAO,MAAM,UAAU,kBACN,WAAW,GAAG,SAAS,YAC5B,kBAAkB,KAC3B,IAkBF,CAAC"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/hooks/useTooltip.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGrE,eAAO,MAAM,UAAU,kBACN,WAAW,GAAG,SAAS,YAC5B,kBAAkB,KAC3B,IAsBF,CAAC"}

package/dist/hooks/useTooltip.js

@@ -20,12 +20,13 @@ var usePopover_1 = __importDefault(require("./usePopover"));
 var useTooltip = function (targetElement, tooltip) {
     var _a = (0, react_1.useState)(undefined), element = _a[0], setElement = _a[1];
     var _b = (0, react_1.useState)(undefined), data = _b[0], setData = _b[1];
+    var content = (0, react_1.useMemo)(function () { return (typeof tooltip === 'object' ? tooltip === null || tooltip === void 0 ? void 0 : tooltip.content : tooltip); }, [tooltip]);
     (0, react_1.useEffect)(function () {
-        if (targetElement && tooltip) {
+        if (targetElement && content) {
             setElement(targetElement);
             setData(tooltip);
         }
-    }, [targetElement === null || targetElement === void 0 ? void 0 : targetElement.toString(), tooltip === null || tooltip === void 0 ? void 0 : tooltip.toString()]);
+    }, [targetElement, content]);
     var popoverData = typeof data === 'string' ? { content: data } : data;
     (0, usePopover_1["default"])(__assign(__assign({}, popoverData), { targetElement: element, show: !!(popoverData === null || popoverData === void 0 ? void 0 : popoverData.content) }));
 };

package/dist/hooks/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","sourceRoot":"","sources":["../../src/hooks/useTooltip.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+BAA4C;AAE5C,4DAAsC;AAE/B,IAAM,UAAU,GAAG,UACxB,aAAsC,EACtC,OAA4B;IAEtB,IAAA,KAAwB,IAAA,gBAAQ,EAA0B,SAAS,CAAC,EAAnE,OAAO,QAAA,EAAE,UAAU,QAAgD,CAAC;IACrE,IAAA,KAAkB,IAAA,gBAAQ,EAAsC,SAAS,CAAC,EAAzE,IAAI,QAAA,EAAE,OAAO,QAA4D,CAAC;IAEjF,IAAA,iBAAS,EAAC;QACR,IAAI,aAAa,IAAI,OAAO,EAAE;YAC5B,UAAU,CAAC,aAAa,CAAC,CAAC;YAC1B,OAAO,CAAC,OAAO,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,EAAE,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;IAErD,IAAM,WAAW,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAExE,IAAA,uBAAU,wBACL,WAAW,KACd,aAAa,EAAE,OAAO,EACtB,IAAI,EAAE,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAA,IAC5B,CAAC;AACL,CAAC,CAAC;AArBW,QAAA,UAAU,cAqBrB"}
+{"version":3,"file":"useTooltip.js","sourceRoot":"","sources":["../../src/hooks/useTooltip.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+BAAqD;AAErD,4DAAsC;AAE/B,IAAM,UAAU,GAAG,UACxB,aAAsC,EACtC,OAA4B;IAEtB,IAAA,KAAwB,IAAA,gBAAQ,EAA0B,SAAS,CAAC,EAAnE,OAAO,QAAA,EAAE,UAAU,QAAgD,CAAC;IACrE,IAAA,KAAkB,IAAA,gBAAQ,EAAsC,SAAS,CAAC,EAAzE,IAAI,QAAA,EAAE,OAAO,QAA4D,CAAC;IACjF,IAAM,OAAO,GAAG,IAAA,eAAO,EACrB,cAAM,OAAA,CAAC,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAA1D,CAA0D,EAChE,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,IAAA,iBAAS,EAAC;QACR,IAAI,aAAa,IAAI,OAAO,EAAE;YAC5B,UAAU,CAAC,aAAa,CAAC,CAAC;YAC1B,OAAO,CAAC,OAAO,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7B,IAAM,WAAW,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IAExE,IAAA,uBAAU,wBACL,WAAW,KACd,aAAa,EAAE,OAAO,EACtB,IAAI,EAAE,CAAC,CAAC,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAA,IAC5B,CAAC;AACL,CAAC,CAAC;AAzBW,QAAA,UAAU,cAyBrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.36.4",
+  "version": "0.36.6",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -96,6 +96,7 @@
     "@react-spring/web": "^9.6.1",
     "classnames": "^2.2.6",
     "epoch-timeago": "^1.1.9",
+    "fast-json-stable-stringify": "^2.1.0",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "re-resizable": "^6.9.0",

package/src/components/Breadcrumbs/index.tsx

@@ -2,12 +2,11 @@ import { isArray } from 'lodash';
 import React, { useMemo } from 'react';
 import { useMeasure } from 'react-use';
 import styled, { css } from 'styled-components';
-import { ReqorePopover } from '../..';
+import { ReqoreDropdown } from '../..';
 import {
   ICON_FROM_SIZE,
   MARGIN_FROM_SIZE,
   PADDING_FROM_SIZE,
-  TABS_SIZE_TO_PX,
   TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
@@ -16,13 +15,12 @@ import { changeLightness, getReadableColor, getReadableColorFrom } from '../../h
 import { calculateStringSizeInPixels } from '../../helpers/utils';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { IReqoreButtonProps } from '../Button';
+import { IReqoreDropdownItem } from '../Dropdown/list';
 import ReqoreIcon from '../Icon';
-import ReqoreMenu from '../Menu';
-import ReqoreMenuItem from '../Menu/item';
 import { IReqoreTabsListItem } from '../Tabs';
 import { StyledTabListItem } from '../Tabs/item';
 import ReqoreTabsList, { StyledReqoreTabsList, getTabsLength } from '../Tabs/list';
-import ReqoreBreadcrumbsItem, { IReqoreBreadcrumbItemProps } from './item';
+import ReqoreBreadcrumbsItem from './item';
 
 export interface IReqoreBreadcrumbItemTabs {
   tabs: IReqoreTabsListItem[];
@@ -46,6 +44,11 @@ export interface IReqoreBreadcrumbsProps extends React.HTMLAttributes<HTMLDivEle
   customTheme?: IReqoreBreadcrumbsTheme;
   size?: TSizes;
   flat?: boolean;
+
+  responsive?: boolean;
+
+  padded?: boolean;
+  margin?: 'top' | 'bottom' | 'both' | 'none';
 }
 
 interface IStyledBreadcrumbs extends Omit<IReqoreBreadcrumbsProps, 'items'> {
@@ -53,12 +56,12 @@ interface IStyledBreadcrumbs extends Omit<IReqoreBreadcrumbsProps, 'items'> {
 }
 
 const StyledReqoreBreadcrumbs = styled.div<IStyledBreadcrumbs>`
-  ${({ theme, size, flat }: IStyledBreadcrumbs) => css`
-    width: 100%;
-    min-height: ${TABS_SIZE_TO_PX[size!]}px;
-    margin: ${MARGIN_FROM_SIZE[size!]}px 0;
+  ${({ theme, size, flat, padded = true, margin = 'both', responsive }: IStyledBreadcrumbs) => css`
+    width: ${responsive ? '100%' : undefined};
+    margin-top: ${margin === 'both' || margin === 'top' ? MARGIN_FROM_SIZE[size!] : 0}px;
+    margin-bottom: $ ${margin === 'both' || margin === 'bottom' ? MARGIN_FROM_SIZE[size!] : 0}px;
     display: flex;
-    padding: 0 ${PADDING_FROM_SIZE[size!]}px;
+    padding: 0 ${padded ? PADDING_FROM_SIZE[size!] : 0}px;
     justify-content: space-between;
     border-bottom: ${flat ? undefined : `1px solid ${changeLightness(theme.main, 0.05)}`};
     background-color: ${({ theme }: { theme: IReqoreTheme }) =>
@@ -166,13 +169,14 @@ const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps> = ({
   customTheme,
   flat,
   size = 'normal',
+  responsive = true,
   ...rest
 }: IReqoreBreadcrumbsProps) => {
   const [ref, { width }] = useMeasure();
   const theme = useReqoreTheme('breadcrumbs', customTheme);
   const transformedItems = useMemo(
-    () => getTransformedItems(items, _testWidth || width, size),
-    [items, width, _testWidth]
+    () => (responsive ? getTransformedItems(items, _testWidth || width, size) : items),
+    [items, width, _testWidth, size]
   );
 
   const renderItem = (item: IReqoreBreadcrumbItem | IReqoreBreadcrumbItem[], index: number) => {
@@ -180,36 +184,12 @@ const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps> = ({
       return (
         <React.Fragment key={index}>
           <ReqoreIcon icon='ArrowRightSLine' size={size} key={'icon' + index} margin='both' />
-          <ReqorePopover
-            key={index}
-            component={ReqoreBreadcrumbsItem}
-            isReqoreComponent
-            componentProps={
-              {
-                icon: 'MoreFill',
-                interactive: true,
-              } as IReqoreBreadcrumbItemProps
-            }
+          <ReqoreDropdown
+            key={`dropdown-${index}`}
+            icon='MoreFill'
             handler='hoverStay'
             delay={500}
-            content={
-              <ReqoreMenu>
-                {item.map(({ icon, label, as, tooltip, props }) => (
-                  <ReqoreMenuItem
-                    {...props}
-                    icon={icon}
-                    as={as}
-                    onClick={(event) => {
-                      props?.onClick?.(event);
-                    }}
-                    tooltip={tooltip}
-                    key={index + (label || icon || '')}
-                  >
-                    {label}
-                  </ReqoreMenuItem>
-                ))}
-              </ReqoreMenu>
-            }
+            items={item as IReqoreDropdownItem[]}
           />
         </React.Fragment>
       );
@@ -250,6 +230,7 @@ const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps> = ({
       flat={flat}
       theme={theme}
       size={size}
+      responsive={responsive}
     >
       <div key='reqore-breadcrumbs-left-wrapper'>
         {transformedItems.map(

package/src/components/Breadcrumbs/item.tsx

@@ -28,6 +28,12 @@ const ReqoreBreadcrumbsItem = forwardRef<HTMLButtonElement, IReqoreBreadcrumbIte
         flat
         {...rest}
         {...props}
+        onClick={(e) => {
+          e.persist();
+          e.stopPropagation();
+
+          rest.onClick?.(e);
+        }}
       >
         {label}
       </ReqoreButton>

package/src/components/Button/index.tsx

@@ -79,7 +79,8 @@ export interface IReqoreButtonProps
   descriptionEffect?: IReqoreEffect;
   label?: React.HTMLAttributes<HTMLButtonElement>['children'];
   as?: string | React.ElementType;
-  grow?: 1 | 2 | 3 | 4;
+  grow?: 0 | 1 | 2 | 3 | 4;
+  shrink?: 0 | 1 | 2 | 3 | 4;
   rounded?: boolean;
 }
 
@@ -132,6 +133,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
       : null}
 
   flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
+  flex-shrink: ${({ shrink }) => shrink};
   flex-grow: ${({ grow }) => grow};
   align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
 

package/src/components/ControlGroup/index.tsx

@@ -45,6 +45,7 @@ export interface IReqoreControlGroupProps
   isLastInFirstGroup?: boolean;
   isLastInLastGroup?: boolean;
   isFirstInLastGroup?: boolean;
+  isMasterGroupRounded?: boolean;
   childrenCount?: number;
   childId?: number;
   isChild?: boolean;
@@ -131,6 +132,7 @@ const ReqoreControlGroup = memo(
     stack,
     isInsideStackGroup,
     isInsideVerticalGroup,
+    isMasterGroupRounded,
     intent,
     customTheme,
     isFirst,
@@ -246,7 +248,14 @@ const ReqoreControlGroup = memo(
         : isLastGroup && (isLast || isLast !== false) && index === realChildCount - 1;
     };
 
-    const getBorderTopLeftRadius = (index: number): number | undefined => {
+    const getBorderTopLeftRadius = (
+      index: number,
+      isChildRounded?: boolean
+    ): number | undefined => {
+      if (isMasterGroupRounded === false || isChildRounded === false) {
+        return undefined;
+      }
+
       const _isFirstGroup =
         !isInsideStackGroup || childrenCount === 1 ? true : isChild ? isFirstGroup : index === 0;
 
@@ -258,7 +267,14 @@ const ReqoreControlGroup = memo(
       return undefined;
     };
 
-    const getBorderTopRightRadius = (index: number): number | undefined => {
+    const getBorderTopRightRadius = (
+      index: number,
+      isChildRounded?: boolean
+    ): number | undefined => {
+      if (isMasterGroupRounded === false || isChildRounded === false) {
+        return undefined;
+      }
+
       // If this group is not vertical we need to style the very last item
       if (!isVertical || !isStack) {
         const _isLastGroup =
@@ -284,7 +300,14 @@ const ReqoreControlGroup = memo(
       return undefined;
     };
 
-    const getBorderBottomLeftRadius = (index: number): number | undefined => {
+    const getBorderBottomLeftRadius = (
+      index: number,
+      isChildRounded?: boolean
+    ): number | undefined => {
+      if (isMasterGroupRounded === false || isChildRounded === false) {
+        return undefined;
+      }
+
       // If this group is not vertical we need to style the very first item
       if (!isVertical || !isStack) {
         const _isFirstGroup =
@@ -306,7 +329,14 @@ const ReqoreControlGroup = memo(
       return undefined;
     };
 
-    const getBorderBottomRightRadius = (index: number): number | undefined => {
+    const getBorderBottomRightRadius = (
+      index: number,
+      isChildRounded?: boolean
+    ): number | undefined => {
+      if (isMasterGroupRounded === false || isChildRounded === false) {
+        return undefined;
+      }
+
       const _isLastGroup =
         !isInsideStackGroup || childrenCount === 1
           ? true
@@ -334,7 +364,7 @@ const ReqoreControlGroup = memo(
 
             let newProps = {
               ...child.props,
-              key: child.props.reactKey || child.props.key || child.key || _index,
+              key: child.props.reactKey || _index,
               minimal:
                 child.props?.minimal || child.props?.minimal === false
                   ? child.props.minimal
@@ -354,18 +384,20 @@ const ReqoreControlGroup = memo(
               newProps = {
                 ...newProps,
                 style: {
-                  borderTopLeftRadius:
-                    child.props?.rounded === false ? undefined : getBorderTopLeftRadius(index),
-                  borderBottomLeftRadius:
-                    child.props?.rounded === false ? undefined : getBorderBottomLeftRadius(index),
-                  borderTopRightRadius:
-                    child.props?.rounded === false ? undefined : getBorderTopRightRadius(index),
-                  borderBottomRightRadius:
-                    child.props?.rounded === false ? undefined : getBorderBottomRightRadius(index),
+                  borderTopLeftRadius: getBorderTopLeftRadius(index, child.props?.rounded),
+                  borderBottomLeftRadius: getBorderBottomLeftRadius(index, child.props?.rounded),
+                  borderTopRightRadius: getBorderTopRightRadius(index, child.props?.rounded),
+                  borderBottomRightRadius: getBorderBottomRightRadius(index, child.props?.rounded),
                   ...(child.props?.style || {}),
                 },
                 isChild: true,
-                rounded: !isStack,
+                rounded:
+                  isMasterGroupRounded === false
+                    ? false
+                    : child.props?.rounded || child.props?.rounded === false
+                    ? child.props.rounded
+                    : !isStack,
+                isMasterGroupRounded: isChild ? isMasterGroupRounded : rounded,
                 isInsideStackGroup: isStack,
                 isInsideVerticalGroup: isVertical,
                 isFirst: isChild ? getIsFirst(index) : undefined,
@@ -410,6 +442,7 @@ const ReqoreControlGroup = memo(
         minimal,
         size,
         intent,
+        rounded,
       ]
     );
 
@@ -431,13 +464,14 @@ const ReqoreControlGroup = memo(
                 icon='MenuLine'
                 customTheme={customTheme}
                 tooltip={{
-                  content: `Show ${React.Children.count(overflownChildren)} hidden items`,
+                  handler: 'click',
+                  content: (
+                    <ReqoreControlGroup fluid wrap>
+                      {overflownChildren}
+                    </ReqoreControlGroup>
+                  ),
                 }}
                 active={isOverflownDialogOpen}
-                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                  e.stopPropagation();
-                  setIsOverflownDialogOpen(!isOverflownDialogOpen);
-                }}
                 flat
                 fixed
               />,
@@ -460,11 +494,7 @@ const ReqoreControlGroup = memo(
             label='Hidden items'
             minSize='100px'
             size='auto'
-          >
-            <ReqoreControlGroup fluid wrap>
-              {overflownChildren}
-            </ReqoreControlGroup>
-          </ReqoreDrawer>
+          ></ReqoreDrawer>
         ) : null}
         <StyledReqoreControlGroup
           as='div'

package/src/components/Input/index.tsx

@@ -22,6 +22,7 @@ import {
   IReqoreReadOnly,
   IWithReqoreCustomTheme,
   IWithReqoreEffect,
+  IWithReqoreTooltip,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import { StyledEffect, TReqoreEffectColor } from '../Effect';
@@ -34,9 +35,10 @@ export interface IReqoreInputProps
     IReqoreReadOnly,
     IReqoreIntent,
     IWithReqoreCustomTheme,
-    IWithReqoreEffect {
+    IWithReqoreEffect,
+    IWithReqoreTooltip {
   autoFocus?: boolean;
-  tooltip?: string;
+
   width?: number;
   size?: TSizes;
   minimal?: boolean;

package/src/components/Panel/index.tsx

@@ -37,6 +37,7 @@ import {
   IWithReqoreTooltip,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import ReqoreBreadcrumbs, { IReqoreBreadcrumbsProps } from '../Breadcrumbs';
 import ReqoreButton, { ButtonBadge, IReqoreButtonProps, TReqoreBadge } from '../Button';
 import { StyledCollectionItemContent } from '../Collection/item';
 import ReqoreControlGroup from '../ControlGroup';
@@ -91,6 +92,8 @@ export interface IReqorePanelProps
   collapseButtonProps?: IReqoreButtonProps;
   disabled?: boolean;
 
+  breadcrumbs?: IReqoreBreadcrumbsProps;
+
   onClose?: () => void;
   closeButtonProps?: IReqoreButtonProps;
 
@@ -349,6 +352,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       getContentRef,
       headerProps = {},
       disabled,
+      breadcrumbs,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -376,6 +380,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
     const hasTitleBar: boolean = useMemo(
       () =>
         !!label ||
+        !!breadcrumbs ||
         collapsible ||
         !!onClose ||
         !!size(actions.filter(isActionShown)) ||
@@ -386,8 +391,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
 
     // Return true if the card has a title bar, otherwise return false.
     const hasTitleHeader: boolean = useMemo(
-      () => !!label || !!badge || !!icon,
-      [label, icon, badge]
+      () => !!label || !!badge || !!icon || !!breadcrumbs,
+      [label, icon, badge, breadcrumbs]
     );
 
     const isSmall = useMemo(
@@ -649,7 +654,15 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           >
             {hasTitleHeader && (
               <StyledPanelTitleHeader>
-                {icon || iconImage || label ? (
+                {breadcrumbs ? (
+                  <ReqoreBreadcrumbs
+                    {...breadcrumbs}
+                    padded={false}
+                    margin='none'
+                    flat
+                    responsive={false}
+                  />
+                ) : icon || iconImage || label ? (
                   <StyledPanelTitleHeaderContent
                     size={panelSize}
                     {...headerProps}

package/src/components/Table/header.tsx

@@ -25,7 +25,7 @@ export interface IReqoreCustomHeaderCellProps
       'sortData' | 'onSortChange' | 'onColumnsUpdate' | 'onFilterChange'
     >,
     Omit<IReqoreTableColumn, 'cell' | 'header'>,
-    Omit<IReqoreButtonProps, 'maxWidth'> {
+    Omit<IReqoreButtonProps, 'maxWidth' | 'content'> {
   hasColumns?: boolean;
 }
 export interface IReqoreCustomHeaderCellComponent extends React.FC<IReqoreCustomHeaderCellProps> {}
@@ -165,20 +165,17 @@ const ReqoreTableHeader = forwardRef<HTMLDivElement, IReqoreTableSectionProps>(
 
     const renderColumns = (columns: IReqoreTableColumn[]) =>
       getOnlyShownColumns(columns).map(
-        (
-          {
-            grow,
-            align,
-            dataId,
-            header: { columns, onClick, component: headerComponent, ...rest },
-            ...colRest
-          },
-          index
-        ) =>
+        ({
+          grow,
+          align,
+          dataId,
+          header: { columns, onClick, component: headerComponent, ...rest },
+          ...colRest
+        }) =>
           columns ? (
             <StyledColumnGroup
               grow={getOnlyShownColumns(columns).reduce((gr, col) => gr + col.grow, 0)}
-              key={index}
+              key={dataId}
               className='reqore-table-column-group'
               width={getOnlyShownColumns(columns).reduce(
                 (wid, col) => wid + (col.resizedWidth || col.width || 80),