@qoretechnologies/reqore 0.36.0 → 0.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.36.0",
+  "version": "0.36.1",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,9 +11,9 @@
     "build": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json",
     "build:test": "./node_modules/typescript/bin/tsc --noEmit",
     "build:test:prod": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json --noEmit",
-    "storybook": "start-storybook -p 6007 --no-dll",
+    "storybook": "storybook dev -p 6007",
     "init-storybook": "yarn test:ci && yarn storybook",
-    "build-storybook": "build-storybook"
+    "build-storybook": "storybook build"
   },
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "react"
   ],
   "pre-push": [
-    "build:test",
+    "build:test:prod",
     "test"
   ],
   "author": "Qore Technologies",
@@ -40,18 +40,21 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-jest": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/addon-storyshots": "^6.5.13",
-    "@storybook/addon-storysource": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.1.1",
+    "@storybook/addon-essentials": "^7.1.1",
+    "@storybook/addon-interactions": "^7.1.1",
+    "@storybook/addon-links": "^7.1.1",
+    "@storybook/builder-webpack5": "^7.1.1",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/manager-api": "^7.1.1",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^7.1.1",
+    "@storybook/react-webpack5": "^7.1.1",
+    "@storybook/test-runner": "^0.9.4",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/testing-react": "^2.0.1",
+    "@storybook/theming": "^7.1.1",
+    "@storybook/types": "^7.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^26.0.19",
@@ -61,7 +64,7 @@
     "@types/react-dom": "^18.0.11",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
-    "chromatic": "^6.3.3",
+    "chromatic": "^6.20.0",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
     "jest-github-actions-reporter": "^1.0.2",
@@ -72,8 +75,7 @@
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.4.2",
     "react-test-renderer": "^18.2.0",
-    "storybook-addon-outline": "^1.4.2",
-    "storybook-dark-mode": "^1.1.2",
+    "storybook": "^7.1.1",
     "ts-jest": "^29.0.5",
     "ts-node": "^9.1.1",
     "typescript": "^4.7.3",
@@ -101,6 +103,10 @@
     "shortid": "^2.2.16",
     "styled-components": "^5.3.6",
     "thenby": "^1.3.4",
-    "use-context-selector": "^1.4.1"
+    "use-context-selector": "^1.4.1",
+    "yaml": "^2.3.1"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
 }

package/src/components/Breadcrumbs/index.tsx

@@ -199,7 +199,7 @@ const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps> = ({
                     {...props}
                     icon={icon}
                     as={as}
-                    onClick={(_itemId, event) => {
+                    onClick={(event) => {
                       props?.onClick?.(event);
                     }}
                     tooltip={tooltip}

package/src/components/Button/index.tsx

@@ -23,6 +23,9 @@ import {
   InactiveIconScale,
   ReadOnlyElement,
   ScaleIconOnHover,
+  StyledActiveContent,
+  StyledInActiveContent,
+  StyledInvisibleContent,
 } from '../../styles';
 import {
   IReqoreDisabled,
@@ -37,7 +40,6 @@ import {
   IReqoreEffect,
   ReqoreTextEffect,
   StyledEffect,
-  StyledTextEffect,
   TReqoreEffectColor,
   TReqoreHexColor,
 } from '../Effect';
@@ -105,59 +107,6 @@ export const StyledAnimatedTextWrapper = styled.span`
   align-items: ${({ textAlign }) => alignToFlexAlign(textAlign)};
 `;
 
-export const StyledActiveContent = styled(StyledTextEffect)`
-  position: absolute;
-  transform: translateY(-150%);
-  opacity: 0;
-  transition: all 0.2s ease-out;
-  filter: blur(10px);
-
-  ${({ wrap }) =>
-    !wrap
-      ? css`
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          width: 100%;
-        `
-      : css`
-          word-break: break-word;
-        `}
-`;
-
-export const StyledInActiveContent = styled(StyledTextEffect)`
-  position: absolute;
-  transform: translateY(0);
-  transition: all 0.2s ease-out;
-
-  ${({ wrap }) =>
-    !wrap
-      ? css`
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          width: 100%;
-        `
-      : css`
-          word-break: break-word;
-        `}
-`;
-
-export const StyledInvisibleContent = styled(StyledTextEffect)`
-  visibility: hidden;
-  position: relative;
-  overflow: hidden;
-
-  ${({ wrap }) =>
-    !wrap
-      ? css`
-          white-space: nowrap;
-        `
-      : css`
-          word-break: break-word;
-        `}
-`;
-
 export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   display: flex;
   flex-flow: column;

package/src/components/Collection/index.tsx

@@ -48,7 +48,7 @@ export interface IReqoreCollectionProps extends IReqorePanelProps, IReqoreColumn
     searchInput?: React.ReactNode
   ) => React.ReactNode;
 
-  onQueryChange?: (query: string) => void;
+  onQueryChange?: (query: string | number) => void;
 
   emptyMessage?: string;
   sortButtonTooltip?: (sort?: 'asc' | 'desc') => string;
@@ -88,8 +88,10 @@ export const ReqoreCollection = ({
   maxItemHeight,
   filterable,
   inputInTitle = true,
+
   sortable,
   zoomable,
+
   defaultZoom,
   showSelectedFirst,
   inputProps,
@@ -132,6 +134,7 @@ export const ReqoreCollection = ({
   const [contentRef, setContentRef] = useState<HTMLDivElement>(undefined);
   const isMobile = useReqoreProperty('isMobile');
   const [zoom, setZoom] = useState<number>(defaultZoom || sizeToZoom.normal);
+
   const { query, setQuery, preQuery, setPreQuery } = useQueryWithDelay(
     defaultQuery,
     searchDelay,
@@ -199,39 +202,39 @@ export const ReqoreCollection = ({
 
     const toolbarGroup: IReqorePanelAction = {
       responsive: false,
-      fluid: isMobile,
-      group: [
+      icon: 'MoreLine',
+      className: 'reqore-collection-more',
+      actions: [
         {
           icon: _showAs === 'grid' ? 'ListUnordered' : 'GridLine',
           onClick: () => setShowAs(_showAs === 'grid' ? 'list' : 'grid'),
           tooltip: displayButtonTooltip(_showAs),
+          label: displayButtonTooltip(_showAs),
           disabled: !size(filteredItems),
-          textAlign: 'center',
-          fixed: !isMobile,
           ...displayButtonProps,
         },
       ],
     };
 
-    if (zoomable) {
-      actions.push({
-        fluid: false,
-        group: getZoomActions('reqore-collection', zoom, setZoom),
-      });
-    }
-
     if (sortable) {
-      toolbarGroup.group.push({
+      toolbarGroup.actions.push({
         icon: sort === 'desc' ? 'SortDesc' : 'SortAsc',
         onClick: () => setSort(sort === 'desc' ? 'asc' : 'desc'),
         tooltip: sortButtonTooltip(sort),
+        label: sortButtonTooltip(sort),
         disabled: !size(filteredItems),
-        textAlign: 'center',
-        fixed: !isMobile,
         ...sortButtonProps,
       });
     }
 
+    if (zoomable) {
+      toolbarGroup.actions = [
+        ...toolbarGroup.actions,
+        { divider: true, line: true },
+        ...getZoomActions('reqore-collection', zoom, setZoom, true),
+      ];
+    }
+
     if (filterable && inputInTitle) {
       actions = [
         ...actions,

package/src/components/Collection/item.tsx

@@ -28,9 +28,10 @@ export interface IReqoreCollectionItemProps
     | 'isCollapsed'
     | 'unMountContentOnCollapse'
     | 'bottomActions'
+    | 'content'
   > {
   selected?: boolean;
-  content?: string | React.ReactNode;
+  content?: string | number | React.ReactNode;
   expandable?: boolean;
   expandedContent?: string | React.ReactNode;
   expandedActions?: IReqorePanelBottomAction[];

package/src/components/ExportModal/index.tsx

@@ -0,0 +1,98 @@
+import { useCallback, useMemo, useState } from 'react';
+import { stringify } from 'yaml';
+import { ReqoreTextarea, useReqoreProperty } from '../..';
+import { convertToCSV } from '../../helpers/utils';
+import { IReqoreModalProps, ReqoreModal } from '../Modal';
+import ReqoreTabs, { IReqoreTabsProps } from '../Tabs';
+import ReqoreTabsContent from '../Tabs/content';
+
+export interface IReqoreExportModalProps extends IReqoreModalProps {
+  data: { [key: string]: any } | any[];
+  sendNotificationOnCopy?: boolean;
+  tabsOptions?: Omit<IReqoreTabsProps, 'tabs'>;
+}
+
+export const ReqoreExportModal = ({
+  data,
+  sendNotificationOnCopy = true,
+  tabsOptions = {},
+  ...rest
+}: IReqoreExportModalProps) => {
+  const addNotification = useReqoreProperty('addNotification');
+  const isArray = Array.isArray(data);
+  const [tab, setTab] = useState<string>(isArray ? 'csv' : 'json');
+  const tabs: IReqoreTabsProps['tabs'] = [
+    { label: 'CSV', id: 'csv', disabled: !isArray },
+    { label: 'JSON', id: 'json' },
+    { label: 'YAML', id: 'yaml' },
+  ];
+
+  const dataToExport = useMemo(() => {
+    switch (tab) {
+      case 'csv':
+        return convertToCSV(data as any[]);
+      case 'json':
+        return JSON.stringify(data, null, 2);
+      case 'yaml':
+        return stringify(data, null, 2);
+      default:
+        return '';
+    }
+  }, [data, tab, isArray]);
+
+  const handleCopyClick = useCallback(() => {
+    navigator.clipboard.writeText(dataToExport);
+
+    if (sendNotificationOnCopy) {
+      addNotification({
+        content: 'Data copied to clipboard',
+        intent: 'success',
+        duration: 3000,
+      });
+    }
+  }, [sendNotificationOnCopy, dataToExport]);
+
+  return (
+    <ReqoreModal
+      label='Export data'
+      icon='DownloadLine'
+      {...rest}
+      isOpen
+      bottomActions={[
+        {
+          position: 'right',
+          label: 'Copy',
+          icon: 'ClipboardLine',
+          onClick: () => {
+            handleCopyClick();
+          },
+        },
+        {
+          position: 'right',
+          label: 'Copy and close',
+          icon: 'ClipboardFill',
+          onClick: () => {
+            handleCopyClick();
+            rest.onClose?.();
+          },
+        },
+      ]}
+    >
+      <ReqoreTabs
+        fillParent
+        activeTabIntent='info'
+        activeTab={isArray ? 'csv' : 'json'}
+        padded={false}
+        {...tabsOptions}
+        onTabChange={(tabId) => setTab(tabId.toString())}
+        tabs={tabs}
+      >
+        {tabs.map((tab) => (
+          <ReqoreTabsContent tabId={tab.id} key={tab.id} padded='none'>
+            <ReqoreTextarea readOnly value={dataToExport} scaleWithContent minimal />
+          </ReqoreTabsContent>
+        ))}
+      </ReqoreTabs>
+    </ReqoreModal>
+  );
+};

package/src/components/KeyValueTable/index.tsx

@@ -3,12 +3,7 @@ import { useMemo } from 'react';
 import { TReqoreIntent } from '../../constants/theme';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqorePanelProps } from '../Panel';
-import ReqoreTable, {
-  IReqoreTableColumn,
-  IReqoreTableProps,
-  IReqoreTableRowData,
-  TReqoreTableColumnContent,
-} from '../Table';
+import ReqoreTable, { IReqoreTableColumn, IReqoreTableProps, IReqoreTableRowData } from '../Table';
 import { IReqoreTableValueProps, ReqoreTableValue } from '../Table/value';
 
 export type TReqoreKeyValueTablePrimitiveValue = string | number | boolean | null | undefined;
@@ -19,7 +14,20 @@ export type TReqoreKeyValueTableValue =
 
 export interface IReqoreKeyValueTableProps
   extends IReqorePanelProps,
-    Pick<IReqoreTableProps, 'striped' | 'width' | 'height' | 'fill'> {
+    Pick<
+      IReqoreTableProps,
+      | 'striped'
+      | 'width'
+      | 'height'
+      | 'fill'
+      | 'filterable'
+      | 'filter'
+      | 'onFilterChange'
+      | 'filterProps'
+      | 'zoomable'
+      | 'wrapperSize'
+      | 'paging'
+    > {
   data: { [key: string | number]: TReqoreKeyValueTableValue };
 
   keyLabel?: string;
@@ -36,10 +44,8 @@ export interface IReqoreKeyValueTableProps
 
   valueRenderer?: (
     data: IReqoreTableRowData,
-    defaultComponent?: ({
-      value,
-    }: IReqoreTableValueProps) => TReqoreTableColumnContent | JSX.Element
-  ) => JSX.Element;
+    defaultComponent?: ({ value }: IReqoreTableValueProps) => any
+  ) => any;
 }
 
 export const ReqoreKeyValueTable = ({

package/src/components/Menu/item.tsx

@@ -17,7 +17,7 @@ export interface IReqoreMenuItemProps
   selected?: boolean;
   itemId?: string;
   onRightIconClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
-  onClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
+  onClick?: (event: React.MouseEvent<HTMLElement>, itemId?: string) => void;
   scrollIntoView?: boolean;
 }
 
@@ -59,12 +59,12 @@ const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
   ) => {
     const { removePopover } = useContext(PopoverContext);
     const { targetRef } = useCombinedRefs<HTMLButtonElement>(ref);
-    const [itemRef, setItemRef] = useState<HTMLButtonElement>(undefined);
+    const [itemRef, setItemRef] = useState<HTMLButtonElement | null>(null);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
       event.persist();
 
-      onClick?.(itemId, event);
+      onClick?.(event, itemId);
 
       if (_insidePopover && _popoverId) {
         removePopover!(_popoverId);
@@ -102,7 +102,7 @@ const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
           onClick={handleClick}
           active={selected}
           ref={(ref) => {
-            targetRef.current = ref;
+            targetRef.current = ref || undefined;
             setItemRef(ref);
           }}
           disabled={disabled}

package/src/components/Notifications/notification.tsx

@@ -236,7 +236,7 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
       onFinish,
       flat,
       minimal,
-      opaque,
+      opaque = true,
       size = 'normal',
       customTheme,
     },
@@ -287,7 +287,7 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
             hasShadow
             timeout={duration}
             clickable={!!onClick}
-            onClick={onClick}
+            onClick={() => onClick?.()}
             flat={flat}
             minimal={minimal}
             className='reqore-notification'

package/src/components/Panel/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { size } from 'lodash';
+import { isArray, size } from 'lodash';
 import { darken, rgba } from 'polished';
 import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
 import { useMeasure, useUpdateEffect } from 'react-use';
@@ -379,7 +379,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         collapsible ||
         !!onClose ||
         !!size(actions.filter(isActionShown)) ||
-        !!badge ||
+        !!(isArray(badge) ? size(badge) : badge) ||
         !!icon,
       [label, collapsible, onClose, actions, badge, icon]
     );

package/src/components/Table/body.tsx

@@ -1,3 +1,4 @@
+import count from 'lodash/size';
 import { forwardRef, useMemo } from 'react';
 import { useMount } from 'react-use';
 import { FixedSizeList as List } from 'react-window';
@@ -14,7 +15,7 @@ export interface IReqoreTableSectionBodyProps extends IReqoreTableRowOptions {
     main: React.RefObject<HTMLDivElement>;
     header: React.RefObject<HTMLDivElement>;
   };
-  type?: 'left' | 'right' | 'main';
+  type: 'left' | 'right' | 'main';
   onScrollChange?: (isScrolled: boolean) => void;
 }
 
@@ -73,13 +74,15 @@ const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>
       [size, rest.flat]
     );
 
+    const itemCount = useMemo(() => count(data), [data]);
+
     return (
       <StyledList
         outerRef={targetRef}
-        itemCount={data.length}
+        itemCount={itemCount}
         // If the defined height is less than the count of items' height
         // use that height instead
-        height={height > data.length * rowHeight ? data.length * rowHeight : height}
+        height={height > itemCount * rowHeight ? itemCount * rowHeight : height}
         className='reqore-table-body'
         itemSize={rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1}
         itemData={{

package/src/components/Table/helpers.ts

@@ -1,15 +1,15 @@
 import { size } from 'lodash';
 import { firstBy } from 'thenby';
-import { IReqoreTableColumn, IReqoreTableSort } from '.';
+import { IReqoreTableColumn, IReqoreTableData, IReqoreTableSort } from '.';
 import { ICON_FROM_SIZE, SIZE_TO_MODIFIER, SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreIconName } from '../../types/icons';
-import { IReqorePanelAction } from '../Panel';
+import { IReqorePanelSubAction } from '../Panel';
 
 export const flipSortDirection = (direction: 'asc' | 'desc'): 'asc' | 'desc' =>
   direction === 'asc' ? 'desc' : 'asc';
 
-export const fixSort = (sort?: IReqoreTableSort) => {
-  return { ...(sort || {}), direction: sort?.direction || 'desc' };
+export const fixSort = (sort: IReqoreTableSort) => {
+  return { ...sort, direction: sort?.direction || 'desc' };
 };
 
 export const sortTableData = (data: any[], sort: IReqoreTableSort) => {
@@ -81,20 +81,38 @@ export const zoomToWidth = {
 
 // This code converts a zoom level to a label.
 export const zoomToLabel = {
-  0: '0.6x',
-  0.5: '0.8x',
-  1: '1x',
-  1.5: '1.2x',
-  2: '1.4x',
+  0: '30%',
+  0.5: '60%',
+  1: '100%',
+  1.5: '130%',
+  2: '160%',
 };
 
+export const getExportActions = (
+  onClick: (type: 'current' | 'full') => void,
+  withLabels: boolean = true
+): IReqorePanelSubAction[] => [
+  {
+    label: withLabels ? 'Export current view' : undefined,
+    icon: 'Download2Line',
+    onClick: () => onClick('current'),
+  },
+  {
+    label: withLabels ? 'Export full data' : undefined,
+    icon: 'DownloadLine',
+    onClick: () => onClick('full'),
+  },
+];
+
 export const getZoomActions = (
   type: string,
   zoom: number,
-  setter: (zoom: number) => void
-): IReqorePanelAction[] => [
+  setter: (zoom: number) => void,
+  withLabels?: boolean
+): IReqorePanelSubAction[] => [
   {
     icon: 'ZoomInLine',
+    label: withLabels ? 'Zoom in' : undefined,
     tooltip: 'Zoom in',
     disabled: zoom === 2,
     className: `${type}-zoom-in`,
@@ -104,7 +122,7 @@ export const getZoomActions = (
   },
   {
     icon: 'RestartLine',
-    label: zoomToLabel[zoom],
+    label: `${zoomToLabel[zoom]}${withLabels ? ' (reset)' : ''}`,
     tooltip: 'Reset zoom',
     disabled: zoom === 1,
     className: `${type}-zoom-reset`,
@@ -115,6 +133,7 @@ export const getZoomActions = (
   {
     icon: 'ZoomOutLine',
     tooltip: 'Zoom out',
+    label: withLabels ? 'Zoom out' : undefined,
     disabled: zoom === 0,
     className: `${type}-zoom-out`,
     onClick: () => {
@@ -127,7 +146,7 @@ export const getColumnsCount = (columns: IReqoreTableColumn[]): number => {
   let count = 0;
 
   columns.forEach((column) => {
-    if (column.header.columns) {
+    if (column.header?.columns) {
       count += getColumnsCount(column.header.columns);
     } else {
       count += 1;
@@ -145,7 +164,7 @@ export const hasGroupedColumns = (columns: IReqoreTableColumn[]): boolean => {
 
 export const hasHiddenColumns = (columns: IReqoreTableColumn[]): boolean => {
   return columns.some((column) => {
-    if (column.header.columns) {
+    if (column.header?.columns) {
       return column.header.columns.some((subColumn) => subColumn.show === false);
     }
 
@@ -157,8 +176,8 @@ export const getColumnsByPinType = (
   columns: IReqoreTableColumn[],
   type: 'left' | 'right' | 'main'
 ): IReqoreTableColumn[] => {
-  return columns.reduce((newColumns, column) => {
-    if (column.header.columns) {
+  return columns.reduce((newColumns: IReqoreTableColumn[], column): IReqoreTableColumn[] => {
+    if (column.header?.columns) {
       const subColumns: IReqoreTableColumn[] = getColumnsByPinType(column.header.columns, type);
 
       if (!size(subColumns)) {
@@ -188,8 +207,8 @@ export const getColumnsByPinType = (
 };
 
 export const getOnlyShownColumns = (columns: IReqoreTableColumn[]): IReqoreTableColumn[] => {
-  return columns.reduce((newColumns, column) => {
-    if (column.header.columns) {
+  return columns.reduce((newColumns: IReqoreTableColumn[], column) => {
+    if (column.header?.columns) {
       const subColumns = getOnlyShownColumns(column.header.columns);
 
       if (size(subColumns)) {
@@ -220,7 +239,7 @@ export const prepareColumns = (
 ): IReqoreTableColumn[] => {
   // We need to set the width of each column
   return columns.map((column) => {
-    if (column.header.columns) {
+    if (column.header?.columns) {
       return {
         ...column,
         header: {
@@ -233,7 +252,7 @@ export const prepareColumns = (
     let newWidth = calculateMinimumCellWidth(
       column.width || 50,
       size,
-      column.header.icon,
+      column.header?.icon,
       column.sortable,
       column.filterable,
       column.hideable,
@@ -250,7 +269,7 @@ export const prepareColumns = (
 
 export const calculateMinimumCellWidth = (
   currentWidth: number = 50,
-  size?: TSizes,
+  size: TSizes,
   icon?: IReqoreIconName,
   sortable?: boolean,
   filterable?: boolean,
@@ -273,3 +292,15 @@ export const calculateMinimumCellWidth = (
 
   return width;
 };
+
+export const removeInternalData = (data: IReqoreTableData): any[] => {
+  return data.map((item) => {
+    const newItem = { ...item };
+
+    delete newItem._selectId;
+    delete newItem._disabled;
+    delete newItem._intent;
+
+    return newItem;
+  });
+};