@qoretechnologies/reqore 0.36.0 → 0.36.2

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/InternalPopover/index.tsx

@@ -59,8 +59,8 @@ const StyledPopoverArrow = styled.div<{ theme: IReqoreTheme }>`
 
 const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   animation: 0.2s ${fadeIn} ease-out;
-  max-width: ${({ maxWidth = '80vw' }) => maxWidth};
-  max-height: ${({ maxHeight = '80vh' }) => maxHeight};
+  max-width: ${({ maxWidth }) => maxWidth};
+  max-height: ${({ maxHeight }) => maxHeight};
   z-index: 999999;
   border-radius: ${RADIUS_FROM_SIZE.normal}px;
   border: ${({ flat, noWrapper, ...rest }: any) =>

package/src/components/KeyValueTable/index.tsx

@@ -1,14 +1,11 @@
 import { keys } from 'lodash';
 import { useMemo } from 'react';
+import { SIZE_TO_PX } from '../../constants/sizes';
 import { TReqoreIntent } from '../../constants/theme';
 import { IReqoreIconName } from '../../types/icons';
+import { IReqoreButtonProps } from '../Button';
 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 +16,21 @@ export type TReqoreKeyValueTableValue =
 
 export interface IReqoreKeyValueTableProps
   extends IReqorePanelProps,
-    Pick<IReqoreTableProps, 'striped' | 'width' | 'height' | 'fill'> {
+    Pick<
+      IReqoreTableProps,
+      | 'striped'
+      | 'width'
+      | 'height'
+      | 'fill'
+      | 'filterable'
+      | 'exportable'
+      | 'filter'
+      | 'onFilterChange'
+      | 'filterProps'
+      | 'zoomable'
+      | 'wrapperSize'
+      | 'paging'
+    > {
   data: { [key: string | number]: TReqoreKeyValueTableValue };
 
   keyLabel?: string;
@@ -28,6 +39,10 @@ export interface IReqoreKeyValueTableProps
   keyAlign?: IReqoreTableColumn['align'];
   maxKeyWidth?: number;
 
+  sortable?: boolean;
+
+  rowActions?: (key: string, value: TReqoreKeyValueTableValue) => IReqoreButtonProps[];
+
   valueLabel?: string;
   valueIcon?: IReqoreIconName;
   valueAlign?: IReqoreTableColumn['align'];
@@ -36,10 +51,8 @@ export interface IReqoreKeyValueTableProps
 
   valueRenderer?: (
     data: IReqoreTableRowData,
-    defaultComponent?: ({
-      value,
-    }: IReqoreTableValueProps) => TReqoreTableColumnContent | JSX.Element
-  ) => JSX.Element;
+    defaultComponent?: ({ value }: IReqoreTableValueProps) => any
+  ) => any;
 }
 
 export const ReqoreKeyValueTable = ({
@@ -55,6 +68,8 @@ export const ReqoreKeyValueTable = ({
   keyAlign = 'left',
   valueAlign = 'left',
   defaultValueFilter,
+  sortable,
+  rowActions,
   ...rest
 }: IReqoreKeyValueTableProps) => {
   const { columns, items } = useMemo(() => {
@@ -62,6 +77,7 @@ export const ReqoreKeyValueTable = ({
       {
         dataId: 'tableKey',
         grow: 1,
+        sortable,
         width: maxKeyWidth < 150 ? maxKeyWidth : 150,
         pin: 'left',
         hideable: false,
@@ -81,6 +97,7 @@ export const ReqoreKeyValueTable = ({
       {
         dataId: 'value',
         grow: 3,
+        sortable,
         hideable: false,
         filterable: true,
         pinnable: false,
@@ -94,12 +111,34 @@ export const ReqoreKeyValueTable = ({
         },
 
         cell: {
+          tooltip: (value) => ({
+            content: JSON.stringify(value),
+            noArrow: true,
+            useTargetWidth: true,
+          }),
           content: (data) =>
             valueRenderer?.(data, ReqoreTableValue) || <ReqoreTableValue value={data.value} />,
         },
       },
     ];
 
+    if (rowActions) {
+      columns.push({
+        dataId: 'actions',
+        hideable: false,
+        pin: 'right',
+        header: {
+          icon: 'SettingsLine',
+        },
+        width: SIZE_TO_PX[rest.size || 'normal'] * 2,
+        align: 'center',
+        cell: {
+          padded: 'none',
+          actions: (data) => rowActions(data.tableKey, data.value),
+        },
+      });
+    }
+
     let items: IReqoreTableRowData[] = [];
 
     keys(data).map((key) => {
@@ -117,6 +156,15 @@ export const ReqoreKeyValueTable = ({
       columns={columns}
       data={items}
       {...rest}
+      sort={
+        sortable
+          ? {
+              by: 'tableKey',
+              thenBy: 'value',
+              direction: 'asc',
+            }
+          : undefined
+      }
       className={`${rest.className || ''} reqore-key-value-table`}
     />
   );

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/Message/index.tsx

@@ -52,6 +52,7 @@ export interface IReqoreMessageProps
   onFinish?: () => any;
   flat?: boolean;
   hasShadow?: boolean;
+  margin?: 'top' | 'bottom' | 'both' | 'none';
 }
 
 export interface IReqoreNotificationStyle extends IReqoreMessageProps {

package/src/components/Notifications/notification.tsx

@@ -61,6 +61,7 @@ export interface IReqoreNotificationStyle extends IWithReqoreOpaque {
   minimal?: boolean;
   size?: TSizes;
   asMessage?: boolean;
+  margin?: 'top' | 'bottom' | 'both' | 'none';
 }
 
 const timeoutAnimation = keyframes`
@@ -84,6 +85,15 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
   position: relative;
   transition: all 0.2s ease-out;
 
+  ${({ margin, size = 'normal' }) => css`
+    margin-top: ${margin === 'top' || margin === 'both'
+      ? `${PADDING_FROM_SIZE[size]}px`
+      : undefined};
+    margin-bottom: ${margin === 'bottom' || margin === 'both'
+      ? `${PADDING_FROM_SIZE[size]}px`
+      : undefined};
+  `};
+
   // Do not fade in the component if it's a message
   ${({ asMessage }) => {
     if (asMessage) {
@@ -95,7 +105,8 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
   }}
 
   &:not(:first-child) {
-    margin-top: ${({ asMessage }) => (asMessage ? undefined : `10px`)};
+    margin-top: ${({ asMessage, size }) =>
+      asMessage ? undefined : `${PADDING_FROM_SIZE[size]}px`};
   }
 
   ${({
@@ -236,7 +247,7 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
       onFinish,
       flat,
       minimal,
-      opaque,
+      opaque = true,
       size = 'normal',
       customTheme,
     },
@@ -287,7 +298,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/Popover/index.tsx

@@ -31,6 +31,8 @@ const Popover = memo(
   }: IReqorePopoverProps) => {
     const [ref, setRef] = useState(undefined);
 
+    console.log(rest);
+
     const popoverData: IPopoverControls = usePopover({ targetElement: ref, ...rest });
 
     useEffect(() => {
@@ -38,6 +40,7 @@ const Popover = memo(
     }, [popoverData]);
 
     if (isReqoreComponent) {
+      console.log(Component);
       return (
         <Component
           {...componentProps}

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;
 }
 
@@ -41,29 +42,32 @@ const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>
 
     useMount(() => {
       targetRef.current?.addEventListener('wheel', (e) => {
-        if (e.deltaY) {
-          e.preventDefault();
+        // Only scroll if the element is scrollable
+        if (refs[type].current?.scrollHeight > refs[type].current?.clientHeight) {
+          if (e.deltaY) {
+            e.preventDefault();
 
-          const currentScroll = refs[type].current?.scrollTop + e.deltaY;
+            const currentScroll = refs[type].current?.scrollTop + e.deltaY;
 
-          onScrollChange?.(currentScroll > 0);
+            onScrollChange?.(currentScroll > 0);
 
-          refs[type].current?.scrollTo({ top: currentScroll });
+            refs[type].current?.scrollTo({ top: currentScroll });
 
-          if (type === 'left') {
-            refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
-            refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
-          } else if (type === 'main') {
-            refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
-            refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
-          } else if (type === 'right') {
-            refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
-            refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
+            if (type === 'left') {
+              refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
+              refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
+            } else if (type === 'main') {
+              refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
+              refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
+            } else if (type === 'right') {
+              refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
+              refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
+            }
           }
-        }
 
-        if (e.deltaX && type === 'main') {
-          refs.header.current?.scrollTo({ left: refs.main.current?.scrollLeft + e.deltaX });
+          if (e.deltaX && type === 'main') {
+            refs.header.current?.scrollTo({ left: refs.main.current?.scrollLeft + e.deltaX });
+          }
         }
       });
     });
@@ -73,13 +77,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/cell.tsx

@@ -1,9 +1,13 @@
 import { lighten, rgba } from 'polished';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTableColumn } from '.';
 import { TEXT_FROM_SIZE } from '../../constants/sizes';
 import { changeLightness, getReadableColorFrom } from '../../helpers/colors';
 import { alignToFlexAlign } from '../../helpers/utils';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useTooltip } from '../../hooks/useTooltip';
+import { IWithReqoreTooltip } from '../../types/global';
 import { TReqoreColor } from '../Effect';
 import { IReqoreTableCellStyle } from './row';
 
@@ -11,7 +15,8 @@ export interface IReqoreCustomTableBodyCellProps extends IReqoreTableBodyCellPro
 export interface IReqoreCustomTableBodyCell extends React.FC<IReqoreCustomTableBodyCellProps> {}
 export interface IReqoreTableBodyCellProps
   extends Partial<IReqoreTableColumn>,
-    React.HTMLAttributes<HTMLDivElement> {
+    React.HTMLAttributes<HTMLDivElement>,
+    IWithReqoreTooltip {
   children?: React.ReactNode;
   padded?: IReqoreTableColumn['cell']['padded'];
 }
@@ -118,6 +123,12 @@ export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
   }}
 `;
 
-export const ReqoreTableBodyCell = (props: IReqoreTableBodyCellProps) => {
-  return <StyledTableCell {...props} />;
-};
+export const ReqoreTableBodyCell = forwardRef<HTMLButtonElement, IReqoreTableBodyCellProps>(
+  (props: IReqoreTableBodyCellProps, ref) => {
+    const { targetRef } = useCombinedRefs(ref);
+
+    useTooltip(targetRef.current, props.tooltip);
+
+    return <StyledTableCell {...props} ref={targetRef} />;
+  }
+);

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;
+  });
+};