pixelize-design-library 1.1.34 → 1.1.35

package/dist/Components/KaTable/KaTable.js

@@ -54,7 +54,7 @@ require("ka-table/style.css");
 require("./ka-table.css");
 var useMergedChildComponents_1 = __importDefault(require("./useMergedChildComponents"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var common_1 = require("../../Utils/common");
+var table_1 = require("../../Utils/table");
 var selectionCellColumn = {
     key: "select-cell",
     width: 50,
@@ -80,7 +80,7 @@ var KaTable = function (_a) {
     var handleSort = function (sort) {
         setSortState(sort);
     };
-    var sortedData = (0, react_1.useMemo)(function () { return (0, common_1.SortMultiColumnData)(__spreadArray([], data, true), sortState); }, [sortState, data]);
+    var sortedData = (0, react_1.useMemo)(function () { return (0, table_1.SortMultiColumnData)(__spreadArray([], data, true), sortState); }, [sortState, data]);
     var mergedChildComponents = (0, useMergedChildComponents_1.default)({
         childComponents: childComponents,
         onSortChange: handleSort,

package/dist/Components/KaTable/useMergedChildComponents.js

@@ -51,7 +51,7 @@ var CustomHeader_1 = __importDefault(require("./CustomHeader"));
 var SelectionHeader_1 = __importDefault(require("./SelectionHeader"));
 var SelectionCell_1 = __importDefault(require("./SelectionCell"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var common_1 = require("../../Utils/common");
+var table_1 = require("../../Utils/table");
 var useMergedChildComponents = function (_a) {
     var childComponents = _a.childComponents, onSortChange = _a.onSortChange, handleSelection = _a.handleSelection, rowKey = _a.rowKey, onRowClick = _a.onRowClick, selected = _a.selected, dataLength = _a.dataLength, columns = _a.columns, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, sortState = _a.sortState;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -144,7 +144,7 @@ var useMergedChildComponents = function (_a) {
                         }
                     }
                     if (props.column.columnFreeze) {
-                        var stickyLeft = (0, common_1.getPreviousColumnWidth)(columns, props.column.key);
+                        var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
                         return {
                             style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600] }),
                         };
@@ -168,7 +168,7 @@ var useMergedChildComponents = function (_a) {
                         }
                     }
                     if (props.column.columnFreeze) {
-                        var stickyLeft = (0, common_1.getPreviousColumnWidth)(columns, props.column.key);
+                        var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
                         return {
                             style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 2, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], fontWeight: 600 }),
                         };

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { TableProps } from "../TableProps";
+type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
+    visibleColumns: Record<string, boolean>;
+    paginationText: string;
+    handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    rowsPerPage: number;
+    currentPage: number;
+    pages: number;
+    handleColumnVisibilityChange: (header: string) => void;
+    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+    dataLength: number;
+};
+declare const Pagination: ({ isVisiblity, columns, visibleColumns, paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, handleColumnVisibilityChange, setCurrentPage, dataLength, }: PaginationProps) => React.JSX.Element;
+export default Pagination;

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

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var icons_1 = require("@chakra-ui/icons");
+var react_2 = require("@chakra-ui/react");
+var fa_1 = require("react-icons/fa");
+var Pagination = function (_a) {
+    var isVisiblity = _a.isVisiblity, columns = _a.columns, visibleColumns = _a.visibleColumns, paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, handleColumnVisibilityChange = _a.handleColumnVisibilityChange, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength;
+    var pageSizeOptions = [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 75, 100].filter(function (size) { return size <= dataLength; });
+    var isLeftDisabled = currentPage === 0;
+    var isRightDisabled = currentPage >= pages - 1;
+    return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", mt: 4 },
+        isVisiblity && (react_1.default.createElement(react_2.Flex, { mr: 4 },
+            react_1.default.createElement(react_2.Menu, null,
+                react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rightIcon: react_1.default.createElement(icons_1.ChevronDownIcon, null), colorScheme: "blue", variant: "ghost", size: "xs" }, "Columns"),
+                react_1.default.createElement(react_2.MenuList, { overflow: "scroll", zIndex: "2" }, columns.map(function (header, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index },
+                    react_1.default.createElement(react_2.Checkbox, { isChecked: visibleColumns[header.label], size: "sm", onChange: function () { return handleColumnVisibilityChange(header.label); } }, header.label))); }))))),
+        react_1.default.createElement(react_2.Text, { mr: 4, fontSize: 12 }, paginationText),
+        react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, mr: 4, size: "xs", width: 20 },
+            react_1.default.createElement("option", { value: 0 }),
+            pageSizeOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, size)); })),
+        react_1.default.createElement(react_2.Flex, null,
+            react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
+                react_1.default.createElement(fa_1.FaAngleDoubleLeft, null)),
+            react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return currentPage > 0 && setCurrentPage(currentPage - 1); } },
+                react_1.default.createElement(fa_1.FaAngleLeft, null)),
+            react_1.default.createElement(react_2.Text, { mx: 1, mt: 3, fontSize: 12 },
+                "Page ",
+                currentPage + 1,
+                " of ",
+                pages),
+            react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () {
+                    return currentPage < pages - 1 && setCurrentPage(currentPage + 1);
+                } },
+                react_1.default.createElement(fa_1.FaAngleRight, null)),
+            react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
+                react_1.default.createElement(fa_1.FaAngleDoubleRight, null)))));
+};
+exports.default = Pagination;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { TableProps } from "../TableProps";
+type TableBodyProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders"> & {
+    visibleColumns: Record<string, boolean>;
+    startRow: number;
+    endRow: number;
+    columnWidths: number[];
+    handleCheckbox: (selection: string | number) => void;
+    selections: (string | number)[];
+};
+declare const TableBody: ({ data, isCheckbox, columns, visibleColumns, startRow, endRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, }: TableBodyProps) => React.JSX.Element;
+export default TableBody;

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

@@ -0,0 +1,35 @@
+"use strict";
+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 = __importDefault(require("react"));
+var table_1 = require("../../../Utils/table");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var TableBody = function (_a) {
+    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, visibleColumns = _a.visibleColumns, startRow = _a.startRow, endRow = _a.endRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_2.default.createElement(react_2.default.Fragment, null, data.slice(startRow, endRow).map(function (row, index) {
+        var _a;
+        return (react_2.default.createElement(react_1.Tr, { key: index + 1 },
+            isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
+                react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "subtle", onChange: function () { return handleCheckbox(row.id); }, isChecked: selections.includes(row.id) }))),
+            columns.map(function (header, headerIndex) {
+                var _a;
+                var isFrozen = header.isFreeze;
+                var leftOffset = isFrozen
+                    ? (0, table_1.calculateLeftOffset)(columnWidths, headerIndex) +
+                        (isCheckbox ? 50 : 0)
+                    : 0;
+                return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { key: headerIndex + 1, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: isFrozen
+                        ? freezedBgColor
+                        : index % 2 === 1
+                            ? theme.colors.backgroundColor.light
+                            : "white", textOverflow: "ellipsis", border: noBorders
+                        ? "none"
+                        : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isFrozen ? freezedTextColor : undefined }, header.node ? header.node(row) : row[header.id])));
+            })));
+    })));
+};
+exports.default = TableBody;

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { ColumnSortingProps, TableProps } from "../TableProps";
+type TableHeaderProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders"> & {
+    visibleColumns: Record<string, boolean>;
+    handleSort: (label: string, type: "asc" | "desc" | "none") => void;
+    activeHeader: string | null;
+    isPopoverOpen: boolean;
+    closePopover: () => void;
+    searchFeatures: (header: string) => React.ReactNode;
+    handleHeaderClick: (header: string, search: boolean) => void;
+    headerRefs: React.MutableRefObject<(HTMLTableCellElement | null)[]>;
+    columnWidths: number[];
+    columnsSort: ColumnSortingProps[];
+    handleCheckbox: (selection: string | number) => void;
+    checked: boolean | "indeterminate";
+};
+declare const TableHeader: ({ columns, isCheckbox, visibleColumns, handleSort, activeHeader, isPopoverOpen, closePopover, searchFeatures, handleHeaderClick, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, }: TableHeaderProps) => React.JSX.Element;
+export default TableHeader;

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

@@ -0,0 +1,115 @@
+"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 = require("@chakra-ui/react");
+var react_2 = __importStar(require("react"));
+var table_1 = require("../../../Utils/table");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var fa_1 = require("react-icons/fa");
+var TableHeader = function (_a) {
+    var _b;
+    var columns = _a.columns, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, handleSort = _a.handleSort, activeHeader = _a.activeHeader, isPopoverOpen = _a.isPopoverOpen, closePopover = _a.closePopover, searchFeatures = _a.searchFeatures, 
+    // hoveredHeaderIndex,
+    handleHeaderClick = _a.handleHeaderClick, 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;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_2.default.createElement(react_1.Tr, null,
+        isCheckbox && (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((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
+            react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "subtle", onChange: function () { return handleCheckbox(0); }, isChecked: checked === true, isIndeterminate: checked === "indeterminate" }))),
+        columns.map(function (header, index) {
+            var _a, _b;
+            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, 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("span", null, header.isSort && (react_2.default.createElement(SortingIcon, { sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", handleSortClick: function () {
+                            var direction = "asc";
+                            if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
+                                direction = "desc";
+                            }
+                            else if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc") {
+                                direction = "none";
+                            }
+                            handleSort(header.id, direction);
+                        } })))))));
+        })));
+};
+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 })));
+});
+// 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/TableLoading.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const TableLoading: () => React.JSX.Element;
+export default TableLoading;

package/dist/Components/Table/Components/TableLoading.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var TableLoading = function () {
+    return (react_1.default.createElement(react_2.Box, { overflowX: "auto", p: 4 },
+        react_1.default.createElement(react_2.Table, { variant: "simple", width: "full" },
+            react_1.default.createElement(react_2.Thead, null,
+                react_1.default.createElement(react_2.Tr, null,
+                    react_1.default.createElement(react_2.Th, { p: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })),
+                    react_1.default.createElement(react_2.Th, { p: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })),
+                    react_1.default.createElement(react_2.Th, { p: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })),
+                    react_1.default.createElement(react_2.Th, { p: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })))),
+            react_1.default.createElement(react_2.Tbody, null, Array.from({ length: 5 }).map(function (_, rowIndex) { return (react_1.default.createElement(react_2.Tr, { key: rowIndex },
+                react_1.default.createElement(react_2.Td, { p: 2 },
+                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })),
+                react_1.default.createElement(react_2.Td, { p: 2 },
+                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })),
+                react_1.default.createElement(react_2.Td, { p: 2 },
+                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })),
+                react_1.default.createElement(react_2.Td, { p: 2 },
+                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })))); })))));
+};
+exports.default = TableLoading;

package/dist/Components/Table/Table.css

@@ -0,0 +1,29 @@
+.table-container {
+  display: flex;
+  overflow: hidden; /* Prevent extra scrollbars */
+}
+
+.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;
+}

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

@@ -1,3 +1,3 @@
 import React from "react";
 import { TableProps } from "./TableProps";
-export default function Table({ data, headers, tableHeaderBgColor, tableHeaderColor, handleExportChange, exportOptions, exportLabel, isLoading, loadingContaxt, loadingBoxStyle, isVisiblity, }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, handleExportChange, onSelection, exportOptions, exportLabel, isLoading, isVisiblity, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     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);
+    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;
+};
 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)) {
@@ -23,44 +46,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 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 react_3 = require("@chakra-ui/react");
 var react_4 = require("react");
-var icons_1 = require("@chakra-ui/icons");
+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 TableLoading_1 = __importDefault(require("./Components/TableLoading"));
+// import "./Table.css";
+var defaultPageSize = 5;
 function Table(_a) {
-    var data = _a.data, headers = _a.headers, _b = _a.tableHeaderBgColor, tableHeaderBgColor = _b === void 0 ? "#3182ce" : _b, _c = _a.tableHeaderColor, tableHeaderColor = _c === void 0 ? "white" : _c, handleExportChange = _a.handleExportChange, exportOptions = _a.exportOptions, exportLabel = _a.exportLabel, isLoading = _a.isLoading, loadingContaxt = _a.loadingContaxt, loadingBoxStyle = _a.loadingBoxStyle, _d = _a.isVisiblity, isVisiblity = _d === void 0 ? true : _d;
-    var _e = (0, react_4.useState)(0), currentPage = _e[0], setCurrentPage = _e[1];
-    var _f = (0, react_4.useState)(5), rowsPerPage = _f[0], setRowsPerPage = _f[1];
-    var _g = (0, react_4.useState)(null), sortField = _g[0], setSortField = _g[1];
-    var _h = (0, react_4.useState)(null), sortDirection = _h[0], setSortDirection = _h[1];
+    var _b;
+    var data = _a.data, columns = _a.columns, handleExportChange = _a.handleExportChange, onSelection = _a.onSelection, exportOptions = _a.exportOptions, exportLabel = _a.exportLabel, isLoading = _a.isLoading, _c = _a.isVisiblity, isVisiblity = _c === void 0 ? true : _c, _d = _a.isCheckbox, isCheckbox = _d === void 0 ? false : _d, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _e = _a.noBorders, noBorders = _e === void 0 ? false : _e;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _f = (0, react_4.useState)([]), selection = _f[0], setSelection = _f[1];
+    var _g = (0, react_4.useState)(0), currentPage = _g[0], setCurrentPage = _g[1];
+    var _h = (0, react_4.useState)(defaultPageSize), rowsPerPage = _h[0], setRowsPerPage = _h[1];
     var _j = (0, react_4.useState)(false), isPopoverOpen = _j[0], setPopoverOpen = _j[1];
     var _k = (0, react_4.useState)(null), activeHeader = _k[0], setActiveHeader = _k[1];
     var _l = (0, react_4.useState)({}), searchTerms = _l[0], setSearchTerms = _l[1];
     var _m = (0, react_4.useState)({}), searchOperation = _m[0], setSearchOperation = _m[1];
     var _o = (0, react_4.useState)({}), betweenValues = _o[0], setBetweenValues = _o[1];
-    var _p = (0, react_4.useState)(null), hoveredHeaderIndex = _p[0], setHoveredHeaderIndex = _p[1];
-    var _q = (0, react_4.useState)(headers.reduce(function (acc, curr) {
+    var _p = (0, react_4.useState)(columns.reduce(function (acc, curr) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[curr.label] = true, _a)));
-    }, {})), visibleColumns = _q[0], setVisibleColumns = _q[1];
-    if (isLoading) {
-        return (react_1.default.createElement(react_2.Box, { width: "full", overflowX: "auto", style: loadingBoxStyle }, loadingContaxt ? (loadingContaxt) : (react_1.default.createElement(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: "blue.500", size: "xl" }))));
-    }
+    }, {})), visibleColumns = _p[0], setVisibleColumns = _p[1];
+    var _q = (0, react_4.useState)([]), columnWidths = _q[0], setColumnWidths = _q[1];
+    var headerRefs = (0, react_1.useRef)([]);
+    var _r = (0, react_4.useState)([]), columnsSort = _r[0], setColumnsSort = _r[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) {
-        setRowsPerPage(Number(event.target.value));
+        var value = Number(event.target.value);
+        setRowsPerPage(value !== 0 ? value : defaultPageSize);
         setCurrentPage(0);
     };
-    var pageSizeOptions = [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 75, 100].filter(function (size) { return size <= data.length; });
-    var sortedData = __spreadArray([], data, true).sort(function (a, b) {
-        if (!sortField)
-            return 0;
-        if (a[sortField] < b[sortField])
-            return sortDirection === "asc" ? -1 : 1;
-        if (a[sortField] > b[sortField])
-            return sortDirection === "asc" ? 1 : -1;
-        return 0;
-    });
+    // const sortedData = [...data].sort((a, b) => {
+    //   if (!sortField) return 0;
+    //   if (a[sortField] < b[sortField]) return sortDirection === "asc" ? -1 : 1;
+    //   if (a[sortField] > b[sortField]) return sortDirection === "asc" ? 1 : -1;
+    //   return 0;
+    // });
     var getValue = function (header) {
         var value = data.reduce(function (acc, item) {
             var itemValue = item[header];
@@ -73,12 +105,23 @@ function Table(_a) {
         }, []);
         return value;
     };
-    var handleSort = function (field, sort) {
+    var handleSort = (0, react_1.useCallback)(function (field, sort) {
         if (!sort)
             return;
-        setSortField(field);
-        setSortDirection(sortDirection === "asc" ? "desc" : "asc");
-    };
+        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 handleSearchOperation = function (header, operation) {
         setSearchOperation(function (prev) {
             var _a;
@@ -86,8 +129,8 @@ function Table(_a) {
         });
         var list_ofdata = getValue(header);
         if (operation === "between") {
-            var smallestValue_1 = String(Math.min.apply(Math, list_ofdata));
-            var highestValue_1 = String(Math.max.apply(Math, list_ofdata));
+            var smallestValue_1 = String(Math.min(Number.apply(void 0, list_ofdata)));
+            var highestValue_1 = String(Math.max(Number.apply(void 0, list_ofdata)));
             setBetweenValues(function (prev) {
                 var _a;
                 return (__assign(__assign({}, prev), (_a = {}, _a[header] = { min: smallestValue_1, max: highestValue_1 }, _a)));
@@ -107,7 +150,7 @@ function Table(_a) {
             else {
                 setSearchTerms(function (prev) {
                     var _a;
-                    return (__assign(__assign({}, prev), (_a = {}, _a[header] = list_ofdata[0], _a)));
+                    return (__assign(__assign({}, prev), (_a = {}, _a[header] = list_ofdata[0].toString(), _a)));
                 });
             }
         }
@@ -136,60 +179,75 @@ function Table(_a) {
     var closePopover = function () {
         setPopoverOpen(false);
     };
-    var filteredData = sortedData.filter(function (item) {
-        return Object.keys(searchTerms).every(function (key) {
-            var term = String(searchTerms[key]).toLowerCase();
-            var value = String(item[key]).toLowerCase();
-            var operation = searchOperation[key] || "notBlank";
-            switch (operation) {
-                case "contains":
-                    return value.includes(term);
-                case "notContains":
-                    return !value.includes(term);
-                case "equals":
-                    return value === term;
-                case "notEquals":
-                    return value !== term;
-                case "beginsWith":
-                    return value.startsWith(term);
-                case "endsWith":
-                    return value.endsWith(term);
-                case "greaterThan":
-                    return Number(value) > Number(term);
-                case "greaterThanOrEqual":
-                    return Number(value) >= Number(term);
-                case "lessThan":
-                    return Number(value) < Number(term);
-                case "lessThanOrEqual":
-                    return Number(value) <= Number(term);
-                case "between": {
-                    var _a = betweenValues[key] || {}, min = _a.min, max = _a.max;
-                    return Number(value) >= Number(min) && Number(value) <= Number(max);
-                }
-                case "blank":
-                    return value === "";
-                case "notBlank":
-                    return value !== "";
-                default:
-                    return true;
+    var handleCheckbox = function (id) {
+        if (id === 0) {
+            if (selection.length === data.length) {
+                setSelection([]);
             }
-        });
-    });
-    var pages = Math.ceil(filteredData.length / rowsPerPage);
-    var startRow = currentPage * rowsPerPage;
-    var endRow = startRow + rowsPerPage;
-    var getFieldType = function (header) {
-        for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
-            var row = data_1[_i];
-            if (row[header] !== null) {
-                return typeof row[header];
+            else {
+                setSelection(data.map(function (item) { return item.id; }));
             }
         }
-        return "string";
+        else if (selection.includes(id)) {
+            setSelection(selection.filter(function (item) { return item !== id; }));
+        }
+        else {
+            setSelection(__spreadArray(__spreadArray([], selection, true), [id], false));
+        }
     };
+    (0, react_1.useEffect)(function () {
+        onSelection && onSelection(selection);
+    }, [selection, onSelection]);
+    // const filteredData = sortedData.filter((item) => {
+    //   return Object.keys(searchTerms).every((key) => {
+    //     const term = String(searchTerms[key]).toLowerCase();
+    //     const value = String(item[key]).toLowerCase();
+    //     const operation = searchOperation[key] || "notBlank";
+    //     switch (operation) {
+    //       case "contains":
+    //         return value.includes(term);
+    //       case "notContains":
+    //         return !value.includes(term);
+    //       case "equals":
+    //         return value === term;
+    //       case "notEquals":
+    //         return value !== term;
+    //       case "beginsWith":
+    //         return value.startsWith(term);
+    //       case "endsWith":
+    //         return value.endsWith(term);
+    //       case "greaterThan":
+    //         return Number(value) > Number(term);
+    //       case "greaterThanOrEqual":
+    //         return Number(value) >= Number(term);
+    //       case "lessThan":
+    //         return Number(value) < Number(term);
+    //       case "lessThanOrEqual":
+    //         return Number(value) <= Number(term);
+    //       case "between": {
+    //         const { min, max } = betweenValues[key] || {};
+    //         return Number(value) >= Number(min) && Number(value) <= Number(max);
+    //       }
+    //       case "blank":
+    //         return value === "";
+    //       case "notBlank":
+    //         return value !== "";
+    //       default:
+    //         return true;
+    //     }
+    //   });
+    // });
+    var pages = Math.ceil(data.length / rowsPerPage);
+    var startRow = currentPage * rowsPerPage;
+    var endRow = startRow + rowsPerPage;
+    // const hasSelection = selection.length > 0;
+    // const indeterminate = hasSelection && selection.length < data.length;
+    var tableData = (0, react_1.useMemo)(function () {
+        return (0, table_1.SortMultiColumnData)(data, columnsSort);
+    }, [data, columnsSort]);
     var searchFeatures = function (header) {
         var _a, _b;
-        var fieldType = getFieldType(header);
+        var fieldType = (0, table_1.getFieldType)(header, data);
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.Select, { value: searchOperation[header] || "notBlank", onChange: function (e) { return handleSearchOperation(header, e.target.value); }, style: { background: "#3182ce", color: "white" } },
                 react_1.default.createElement("option", { value: "equals" }, "Equals"),
@@ -245,145 +303,101 @@ function Table(_a) {
             return (__assign(__assign({}, prev), (_a = {}, _a[header] = !prev[header], _a)));
         });
     };
-    function calculateLeftOffset(headers, currentIndex) {
-        var offset = 0;
-        for (var i = 0; i < currentIndex; i++) {
-            if (headers[i].columnFreeze) {
-                offset += 100;
-            }
-        }
-        return offset;
-    }
-    var handleMouseEnter = function (index) { return setHoveredHeaderIndex(index); };
-    var handleMouseLeave = function () {
-        setHoveredHeaderIndex(null);
-        closePopover();
-    };
-    var removeSearchOptionTerm = function (key) {
-        var newSearchTerms = __assign({}, searchTerms);
-        var newSearchOperation = __assign({}, searchOperation);
-        var newBetweenValues = __assign({}, betweenValues);
-        delete newSearchTerms[key];
-        delete newSearchOperation[key];
-        delete newBetweenValues[key];
-        setSearchTerms(newSearchTerms);
-        setSearchOperation(newSearchOperation);
-        setBetweenValues(newBetweenValues);
+    // const handleMouseEnter = (index: number) => setHoveredHeaderIndex(index);
+    // const handleMouseLeave = () => {
+    //   setHoveredHeaderIndex(null);
+    //   closePopover();
+    // };
+    // const removeSearchOptionTerm = (key: any) => {
+    //   const newSearchTerms = { ...searchTerms };
+    //   const newSearchOperation = { ...searchOperation };
+    //   const newBetweenValues = { ...betweenValues };
+    //   delete newSearchTerms[key];
+    //   delete newSearchOperation[key];
+    //   delete newBetweenValues[key];
+    //   setSearchTerms(newSearchTerms);
+    //   setSearchOperation(newSearchOperation);
+    //   setBetweenValues(newBetweenValues);
+    // };
+    // const SearchOptions = () => {
+    //   return (
+    //     <Wrap>
+    //       {searchOperation &&
+    //         Object.keys(searchOperation).map((key, index) => {
+    //           return (
+    //             <Tag
+    //               size="sm"
+    //               key={index}
+    //               borderRadius="full"
+    //               variant="solid"
+    //               colorScheme="gray"
+    //               m={1}
+    //             >
+    //               <Box display="flex" alignItems="center">
+    //                 <TagLabel>{key}</TagLabel>
+    //                 <TagLabel mx={2}>{searchOperation[key]}</TagLabel>
+    //                 {searchOperation[key] === "between" ? (
+    //                   <TagLabel>
+    //                     {betweenValues[key]?.min} - {betweenValues[key]?.max}
+    //                   </TagLabel>
+    //                 ) : (
+    //                   <TagLabel>{searchTerms[key]}</TagLabel>
+    //                 )}
+    //               </Box>
+    //               <TagCloseButton onClick={() => removeSearchOptionTerm(key)} />
+    //             </Tag>
+    //           );
+    //         })}
+    //     </Wrap>
+    //   );
+    // };
+    // const Export = ({
+    //   exportOptions,
+    // }: {
+    //   exportOptions: TableProps["exportOptions"];
+    // }) => {
+    //   return (
+    //     <Select
+    //       placeholder="Exports"
+    //       width={160}
+    //       onChange={(e) => {
+    //         handleExportChange && handleExportChange(e.target.value);
+    //       }}
+    //       value={exportLabel}
+    //       key={exportLabel}
+    //     >
+    //       {exportOptions?.map((option) => (
+    //         <option key={option.id} value={option.id}>
+    //           {option.label}
+    //         </option>
+    //       ))}
+    //     </Select>
+    //   );
+    // };
+    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, null,
+                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, activeHeader: activeHeader, isPopoverOpen: isPopoverOpen, closePopover: closePopover, searchFeatures: searchFeatures, handleHeaderClick: handleHeaderClick, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, checked: selection.length === data.length
+                        ? true
+                        : selection.length === 0
+                            ? false
+                            : "indeterminate" })),
+            react_1.default.createElement(react_3.Tbody, null,
+                react_1.default.createElement(TableBody_1.default, { data: tableData, 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 }))));
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_2.Wrap, null, searchOperation &&
-            Object.keys(searchOperation).map(function (key, index) {
-                var _a, _b;
-                return (react_1.default.createElement(react_2.Tag, { size: "sm", key: index, borderRadius: "full", variant: "solid", colorScheme: "gray", m: 1 },
-                    react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center" },
-                        react_1.default.createElement(react_2.TagLabel, null, key),
-                        react_1.default.createElement(react_2.TagLabel, { mx: 2 }, searchOperation[key]),
-                        searchOperation[key] === "between" ? (react_1.default.createElement(react_2.TagLabel, null, (_a = betweenValues[key]) === null || _a === void 0 ? void 0 :
-                            _a.min,
-                            " - ", (_b = betweenValues[key]) === null || _b === void 0 ? void 0 :
-                            _b.max)) : (react_1.default.createElement(react_2.TagLabel, null, searchTerms[key]))),
-                    react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return removeSearchOptionTerm(key); } })));
-            })),
-        react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "flex-end" }, exportOptions && exportOptions.length > 0 && (react_1.default.createElement(react_2.Select, { placeholder: "Exports", width: 160, onChange: function (e) {
-                handleExportChange && handleExportChange(e.target.value);
-            }, value: exportLabel, key: exportLabel }, exportOptions.map(function (option) { return (react_1.default.createElement("option", { key: option.id, value: option.id }, option.label)); })))),
+    if (isLoading)
+        return react_1.default.createElement(TableLoading_1.default, null);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("br", null),
-        react_1.default.createElement(react_2.TableContainer, null,
-            react_1.default.createElement(react_3.Table, { variant: "simple", colorScheme: "teal", size: "md", overflowX: "scroll", minW: "100%" },
-                react_1.default.createElement(react_3.Thead, { background: tableHeaderBgColor },
-                    react_1.default.createElement(react_3.Tr, null, headers.map(function (header, index) {
-                        var isFrozen = header.columnFreeze;
-                        var leftOffset = calculateLeftOffset(headers, index);
-                        return (visibleColumns[header.label] && (react_1.default.createElement(react_3.Th, { key: index + 1, style: {
-                                textTransform: "capitalize",
-                                color: tableHeaderColor,
-                                fontSize: "medium",
-                                fontWeight: 600,
-                                position: isFrozen ? "sticky" : undefined,
-                                left: isFrozen
-                                    ? "".concat(leftOffset === 0 ? leftOffset : leftOffset - 4, "px")
-                                    : undefined,
-                                zIndex: isFrozen ? 2 : 1,
-                                background: tableHeaderBgColor,
-                                textAlign: "center",
-                                width: "300px",
-                            }, onMouseEnter: function () { return handleMouseEnter(index); }, onMouseLeave: handleMouseLeave },
-                            react_1.default.createElement(react_2.Button, { onClick: function () {
-                                    return handleSort(header.label, header.sort ? header.sort : false);
-                                }, style: {
-                                    textTransform: "capitalize",
-                                    color: "white",
-                                    background: "none",
-                                    paddingRight: "0px",
-                                } },
-                                header.label,
-                                react_1.default.createElement("span", { style: { width: "20px" } }, sortField === header.label &&
-                                    (sortDirection === "asc" ? (react_1.default.createElement(icons_1.ArrowUpIcon, { w: 15, h: 15 })) : (react_1.default.createElement(icons_1.ArrowDownIcon, { w: 15, h: 15 }))))),
-                            react_1.default.createElement("div", { style: { display: "inline-block", width: "10px" } },
-                                react_1.default.createElement(react_2.Popover, { isOpen: activeHeader === header.label &&
-                                        isPopoverOpen &&
-                                        header.search, onClose: closePopover, placement: "bottom-start", closeOnBlur: false },
-                                    react_1.default.createElement(react_2.PopoverTrigger, null,
-                                        react_1.default.createElement("span", null,
-                                            react_1.default.createElement(icons_1.HamburgerIcon, { w: 15, h: 15, onClick: function () {
-                                                    return handleHeaderClick(header.label, header.search ? header.search : false);
-                                                }, style: {
-                                                    cursor: "pointer",
-                                                    display: hoveredHeaderIndex === index &&
-                                                        header.search
-                                                        ? "inline"
-                                                        : "none",
-                                                } }))),
-                                    react_1.default.createElement(react_2.PopoverContent, { width: 200, zIndex: 3 },
-                                        react_1.default.createElement(react_2.PopoverBody, { background: "#deeefd" }, searchFeatures(header.label))))))));
-                    }))),
-                react_1.default.createElement(react_3.Tbody, null, filteredData.slice(startRow, endRow).map(function (row, index) { return (react_1.default.createElement(react_3.Tr, { key: index + 1, style: {
-                        backgroundColor: index % 2 === 0 ? "#f7f7f7" : "white",
-                    }, border: "none" }, headers.map(function (header, headerIndex) {
-                    var isFrozen = header.columnFreeze;
-                    var leftOffset = calculateLeftOffset(headers, headerIndex);
-                    return (visibleColumns[header.label] && (react_1.default.createElement(react_3.Td, { key: headerIndex + 1, style: {
-                            border: "none",
-                            textAlign: "center",
-                            position: isFrozen ? "sticky" : undefined,
-                            left: isFrozen
-                                ? "".concat(leftOffset === 0 ? leftOffset : leftOffset - 4, "px")
-                                : undefined,
-                            zIndex: isFrozen ? 1 : 0,
-                            backgroundColor: index % 2 === 0 ? "#f7f7f7" : "white",
-                            // overflow: "hidden",
-                            textOverflow: "ellipsis",
-                        } }, typeof header.accessor_function === "function" &&
-                        header.accessor_key in row
-                        ? header.accessor_function(row[header.accessor_key])
-                        : row[header.accessor_key])));
-                }))); })))),
-        react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", mt: 4 },
-            isVisiblity && (react_1.default.createElement(react_2.Flex, { mr: 4 },
-                react_1.default.createElement(react_2.Menu, null,
-                    react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rightIcon: react_1.default.createElement(icons_1.ChevronDownIcon, null), colorScheme: "blue", variant: "outline" }, "Visiblity"),
-                    react_1.default.createElement(react_2.MenuList, { height: 150, overflow: "scroll", zIndex: "2" }, headers.map(function (header, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index },
-                        react_1.default.createElement(react_2.Checkbox, { isChecked: visibleColumns[header.label], onChange: function () {
-                                return handleColumnVisibilityChange(header.label);
-                            } }, header.label))); }))))),
-            react_1.default.createElement(react_2.Text, { mr: 4 },
-                startRow + 1,
-                " to ",
-                endRow,
-                " of ",
-                filteredData.length),
-            react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, mr: 4, width: 20 }, pageSizeOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, size)); })),
-            react_1.default.createElement(react_2.Flex, null,
-                react_1.default.createElement(react_2.Button, { mx: 1, disabled: currentPage === 0, onClick: function () { return setCurrentPage(0); } }, "<<"),
-                react_1.default.createElement(react_2.Button, { mx: 1, disabled: currentPage === 0, onClick: function () { return currentPage > 0 && setCurrentPage(currentPage - 1); } }, "<"),
-                react_1.default.createElement(react_2.Text, { mx: 1, mt: 2 },
-                    "Page ",
-                    currentPage + 1,
-                    " of ",
-                    pages),
-                react_1.default.createElement(react_2.Button, { mx: 1, disabled: currentPage > pages, onClick: function () {
-                        return currentPage < pages - 1 && setCurrentPage(currentPage + 1);
-                    } }, ">"),
-                react_1.default.createElement(react_2.Button, { mx: 1, disabled: currentPage >= pages - 1, onClick: function () { return setCurrentPage(pages - 1); } }, ">>")))));
+        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,
+            } },
+            react_1.default.createElement(RenderTable, { columns: columns })),
+        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 })));
 }
 exports.default = Table;

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

@@ -1,34 +1,37 @@
-import { ReactNode } from "react";
+/// <reference types="react" />
 export type TableProps = {
     data: DataObject[];
-    headers: TableHeader[];
-    tableHeaderBgColor?: string;
-    tableHeaderColor?: string;
+    columns: TableHeaderProps[];
     handleExportChange?: (value: string) => void | undefined;
     exportOptions?: ExportOption[];
     exportLabel?: string;
     isLoading?: boolean;
-    loadingType?: "skeleton" | "spinner";
-    loadingContaxt?: ReactNode;
-    loadingBoxStyle?: React.CSSProperties;
     isVisiblity?: boolean;
+    isCheckbox?: boolean;
+    headerBgColor?: string;
+    freezedBgColor?: string;
+    headerTextColor?: string;
+    freezedTextColor?: string;
+    tableBorderColor?: string;
+    noBorders?: boolean;
+    onSelection?: (selected: (string | number)[]) => void;
 };
 export type DataObject = {
-    id: number;
-    name: string;
-    email: string;
-    role: string;
     [key: string]: string | number;
 };
-export type TableHeader = {
+export type TableHeaderProps = {
     label: string;
-    accessor_key: string;
-    sort?: boolean;
-    search?: boolean;
-    columnFreeze?: boolean;
-    accessor_function?: (data: string | number) => JSX.Element | string | number;
+    id: string;
+    isSort?: boolean;
+    isSearch?: boolean;
+    isFreeze?: boolean;
+    node?: (data: DataObject) => JSX.Element | string | number | undefined;
 };
 export type ExportOption = {
     label: string;
     id: string;
 };
+export type ColumnSortingProps = {
+    column: string;
+    direction: "asc" | "desc" | "none";
+};

package/dist/Layout.js

@@ -58,6 +58,7 @@ var toster_1 = __importDefault(require("./Pages/toster"));
 var input_1 = __importDefault(require("./Pages/input"));
 var KaTableExample_1 = __importDefault(require("./Pages/KaTableExample"));
 var alertdialog_1 = __importDefault(require("./Pages/alertdialog"));
+var table_1 = require("./Pages/table");
 var Layout = function () {
     var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
     var navigate = function (path) {
@@ -135,6 +136,8 @@ var Layout = function () {
                 return react_2.default.createElement(toster_1.default, null);
             case "/input":
                 return react_2.default.createElement(input_1.default, null);
+            case "/table":
+                return react_2.default.createElement(table_1.TableExample, null);
             case "/":
             default:
         }
@@ -171,7 +174,8 @@ var Layout = function () {
             react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/modal"); } }, "Modal"),
             react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/checkbox"); } }, "Checkbox"),
             react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/toster"); } }, "Toster"),
-            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/input"); } }, "Input")),
+            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/input"); } }, "Input"),
+            react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); } }, "Table")),
         react_2.default.createElement("br", null),
         react_2.default.createElement("br", null),
         renderPage()));

package/dist/Pages/table.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const TableExample: () => React.JSX.Element;

package/dist/Pages/table.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableExample = void 0;
+var react_1 = __importDefault(require("react"));
+var Table_1 = __importDefault(require("../Components/Table/Table"));
+var tableData = [
+    {
+        id: 1,
+        name: "John Doe",
+        age: 30,
+        gender: "Male",
+    },
+    {
+        id: 2,
+        name: "Jane Doe",
+        age: 25,
+        gender: "Female",
+    },
+    {
+        id: 3,
+        name: "Bob Smith",
+        age: 40,
+        gender: "Male",
+    },
+];
+var column = [
+    {
+        label: "Name",
+        id: "name",
+        isFreeze: true,
+        isSort: true,
+    },
+    {
+        label: "Age",
+        id: "age",
+        isFreeze: false,
+        isSort: true,
+    },
+    {
+        label: "Gender",
+        id: "gender",
+    },
+    {
+        label: "Action",
+        id: "action",
+        isVisiblity: true,
+        node: function (props) {
+            return props.name;
+        },
+    },
+];
+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 (dd) { return console.log(dd); } })));
+};
+exports.TableExample = TableExample;

package/dist/Utils/common.d.ts

@@ -3,3 +3,5 @@ export declare function SortMultiColumnData(data: Record<string, any>[], sortCon
     direction: string;
 }[]): Record<string, any>[];
 export declare const getPreviousColumnWidth: (columns: any, key: any) => any;
+export declare const getFieldType: (header: string, data: any) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+export declare const calculateLeftOffset: (columns: number[], index: number) => number;

package/dist/Utils/common.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.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
+exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
 function SortMultiColumnData(data, sortConfig) {
     if (!sortConfig.length)
         return data;
@@ -39,3 +39,26 @@ 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];
+        if (row[header] !== null) {
+            return typeof row[header];
+        }
+    }
+    return "string";
+};
+exports.getFieldType = getFieldType;
+var calculateLeftOffset = function (columns, index) {
+    return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
+};
+exports.calculateLeftOffset = calculateLeftOffset;

package/dist/Utils/table.d.ts

@@ -0,0 +1,9 @@
+import { KaTableProps } from "../Components/KaTable/KaTableProps";
+import { DataObject } from "../Components/Table/TableProps";
+export declare function SortMultiColumnData(data: Record<string, string | number>[], sortConfig: {
+    column: string;
+    direction: string;
+}[]): 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;

package/dist/Utils/table.js

@@ -0,0 +1,64 @@
+"use strict";
+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 });
+exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
+function SortMultiColumnData(data, sortConfig) {
+    if (!sortConfig.length)
+        return data;
+    return __spreadArray([], data, true).sort(function (a, b) {
+        for (var _i = 0, sortConfig_1 = sortConfig; _i < sortConfig_1.length; _i++) {
+            var _a = sortConfig_1[_i], column = _a.column, direction = _a.direction;
+            if (direction === "none") {
+                continue;
+            }
+            var dirMultiplier = direction === "asc" ? 1 : -1;
+            // Compare values for the current column
+            if (a[column] < b[column])
+                return -1 * dirMultiplier;
+            if (a[column] > b[column])
+                return 1 * dirMultiplier;
+            // If values are equal, continue to the next sorting rule
+        }
+        return 0; // Return 0 if all sort conditions are equal
+    });
+}
+exports.SortMultiColumnData = SortMultiColumnData;
+var getPreviousColumnWidth = function (columns, key) {
+    var index = columns === null || columns === void 0 ? void 0 : columns.findIndex(function (column) { return column.key === key; });
+    if (index > 0) {
+        return columns[index - 1].width;
+    }
+    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];
+        if (row[header] !== null) {
+            return typeof row[header];
+        }
+    }
+    return "string";
+};
+exports.getFieldType = getFieldType;
+var calculateLeftOffset = function (columns, index) {
+    return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
+};
+exports.calculateLeftOffset = calculateLeftOffset;

package/package.json

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