pixelize-design-library 1.1.33 → 1.1.35

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/Constants/Sidebar.d.ts

@@ -0,0 +1,15 @@
+export declare const FlexCss: {
+    "&::-webkit-scrollbar": {
+        width: string;
+    };
+    "&::-webkit-scrollbar-track": {
+        background: string;
+    };
+    "&::-webkit-scrollbar-thumb": {
+        background: string;
+        transition: string;
+    };
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: string;
+    };
+};

package/dist/Constants/Sidebar.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexCss = void 0;
+exports.FlexCss = {
+    "&::-webkit-scrollbar": {
+        width: "3px",
+    },
+    "&::-webkit-scrollbar-track": {
+        background: "transparent",
+    },
+    "&::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        transition: "background 0.5s",
+    },
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: "#888",
+    },
+};

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()));