pixelize-design-library 2.2.191 → 2.2.193

package/dist/Components/Table/Components/Pagination.js

@@ -1,17 +1,49 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
-var Pagination = function (_a) {
+var Pagination = react_1.default.memo(function (_a) {
     var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination, paginationSelectOptions = _a.paginationSelectOptions;
-    var computedOptions = paginationSelectOptions && paginationSelectOptions.length
-        ? paginationSelectOptions
-        : (0, table_1.pageSizeCalculation)(dataLength);
+    var computedOptions = (0, react_1.useMemo)(function () {
+        return paginationSelectOptions && paginationSelectOptions.length
+            ? paginationSelectOptions
+            : (0, table_1.pageSizeCalculation)(dataLength);
+    }, [paginationSelectOptions, dataLength]);
     // const isLeftDisabled = currentPage === 0;
     // const isRightDisabled = currentPage >= pages - 1;
     var isLeftDisabled = dataLength === 0 || currentPage === 0;
@@ -32,5 +64,5 @@ var Pagination = function (_a) {
                 react_1.default.createElement(lucide_react_1.ChevronRight, null)),
             react_1.default.createElement(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
                 react_1.default.createElement(lucide_react_1.ChevronsRight, null))))));
-};
+});
 exports.default = Pagination;

package/dist/Components/Table/Components/TableBody.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableBodyPageProps } from "../TableProps";
-declare const TableBody: ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, }: TableBodyPageProps) => React.JSX.Element;
+declare const TableBody: ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, }: TableBodyPageProps) => React.JSX.Element;
 export default TableBody;

package/dist/Components/Table/Components/TableBody.js

@@ -84,10 +84,62 @@ var TableRow = react_2.default.memo(function (_a) {
 });
 var TableBody = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h;
-    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, loadingSkeletonRows = _a.loadingSkeletonRows;
+    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, loadingSkeletonRows = _a.loadingSkeletonRows, scrollContainerRef = _a.scrollContainerRef;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _j = (0, react_2.useState)(new Set()), expandedRows = _j[0], setExpandedRows = _j[1];
     var selectionsSet = (0, react_2.useMemo)(function () { return new Set(selections); }, [selections]);
+    // --- Row virtualization ---------------------------------------------------
+    // Rows are a fixed 45px tall (see the `height={45}` on every <Td/> below),
+    // and the scroll viewport is capped at ~500px, so only ~11 rows are ever
+    // visible. Mounting all 50/100 page rows is what makes paging freeze. We
+    // render only the rows inside the viewport (+ overscan) and reserve the
+    // remaining height with empty spacer rows. Spacer rows (rather than CSS
+    // transforms) keep the table in normal flow so the sticky header and
+    // `position: sticky` frozen columns keep working.
+    // Disabled when expandable content rows are present, since those break the
+    // fixed-height assumption.
+    var ROW_HEIGHT = 45;
+    var OVERSCAN = 6;
+    var VIRTUALIZE_THRESHOLD = 30;
+    var shouldVirtualize = !isContent && data.length > VIRTUALIZE_THRESHOLD;
+    var _k = (0, react_2.useState)(0), scrollTop = _k[0], setScrollTop = _k[1];
+    var _l = (0, react_2.useState)(0), viewportH = _l[0], setViewportH = _l[1];
+    (0, react_2.useEffect)(function () {
+        var el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        if (!el || !shouldVirtualize)
+            return;
+        var onScroll = function () { return setScrollTop(el.scrollTop); };
+        var measure = function () { return setViewportH(el.clientHeight); };
+        measure();
+        setScrollTop(el.scrollTop);
+        el.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("resize", measure);
+        return function () {
+            el.removeEventListener("scroll", onScroll);
+            window.removeEventListener("resize", measure);
+        };
+    }, [scrollContainerRef, shouldVirtualize, data.length]);
+    // New page: jump back to the top so the window recomputes from row 0.
+    (0, react_2.useEffect)(function () {
+        if (!shouldVirtualize)
+            return;
+        var el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        if (el)
+            el.scrollTop = 0;
+        setScrollTop(0);
+    }, [startRow, shouldVirtualize, scrollContainerRef]);
+    var total = data.length;
+    var firstIndex = 0;
+    var lastIndex = total;
+    if (shouldVirtualize) {
+        var vh = viewportH || 500;
+        firstIndex = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN);
+        var count = Math.ceil(vh / ROW_HEIGHT) + OVERSCAN * 2;
+        lastIndex = Math.min(total, firstIndex + count);
+    }
+    var visibleRows = shouldVirtualize ? data.slice(firstIndex, lastIndex) : data;
+    var topPad = firstIndex * ROW_HEIGHT;
+    var bottomPad = (total - lastIndex) * ROW_HEIGHT;
     var toggleRowExpansion = (0, react_2.useCallback)(function (rowIndex) {
         setExpandedRows(function (prev) {
             var newSet = new Set(prev);
@@ -133,12 +185,17 @@ var TableBody = function (_a) {
             react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0 },
                 react_2.default.createElement(react_1.Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10 },
                     react_2.default.createElement(react_1.Spinner, { size: "sm", color: ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[500]) || "blue.500" }))))),
-        data.map(function (row, index) {
+        shouldVirtualize && topPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: topPad } },
+            react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }))),
+        visibleRows.map(function (row, i) {
             var _a;
+            var index = firstIndex + i;
             var rowIndex = startRow + index;
             var isExpanded = expandedRows.has(rowIndex);
             var isChecked = selectionsSet.has(row.id);
             return (react_2.default.createElement(TableRow, { key: (_a = row.id) !== null && _a !== void 0 ? _a : rowIndex, row: row, rowIndex: rowIndex, index: index, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, hoverStyle: hoverStyle, handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion }));
-        })));
+        }),
+        shouldVirtualize && bottomPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: bottomPad } },
+            react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } })))));
 };
 exports.default = TableBody;

package/dist/Components/Table/Components/TableBody.virtualize.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/Table/Components/TableBody.virtualize.test.js

@@ -0,0 +1,93 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var TableBody_1 = __importDefault(require("./TableBody"));
+jest.mock("../../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            background: { 50: "#fff", 100: "#f9f9f9" },
+            backgroundColor: { light: "#fafafa", secondary: "#eee", muted: "#f3f3f3" },
+            disabled: { 100: "#eee" },
+            gray: { 100: "#f0f0f0", 200: "#eee", 300: "#ddd", 400: "#ccc", 500: "#bbb", 600: "#666" },
+            border: { 500: "#ddd" },
+            primary: { 500: "#3182ce" },
+            text: { 500: "#555" },
+            secondary: { opacity: { 4: "rgba(0,0,0,0.04)" } },
+            white: "#fff",
+        },
+        shadows: { lg: "0 0 0" },
+    }); },
+}); });
+var columns = [{ id: "name", label: "Name" }];
+var makeData = function (n) {
+    return Array.from({ length: n }, function (_, i) { return ({ id: i, name: "Row ".concat(i) }); });
+};
+var Harness = function (_a) {
+    var count = _a.count;
+    var ref = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(react_3.ChakraProvider, null,
+        react_1.default.createElement("div", { ref: ref },
+            react_1.default.createElement(react_3.Table, null,
+                react_1.default.createElement(react_3.Tbody, null,
+                    react_1.default.createElement(TableBody_1.default, { data: makeData(count), columns: columns, startRow: 0, endRow: count, columnWidths: [120], isCheckbox: false, isContent: false, isLink: false, isActionFreeze: false, noBorders: false, selections: [], handleCheckbox: function () { }, scrollContainerRef: ref }))))));
+};
+describe("TableBody virtualization", function () {
+    it("windows large pages and reserves height with spacer rows", function () {
+        var _a = (0, react_2.render)(react_1.default.createElement(Harness, { count: 100 })), container = _a.container, queryByText = _a.queryByText;
+        // jsdom clientHeight=0 -> 500px fallback -> ceil(500/45)+12 = 24 rows
+        expect(queryByText("Row 0")).toBeInTheDocument();
+        expect(queryByText("Row 23")).toBeInTheDocument();
+        // Rows beyond the window are not mounted.
+        expect(queryByText("Row 50")).not.toBeInTheDocument();
+        expect(queryByText("Row 99")).not.toBeInTheDocument();
+        // A trailing spacer reserves the height of the unrendered rows.
+        var spacers = container.querySelectorAll('tr[aria-hidden="true"]');
+        expect(spacers.length).toBe(1);
+        expect(spacers[0]).toHaveStyle({ height: "".concat((100 - 24) * 45, "px") });
+    });
+    it("renders every row and no spacers below the threshold", function () {
+        var _a = (0, react_2.render)(react_1.default.createElement(Harness, { count: 30 })), container = _a.container, queryByText = _a.queryByText;
+        expect(queryByText("Row 0")).toBeInTheDocument();
+        expect(queryByText("Row 29")).toBeInTheDocument();
+        expect(container.querySelectorAll('tr[aria-hidden="true"]').length).toBe(0);
+    });
+});

package/dist/Components/Table/Components/TableFilters.js

@@ -35,7 +35,6 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
-var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
 var TableFilters = (0, react_1.memo)(function (_a) {
     var _b, _c;
@@ -43,9 +42,16 @@ var TableFilters = (0, react_1.memo)(function (_a) {
     var theme = (0, react_2.useTheme)();
     var searchRef = (0, react_1.useRef)(null);
     var _d = (0, react_1.useState)(false), refreshDataOnOpen = _d[0], setRefreshDataOnOpen = _d[1];
-    var debounceRef = (0, table_1.debounce)(function (value) {
-        setColumnsSearch(value);
-    }, 700);
+    var setColumnsSearchRef = (0, react_1.useRef)(setColumnsSearch);
+    setColumnsSearchRef.current = setColumnsSearch;
+    var debounceTimerRef = (0, react_1.useRef)(null);
+    var debouncedSearch = (0, react_1.useCallback)(function (value) {
+        if (debounceTimerRef.current)
+            clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = setTimeout(function () {
+            setColumnsSearchRef.current(value);
+        }, 700);
+    }, []);
     (0, react_1.useEffect)(function () {
         if (columnsSearch.length && searchRef.current) {
             searchRef.current.value = columnsSearch;
@@ -77,7 +83,7 @@ var TableFilters = (0, react_1.memo)(function (_a) {
                             react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, color: "gray.400", boxSize: 4 })),
                         react_1.default.createElement(react_2.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", ref: searchRef, onChange: function (e) {
                                 e.stopPropagation();
-                                debounceRef(e.target.value);
+                                debouncedSearch(e.target.value);
                             }, onFocus: function (e) { return e.stopPropagation(); } })))))));
 });
 exports.default = TableFilters;

package/dist/Components/Table/Components/useTable.js

@@ -38,14 +38,15 @@ var mergeColumnWithPreference = function (pref, originalCol) {
     return next;
 };
 var useTable = function (_a) {
+    var _b, _c;
     var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, defaultVisibleColumns = _a.defaultVisibleColumns;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var headerRefs = (0, react_1.useRef)([]);
-    var _b = (0, react_1.useState)([]), columnWidths = _b[0], setColumnWidths = _b[1];
-    var _c = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _c[0], setSelection = _c[1];
-    var _d = (0, react_1.useState)([]), columnsSort = _d[0], setColumnsSort = _d[1];
-    var _e = (0, react_1.useState)(0), currentPage = _e[0], setCurrentPage = _e[1];
-    var _f = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
+    var _d = (0, react_1.useState)([]), columnWidths = _d[0], setColumnWidths = _d[1];
+    var _e = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _e[0], setSelection = _e[1];
+    var _f = (0, react_1.useState)([]), columnsSort = _f[0], setColumnsSort = _f[1];
+    var _g = (0, react_1.useState)(0), currentPage = _g[0], setCurrentPage = _g[1];
+    var _h = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _h[0], setRowsPerPage = _h[1];
     var prevRowsPerPageProp = (0, react_1.useRef)(noOfRowsPerPage);
     if (noOfRowsPerPage !== prevRowsPerPageProp.current) {
         prevRowsPerPageProp.current = noOfRowsPerPage;
@@ -54,12 +55,12 @@ var useTable = function (_a) {
         }
     }
     var tableData = data;
-    var _g = (0, react_1.useState)(function () {
+    var _j = (0, react_1.useState)(function () {
         return columns.map(function (col, i) {
             var _a;
             return (__assign(__assign({}, col), { isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false) }));
         });
-    }), columnsList = _g[0], setColumnsList = _g[1];
+    }), columnsList = _j[0], setColumnsList = _j[1];
     (0, react_1.useEffect)(function () {
         var _a;
         var columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
@@ -90,8 +91,18 @@ var useTable = function (_a) {
             overflowY: "auto",
         });
     }, [tableBorderColor, theme]);
-    var isContent = (0, react_1.useMemo)(function () { return tableData.some(function (o) { return o.content; }); }, [tableData]);
-    var isLink = (0, react_1.useMemo)(function () { return tableData.some(function (o) { return o.onLink || o.onDelete || o.onEdit; }); }, [tableData]);
+    var prevIsContent = (0, react_1.useRef)(false);
+    var prevIsLink = (0, react_1.useRef)(false);
+    var isContent = (0, react_1.useMemo)(function () {
+        var result = tableData.some(function (o) { return o.content; });
+        prevIsContent.current = result;
+        return result;
+    }, [tableData.length === 0 ? 0 : (_b = tableData[0]) === null || _b === void 0 ? void 0 : _b.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    var isLink = (0, react_1.useMemo)(function () {
+        var result = tableData.some(function (o) { return o.onLink || o.onDelete || o.onEdit; });
+        prevIsLink.current = result;
+        return result;
+    }, [tableData.length === 0 ? 0 : (_c = tableData[0]) === null || _c === void 0 ? void 0 : _c.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
     (0, react_1.useEffect)(function () {
         var widths = headerRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
         setColumnWidths(widths);
@@ -128,24 +139,25 @@ var useTable = function (_a) {
     var handleSort = (0, react_1.useCallback)(function (field, sort) {
         if (!sort)
             return;
-        var newSortState = __spreadArray([], columnsSort, true);
-        var existingIndex = newSortState.findIndex(function (sort) { return sort.column === field; });
-        if (existingIndex === -1) {
-            newSortState.push({
-                column: field,
-                direction: "asc", // Default to ascending when adding a column
-            });
-        }
-        else {
-            var existingSort = newSortState[existingIndex];
-            existingSort.direction = sort;
-        }
-        setColumnsSort(newSortState);
-    }, [columnsSort]);
+        setColumnsSort(function (prev) {
+            var newSortState = __spreadArray([], prev, true);
+            var existingIndex = newSortState.findIndex(function (s) { return s.column === field; });
+            if (existingIndex === -1) {
+                newSortState.push({
+                    column: field,
+                    direction: "asc",
+                });
+            }
+            else {
+                newSortState[existingIndex] = __assign(__assign({}, newSortState[existingIndex]), { direction: sort });
+            }
+            return newSortState;
+        });
+    }, []);
     (0, react_1.useEffect)(function () {
         setSelection(selections !== null && selections !== void 0 ? selections : []);
     }, [selections]);
-    var _h = (0, react_1.useState)(false), isSelecting = _h[0], setIsSelecting = _h[1];
+    var _k = (0, react_1.useState)(false), isSelecting = _k[0], setIsSelecting = _k[1];
     var selectionRef = (0, react_1.useRef)(selection);
     selectionRef.current = selection;
     var onSelectionRef = (0, react_1.useRef)(onSelection);

package/dist/Components/Table/Table.js

@@ -278,5 +278,5 @@ function Table(_a) {
                                         ? false
                                         : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
                         react_1.default.createElement(react_3.Tbody, null,
-                            react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
+                            react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
 }

package/dist/Components/Table/TableProps.d.ts

@@ -118,6 +118,7 @@ export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "da
     selections: (string | number)[];
     isContent: boolean;
     isLink: boolean;
+    scrollContainerRef?: MutableRefObject<HTMLDivElement | null>;
 };
 export type TableFiltersProps = {
     header: DataObject;