@snack-uikit/table 0.31.1 → 0.32.0

package/dist/esm/helperComponents/Cells/TreeCell/TreeCell.js

@@ -24,16 +24,18 @@ export function getTreeColumnDef({ showToggle = false, icon = _jsx(FileSVG, { si
             skipOnExport: false,
         },
         enableSorting: false,
-        header: header,
-        cell: function Cell({ row, cell }) {
+        header,
+        cell: function TreeCell({ row, cell }) {
+            var _a;
             const isExpanded = row.getIsExpanded();
             const isExpandable = row.getCanExpand();
             const isMultiSelect = row.getCanMultiSelect();
             const parent = row.getParentRow();
             const isRowsSelectionEnabled = row.getCanSelect();
-            const isAlSubRowsSelected = row.getIsAllSubRowsSelected();
+            const isAllSubRowsSelected = row.getIsAllSubRowsSelected();
             const isSomeSubRowSelected = row.getIsSomeSelected();
             const isRowSelected = row.getIsSelected();
+            const isLastChildRow = ((_a = parent === null || parent === void 0 ? void 0 : parent.subRows.at(-1)) === null || _a === void 0 ? void 0 : _a.id) === row.id;
             const depth = row.depth;
             const { ref } = useCellResize(TREE_CELL_ID, cell);
             const linesVisibilityByIndex = useMemo(() => {
@@ -50,42 +52,38 @@ export function getTreeColumnDef({ showToggle = false, icon = _jsx(FileSVG, { si
                     return (child === null || child === void 0 ? void 0 : child.id) !== ((_a = parent.subRows.at(-1)) === null || _a === void 0 ? void 0 : _a.id) || (row === null || row === void 0 ? void 0 : row.id) === (child === null || child === void 0 ? void 0 : child.id);
                 });
             }, [row, depth]);
-            const lines = new Array(depth)
-                .fill('')
-                .map((_, index) => (_jsx(TreeLine, { visible: linesVisibilityByIndex.at(index), className: index !== 0 ? styles.line : styles.firstLine }, index)));
+            const lines = useMemo(() => Array.from({ length: depth }, (_, index) => (_jsx(TreeLine, { visible: linesVisibilityByIndex.at(index), className: index !== 0 ? styles.line : styles.firstLine, halfHeight: index === depth - 1 && isLastChildRow }, index))), [depth, linesVisibilityByIndex, isLastChildRow]);
             useEffect(() => {
-                if (!isMultiSelect || !isExpandable) {
+                if (!isMultiSelect || !isExpandable || !isRowsSelectionEnabled) {
                     return;
                 }
-                if (isAlSubRowsSelected && !isRowSelected) {
+                if (isAllSubRowsSelected && !isRowSelected) {
                     row.toggleSelected(true, { selectChildren: false });
                     return;
                 }
-                if (!isAlSubRowsSelected && isRowSelected && !isSomeSubRowSelected) {
+                if (isRowSelected && !isAllSubRowsSelected && isSomeSubRowSelected) {
                     row.toggleSelected(false, { selectChildren: false });
                     return;
                 }
-            }, [isAlSubRowsSelected, isSomeSubRowSelected, row, isRowSelected, isMultiSelect, isExpandable]);
-            const recursiveToggleSubRows = useCallback((row, value, opts) => {
-                row.toggleSelected(value, opts);
-                if (row.subRows.length > 0) {
-                    row.subRows.forEach(subRow => {
-                        recursiveToggleSubRows(subRow, value, opts);
-                    });
-                }
-            }, []);
-            const toggleClickHandler = useCallback((event) => {
+            }, [
+                isAllSubRowsSelected,
+                isSomeSubRowSelected,
+                row,
+                isRowSelected,
+                isMultiSelect,
+                isExpandable,
+                isRowsSelectionEnabled,
+            ]);
+            const toggleClickHandler = useCallback(event => {
                 event.stopPropagation();
-                if (isMultiSelect && isSomeSubRowSelected && !isRowSelected) {
-                    recursiveToggleSubRows(row, false, { selectChildren: true });
-                    return;
-                }
-                if (!isMultiSelect) {
-                    row.toggleSelected(!isRowSelected, { selectChildren: false });
+                if (isMultiSelect) {
+                    const shouldToggleOn = !isAllSubRowsSelected && !isRowSelected;
+                    const selectChildren = isAllSubRowsSelected || isSomeSubRowSelected || shouldToggleOn;
+                    row.toggleSelected(shouldToggleOn, { selectChildren });
                     return;
                 }
-                row.toggleSelected();
-            }, [isRowSelected, row, isSomeSubRowSelected, isMultiSelect, recursiveToggleSubRows]);
+                row.toggleSelected(!isRowSelected, { selectChildren: false });
+            }, [isMultiSelect, row, isAllSubRowsSelected, isSomeSubRowSelected, isRowSelected]);
             const chevronClickHandler = useCallback(event => {
                 event.stopPropagation();
                 row.toggleExpanded();
@@ -95,7 +93,7 @@ export function getTreeColumnDef({ showToggle = false, icon = _jsx(FileSVG, { si
                     // @ts-ignore
                     cell.row.original[accessorKey]
                 : cell.getValue();
-            return (_jsx("div", { role: 'presentation', "data-test-id": TEST_IDS.tree.node, className: styles.treeCellContainer, onClick: toggleClickHandler, children: _jsxs("div", { className: styles.treeCell, ref: ref, children: [lines, Boolean(parent) && _jsx(TreeLine, { horizontal: true, visible: true }), isExpandable && (_jsx(ButtonFunction, { size: 'xs', "data-test-id": TEST_IDS.tree.chevron, icon: _jsx(ChevronRightSVG, {}), onClick: chevronClickHandler, className: styles.cellExpandButton, "data-expanded": isExpanded || undefined })), _jsxs("div", { className: styles.treeNodeContent, children: [showToggle && (_jsx("div", { tabIndex: -1, className: styles.treeCheckboxWrap, children: isMultiSelect ? (_jsx(Checkbox, { size: 's', disabled: !isRowsSelectionEnabled, checked: isRowSelected, "data-test-id": TEST_IDS.tree.checkbox, indeterminate: isSomeSubRowSelected && !isAlSubRowsSelected })) : (_jsx(Radio, { size: 's', disabled: !isRowsSelectionEnabled, "data-test-id": TEST_IDS.tree.radio, checked: isRowSelected })) })), _jsxs("div", { role: 'presentation', onClick: chevronClickHandler, className: styles.cellUserToggleIcon, children: [isExpandable && isExpanded && expandedIcon, isExpandable && !isExpanded && collapsedIcon] }), _jsxs("div", { role: 'presentation', className: styles.userContent, children: [!isExpandable && icon, _jsx(TruncateString, { text: value })] })] })] }) }));
+            return (_jsx("div", { role: 'presentation', "data-test-id": TEST_IDS.tree.node, className: styles.treeCellContainer, onClick: toggleClickHandler, children: _jsxs("div", { className: styles.treeCell, ref: ref, children: [lines, Boolean(parent) && _jsx(TreeLine, { horizontal: true, visible: true }), isExpandable && (_jsx(ButtonFunction, { size: 'xs', "data-test-id": TEST_IDS.tree.chevron, icon: _jsx(ChevronRightSVG, {}), onClick: chevronClickHandler, className: styles.cellExpandButton, "data-expanded": isExpanded || undefined })), _jsxs("div", { className: styles.treeNodeContent, "data-disabled": !isRowsSelectionEnabled || undefined, "data-selected": isRowSelected || undefined, "data-multiselect": isMultiSelect || undefined, children: [showToggle && (_jsx("div", { tabIndex: -1, className: styles.treeCheckboxWrap, children: isMultiSelect ? (_jsx(Checkbox, { size: 's', disabled: !isRowsSelectionEnabled, checked: isRowSelected, "data-test-id": TEST_IDS.tree.checkbox, indeterminate: isSomeSubRowSelected && !isAllSubRowsSelected })) : (_jsx(Radio, { size: 's', disabled: !isRowsSelectionEnabled, "data-test-id": TEST_IDS.tree.radio, checked: isRowSelected })) })), _jsxs("div", { role: 'presentation', onClick: chevronClickHandler, className: styles.cellUserToggleIcon, children: [isExpandable && isExpanded && expandedIcon, isExpandable && !isExpanded && collapsedIcon] }), _jsxs("div", { role: 'presentation', className: styles.userContent, children: [!isExpandable && icon, _jsx(TruncateString, { text: value })] })] })] }) }));
         },
     };
 }

package/dist/esm/helperComponents/Cells/TreeCell/TreeLine/TreeLine.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
+import cn from 'classnames';
 import styles from './styles.module.css';
 export function TreeLine({ halfHeight, horizontal, visible, className }) {
-    return (_jsx("div", { className: classNames(styles.treeLine, className), "data-horizontal": horizontal || undefined, "data-half-height": halfHeight || undefined, "data-visible": visible || undefined }));
+    return (_jsx("div", { className: cn(styles.treeLine, className), "data-horizontal": horizontal || undefined, "data-half-height": halfHeight || undefined, "data-visible": visible || undefined }));
 }

package/dist/esm/helperComponents/Cells/TreeCell/TreeLine/styles.module.css

@@ -1,6 +1,6 @@
 .treeLine{
   width:1px;
-  height:var(--size-markdown-table-cell-height, 40px);
+  height:100%;
   opacity:0;
 }
 .treeLine[data-visible]{
@@ -9,7 +9,7 @@
 }
 .treeLine[data-half-height]{
   align-self:start;
-  height:calc(var(--size-markdown-table-cell-height, 40px) / 2);
+  height:50%;
 }
 .treeLine[data-horizontal]{
   width:calc(var(--size-markdown-table-cell-height, 40px) / 2);

package/dist/esm/helperComponents/Cells/TreeCell/styles.module.css

@@ -1,21 +1,29 @@
+.treeCellContainer{
+  position:relative;
+  overflow:hidden;
+  height:100%;
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+
 .treeCell{
   display:flex;
   align-items:center;
   justify-content:start;
   width:-moz-fit-content;
   width:fit-content;
-  height:var(--size-markdown-table-cell-height, 40px);
+  height:100%;
 }
 
 .cellUserToggleIcon{
-  cursor:pointer;
   display:flex;
   align-items:center;
   box-sizing:border-box;
 }
-.cellUserToggleIcon svg{
-  color:var(--sys-neutral-text-support, #6d707f);
-}
 
 .treeNodeContent{
   gap:var(--space-tree-item-content-layout-gap, 4px);
@@ -29,7 +37,8 @@
   display:flex;
   align-items:center;
   box-sizing:border-box;
-  height:var(--size-markdown-table-cell-height, 40px);
+  height:100%;
+  color:var(--sys-neutral-text-support, #6d707f);
 }
 .treeNodeContent:focus-visible{
   outline-width:var(--border-state-focus-s-border-width, 2px);
@@ -41,42 +50,15 @@
 .treeNodeContent[data-multiselect]{
   cursor:default;
 }
-.treeNodeContent[aria-disabled=true]{
+.treeNodeContent[data-disabled]{
   cursor:not-allowed;
-}
-.treeNodeContent[aria-disabled=true]::before{
-  display:none;
-}
-.treeNodeContent[aria-disabled=true] .treeNodeTitle, .treeNodeContent[aria-disabled=true] .treeNodeIcon{
   color:var(--sys-neutral-text-disabled, #aaaebd);
 }
-.treeNodeContent[aria-selected=true]:not([data-multiselect]){
-  opacity:var(--opacity-a008, 0.08);
-  background-color:var(--sys-primary-accent-default, #794ed3);
-}
-.treeNodeContent[aria-selected=true]:not([data-multiselect]):hover{
-  opacity:var(--opacity-a016, 0.16);
-}
 
 .userContent{
-  cursor:pointer;
   display:flex;
   align-items:center;
 }
-.userContent svg{
-  color:var(--sys-neutral-text-support, #6d707f);
-}
-
-.treeCellContainer{
-  position:relative;
-  overflow:hidden;
-  font-family:var(--sans-body-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-m-font-weight, Regular);
-  line-height:var(--sans-body-m-line-height, 20px);
-  font-size:var(--sans-body-m-font-size, 14px);
-  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
-}
 
 .line{
   margin-left:calc(var(--dimension-4m, 32px) + var(--dimension-025m, 2px));

package/dist/esm/helperComponents/Rows/BodyRow.d.ts

@@ -1,5 +1,6 @@
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent } from 'react';
+import { RowProps } from './Row';
 export type RowInfo<TData> = {
     id: string;
     data: TData;
@@ -7,8 +8,8 @@ export type RowInfo<TData> = {
     toggleSelected(value?: boolean): void;
 };
 export type RowClickHandler<TData> = (e: MouseEvent<HTMLDivElement>, row: RowInfo<TData>) => void;
-export type BodyRowProps<TData> = {
+export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
     row: TableRow<TData>;
     onRowClick?: RowClickHandler<TData>;
 };
-export declare function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Rows/BodyRow.js

@@ -7,7 +7,7 @@ import { useRowCells } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row } from './Row';
 import styles from './styles.module.css';
-export function BodyRow({ row, onRowClick }) {
+export function BodyRow({ row, onRowClick, rowAutoHeight }) {
     const { pinnedLeft, pinnedRight, unpinned } = useRowCells(row);
     const [dropListOpened, setDropListOpen] = useState(false);
     const disabled = !row.getCanSelect();
@@ -23,5 +23,5 @@ export function BodyRow({ row, onRowClick }) {
     };
     return (_jsx(RowContext.Provider, { value: { dropListOpened, setDropListOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": row.getIsSelected() ||
                 (row.getIsSomeSelected() && !row.getCanMultiSelect() && !row.getIsExpanded()) ||
-                undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow, children: [pinnedLeft && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: pinnedLeft.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) })), unpinned.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))), pinnedRight && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: pinnedRight.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) }))] }) }));
+                undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow, rowAutoHeight: rowAutoHeight, children: [pinnedLeft && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: pinnedLeft.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))) })), unpinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))), pinnedRight && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: pinnedRight.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))) }))] }) }));
 }

package/dist/esm/helperComponents/Rows/HeaderRow.d.ts

@@ -1 +1,2 @@
-export declare function HeaderRow(): import("react/jsx-runtime").JSX.Element;
+import { RowProps } from './Row';
+export declare function HeaderRow({ rowAutoHeight }: Pick<RowProps, 'rowAutoHeight'>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Rows/HeaderRow.js

@@ -5,7 +5,7 @@ import { useHeaderGroups } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row } from './Row';
 import styles from './styles.module.css';
-export function HeaderRow() {
+export function HeaderRow({ rowAutoHeight }) {
     const { leftPinned, unpinned, rightPinned } = useHeaderGroups();
-    return (_jsxs(Row, { className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) })), unpinned.map(headerGroup => headerGroup.headers.map(header => _jsx(HeaderCell, { header: header }, header.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (_jsx(HeaderCell, { header: header, pinPosition: COLUMN_PIN_POSITION.Right }, header.id)))) }))] }));
+    return (_jsxs(Row, { className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, rowAutoHeight: rowAutoHeight, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (_jsx(HeaderCell, { header: header, rowAutoHeight: rowAutoHeight }, header.id)))) })), unpinned.map(headerGroup => headerGroup.headers.map(header => _jsx(HeaderCell, { header: header, rowAutoHeight: rowAutoHeight }, header.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (_jsx(HeaderCell, { header: header, pinPosition: COLUMN_PIN_POSITION.Right, rowAutoHeight: rowAutoHeight }, header.id)))) }))] }));
 }

package/dist/esm/helperComponents/Rows/Row.d.ts

@@ -1,9 +1,9 @@
 import { MouseEvent, ReactNode } from 'react';
 import { DataAttributes } from '../types';
-type RowProps = {
+export type RowProps = {
     children: ReactNode;
     onClick?(e: MouseEvent<HTMLDivElement>): void;
     className?: string;
+    rowAutoHeight?: boolean;
 } & DataAttributes;
-export declare function Row({ onClick, children, className, ...attributes }: RowProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Row({ onClick, children, className, rowAutoHeight, ...attributes }: RowProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Rows/Row.js

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import styles from './styles.module.css';
 export function Row(_a) {
-    var { onClick, children, className } = _a, attributes = __rest(_a, ["onClick", "children", "className"]);
+    var { onClick, children, className, rowAutoHeight } = _a, attributes = __rest(_a, ["onClick", "children", "className", "rowAutoHeight"]);
     return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    _jsx("div", Object.assign({ onClick: onClick, className: cn(styles.tableRow, className), role: 'row' }, attributes, { children: children })));
+    _jsx("div", Object.assign({ onClick: onClick, className: cn(styles.tableRow, className), "data-auto-height": rowAutoHeight || undefined, role: 'row' }, attributes, { children: children })));
 }

package/dist/esm/helperComponents/Rows/styles.module.css

@@ -1,14 +1,19 @@
 .tableRow{
   --snack-ui-table-row-background:var(--sys-neutral-background1-level, #fdfdfd);
-  height:var(--size-table-line-height, 40px);
   border-top:var(--border-width-table, 1px);
   border-bottom:var(--border-width-table, 1px);
+  min-height:var(--size-table-line-height, 40px);
   position:relative;
   display:flex;
   box-sizing:border-box;
-  border-color:transparent;
   background-color:var(--snack-ui-table-row-background);
+  border-color:transparent;
   border-style:solid none;
+  height:var(--size-table-line-height, 40px);
+}
+.tableRow[data-auto-height]{
+  height:auto;
+  min-height:var(--size-table-line-height, 40px);
 }
 
 .rowPinnedCells{
@@ -49,16 +54,13 @@
 .bodyRow ~ .bodyRow:before{
   content:"";
   position:absolute;
+  z-index:2;
   top:calc(-1 * var(--border-width-table, 1px));
   left:0;
-  z-index:2;
   width:100%;
   height:var(--border-width-table-line, 0.5px);
   background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
 }
-.bodyRow:hover::before, .bodyRow:hover + .bodyRow::before{
-  height:0;
-}
 .bodyRow[data-disabled]{
   cursor:not-allowed;
   background-color:var(--sys-neutral-background, #eeeff3);
@@ -84,6 +86,9 @@
 .bodyRow[data-clickable]{
   cursor:pointer;
 }
+.bodyRow:not([data-disabled]):hover::before{
+  height:0;
+}
 .bodyRow:not([data-disabled]):not([data-selected]):hover, .bodyRow:not([data-disabled]):not([data-selected])[data-actions-opened]{
   background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
   border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
@@ -92,6 +97,9 @@
   background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
   border-color:inherit;
 }
+.bodyRow:not([data-disabled]):hover + .bodyRow::before{
+  height:0;
+}
 
 .tableHeader{
   position:sticky;

package/dist/esm/helperComponents/TableEmptyState/styles.module.css

@@ -4,6 +4,6 @@
   align-items:center;
   justify-content:center;
   box-sizing:border-box;
-  height:calc(var(--page-size, 10) * var(--size-table-line-height, 40px) + var(--size-table-line-height, 40px));
+  height:var(--size-table-information-min-height, 304px);
   padding:var(--dimension-3m, 24px);
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -61,5 +61,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "b7485df8da9869f0fe2b2e22974a06d9a04e0835"
+  "gitHead": "3c671e7c832a7d1c30dc4e1eed74c8b8160bd90c"
 }

package/src/components/Table/Table.tsx

@@ -98,6 +98,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   savedState,
   expanding,
   bulkActions: bulkActionsProp,
+  rowAutoHeight,
   ...rest
 }: TableProps<TData, TFilters>) {
   const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl<string>(search, '');
@@ -174,7 +175,13 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
       enableSorting: false,
       enableResizing: false,
       minSize: 40,
-      cell: (cell: CellContext<TData, unknown>) => <TruncateString text={String(cell.getValue())} maxLines={1} />,
+      cell: (cell: CellContext<TData, unknown>) => {
+        if (rowAutoHeight) {
+          return cell.getValue();
+        }
+
+        return <TruncateString text={String(cell.getValue())} maxLines={1} />;
+      },
     },
 
     manualSorting,
@@ -336,7 +343,6 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const tableFilteredRowsIds = tableFilteredRows.map(row => row.id);
   const topRows = table.getTopRows();
   const loadingTableRows = loadingTable.getRowModel().rows;
-  const tablePagination = table.getState().pagination;
 
   const filteredTopRows = table.getState().globalFilter
     ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id))
@@ -346,12 +352,6 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const { t } = useLocale('Table');
   const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
 
-  const cssPageSize = useMemo(() => {
-    const tempPageSize = (!suppressPagination ? tablePagination?.pageSize : pageSize) + filteredTopRows.length;
-
-    return !tableRows.length ? Math.min(Math.max(tempPageSize, 5), DEFAULT_PAGE_SIZE) : tempPageSize;
-  }, [filteredTopRows.length, pageSize, suppressPagination, tablePagination?.pageSize, tableRows.length]);
-
   usePageReset({
     manualPagination,
     maximumAvailablePage: pageCount || tableFilteredRows.length / pagination.pageSize,
@@ -365,118 +365,111 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const showToolbar = !suppressToolbar;
 
   return (
-    <CellAutoResizeContext.Provider value={{ updateCellMap }}>
-      <div
-        style={{
-          '--page-size': cssPageSize,
-        }}
-        className={cn(styles.wrapper, className)}
-        {...extractSupportProps(rest)}
-      >
-        {showToolbar && (
-          <div className={styles.header}>
-            <Toolbar
-              search={
-                suppressSearch
-                  ? undefined
-                  : {
-                      value: globalFilter,
-                      onChange: onGlobalFilterChange,
-                      loading: search?.loading,
-                      placeholder: search?.placeholder || t('searchPlaceholder'),
-                    }
-              }
-              className={styles.toolbar}
-              onRefresh={onRefresh ? handleOnRefresh : undefined}
-              bulkActions={bulkActions}
-              selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
-              checked={table.getIsAllPageRowsSelected()}
-              indeterminate={table.getIsSomePageRowsSelected()}
-              onCheck={enableSelection ? handleOnToolbarCheck : undefined}
-              outline={outline}
-              after={
-                toolbarAfter || exportSettings ? (
-                  <>
-                    {toolbarAfter}
-                    {exportSettings && (
-                      <ExportButton
-                        settings={exportSettings}
-                        columnDefinitions={columnDefinitions}
-                        data={data}
-                        topRows={filteredTopRows}
-                        centerRows={centerRows}
-                      />
-                    )}
-                  </>
-                ) : undefined
-              }
-              moreActions={moreActions}
-              filterRow={columnFilters}
-              data-test-id={TEST_IDS.toolbar}
-            />
-          </div>
-        )}
-
-        <div className={styles.scrollWrapper} data-outline={outline || undefined}>
-          <Scroll size='s' className={styles.table} ref={scrollContainerRef}>
-            <div className={styles.tableContent} style={columnSizes.vars}>
-              <TableContext.Provider value={{ table }}>
-                {(!infiniteLoading || !data.length) && loading ? (
-                  <SkeletonContextProvider loading>
-                    <HeaderRow />
-                    {loadingTableRows.map(row => (
-                      <BodyRow key={row.id} row={row} />
-                    ))}
-                  </SkeletonContextProvider>
-                ) : (
-                  <>
-                    {centerRows.length || filteredTopRows.length ? <HeaderRow /> : null}
-
-                    {filteredTopRows.length ? (
-                      <div className={styles.topRowWrapper}>
-                        {filteredTopRows.map(row => (
-                          <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
-                        ))}
-                      </div>
-                    ) : null}
-
-                    {centerRows.map(row => (
-                      <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
-                    ))}
-
-                    {data.length > 0 && infiniteLoading && loading && (
-                      <SkeletonContextProvider loading>
-                        {loadingTableRows.slice(0, 3).map(row => (
-                          <BodyRow key={row.id} row={row} />
-                        ))}
-                      </SkeletonContextProvider>
-                    )}
-
-                    <TableEmptyState
-                      emptyStates={emptyStates}
-                      dataError={dataError}
-                      dataFiltered={dataFiltered || Boolean(table.getState().globalFilter)}
-                      tableRowsLength={tableRows.length + filteredTopRows.length}
+    <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
+      {showToolbar && (
+        <div className={styles.header}>
+          <Toolbar
+            search={
+              suppressSearch
+                ? undefined
+                : {
+                    value: globalFilter,
+                    onChange: onGlobalFilterChange,
+                    loading: search?.loading,
+                    placeholder: search?.placeholder || t('searchPlaceholder'),
+                  }
+            }
+            className={styles.toolbar}
+            onRefresh={onRefresh ? handleOnRefresh : undefined}
+            bulkActions={bulkActions}
+            selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
+            checked={table.getIsAllPageRowsSelected()}
+            indeterminate={table.getIsSomePageRowsSelected()}
+            onCheck={enableSelection ? handleOnToolbarCheck : undefined}
+            outline={outline}
+            after={
+              toolbarAfter || exportSettings ? (
+                <>
+                  {toolbarAfter}
+                  {exportSettings && (
+                    <ExportButton
+                      settings={exportSettings}
+                      columnDefinitions={columnDefinitions}
+                      data={data}
+                      topRows={filteredTopRows}
+                      centerRows={centerRows}
                     />
-                  </>
-                )}
-              </TableContext.Provider>
-            </div>
-            <div className={styles.scrollStub} ref={scrollRef as RefObject<HTMLDivElement>} />
-          </Scroll>
+                  )}
+                </>
+              ) : undefined
+            }
+            moreActions={moreActions}
+            filterRow={columnFilters}
+            data-test-id={TEST_IDS.toolbar}
+          />
+        </div>
+      )}
+
+      <Scroll size='s' className={styles.table} ref={scrollContainerRef} data-outline={outline || undefined}>
+        <div className={styles.tableContent} style={columnSizes.vars}>
+          <CellAutoResizeContext.Provider value={{ updateCellMap }}>
+            <TableContext.Provider value={{ table }}>
+              {(!infiniteLoading || !data.length) && loading ? (
+                <SkeletonContextProvider loading>
+                  <HeaderRow rowAutoHeight={rowAutoHeight} />
+                  {loadingTableRows.map(row => (
+                    <BodyRow key={row.id} row={row} rowAutoHeight={rowAutoHeight} />
+                  ))}
+                </SkeletonContextProvider>
+              ) : (
+                <>
+                  {centerRows.length || filteredTopRows.length ? <HeaderRow /> : null}
+
+                  {filteredTopRows.length ? (
+                    <div className={styles.topRowWrapper}>
+                      {filteredTopRows.map(row => (
+                        <BodyRow key={row.id} row={row} onRowClick={onRowClick} rowAutoHeight={rowAutoHeight} />
+                      ))}
+                    </div>
+                  ) : null}
+
+                  {centerRows.map(row => (
+                    <BodyRow key={row.id} row={row} onRowClick={onRowClick} rowAutoHeight={rowAutoHeight} />
+                  ))}
+
+                  {data.length > 0 && infiniteLoading && loading && !dataError && (
+                    <SkeletonContextProvider loading>
+                      {loadingTableRows.slice(0, 3).map(row => (
+                        <BodyRow key={row.id} row={row} />
+                      ))}
+                    </SkeletonContextProvider>
+                  )}
+
+                  <TableEmptyState
+                    emptyStates={emptyStates}
+                    dataError={dataError}
+                    dataFiltered={dataFiltered || Boolean(table.getState().globalFilter)}
+                    tableRowsLength={tableRows.length + filteredTopRows.length}
+                  />
+                </>
+              )}
+            </TableContext.Provider>
+          </CellAutoResizeContext.Provider>
         </div>
 
-        {!infiniteLoading && !suppressPagination && (
-          <TablePagination
-            table={table}
-            options={paginationProp?.options}
-            optionsLabel={paginationProp?.optionsLabel}
-            pageCount={pageCount}
-            optionsRender={paginationProp?.optionsRender}
-          />
-        )}
-      </div>
-    </CellAutoResizeContext.Provider>
+        <div className={styles.scrollStub} ref={scrollRef as RefObject<HTMLDivElement>} />
+      </Scroll>
+
+      {!infiniteLoading && !suppressPagination && (
+        <TablePagination
+          table={table}
+          options={paginationProp?.options}
+          optionsLabel={paginationProp?.optionsLabel}
+          pageCount={pageCount}
+          optionsRender={paginationProp?.optionsRender}
+        />
+      )}
+    </div>
   );
 }