@qoretechnologies/reqore 0.35.1 → 0.35.3

package/dist/constants/sizes.d.ts

@@ -8,6 +8,21 @@ export declare const ReqoreSizes: {
     HUGE: string;
 };
 export declare const SIZES: readonly ["tiny", "small", "normal", "big", "huge"];
+export declare const SIZE_TO_MODIFIER: {
+    tiny: number;
+    small: number;
+    normal: number;
+    big: number;
+    huge: number;
+};
+export declare const LINE_SIZE_TO_NUMBER: {
+    none: number;
+    tiny: number;
+    small: number;
+    normal: number;
+    big: number;
+    huge: number;
+};
 export declare const SIZE_TO_NUMBER: {
     none: number;
     tiny: number;

package/dist/constants/sizes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../src/constants/sizes.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAC;AAEF,eAAO,MAAM,KAAK,qDAAsD,CAAC;AAEzE,eAAO,MAAM,cAAc;;;;;;;CAO1B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;CAMjC,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;CAM3B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;CAM9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;CAM7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;CAMzB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;CAOjC,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;;;;CAMzC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC"}
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../src/constants/sizes.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAC;AAEF,eAAO,MAAM,KAAK,qDAAsD,CAAC;AAEzE,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;CAO/B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;CAO1B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;CAMjC,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;CAM3B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;CAM9B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;CAM7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;CAMzB,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;CAOjC,CAAC;AAEF,eAAO,MAAM,6BAA6B;;;;;;CAMzC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;CAM5B,CAAC"}

package/dist/constants/sizes.js

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.WEIGHT_TO_NUMBER = exports.ICON_WRAPPER_FROM_HEADER_SIZE = exports.ICON_FROM_HEADER_SIZE = exports.GAP_FROM_SIZE = exports.RADIUS_FROM_SIZE = exports.PADDING_FROM_SIZE = exports.ICON_FROM_SIZE = exports.TEXT_FROM_SIZE = exports.MARGIN_FROM_SIZE = exports.TABS_PADDING_TO_PX = exports.TABLE_SIZE_TO_PX = exports.TABS_SIZE_TO_PX = exports.BADGE_SIZE_TO_PX = exports.SIZE_TO_PX = exports.HEADER_SIZE_TO_NUMBER = exports.NUMBER_TO_SIZE = exports.SIZE_TO_NUMBER = exports.SIZES = exports.ReqoreSizes = void 0;
+exports.WEIGHT_TO_NUMBER = exports.ICON_WRAPPER_FROM_HEADER_SIZE = exports.ICON_FROM_HEADER_SIZE = exports.GAP_FROM_SIZE = exports.RADIUS_FROM_SIZE = exports.PADDING_FROM_SIZE = exports.ICON_FROM_SIZE = exports.TEXT_FROM_SIZE = exports.MARGIN_FROM_SIZE = exports.TABS_PADDING_TO_PX = exports.TABLE_SIZE_TO_PX = exports.TABS_SIZE_TO_PX = exports.BADGE_SIZE_TO_PX = exports.SIZE_TO_PX = exports.HEADER_SIZE_TO_NUMBER = exports.NUMBER_TO_SIZE = exports.SIZE_TO_NUMBER = exports.LINE_SIZE_TO_NUMBER = exports.SIZE_TO_MODIFIER = exports.SIZES = exports.ReqoreSizes = void 0;
 exports.ReqoreSizes = {
     TINY: 'tiny',
     SMALL: 'small',
@@ -9,6 +9,21 @@ exports.ReqoreSizes = {
     HUGE: 'huge'
 };
 exports.SIZES = ['tiny', 'small', 'normal', 'big', 'huge'];
+exports.SIZE_TO_MODIFIER = {
+    tiny: 0.6,
+    small: 0.8,
+    normal: 1,
+    big: 1.2,
+    huge: 1.4
+};
+exports.LINE_SIZE_TO_NUMBER = {
+    none: 0,
+    tiny: 1,
+    small: 1,
+    normal: 1.5,
+    big: 2,
+    huge: 3
+};
 exports.SIZE_TO_NUMBER = {
     none: 0,
     tiny: 1,

package/dist/constants/sizes.js.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.js","sourceRoot":"","sources":["../../src/constants/sizes.ts"],"names":[],"mappings":";;;AAGa,QAAA,WAAW,GAAG;IACzB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACb,CAAC;AAEW,QAAA,KAAK,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAU,CAAC;AAE5D,QAAA,cAAc,GAAG;IAC5B,IAAI,EAAE,CAAC;IACP,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;CACR,CAAC;AAEW,QAAA,cAAc,GAAG;IAC5B,CAAC,EAAE,MAAM;IACT,CAAC,EAAE,OAAO;IACV,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,MAAM;CACV,CAAC;AAEW,QAAA,qBAAqB,GAAG;IACnC,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;CACR,CAAC;AAEW,QAAA,UAAU,GAAG;IACxB,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,eAAe,GAAG;IAC7B,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,kBAAkB,GAAG;IAChC,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;CACR,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,cAAc,GAAG;IAC5B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,cAAc,GAAG;IAC5B,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,iBAAiB,GAAG;IAC/B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,EAAE;IACV,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,GAAG;IACX,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;CACR,CAAC;AAEW,QAAA,aAAa,GAAG;IAC3B,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,EAAE;IACP,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,qBAAqB,GAAG;IACnC,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,CAAC;CACL,CAAC;AAEW,QAAA,6BAA6B,GAAG;IAC3C,IAAI,EAAE,EAAE;IACR,GAAG,EAAE,EAAE;IACP,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,EAAE;CACT,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;CACX,CAAC"}
+{"version":3,"file":"sizes.js","sourceRoot":"","sources":["../../src/constants/sizes.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.35.1",
+  "version": "0.35.3",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Collection/index.tsx

@@ -14,7 +14,7 @@ import ReqoreInput, { IReqoreInputProps } from '../Input';
 import ReqoreMessage from '../Message';
 import { IReqorePanelAction, IReqorePanelProps, ReqorePanel, TReqorePanelActions } from '../Panel';
 import { ReqoreVerticalSpacer } from '../Spacer';
-import { sortTableData } from '../Table/helpers';
+import { getZoomActions, sizeToZoom, sortTableData, zoomToSize } from '../Table/helpers';
 import { IReqoreCollectionItemProps, ReqoreCollectionItem } from './item';
 
 export interface IReqoreCollectionProps extends IReqorePanelProps, IReqoreColumnsProps {
@@ -29,9 +29,14 @@ export interface IReqoreCollectionProps extends IReqorePanelProps, IReqoreColumn
   height?: string;
   fill?: boolean;
   maxItemHeight?: number;
-  filterable?: boolean;
+
   defaultQuery?: string;
+  defaultZoom?: 0 | 0.5 | 1 | 1.5 | 2;
+
+  filterable?: boolean;
   sortable?: boolean;
+  zoomable?: boolean;
+
   showAs?: 'list' | 'grid';
   showSelectedFirst?: boolean;
   selectedIcon?: IReqoreIconName;
@@ -67,6 +72,14 @@ export const StyledCollectionWrapper = styled(StyledColumns)`
   position: relative;
 `;
 
+export const zoomToWidth = {
+  0: '200px',
+  0.5: '300px',
+  1: '400px',
+  1.5: '500px',
+  2: '600px',
+};
+
 export const ReqoreCollection = ({
   items,
   stacked,
@@ -76,6 +89,8 @@ export const ReqoreCollection = ({
   filterable,
   inputInTitle = true,
   sortable,
+  zoomable,
+  defaultZoom,
   showSelectedFirst,
   inputProps,
   sortButtonProps,
@@ -116,6 +131,7 @@ export const ReqoreCollection = ({
   const [sort, setSort] = useState<'asc' | 'desc'>('asc');
   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,
@@ -197,6 +213,13 @@ export const ReqoreCollection = ({
       ],
     };
 
+    if (zoomable) {
+      actions.push({
+        fluid: false,
+        group: getZoomActions('reqore-collection', zoom, setZoom),
+      });
+    }
+
     if (sortable) {
       toolbarGroup.group.push({
         icon: sort === 'desc' ? 'SortDesc' : 'SortAsc',
@@ -233,7 +256,19 @@ export const ReqoreCollection = ({
     }
 
     return [...actions, toolbarGroup];
-  }, [filterable, preQuery, query, rest.actions, _showAs, sort, sortable, filteredItems, isMobile]);
+  }, [
+    filterable,
+    preQuery,
+    query,
+    rest.actions,
+    _showAs,
+    sort,
+    sortable,
+    filteredItems,
+    isMobile,
+    zoom,
+    zoomable,
+  ]);
 
   const renderContent = useCallback(() => {
     return contentRenderer(
@@ -261,13 +296,13 @@ export const ReqoreCollection = ({
                   ref={setContentRef}
                   height={height}
                   alignItems={alignItems}
-                  minColumnWidth={minColumnWidth}
+                  minColumnWidth={minColumnWidth || zoomToWidth[zoom]}
                   maxColumnWidth={maxColumnWidth}
                   className='reqore-collection-content'
                 >
                   {finalItems?.map((item, index) => (
                     <ReqoreCollectionItem
-                      size={rest.size}
+                      size={zoomToSize[zoom]}
                       responsiveTitle={false}
                       {...item}
                       icon={item.icon || (item.selected ? selectedIcon : undefined)}
@@ -313,8 +348,8 @@ export const ReqoreCollection = ({
     rest,
     rounded,
     selectedIcon,
-    size,
     stacked,
+    zoom,
   ]);
 
   return (

package/src/components/ControlGroup/index.tsx

@@ -469,6 +469,7 @@ const ReqoreControlGroup = memo(
           </ReqoreDrawer>
         ) : null}
         <StyledReqoreControlGroup
+          as='div'
           {...rest}
           vertical={vertical}
           style={{

package/src/components/Dropdown/list.tsx

@@ -17,6 +17,7 @@ export interface IReqoreDropdownItem
   onClick?: TDropdownItemOnClick;
   divider?: boolean;
   dividerAlign?: 'left' | 'center' | 'right';
+  line?: boolean;
 }
 
 export type TReqoreDropdownItem = IReqoreDropdownItem;

package/src/components/Menu/divider.tsx

@@ -5,6 +5,7 @@ import { getReadableColor } from '../../helpers/colors';
 import { getOneLessSize, isStringSize } from '../../helpers/utils';
 import { IWithReqoreEffect, IWithReqoreSize } from '../../types/global';
 import { IReqoreEffect, StyledTextEffect } from '../Effect';
+import { ReqoreVerticalSpacer } from '../Spacer';
 
 export interface IReqoreMenuDividerProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
@@ -13,6 +14,7 @@ export interface IReqoreMenuDividerProps
   label?: string | number;
   margin?: 'left' | 'right' | 'both' | 'none';
   align?: 'left' | 'center' | 'right';
+  line?: boolean;
 }
 
 export const StyledMenuDivider = styled(StyledTextEffect)`
@@ -46,30 +48,38 @@ const ReqoreMenuDivider = forwardRef<HTMLDivElement, IReqoreMenuDividerProps>(
       effect,
       size = 'normal',
       align = 'center',
+      line,
       ...rest
     }: IReqoreMenuDividerProps,
     ref: any
-  ) => (
-    <StyledMenuDivider
-      as='div'
-      {...rest}
-      size={size}
-      className={`${className || ''} reqore-menu-divider`}
-      ref={ref}
-      effect={
-        {
-          uppercase: true,
-          spaced: 2,
-          textAlign: align,
-          textSize: getOneLessSize(size),
-          weight: 'bold',
-          ...effect,
-        } as IReqoreEffect
-      }
-    >
-      {label}
-    </StyledMenuDivider>
-  )
+  ) =>
+    line ? (
+      <ReqoreVerticalSpacer
+        className={`${className || ''} reqore-menu-divider`}
+        height={PADDING_FROM_SIZE[size]}
+        lineSize={size}
+      />
+    ) : (
+      <StyledMenuDivider
+        as='div'
+        {...rest}
+        size={size}
+        className={`${className || ''} reqore-menu-divider`}
+        ref={ref}
+        effect={
+          {
+            uppercase: true,
+            spaced: 2,
+            textAlign: align,
+            textSize: getOneLessSize(size),
+            weight: 'bold',
+            ...effect,
+          } as IReqoreEffect
+        }
+      >
+        {label}
+      </StyledMenuDivider>
+    )
 );
 
 export default ReqoreMenuDivider;

package/src/components/Spacer/index.tsx

@@ -1,6 +1,6 @@
 import { memo, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { SIZE_TO_NUMBER, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { LINE_SIZE_TO_NUMBER, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { changeLightness } from '../../helpers/colors';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreEffect } from '../../types/global';
@@ -103,7 +103,7 @@ export const ReqoreSpacer = memo(
     }
 
     const _lineSize = useMemo(
-      () => (lineSize === 'none' ? 0 : SIZE_TO_NUMBER[lineSize]),
+      () => (lineSize === 'none' ? 0 : LINE_SIZE_TO_NUMBER[lineSize]),
       [lineSize]
     );
 

package/src/components/Table/body.tsx

@@ -1,46 +1,97 @@
-import { Dispatch, SetStateAction, useEffect, useRef } from 'react';
-import { useScroll } from 'react-use';
+import { forwardRef, useMemo } from 'react';
+import { useMount } from 'react-use';
 import { FixedSizeList as List } from 'react-window';
+import styled from 'styled-components';
 import { TABLE_SIZE_TO_PX } from '../../constants/sizes';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import ReqoreTableRow, { IReqoreTableRowOptions } from './row';
 
 export interface IReqoreTableSectionBodyProps extends IReqoreTableRowOptions {
-  setLeftScroll: Dispatch<SetStateAction<number>>;
-  rowHeight?: number;
   height: number;
+  refs: {
+    left: React.RefObject<HTMLDivElement>;
+    right: React.RefObject<HTMLDivElement>;
+    main: React.RefObject<HTMLDivElement>;
+    header: React.RefObject<HTMLDivElement>;
+  };
+  type?: 'left' | 'right' | 'main';
+  onScrollChange?: (isScrolled: boolean) => void;
 }
 
-const ReqoreTableBody = ({
-  data,
-  setLeftScroll,
-  height,
-  rowHeight,
-  size = 'normal',
-  ...rest
-}: IReqoreTableSectionBodyProps) => {
-  const ref = useRef(null);
-  const { x }: { x: number } = useScroll(ref);
-
-  useEffect(() => {
-    setLeftScroll(x);
-  }, [x]);
-
-  return (
-    <List
-      outerRef={ref}
-      itemCount={data.length}
-      height={height}
-      className='reqore-table-body'
-      itemSize={rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1}
-      itemData={{
-        data,
-        size,
-        ...rest,
-      }}
-    >
-      {ReqoreTableRow}
-    </List>
-  );
-};
+const StyledList = styled(List)`
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>(
+  (
+    {
+      data,
+      height,
+      size = 'normal',
+      refs,
+      type,
+      onScrollChange,
+      ...rest
+    }: IReqoreTableSectionBodyProps,
+    ref
+  ) => {
+    const { targetRef } = useCombinedRefs(ref);
+
+    useMount(() => {
+      targetRef.current?.addEventListener('wheel', (e) => {
+        if (e.deltaY) {
+          e.preventDefault();
+
+          const currentScroll = refs[type].current?.scrollTop + e.deltaY;
+
+          onScrollChange?.(currentScroll > 0);
+
+          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 (e.deltaX && type === 'main') {
+          refs.header.current?.scrollTo({ left: refs.main.current?.scrollLeft + e.deltaX });
+        }
+      });
+    });
+
+    const rowHeight = useMemo(
+      () => (rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1),
+      [size, rest.flat]
+    );
+
+    return (
+      <StyledList
+        outerRef={targetRef}
+        itemCount={data.length}
+        // 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}
+        className='reqore-table-body'
+        itemSize={rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1}
+        itemData={{
+          data,
+          size,
+          ...rest,
+        }}
+      >
+        {ReqoreTableRow}
+      </StyledList>
+    );
+  }
+);
 
 export default ReqoreTableBody;

package/src/components/Table/cell.tsx

@@ -17,9 +17,12 @@ export interface IReqoreTableBodyCellProps
 }
 
 export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
-  ${({ width, grow }) =>
+  ${({ width, minWidth, maxWidth, grow }) =>
     css`
       width: ${width}px;
+      min-width: ${minWidth}px;
+      max-width: ${maxWidth}px;
+
       flex-grow: ${grow || (width ? undefined : 1)};
     `}