pixelize-design-library 1.1.50 → 1.1.51

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { TableFiltersProps } from "../TableProps";
+declare const TableFilters: React.MemoExoticComponent<({ header, setColumnsSearch, columnsSearch, onClose }: TableFiltersProps) => React.JSX.Element>;
+export default TableFilters;

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

@@ -0,0 +1,59 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var icons_1 = require("@chakra-ui/icons");
+var react_2 = require("@chakra-ui/react");
+var fa_1 = require("react-icons/fa");
+var table_1 = require("../../../Utils/table");
+var TableFilters = (0, react_1.memo)(function (_a) {
+    var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose;
+    var searchRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(false), refreshDataOnOpen = _b[0], setRefreshDataOnOpen = _b[1];
+    var debounceRef = (0, table_1.debounce)(function (value) {
+        setColumnsSearch(value);
+    }, 700);
+    (0, react_1.useEffect)(function () {
+        if (columnsSearch.length && searchRef.current) {
+            searchRef.current.value = columnsSearch;
+        }
+    }, [refreshDataOnOpen]);
+    return (react_1.default.createElement(react_2.Popover, { onClose: onClose, onOpen: function () {
+            setRefreshDataOnOpen(function (prev) { return !prev; });
+        } },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(fa_1.FaEllipsisV, null), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
+        react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(react_2.PopoverContent, { width: "200px" },
+                react_1.default.createElement(react_2.PopoverBody, { p: 2 },
+                    react_1.default.createElement(react_2.InputGroup, { flex: "1", size: "xs" },
+                        react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
+                            react_1.default.createElement(icons_1.SearchIcon, { color: "gray.300" })),
+                        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);
+                            }, onFocus: function (e) { return e.stopPropagation(); } })))))));
+});
+exports.default = TableFilters;

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableHeaderPageProps } from "../TableProps";
-declare const TableHeader: ({ columns, isCheckbox, visibleColumns, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, onColumnSearch, columnFilters, isActionFreeze, }: TableHeaderPageProps) => React.JSX.Element;
-export default TableHeader;
+declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, visibleColumns, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, }: TableHeaderPageProps) => React.JSX.Element>;
+export default _default;

package/dist/Components/Table/Components/TableHeader.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -22,43 +33,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 = require("@chakra-ui/react");
 var react_2 = __importStar(require("react"));
 var table_1 = require("../../../Utils/table");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var icons_1 = require("@chakra-ui/icons");
 var fa_1 = require("react-icons/fa");
 var pi_1 = require("react-icons/pi");
 var lu_1 = require("react-icons/lu");
+var TableFilters_1 = __importDefault(require("./TableFilters"));
 var TableHeader = function (_a) {
     var _b;
-    var columns = _a.columns, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, onColumnSearch = _a.onColumnSearch, _c = _a.columnFilters, columnFilters = _c === void 0 ? {} : _c, isActionFreeze = _a.isActionFreeze;
+    var columns = _a.columns, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _d = (0, react_2.useState)(null), openPopoverId = _d[0], setOpenPopoverId = _d[1];
-    var handleSearchChange = (0, react_2.useCallback)(function (columnId, value) {
-        onColumnSearch === null || onColumnSearch === void 0 ? void 0 : onColumnSearch(columnId, value);
-    }, [onColumnSearch]);
-    (0, react_2.useEffect)(function () {
-        if (!columnFilters)
-            return;
-        var lastKey = Object.keys(columnFilters).pop() || null;
-        if (!lastKey)
-            return;
-        setOpenPopoverId(lastKey);
-    }, [columnFilters]);
-    (0, react_2.useEffect)(function () {
-        var handleClickOutside = function (event) {
-            var target = event.target;
-            if (!(target === null || target === void 0 ? void 0 : target.closest(".search-popover"))) {
-                setOpenPopoverId(null);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return function () {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [openPopoverId]);
     var RenderCheckbox = (0, react_2.useCallback)(function () {
         var _a;
         return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)", top: 0 },
@@ -91,6 +81,52 @@ var TableHeader = function (_a) {
         headerBgColor,
         isActionFreeze,
     ]);
+    return (react_2.default.createElement(react_1.Tr, { pr: 0 },
+        isContent && react_2.default.createElement(RenderConent, null),
+        isCheckbox && react_2.default.createElement(RenderCheckbox, null),
+        columns.map(function (header, index) { return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, visibleColumns: visibleColumns, headerBgColor: headerBgColor, headerTextColor: headerTextColor, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch })); }),
+        isLink && react_2.default.createElement(RenderView, null)));
+};
+exports.default = (0, react_2.memo)(TableHeader);
+var SortingIcon = (0, react_2.memo)(function (_a) {
+    var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", ml: 2, onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
+        sortState === "none" && react_2.default.createElement(fa_1.FaSort, { color: "black", size: 14 }),
+        sortState === "asc" && react_2.default.createElement(fa_1.FaCaretUp, { color: "black", size: 14 }),
+        sortState === "desc" && react_2.default.createElement(fa_1.FaCaretDown, { color: "black", size: 14 })));
+});
+var ColumnHeader = (0, react_2.memo)(function (_a) {
+    var _b;
+    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort;
+    var _c = (0, react_2.useState)(false), isHovered = _c[0], setIsHovered = _c[1];
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var isFrozen = header.isFreeze;
+    var leftOffset = isFrozen
+        ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? 50 : 0)
+        : undefined;
+    var isSorting = header.isSort
+        ? columnsSort.find(function (o) { return o.column === header.id; })
+        : undefined;
+    var BgColor = isFrozen ? freezedBgColor : headerBgColor;
+    var TextColor = isFrozen ? freezedTextColor : headerTextColor;
+    var handleMouseDown = function (e) {
+        var parentBox = e.target
+            .parentElement;
+        var th = parentBox.parentElement;
+        var startX = e.pageX;
+        var startWidth = th.offsetWidth;
+        var onMouseMove = function (moveEvent) {
+            var newWidth = startWidth + (moveEvent.pageX - startX);
+            th.style.width = "".concat(newWidth, "px");
+        };
+        var onMouseUp = function () {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+    };
     var Sorting = (0, react_2.useCallback)(function (_a) {
         var _b;
         var isSorting = _a.isSorting, header = _a.header;
@@ -105,95 +141,18 @@ var TableHeader = function (_a) {
                 handleSort(header.id, direction);
             } }));
     }, [handleSort]);
-    var Popvers = (0, react_2.useCallback)(function (_a) {
-        var header = _a.header;
-        return (react_2.default.createElement("div", { className: "search-popover" },
-            react_2.default.createElement(react_1.Popover, { isOpen: openPopoverId === header.id, onClose: function () { return setOpenPopoverId(null); }, placement: "bottom-start", closeOnBlur: false, closeOnEsc: false },
-                react_2.default.createElement(react_1.PopoverTrigger, null,
-                    react_2.default.createElement(react_1.IconButton, { "aria-label": "Search", icon: react_2.default.createElement(fa_1.FaEllipsisV, null), size: "xs", variant: "ghost", onClick: function () {
-                            return setOpenPopoverId(openPopoverId === header.id ? null : header.id);
-                        }, _hover: { bg: "none" } })),
-                react_2.default.createElement(react_1.PopoverContent, { width: "200px" },
-                    react_2.default.createElement(react_1.PopoverBody, { p: 2 },
-                        react_2.default.createElement(react_1.InputGroup, { flex: "1", size: "xs" },
-                            react_2.default.createElement(react_1.InputLeftElement, { pointerEvents: "none" },
-                                react_2.default.createElement(icons_1.SearchIcon, { color: "gray.300" })),
-                            react_2.default.createElement(react_1.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", value: columnFilters[header.id] || "", onChange: function (e) {
-                                    e.stopPropagation();
-                                    handleSearchChange(header.id, e.target.value);
-                                } })))))));
-    }, [columnFilters, openPopoverId, handleSearchChange]);
-    var renderColumnHeader = function (header, index) {
-        var _a;
-        var isFrozen = header.isFreeze;
-        var leftOffset = isFrozen
-            ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? 50 : 0)
-            : undefined;
-        var isSorting = header.isSort
-            ? columnsSort.find(function (o) { return o.column === header.id; })
-            : undefined;
-        var BgColor = isFrozen ? freezedBgColor : headerBgColor;
-        var TextColor = isFrozen ? freezedTextColor : headerTextColor;
-        return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", color: TextColor, fontSize: 14, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: BgColor, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns") },
-            react_2.default.createElement(react_1.Box, { display: "flex", color: TextColor, justifyContent: "space-between", alignItems: "center" },
-                react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.label),
-                react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center" },
-                    header.isSort ? (react_2.default.createElement(Sorting, { isSorting: isSorting, header: header })) : null,
-                    react_2.default.createElement(Popvers, { header: header }))))));
-    };
-    return (react_2.default.createElement(react_1.Tr, { pr: 0 },
-        isContent && react_2.default.createElement(RenderConent, null),
-        isCheckbox && react_2.default.createElement(RenderCheckbox, null),
-        columns.map(function (header, index) { return renderColumnHeader(header, index); }),
-        isLink && react_2.default.createElement(RenderView, null)));
-};
-exports.default = TableHeader;
-var SortingIcon = (0, react_2.memo)(function (_a) {
-    var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", ml: 2, onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
-        sortState === "none" && react_2.default.createElement(fa_1.FaSort, { color: "black", size: 14 }),
-        sortState === "asc" && react_2.default.createElement(fa_1.FaCaretUp, { color: "black", size: 14 }),
-        sortState === "desc" && react_2.default.createElement(fa_1.FaCaretDown, { color: "black", size: 14 })));
+    var isFiltersEnabled = (isHovered && header.isSort) ||
+        ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none");
+    return visibleColumns[header.label] ? (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", color: TextColor, fontSize: 14, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: BgColor, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 41, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+        react_2.default.createElement(react_1.Box, { display: "flex", color: TextColor, justifyContent: "space-between", alignItems: "center", position: "relative" },
+            react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.label),
+            react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center" },
+                isFiltersEnabled && (react_2.default.createElement(Sorting, { isSorting: isSorting, header: header })),
+                react_2.default.createElement(TableFilters_1.default, { header: header, setColumnsSearch: function (searchVal) {
+                        return setColumnsSearch(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[header.id] = searchVal, _a)));
+                        });
+                    }, columnsSearch: columnsSearch[header.id] || "", onClose: function () { return setIsHovered(false); } })),
+            react_2.default.createElement("div", { className: "resize-handle", onMouseDown: handleMouseDown })))) : (react_2.default.createElement(react_2.default.Fragment, null));
 });
-// const Popover = () => {
-//   return (
-//     <div style={{ background: "red" }}>
-//       <Popover
-//         isOpen={
-//           activeHeader === header.label && isPopoverOpen && header.isSearch
-//         }
-//         onClose={closePopover}
-//         placement="bottom-start"
-//         closeOnBlur={false}
-//       >
-//         <PopoverTrigger>
-//           <span>
-//             <HamburgerIcon
-//               w={15}
-//               h={15}
-//               onClick={() =>
-//                 handleHeaderClick(
-//                   header.label,
-//                   header.isSearch ? header.isSearch : false
-//                 )
-//               }
-//               style={{
-//                 cursor: "pointer",
-//                 display:
-//                   hoveredHeaderIndex === index && header.isSearch
-//                     ? "inline"
-//                     : "none",
-//               }}
-//             />
-//           </span>
-//         </PopoverTrigger>
-//         <PopoverContent width={200} zIndex={3}>
-//           <PopoverBody background={"#deeefd"}>
-//             {searchFeatures(header.label)}
-//           </PopoverBody>
-//         </PopoverContent>
-//       </Popover>
-//     </div>
-//   );
-// };

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

@@ -0,0 +1,2 @@
+declare const useDebounce: (callback: Function, delay: number) => (...args: any[]) => void;
+export default useDebounce;

package/dist/Components/Table/Components/useDebounce.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+// First, create a custom debounce hook
+var useDebounce = function (callback, delay) {
+    var timeoutRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        return function () {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    var debouncedCallback = (0, react_1.useCallback)(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(function () {
+            callback.apply(void 0, args);
+        }, delay);
+    }, [callback, delay]);
+    return debouncedCallback;
+};
+exports.default = useDebounce;

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

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { ColumnSortingProps, DataObject, TableHeaderProps } from "../TableProps";
+type UseTableProps = {
+    tableBorderColor?: string;
+    data: DataObject[];
+    isPagination: boolean;
+    selections?: (string | number)[];
+    columns: TableHeaderProps[];
+    onSelection?: (selected: (string | number)[]) => void;
+};
+declare const useTable: ({ tableBorderColor, data, isPagination, selections, columns, onSelection, }: UseTableProps) => {
+    tableData: DataObject[];
+    tableContainerStyles: {
+        borderRadius: string;
+        borderWidth: string;
+        borderColor: string;
+        boxShadow: string;
+        maxHeight: string;
+        overflowY: string;
+    };
+    isContent: boolean;
+    isLink: boolean;
+    headerRefs: import("react").MutableRefObject<(HTMLTableCellElement | null)[]>;
+    columnWidths: number[];
+    visibleColumns: Record<string, boolean>;
+    handleSort: (field: string | number, sort: "asc" | "desc" | "none") => void;
+    handleCheckbox: (id: string | number) => void;
+    filteredData: DataObject[];
+    startRow: number;
+    endRow: number;
+    selection: (string | number)[];
+    columnsSort: ColumnSortingProps[];
+    handleColumnVisibilityChange: (header: string | number) => void;
+    handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    pages: number;
+    currentPage: number;
+    rowsPerPage: number;
+    setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+};
+export default useTable;

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

@@ -0,0 +1,143 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var table_1 = require("../../../Utils/table");
+var defaultPageSize = 5;
+var useTable = function (_a) {
+    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, columns = _a.columns, onSelection = _a.onSelection;
+    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)(defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
+    var _g = (0, react_1.useState)(columns.reduce(function (acc, curr) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[curr.label] = true, _a)));
+    }, {})), visibleColumns = _g[0], setVisibleColumns = _g[1];
+    var tableData = (0, react_1.useMemo)(function () { return data; }, [data]);
+    var _h = (0, react_1.useState)(tableData), filteredData = _h[0], setFilteredData = _h[1];
+    (0, react_1.useEffect)(function () {
+        setFilteredData(tableData);
+    }, [tableData]);
+    var tableContainerStyles = (0, react_1.useMemo)(function () {
+        var _a;
+        return ({
+            borderRadius: "10px 0 0 10px",
+            borderWidth: "0px 0px 0px 5px",
+            borderColor: tableBorderColor !== null && tableBorderColor !== void 0 ? tableBorderColor : (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[500],
+            boxShadow: theme.shadows.lg,
+            maxHeight: "50vh",
+            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]);
+    (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);
+    }, []);
+    var pages = (0, react_1.useMemo)(function () { return (isPagination ? Math.ceil(tableData.length / rowsPerPage) : 0); }, [isPagination, rowsPerPage, tableData.length]);
+    var startRow = (0, react_1.useMemo)(function () { return (!isPagination ? 0 : currentPage * rowsPerPage); }, [currentPage, isPagination, rowsPerPage]);
+    var endRow = (0, react_1.useMemo)(function () { return (!isPagination ? tableData.length : startRow + rowsPerPage); }, [isPagination, rowsPerPage, startRow, tableData.length]);
+    (0, react_1.useEffect)(function () {
+        var sortedData = (0, table_1.SortMultiColumnData)(tableData, columnsSort);
+        var data = sortedData.slice(startRow, endRow);
+        setFilteredData(data);
+    }, [columnsSort, startRow, endRow, tableData]);
+    var handlePageSizeChange = function (event) {
+        var value = Number(event.target.value);
+        setRowsPerPage(value !== 0 ? value : defaultPageSize);
+        setCurrentPage(0);
+    };
+    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]);
+    (0, react_1.useEffect)(function () {
+        setSelection(selections !== null && selections !== void 0 ? selections : []);
+    }, [selections]);
+    var handleCheckbox = (0, react_1.useCallback)(function (id) {
+        var selectedItems = [];
+        if (id === 0) {
+            if (selection.length === tableData.length) {
+                selectedItems = [];
+            }
+            else {
+                selectedItems = tableData.map(function (item) { return item.id; });
+            }
+        }
+        else if (selection.includes(id)) {
+            selectedItems = selection.filter(function (item) { return item !== id; });
+        }
+        else {
+            selectedItems = __spreadArray(__spreadArray([], selection, true), [id], false);
+        }
+        setSelection(selectedItems);
+        onSelection && onSelection(selectedItems);
+    }, [onSelection, selection, tableData]);
+    var handleColumnVisibilityChange = function (header) {
+        setVisibleColumns(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[header] = !prev[header], _a)));
+        });
+    };
+    return {
+        tableData: tableData,
+        tableContainerStyles: tableContainerStyles,
+        isContent: isContent,
+        isLink: isLink,
+        headerRefs: headerRefs,
+        columnWidths: columnWidths,
+        visibleColumns: visibleColumns,
+        handleSort: handleSort,
+        handleCheckbox: handleCheckbox,
+        filteredData: filteredData,
+        startRow: startRow,
+        endRow: endRow,
+        selection: selection,
+        columnsSort: columnsSort,
+        handleColumnVisibilityChange: handleColumnVisibilityChange,
+        handlePageSizeChange: handlePageSizeChange,
+        pages: pages,
+        currentPage: currentPage,
+        rowsPerPage: rowsPerPage,
+        setCurrentPage: setCurrentPage,
+    };
+};
+exports.default = useTable;

package/dist/Components/Table/Table.css

@@ -1,29 +1,16 @@
-.table-container {
-  display: flex;
-  overflow: hidden; /* Prevent extra scrollbars */
+.table_wrapper {
+  width: 100%;
+  border-collapse: collapse;
+  /* table-layout: fixed; */
 }
 
-.sticky-columns {
-  position: relative;
-  z-index: 2;
-  background-color: white;
-  box-shadow: 2px 0 0 #e2e8f0; /* Optional for visual separation */
-}
-
-.scrollable-columns {
-  overflow-x: auto;
-  overflow-y: hidden; /* Only horizontal scrolling */
-  white-space: nowrap; /* Prevent wrapping */
-}
-
-th,
-td {
-  border: 1px solid #e2e8f0;
-  padding: 8px;
-  box-sizing: border-box;
-}
-
-.scrollable-columns th,
-.scrollable-columns td {
-  background-color: white;
+.table_wrapper th .resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: transparent;
+  z-index: 999;
 }

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

@@ -1,3 +1,4 @@
 import React from "react";
 import { TableProps } from "./TableProps";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagintaion, onRowClick, selections, isActionFreeze, }: TableProps): React.JSX.Element;
+import "./Table.css";
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -33,15 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -49,134 +29,59 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var react_3 = require("@chakra-ui/react");
-var react_4 = require("react");
 var Pagination_1 = __importDefault(require("./Components/Pagination"));
-var table_1 = require("../../Utils/table");
 var TableHeader_1 = __importDefault(require("./Components/TableHeader"));
 var TableBody_1 = __importDefault(require("./Components/TableBody"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var defaultPageSize = 5;
+var useTable_1 = __importDefault(require("./Components/useTable"));
+require("./Table.css");
+var table_1 = require("../../Utils/table");
 function Table(_a) {
-    var _b;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _c = _a.isCheckbox, isCheckbox = _c === void 0 ? false : _c, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _d = _a.noBorders, noBorders = _d === void 0 ? false : _d, _e = _a.isPagintaion, isPagintaion = _e === void 0 ? true : _e, onRowClick = _a.onRowClick, selections = _a.selections, _f = _a.isActionFreeze, isActionFreeze = _f === void 0 ? true : _f;
+    var _b, _c, _d;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _e = _a.isCheckbox, isCheckbox = _e === void 0 ? false : _e, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _f = _a.noBorders, noBorders = _f === void 0 ? false : _f, _g = _a.isPagination, isPagination = _g === void 0 ? true : _g, onRowClick = _a.onRowClick, selections = _a.selections, _h = _a.isActionFreeze, isActionFreeze = _h === void 0 ? true : _h;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _g = (0, react_4.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _g[0], setSelection = _g[1];
-    var _h = (0, react_4.useState)(0), currentPage = _h[0], setCurrentPage = _h[1];
-    var _j = (0, react_4.useState)(defaultPageSize), rowsPerPage = _j[0], setRowsPerPage = _j[1];
-    var _k = (0, react_4.useState)({}), columnFilters = _k[0], setColumnFilters = _k[1];
-    var _l = (0, react_4.useState)(data), filteredData = _l[0], setFilteredData = _l[1];
-    (0, react_1.useEffect)(function () {
-        setSelection(selections !== null && selections !== void 0 ? selections : []);
-    }, [selections]);
-    var _m = (0, react_4.useState)(columns.reduce(function (acc, curr) {
-        var _a;
-        return (__assign(__assign({}, acc), (_a = {}, _a[curr.label] = true, _a)));
-    }, {})), visibleColumns = _m[0], setVisibleColumns = _m[1];
-    var _o = (0, react_4.useState)([]), columnWidths = _o[0], setColumnWidths = _o[1];
-    var headerRefs = (0, react_1.useRef)([]);
-    var _p = (0, react_4.useState)([]), columnsSort = _p[0], setColumnsSort = _p[1];
-    (0, react_1.useEffect)(function () {
-        // Measure widths after the component mounts
-        var widths = headerRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
-        setColumnWidths(widths);
-    }, [columns, visibleColumns]);
-    var handlePageSizeChange = function (event) {
-        var value = Number(event.target.value);
-        setRowsPerPage(value !== 0 ? value : defaultPageSize);
-        setCurrentPage(0);
-    };
-    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]);
-    var handleCheckbox = function (id) {
-        var selectedItems = [];
-        if (id === 0) {
-            if (selection.length === data.length) {
-                selectedItems = [];
-            }
-            else {
-                selectedItems = data.map(function (item) { return item.id; });
-            }
-        }
-        else if (selection.includes(id)) {
-            selectedItems = selection.filter(function (item) { return item !== id; });
-        }
-        else {
-            selectedItems = __spreadArray(__spreadArray([], selection, true), [id], false);
-        }
-        setSelection(selectedItems);
-        onSelection && onSelection(selectedItems);
-    };
-    var pages = isPagintaion ? Math.ceil(data.length / rowsPerPage) : 0;
-    var startRow = !isPagintaion ? 0 : currentPage * rowsPerPage;
-    var endRow = !isPagintaion ? data.length : startRow + rowsPerPage;
-    (0, react_1.useEffect)(function () {
-        var sortedData = (0, table_1.SortMultiColumnData)(filteredData, columnsSort);
-        var data = sortedData.slice(startRow, endRow);
-        setFilteredData(data);
-    }, [columnsSort, startRow, endRow]);
-    var handleColumnVisibilityChange = function (header) {
-        setVisibleColumns(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[header] = !prev[header], _a)));
-        });
-    };
-    var handleColumnSearch = function (columnId, searchValue) {
-        var _a;
-        var newFilters = __assign(__assign({}, columnFilters), (_a = {}, _a[columnId] = searchValue, _a));
-        if (!searchValue) {
-            delete newFilters[columnId];
-        }
-        setColumnFilters(newFilters);
-        // Apply all active filters
-        var filtered = data.filter(function (row) {
-            return Object.entries(newFilters).every(function (_a) {
-                var colId = _a[0], filterValue = _a[1];
-                var cellValue = String(row[colId]).toLowerCase();
-                return cellValue.includes(filterValue.toLowerCase());
-            });
-        });
-        setFilteredData(filtered);
-    };
-    var isContent = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.content; }); }, [data]);
-    var isLink = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.onLink || o.onDelete || o.onEdit; }); }, [data]);
-    var RenderTable = function (_a) {
-        var _b, _c, _d;
-        var columns = _a.columns;
-        return (react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "sticky-columns" },
-            react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 2 },
-                react_1.default.createElement(TableHeader_1.default, { columns: columns, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], visibleColumns: visibleColumns, handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isLoading, checked: data.length !== 0 && selection.length === data.length
-                        ? true
-                        : selection.length === 0
-                            ? false
-                            : "indeterminate", isContent: isContent, isLink: isLink, onColumnSearch: handleColumnSearch, columnFilters: columnFilters, isActionFreeze: isActionFreeze })),
-            react_1.default.createElement(react_3.Tbody, null,
-                react_1.default.createElement(TableBody_1.default, { data: filteredData, columns: columns, startRow: startRow, endRow: endRow, visibleColumns: visibleColumns, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))));
-    };
+    var _j = (0, react_1.useState)({}), columnsSearch = _j[0], setColumnsSearch = _j[1];
+    var _k = (0, useTable_1.default)({
+        tableBorderColor: tableBorderColor,
+        data: data,
+        isPagination: isPagination,
+        selections: selections,
+        columns: columns,
+        onSelection: onSelection,
+    }), tableData = _k.tableData, tableContainerStyles = _k.tableContainerStyles, isContent = _k.isContent, isLink = _k.isLink, headerRefs = _k.headerRefs, columnWidths = _k.columnWidths, visibleColumns = _k.visibleColumns, handleSort = _k.handleSort, handleCheckbox = _k.handleCheckbox, filteredData = _k.filteredData, startRow = _k.startRow, endRow = _k.endRow, selection = _k.selection, columnsSort = _k.columnsSort, currentPage = _k.currentPage, pages = _k.pages, rowsPerPage = _k.rowsPerPage, handleColumnVisibilityChange = _k.handleColumnVisibilityChange, handlePageSizeChange = _k.handlePageSizeChange, setCurrentPage = _k.setCurrentPage;
+    var _filteredData = (0, react_1.useMemo)(function () {
+        return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
+    }, [columnsSearch, filteredData]);
+    var RenderPagination = (0, react_1.useCallback)(function () {
+        if (!isPagination || !filteredData.length)
+            return null;
+        return (react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: "".concat(startRow + 1, " to ").concat(endRow, " of ").concat(tableData.length), handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, visibleColumns: visibleColumns, handleColumnVisibilityChange: handleColumnVisibilityChange, isVisiblity: true }));
+    }, [
+        columns,
+        currentPage,
+        endRow,
+        filteredData.length,
+        handleColumnVisibilityChange,
+        handlePageSizeChange,
+        isPagination,
+        pages,
+        rowsPerPage,
+        setCurrentPage,
+        startRow,
+        tableData.length,
+        visibleColumns,
+    ]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.TableContainer, { sx: {
-                borderRadius: "10px 0 0 10px",
-                borderWidth: "0px 0px 0px 5px",
-                borderColor: tableBorderColor !== null && tableBorderColor !== void 0 ? tableBorderColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[500],
-                boxShadow: theme.shadows.lg,
-                maxHeight: "50vh",
-                overflowY: "auto",
-            } },
-            react_1.default.createElement(RenderTable, { columns: columns })),
-        isPagintaion && !!filteredData.length && (react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: "".concat(startRow + 1, " to ").concat(endRow, " of ").concat(data.length), handlePageSizeChange: handlePageSizeChange, dataLength: data.length, visibleColumns: visibleColumns, handleColumnVisibilityChange: handleColumnVisibilityChange, isVisiblity: true }))));
+        react_1.default.createElement(react_2.TableContainer, { sx: tableContainerStyles },
+            react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "table_wrapper" },
+                react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 2 },
+                    react_1.default.createElement(TableHeader_1.default, { columns: columns, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], visibleColumns: visibleColumns, handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isLoading, checked: tableData.length !== 0 && selection.length === tableData.length
+                            ? true
+                            : selection.length === 0
+                                ? false
+                                : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
+                react_1.default.createElement(react_3.Tbody, null,
+                    react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columns, startRow: startRow, endRow: endRow, visibleColumns: visibleColumns, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze })))),
+        react_1.default.createElement(RenderPagination, null)));
 }
 exports.default = Table;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { Dispatch, MutableRefObject, SetStateAction } from "react";
 export type TableProps = {
     data: DataObject[];
     columns: TableHeaderProps[];
@@ -15,7 +15,7 @@ export type TableProps = {
     tableBorderColor?: string;
     noBorders?: boolean;
     onSelection?: (selected: (string | number)[]) => void;
-    isPagintaion?: boolean;
+    isPagination?: boolean;
     selections?: (string | number)[];
     onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
     isActionFreeze?: boolean;
@@ -54,8 +54,8 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     checked: boolean | "indeterminate";
     isContent: boolean;
     isLink: boolean;
-    onColumnSearch?: (columnId: string, searchValue: string) => void;
-    columnFilters?: Record<string, string>;
+    setColumnsSearch: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+    columnsSearch: Record<string, string>;
 };
 export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "onRowClick" | "isActionFreeze"> & {
     visibleColumns: Record<string, boolean>;
@@ -67,3 +67,21 @@ export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "da
     isContent: boolean;
     isLink: boolean;
 };
+export type TableFiltersProps = {
+    header: DataObject;
+    setColumnsSearch: (searchVal: string) => void;
+    columnsSearch: string;
+    onClose: () => void;
+};
+export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "visibleColumns" | "columnsSort"> & {
+    header: TableHeaderProps;
+    index: number;
+    columnWidths: number[];
+    headerRefs: MutableRefObject<(HTMLTableCellElement | null)[]>;
+    columnsSearch: Record<string, string>;
+    setColumnsSearch: Dispatch<SetStateAction<Record<string, string>>>;
+};
+export type SortingProps = {
+    isSorting: ColumnSortingProps | undefined;
+    header: TableHeaderProps;
+};

package/dist/Pages/table.js

@@ -40,13 +40,13 @@ var tableData = [
     },
     {
         id: 3,
-        name: "Bob Smith",
+        name: "Bob Smitha",
         age: 40,
         gender: "Male",
     },
     {
         id: 3,
-        name: "Bob Smith",
+        name: "Bobe Smith",
         age: 40,
         gender: "Male",
     },
@@ -64,15 +64,21 @@ var tableData = [
     },
     {
         id: 3,
-        name: "Bob Smith",
-        age: 40,
-        gender: "Male",
+        name: "crushmika",
+        age: 33,
+        gender: "Female",
     },
     {
         id: 33,
-        name: "Bob Smith333",
-        age: 40,
-        gender: "Male",
+        name: "Shree",
+        age: 30,
+        gender: "Female",
+    },
+    {
+        id: 33,
+        name: "Shree",
+        age: 25,
+        gender: "Female",
     },
     {
         id: 3,
@@ -82,9 +88,9 @@ var tableData = [
     },
     {
         id: 3,
-        name: "Bob Smith",
+        name: "Waquima gaabi",
         age: 40,
-        gender: "Male",
+        gender: "female",
     },
     {
         id: 3,
@@ -94,7 +100,7 @@ var tableData = [
     },
     {
         id: 3,
-        name: "Bob Smith",
+        name: "Johny",
         age: 40,
         gender: "Male",
     },
@@ -133,6 +139,6 @@ var column = [
 ];
 var TableExample = function () {
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(Table_1.default, { columns: column, data: tableData, isCheckbox: true, isVisiblity: false, isLoading: false, noBorders: false, onSelection: function (checked) { return console.log(checked); }, onRowClick: function (row, header) { return console.log(row, header); }, isPagintaion: false })));
+        react_1.default.createElement(Table_1.default, { columns: column, data: tableData, isCheckbox: true, isVisiblity: false, isLoading: false, noBorders: false, onSelection: function (checked) { return console.log(checked); }, onRowClick: function (row, header) { return console.log(row, header); }, isPagination: false })));
 };
 exports.TableExample = TableExample;

package/dist/Utils/table.d.ts

@@ -7,3 +7,5 @@ export declare function SortMultiColumnData(data: Record<string, string | number
 export declare const getPreviousColumnWidth: (columns: KaTableProps["columns"], key: string) => any;
 export declare const getFieldType: (header: string, data: DataObject[]) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
 export declare const calculateLeftOffset: (columns: number[], index: number) => number;
+export declare const searchAndSortData: (data: DataObject[], searchValues: Record<string, string>) => DataObject[];
+export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;

package/dist/Utils/table.js

@@ -9,7 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
+exports.debounce = exports.searchAndSortData = exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
 function SortMultiColumnData(data, sortConfig) {
     if (!sortConfig.length)
         return data;
@@ -39,15 +39,6 @@ var getPreviousColumnWidth = function (columns, key) {
     return 0;
 };
 exports.getPreviousColumnWidth = getPreviousColumnWidth;
-// export function calculateLeftOffset(columns: any, currentIndex: number) {
-//   let offset = 0;
-//   for (let i = 0; i < currentIndex; i++) {
-//     if (columns[i].isFreeze) {
-//       offset += columns[i].width || 100;
-//     }
-//   }
-//   return offset;
-// }
 var getFieldType = function (header, data) {
     for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
         var row = data_1[_i];
@@ -62,3 +53,46 @@ var calculateLeftOffset = function (columns, index) {
     return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
 };
 exports.calculateLeftOffset = calculateLeftOffset;
+var searchAndSortData = function (data, searchValues) {
+    var filteredData = data.filter(function (item) {
+        return Object.keys(searchValues).every(function (key) {
+            var searchValue = searchValues[key].toLowerCase();
+            return item[key].toString().toLowerCase().includes(searchValue);
+        });
+    });
+    return filteredData.sort(function (a, b) {
+        var aMatchCount = 0;
+        var bMatchCount = 0;
+        Object.keys(searchValues).forEach(function (key) {
+            var searchValue = searchValues[key].toLowerCase();
+            if (a[key] && a[key].toString().toLowerCase() === searchValue) {
+                aMatchCount++;
+            }
+            if (b[key] && b[key].toString().toLowerCase() === searchValue) {
+                bMatchCount++;
+            }
+            if (a[key] && a[key].toString().toLowerCase().includes(searchValue)) {
+                aMatchCount += 0.5;
+            }
+            if (b[key] && b[key].toString().toLowerCase().includes(searchValue)) {
+                bMatchCount += 0.5;
+            }
+        });
+        return bMatchCount - aMatchCount;
+    });
+};
+exports.searchAndSortData = searchAndSortData;
+function debounce(func, delay) {
+    var timer;
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            func.apply(void 0, args);
+        }, delay);
+    };
+}
+exports.debounce = debounce;

package/dist/index.d.ts

@@ -39,5 +39,6 @@ import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOt
 import withTheme from "./withTheme";
 import { useCustomTheme } from "./Theme/useCustomTheme";
 import { ThemesList } from "./Theme";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, InputTextArea, KaTable, TableActionCreator, TableEnums, TableProps, TableModel, TableUtils, TableFun, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, };
+import { debounce } from "./Utils/table";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, InputTextArea, KaTable, TableActionCreator, TableEnums, TableProps, TableModel, TableUtils, TableFun, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.TableFun = exports.TableUtils = exports.TableModel = exports.TableProps = exports.TableEnums = exports.TableActionCreator = exports.KaTable = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -127,4 +127,6 @@ var useCustomTheme_1 = require("./Theme/useCustomTheme");
 Object.defineProperty(exports, "useCustomTheme", { enumerable: true, get: function () { return useCustomTheme_1.useCustomTheme; } });
 var Theme_1 = require("./Theme");
 Object.defineProperty(exports, "ThemesList", { enumerable: true, get: function () { return Theme_1.ThemesList; } });
+var table_1 = require("./Utils/table");
+Object.defineProperty(exports, "debounce", { enumerable: true, get: function () { return table_1.debounce; } });
 exports.default = withTheme_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.1.50",
+  "version": "1.1.51",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",