pixelize-design-library 1.1.59 → 1.1.61

package/dist/Components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { ButtonProps } from "./ButtonProps";
-declare function Button({ label, width, onClick, color, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, }: ButtonProps): React.JSX.Element;
+declare function Button({ label, onClick, color, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, sx, }: ButtonProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Button>;
 export default _default;

package/dist/Components/Button/Button.js

@@ -38,8 +38,9 @@ var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function Button(_a) {
-    var label = _a.label, _b = _a.width, width = _b === void 0 ? "100%" : _b, onClick = _a.onClick, color = _a.color, _c = _a.variant, variant = _c === void 0 ? "solid" : _c, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, _f = _a.loadingText, loadingText = _f === void 0 ? "Loading" : _f, type = _a.type;
+    var label = _a.label, onClick = _a.onClick, color = _a.color, _b = _a.variant, variant = _b === void 0 ? "solid" : _b, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type, sx = _a.sx;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var buttonColor = !color ? theme.colors.primary[500] : color;
     var variantStyles = {
         solid: {
             backgroundColor: theme.colors.primary[500],
@@ -77,7 +78,7 @@ function Button(_a) {
         },
     };
     var appliedVariantStyle = !color ? variantStyles[variant] : {};
-    return (react_1.default.createElement(react_2.Button, __assign({ type: type, onClick: onClick, width: width, colorScheme: color, variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon }, appliedVariantStyle),
+    return (react_1.default.createElement(react_2.Button, __assign({ type: type, onClick: onClick, width: "fit-content", colorScheme: buttonColor, variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon }, appliedVariantStyle, { sx: sx }),
         react_1.default.createElement(react_2.Box, { sx: {
                 overflow: "hidden",
                 textOverflow: "ellipsis",

package/dist/Components/Button/ButtonProps.d.ts

@@ -1,9 +1,9 @@
 import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
-export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "colorScheme" | "spinner"> & {
+export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "colorScheme" | "spinner" | "sx"> & {
     label?: string;
     width?: string | number;
     size?: "lg" | "md" | "sm" | "xs";
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
-    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    color?: string;
     type?: "button" | "submit" | "reset";
 };

package/dist/Components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { CheckboxProps } from "./CheckboxProps";
-export default function CheckBox({ label, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, }: CheckboxProps): React.JSX.Element;
+export default function CheckBox({ label, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, }: CheckboxProps): React.JSX.Element;

package/dist/Components/Checkbox/Checkbox.js

@@ -5,8 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function CheckBox(_a) {
-    var label = _a.label, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked;
-    return (react_1.default.createElement(react_2.Checkbox, { spacing: spacing, isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked }, label));
+    var label = _a.label, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, sx = _a.sx;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Checkbox, { spacing: spacing, isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], sx: sx }, label));
 }
 exports.default = CheckBox;

package/dist/Components/Checkbox/CheckboxProps.d.ts

@@ -1,5 +1,5 @@
 import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
-export type CheckboxProps = Pick<ChakraButtonProps, 'spacing' | 'isInvalid' | 'size' | 'iconColor' | 'iconSize' | 'isChecked' | 'isIndeterminate' | 'onChange' | 'isDisabled' | 'value' | 'defaultChecked'> & {
+export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx"> & {
     label?: string;
     width?: string | number;
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";

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

@@ -1,16 +1,14 @@
 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 | number) => void;
     setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
     dataLength: number;
     isServerPagination: boolean;
 };
-declare const Pagination: ({ isVisiblity, columns, visibleColumns, paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, handleColumnVisibilityChange, setCurrentPage, dataLength, isServerPagination, }: PaginationProps) => React.JSX.Element;
+declare const Pagination: ({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, }: PaginationProps) => React.JSX.Element;
 export default Pagination;

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

@@ -4,23 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (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 table_1 = require("../../../Utils/table");
 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, isServerPagination = _a.isServerPagination;
-    var pageSizeOptions = [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 75, 100].filter(function (size) { return size <= dataLength; });
+    var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination;
+    var pageSizeOptions = (0, table_1.pageSizeCalculation)(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),
         !isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, mr: 4, size: "xs", width: 20 },
-            react_1.default.createElement("option", { value: 0 }),
+            dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
             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); } },

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

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

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

@@ -35,7 +35,7 @@ var fa_1 = require("react-icons/fa");
 var TableActions_1 = __importDefault(require("./TableActions"));
 var TableBody = function (_a) {
     var _b;
-    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, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze;
+    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, endRow = _a.endRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _c = (0, react_2.useState)(new Set()), expandedRows = _c[0], setExpandedRows = _c[1];
     var toggleRowExpansion = function (rowIndex) {
@@ -75,18 +75,14 @@ var TableBody = function (_a) {
         var row = _a.row, bgcolor = _a.bgcolor;
         return (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: isActionFreeze ? freezedBgColor : bgcolor, color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))));
     }, [freezedBgColor, freezedTextColor, noBorders, theme.colors, isActionFreeze]);
+    var totalVisibleColumns = Object.values(columns).filter(function (o) { return !o.isHidden; }).length +
+        (isCheckbox ? 1 : 0) +
+        (isContent ? 1 : 0) +
+        (isLink ? 1 : 0);
     if (isLoading) {
-        var totalVisibleColumns = Object.values(visibleColumns).filter(Boolean).length +
-            (isCheckbox ? 1 : 0) +
-            (isContent ? 1 : 0) +
-            (isLink ? 1 : 0);
         return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300] }));
     }
     if (data.length === 0) {
-        var totalVisibleColumns = Object.values(visibleColumns).filter(Boolean).length +
-            (isCheckbox ? 1 : 0) +
-            (isContent ? 1 : 0) +
-            (isLink ? 1 : 0);
         return (react_2.default.createElement(react_1.Tr, { backgroundColor: theme.colors.white },
             react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 4 },
                 react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14 },
@@ -109,6 +105,8 @@ var TableBody = function (_a) {
                 isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
                 columns.map(function (header, headerIndex) {
                     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                    if (header.isHidden)
+                        return null;
                     var isFrozen = header.isFreeze;
                     var leftOffset = isFrozen
                         ? (0, table_1.calculateLeftOffset)(columnWidths, headerIndex) +
@@ -135,7 +133,7 @@ var TableBody = function (_a) {
                         rowBgColor = (_h = row.rowStyle) === null || _h === void 0 ? void 0 : _h.bg;
                         rowTextColor = (_j = row.rowStyle) === null || _j === void 0 ? void 0 : _j.color;
                     }
-                    return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, key: headerIndex + 1, onClick: function () {
+                    return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, key: headerIndex + 1, onClick: function () {
                             return !header.node
                                 ? handleRowClick(row, {
                                     label: header.label,
@@ -149,7 +147,7 @@ var TableBody = function (_a) {
                             : {
                                 backgroundColor: theme.colors.gray[100],
                             } },
-                        react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.node ? header.node(row) : row[header.id]))));
+                        react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.node ? header.node(row) : row[header.id])));
                 }),
                 isLink && react_2.default.createElement(RenderView, { row: row, bgcolor: freezeViewColor })),
             row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,

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

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

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

@@ -47,7 +47,7 @@ var lu_1 = require("react-icons/lu");
 var TableFilters_1 = __importDefault(require("./TableFilters"));
 var TableHeader = function (_a) {
     var _b;
-    var columns = _a.columns, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch;
+    var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var RenderCheckbox = (0, react_2.useCallback)(function () {
         var _a;
@@ -84,7 +84,11 @@ var TableHeader = function (_a) {
     return (react_2.default.createElement(react_1.Tr, { pr: 0 },
         isContent && react_2.default.createElement(RenderConent, null),
         isCheckbox && react_2.default.createElement(RenderCheckbox, null),
-        columns.map(function (header, index) { return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, visibleColumns: visibleColumns, headerBgColor: headerBgColor, headerTextColor: headerTextColor, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch })); }),
+        columns.map(function (header, index) {
+            if (header === null || header === void 0 ? void 0 : header.isHidden)
+                return null;
+            return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, headerTextColor: headerTextColor, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }));
+        }),
         isLink && react_2.default.createElement(RenderView, null)));
 };
 exports.default = (0, react_2.memo)(TableHeader);
@@ -98,7 +102,7 @@ var SortingIcon = (0, react_2.memo)(function (_a) {
 });
 var ColumnHeader = (0, react_2.memo)(function (_a) {
     var _b;
-    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort;
+    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort;
     var _c = (0, react_2.useState)(false), isHovered = _c[0], setIsHovered = _c[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var isFrozen = header.isFreeze;
@@ -143,7 +147,7 @@ var ColumnHeader = (0, react_2.memo)(function (_a) {
     }, [handleSort]);
     var isFiltersEnabled = (isHovered && header.isSort) ||
         ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none");
-    return visibleColumns[header.label] ? (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", color: TextColor, fontSize: 14, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: BgColor, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 41, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+    return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", color: TextColor, fontSize: 14, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: BgColor, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 41, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
         react_2.default.createElement(react_1.Box, { display: "flex", color: TextColor, justifyContent: "space-between", alignItems: "center", position: "relative" },
             react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.label),
             react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center" },
@@ -154,5 +158,5 @@ var ColumnHeader = (0, react_2.memo)(function (_a) {
                             return (__assign(__assign({}, prev), (_a = {}, _a[header.id] = searchVal, _a)));
                         });
                     }, columnsSearch: columnsSearch[header.id] || "", onClose: function () { return setIsHovered(false); } })),
-            react_2.default.createElement("div", { className: "resize-handle", onMouseDown: handleMouseDown })))) : (react_2.default.createElement(react_2.default.Fragment, null));
+            react_2.default.createElement("div", { className: "resize-handle", onMouseDown: handleMouseDown }))));
 });

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

@@ -13,7 +13,7 @@ type UseTableProps = {
     isServerPagination: boolean;
     totalRecords: number;
 };
-declare const useTable: ({ tableBorderColor, data, isPagination, selections, columns, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, }: UseTableProps) => {
+declare const useTable: ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, }: UseTableProps) => {
     tableData: DataObject[];
     tableContainerStyles: {
         borderRadius: string;
@@ -27,7 +27,6 @@ declare const useTable: ({ tableBorderColor, data, isPagination, selections, col
     isLink: boolean;
     headerRefs: import("react").MutableRefObject<(HTMLTableCellElement | null)[]>;
     columnWidths: number[];
-    visibleColumns: Record<string, boolean>;
     handleSort: (field: string | number, sort: "asc" | "desc" | "none") => void;
     handleCheckbox: (id: string | number) => void;
     filteredData: DataObject[];
@@ -35,11 +34,12 @@ declare const useTable: ({ tableBorderColor, data, isPagination, selections, col
     endRow: number;
     selection: (string | number)[];
     columnsSort: ColumnSortingProps[];
-    handleColumnVisibilityChange: (header: string | number) => void;
     handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
     pages: number;
     currentPage: number;
     rowsPerPage: number;
     setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    columnsList: TableHeaderProps[];
+    handleColumnPreferences: (columns: any) => void;
 };
 export default useTable;

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

@@ -25,7 +25,7 @@ var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var table_1 = require("../../../Utils/table");
 var defaultPageSize = 50;
 var useTable = function (_a) {
-    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, columns = _a.columns, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords;
+    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var headerRefs = (0, react_1.useRef)([]);
     var _b = (0, react_1.useState)([]), columnWidths = _b[0], setColumnWidths = _b[1];
@@ -33,22 +33,20 @@ var useTable = function (_a) {
     var _d = (0, react_1.useState)([]), columnsSort = _d[0], setColumnsSort = _d[1];
     var _e = (0, react_1.useState)(0), currentPage = _e[0], setCurrentPage = _e[1];
     var _f = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
-    var _g = (0, react_1.useState)({}), visibleColumns = _g[0], setVisibleColumns = _g[1];
     var tableData = (0, react_1.useMemo)(function () { return data; }, [data]);
-    var _h = (0, react_1.useState)(tableData), filteredData = _h[0], setFilteredData = _h[1];
+    var _g = (0, react_1.useState)(tableData), filteredData = _g[0], setFilteredData = _g[1];
+    var _h = (0, react_1.useState)(columns), columnsList = _h[0], setColumnsList = _h[1];
+    (0, react_1.useEffect)(function () {
+        if (tablePreferences) {
+            var columnPreference = tablePreferences.columns;
+            if (columnPreference === null || columnPreference === void 0 ? void 0 : columnPreference.length) {
+                setColumnsList(columnPreference);
+            }
+        }
+    }, [tablePreferences]);
     (0, react_1.useEffect)(function () {
         setFilteredData(tableData);
     }, [tableData]);
-    (0, react_1.useEffect)(function () {
-        var _a;
-        var nonVisibility = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.nonVisibility) !== null && _a !== void 0 ? _a : [];
-        var column = columns.reduce(function (acc, curr) {
-            var _a;
-            var _b;
-            return (__assign(__assign({}, acc), (_a = {}, _a[curr.label] = !nonVisibility.includes((_b = curr.id) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase()), _a)));
-        }, {});
-        setVisibleColumns(column);
-    }, [columns, tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.nonVisibility]);
     var tableContainerStyles = (0, react_1.useMemo)(function () {
         var _a;
         return ({
@@ -133,14 +131,10 @@ var useTable = function (_a) {
         setSelection(selectedItems);
         onSelection && onSelection(selectedItems);
     }, [onSelection, selection, tableData]);
-    var handleColumnVisibilityChange = function (header) {
-        var _a;
-        var visibility = __assign(__assign({}, visibleColumns), (_a = {}, _a[header] = !visibleColumns[header], _a));
-        setVisibleColumns(visibility);
+    var handleColumnPreferences = function (columns) {
+        setColumnsList(columns);
         savePreferences &&
-            savePreferences(__assign(__assign({}, tablePreferences), { nonVisibility: Object.keys(visibility)
-                    .filter(function (key) { return !visibility[key]; })
-                    .map(function (item) { return item.toLowerCase(); }) }));
+            savePreferences(__assign(__assign({}, tablePreferences), { columns: columns }));
     };
     return {
         tableData: tableData,
@@ -149,7 +143,6 @@ var useTable = function (_a) {
         isLink: isLink,
         headerRefs: headerRefs,
         columnWidths: columnWidths,
-        visibleColumns: visibleColumns,
         handleSort: handleSort,
         handleCheckbox: handleCheckbox,
         filteredData: filteredData,
@@ -157,12 +150,13 @@ var useTable = function (_a) {
         endRow: endRow,
         selection: selection,
         columnsSort: columnsSort,
-        handleColumnVisibilityChange: handleColumnVisibilityChange,
         handlePageSizeChange: handlePageSizeChange,
         pages: pages,
         currentPage: currentPage,
         rowsPerPage: rowsPerPage,
         setCurrentPage: setCurrentPage,
+        columnsList: columnsList,
+        handleColumnPreferences: handleColumnPreferences,
     };
 };
 exports.default = useTable;

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableProps } from "./TableProps";
 import "./Table.css";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -37,19 +37,20 @@ var useTable_1 = __importDefault(require("./Components/useTable"));
 require("./Table.css");
 var table_1 = require("../../Utils/table");
 var usePreferences_1 = require("../../Hooks/usePreferences");
+var TableSettings_1 = __importDefault(require("./TableSettings/TableSettings"));
 function Table(_a) {
     var _b, _c, _d;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _e = _a.isCheckbox, isCheckbox = _e === void 0 ? false : _e, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _f = _a.noBorders, noBorders = _f === void 0 ? false : _f, _g = _a.isPagination, isPagination = _g === void 0 ? true : _g, onRowClick = _a.onRowClick, selections = _a.selections, _h = _a.isActionFreeze, isActionFreeze = _h === void 0 ? true : _h, _j = _a.preferencesUrl, preferencesUrl = _j === void 0 ? "https://pixelize.memron.net:5001/api/UserPreference" : _j, _k = _a.preferencesKey, preferencesKey = _k === void 0 ? "" : _k, _l = _a.preferencesName, preferencesName = _l === void 0 ? "" : _l, _m = _a.preferencesPage, preferencesPage = _m === void 0 ? "" : _m, _o = _a.authToken, authToken = _o === void 0 ? "" : _o, _p = _a.paginationMode, paginationMode = _p === void 0 ? "client" : _p, _q = _a.noOfRowsPerPage, noOfRowsPerPage = _q === void 0 ? 50 : _q, _r = _a.totalRecords, totalRecords = _r === void 0 ? 0 : _r, onPagination = _a.onPagination;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _e = _a.isCheckbox, isCheckbox = _e === void 0 ? false : _e, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _f = _a.noBorders, noBorders = _f === void 0 ? false : _f, _g = _a.isPagination, isPagination = _g === void 0 ? true : _g, onRowClick = _a.onRowClick, selections = _a.selections, _h = _a.isActionFreeze, isActionFreeze = _h === void 0 ? true : _h, _j = _a.preferencesUrl, preferencesUrl = _j === void 0 ? "" : _j, _k = _a.preferencesKey, preferencesKey = _k === void 0 ? "" : _k, _l = _a.preferencesName, preferencesName = _l === void 0 ? "" : _l, _m = _a.preferencesPage, preferencesPage = _m === void 0 ? "" : _m, _o = _a.authToken, authToken = _o === void 0 ? "" : _o, _p = _a.paginationMode, paginationMode = _p === void 0 ? "client" : _p, _q = _a.noOfRowsPerPage, noOfRowsPerPage = _q === void 0 ? 50 : _q, _r = _a.totalRecords, totalRecords = _r === void 0 ? 0 : _r, onPagination = _a.onPagination, _s = _a.isTableSettings, isTableSettings = _s === void 0 ? false : _s;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _s = (0, react_1.useState)({}), columnsSearch = _s[0], setColumnsSearch = _s[1];
+    var _t = (0, react_1.useState)({}), columnsSearch = _t[0], setColumnsSearch = _t[1];
     var isServerPagination = paginationMode === "server";
-    var _t = (0, usePreferences_1.useGetPreferences)({
+    var _u = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferencesUrl,
         page: preferencesPage,
         key: preferencesKey,
         name: preferencesName,
         authToken: authToken,
-    }), preferences = _t.preferences, loading = _t.loading;
+    }), preferences = _u.preferences, loading = _u.loading;
     var savePreferences = (0, usePreferences_1.useSavePreferences)({
         baseUrl: preferencesUrl,
         page: preferencesPage,
@@ -66,7 +67,7 @@ function Table(_a) {
         }
         return {};
     }, [preferences]);
-    var _u = (0, useTable_1.default)({
+    var _v = (0, useTable_1.default)({
         tableBorderColor: tableBorderColor,
         data: data,
         isPagination: isPagination,
@@ -78,7 +79,7 @@ function Table(_a) {
         noOfRowsPerPage: noOfRowsPerPage,
         totalRecords: totalRecords,
         isServerPagination: isServerPagination,
-    }), tableData = _u.tableData, tableContainerStyles = _u.tableContainerStyles, isContent = _u.isContent, isLink = _u.isLink, headerRefs = _u.headerRefs, columnWidths = _u.columnWidths, visibleColumns = _u.visibleColumns, handleSort = _u.handleSort, handleCheckbox = _u.handleCheckbox, filteredData = _u.filteredData, startRow = _u.startRow, endRow = _u.endRow, selection = _u.selection, columnsSort = _u.columnsSort, currentPage = _u.currentPage, pages = _u.pages, rowsPerPage = _u.rowsPerPage, handleColumnVisibilityChange = _u.handleColumnVisibilityChange, handlePageSizeChange = _u.handlePageSizeChange, setCurrentPage = _u.setCurrentPage;
+    }), tableData = _v.tableData, tableContainerStyles = _v.tableContainerStyles, isContent = _v.isContent, isLink = _v.isLink, headerRefs = _v.headerRefs, columnWidths = _v.columnWidths, handleSort = _v.handleSort, handleCheckbox = _v.handleCheckbox, filteredData = _v.filteredData, startRow = _v.startRow, endRow = _v.endRow, selection = _v.selection, columnsSort = _v.columnsSort, currentPage = _v.currentPage, pages = _v.pages, rowsPerPage = _v.rowsPerPage, handlePageSizeChange = _v.handlePageSizeChange, setCurrentPage = _v.setCurrentPage, columnsList = _v.columnsList, handleColumnPreferences = _v.handleColumnPreferences;
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
@@ -88,16 +89,17 @@ function Table(_a) {
         }
     }, [currentPage, onPagination, noOfRowsPerPage]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
+        isTableSettings && (react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); } })),
         react_1.default.createElement(react_2.TableContainer, { sx: tableContainerStyles },
             react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "table_wrapper" },
                 react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 2 },
-                    react_1.default.createElement(TableHeader_1.default, { columns: columns, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], visibleColumns: visibleColumns, handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
+                    react_1.default.createElement(TableHeader_1.default, { columns: columnsList, 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], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
                             ? true
                             : selection.length === 0
                                 ? false
                                 : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
                 react_1.default.createElement(react_3.Tbody, null,
-                    react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columns, startRow: startRow, endRow: endRow, visibleColumns: visibleColumns, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze })))),
-        (isPagination || isServerPagination) && (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(isServerPagination ? totalRecords : tableData.length), handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, visibleColumns: visibleColumns, handleColumnVisibilityChange: handleColumnVisibilityChange, isVisiblity: true }))));
+                    react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze })))),
+        (isPagination || isServerPagination) && (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(isServerPagination ? totalRecords : tableData.length), handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, isVisiblity: true }))));
 }
 exports.default = Table;

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

@@ -28,6 +28,7 @@ export type TableProps = {
     noOfRowsPerPage?: number;
     totalRecords?: number;
     onPagination?: (page: number, noOfRecords: number) => void;
+    isTableSettings?: boolean;
 };
 export type DataObject = {
     [key: string]: string | number | any;
@@ -38,6 +39,7 @@ export type TableHeaderProps = {
     isSort?: boolean;
     isSearch?: boolean;
     isFreeze?: boolean;
+    isHidden?: boolean;
     node?: (data: DataObject) => JSX.Element | string | number | undefined;
 };
 export type ExportOption = {
@@ -49,7 +51,6 @@ export type ColumnSortingProps = {
     direction: "asc" | "desc" | "none";
 };
 export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
-    visibleColumns: Record<string, boolean>;
     handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
     activeHeader?: string | null;
     isPopoverOpen?: boolean;
@@ -67,7 +68,6 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     columnsSearch: Record<string, string>;
 };
 export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "onRowClick" | "isActionFreeze"> & {
-    visibleColumns: Record<string, boolean>;
     startRow: number;
     endRow: number;
     columnWidths: number[];
@@ -82,7 +82,7 @@ export type TableFiltersProps = {
     columnsSearch: string;
     onClose: () => void;
 };
-export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "visibleColumns" | "columnsSort"> & {
+export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
     header: TableHeaderProps;
     index: number;
     columnWidths: number[];

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { TableProps } from "../TableProps";
+type ManageColumnsMethods = {
+    getManageColumnsData: () => TableProps["columns"];
+};
+declare const ManageColumns: ({ columns, childInputMethodsRef, }: {
+    columns: TableProps["columns"];
+    childInputMethodsRef: React.Ref<ManageColumnsMethods>;
+}) => React.JSX.Element;
+export default ManageColumns;

package/dist/Components/Table/TableSettings/ManageColumns.js

@@ -0,0 +1,111 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var rx_1 = require("react-icons/rx");
+var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var ManageColumns = function (_a) {
+    var columns = _a.columns, childInputMethodsRef = _a.childInputMethodsRef;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _b = (0, react_1.useState)(columns.map(function (o) { return (__assign(__assign({}, o), { isHidden: !o.isHidden })); })), items = _b[0], setItems = _b[1];
+    var _c = (0, react_1.useState)(""), searchTerm = _c[0], setSearchTerm = _c[1];
+    var _d = (0, react_1.useState)(null), draggedItemIndex = _d[0], setDraggedItemIndex = _d[1];
+    (0, react_1.useImperativeHandle)(childInputMethodsRef, function () {
+        return {
+            getManageColumnsData: function () {
+                return items.map(function (o) { return (__assign(__assign({}, o), { isHidden: !o.isHidden })); });
+            },
+        };
+    }, [items]);
+    var handleDragStart = function (index) {
+        setDraggedItemIndex(index);
+    };
+    var handleDragOver = function (e, index) {
+        e.preventDefault();
+        if (draggedItemIndex === null || draggedItemIndex === index)
+            return;
+        var newItems = __spreadArray([], items, true);
+        var draggedItem = newItems[draggedItemIndex];
+        newItems.splice(draggedItemIndex, 1);
+        newItems.splice(index, 0, draggedItem);
+        setDraggedItemIndex(index);
+        setItems(newItems);
+    };
+    var handleDragEnd = function () {
+        setDraggedItemIndex(null);
+    };
+    var toggleCheckbox = function (index) {
+        var newItems = __spreadArray([], items, true);
+        newItems[index].isHidden = !newItems[index].isHidden;
+        setItems(newItems);
+    };
+    var filteredItems = items.filter(function (item) {
+        return item.label.toString().toLowerCase().includes(searchTerm.toLowerCase());
+    });
+    return (react_1.default.createElement(react_2.Box, { mt: "5" },
+        react_1.default.createElement(react_2.Input, { placeholder: "Search", mb: "4", value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); } }),
+        !searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: "2" },
+            react_1.default.createElement(Checkbox_1.default, { isChecked: items.every(function (item) { return item.isHidden; }), onChange: function () {
+                    var allChecked = items.every(function (item) { return item.isHidden; });
+                    setItems(items.map(function (item) { return (__assign(__assign({}, item), { isHidden: !allChecked })); }));
+                } }),
+            react_1.default.createElement(react_2.Text, { ml: "2", fontSize: 14 }, "Select all"))),
+        react_1.default.createElement(react_2.List, { spacing: "2" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: item.id, draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center", justifyContent: "space-between", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14 },
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(rx_1.RxDragHandleDots2, null), variant: "ghost", cursor: "grab", mr: "8" }),
+            react_1.default.createElement(Checkbox_1.default, { isChecked: item.isHidden, onChange: function () { return toggleCheckbox(index); }, sx: {
+                    position: "absolute",
+                    left: 50,
+                    padding: "10px 20px 10px 30px",
+                    width: 60,
+                    translate: "-40px",
+                } }),
+            react_1.default.createElement(react_2.Text, { flex: "1" }, item.label))); })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center" }, "No items found")))));
+};
+exports.default = ManageColumns;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { TableProps } from "../TableProps";
+declare const TableSettings: ({ columns, onSave, }: {
+    columns: TableProps["columns"];
+    onSave: (updatedColumns: TableProps["columns"]) => void;
+}) => React.JSX.Element;
+export default TableSettings;

package/dist/Components/Table/TableSettings/TableSettings.js

@@ -0,0 +1,73 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importStar(require("react"));
+var ManageColumns_1 = __importDefault(require("./ManageColumns"));
+var io5_1 = require("react-icons/io5");
+var Button_1 = __importDefault(require("../../Button/Button"));
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var TableSettings = function (_a) {
+    var columns = _a.columns, onSave = _a.onSave;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var childInputMethodsRef = (0, react_2.useRef)({});
+    var _b = (0, react_2.useState)(false), settingsOpen = _b[0], setSettingsOpen = _b[1];
+    var _c = (0, react_2.useState)(0), selectedIndex = _c[0], setSelectedIndex = _c[1];
+    return (react_2.default.createElement(react_1.Box, null,
+        react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", mb: 1 },
+            react_2.default.createElement(react_1.IconButton, { onClick: function () { return setSettingsOpen(true); }, "aria-label": "Table Settings", border: "1px solid ".concat(theme.colors.gray[300]) },
+                react_2.default.createElement(io5_1.IoSettingsOutline, { fontSize: 18 }))),
+        react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
+            react_2.default.createElement(react_1.ModalOverlay, null),
+            react_2.default.createElement(react_1.ModalContent, { minW: "700px", minH: "600px" },
+                react_2.default.createElement(react_1.ModalHeader, null, "Table Settings"),
+                react_2.default.createElement(react_1.ModalCloseButton, null),
+                react_2.default.createElement(react_1.ModalBody, null,
+                    react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, orientation: "vertical", variant: "unstyled" },
+                        react_2.default.createElement(react_1.TabList, { whiteSpace: "nowrap", minWidth: 160, height: "fit-content" },
+                            react_2.default.createElement(react_1.Tab, { _selected: {
+                                    borderLeft: "2px solid ".concat(theme.colors.primary[600]),
+                                }, fontSize: "14px", justifyContent: "flex-start" }, "Manage columns")),
+                        react_2.default.createElement(react_1.TabPanels, null,
+                            react_2.default.createElement(react_1.TabPanel, null,
+                                react_2.default.createElement(ManageColumns_1.default, { columns: columns, childInputMethodsRef: childInputMethodsRef })),
+                            react_2.default.createElement(react_1.TabPanel, null,
+                                react_2.default.createElement(react_1.Text, null, "Font size settings")),
+                            react_2.default.createElement(react_1.TabPanel, null,
+                                react_2.default.createElement(react_1.Text, null, "Density settings")),
+                            react_2.default.createElement(react_1.TabPanel, null,
+                                react_2.default.createElement(react_1.Text, null, "Scrollbar settings"))))),
+                react_2.default.createElement(react_1.ModalFooter, null,
+                    react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, sx: { marginRight: "0.5rem" }, color: "gray" }),
+                    react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: function () {
+                            var _a, _b, _c;
+                            onSave((_c = (_b = (_a = childInputMethodsRef.current) === null || _a === void 0 ? void 0 : _a.getManageColumnsData) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : []);
+                            setSettingsOpen(false);
+                        } }))))));
+};
+exports.default = TableSettings;

package/dist/Hooks/usePreferences.js

@@ -46,6 +46,8 @@ var useSavePreferences = function (_a) {
     var _h = (0, react_1.useState)(null), error = _h[0], setError = _h[1];
     var savePreferences = function (data) {
         if (data === void 0) { data = {}; }
+        if (!baseUrl)
+            return;
         setLoading(true);
         fetch(baseUrl, {
             method: "POST",

package/dist/Utils/table.d.ts

@@ -9,3 +9,4 @@ export declare const getFieldType: (header: string, data: DataObject[]) => "stri
 export declare const calculateLeftOffset: (columns: number[], index: number) => number;
 export declare const searchAndSortData: (data: DataObject[], searchValues: Record<string, string>) => DataObject[];
 export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
+export declare const pageSizeCalculation: (records: number) => number[];

package/dist/Utils/table.js

@@ -9,7 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.debounce = exports.searchAndSortData = exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
+exports.pageSizeCalculation = exports.debounce = exports.searchAndSortData = exports.calculateLeftOffset = exports.getFieldType = exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
 function SortMultiColumnData(data, sortConfig) {
     if (!sortConfig.length)
         return data;
@@ -96,3 +96,14 @@ function debounce(func, delay) {
     };
 }
 exports.debounce = debounce;
+var pageSizeCalculation = function (records) {
+    var pageSize = [5, 10];
+    if (records > 100) {
+        return [25, 50, 100];
+    }
+    else if (records > 50) {
+        return [5, 10, 20];
+    }
+    return pageSize;
+};
+exports.pageSizeCalculation = pageSizeCalculation;

package/package.json

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