pixelize-design-library 1.1.38 → 1.1.41

package/dist/Components/DatePicker/DatePicker.js

@@ -32,7 +32,7 @@ function DatePicker(_a) {
                     ? dateTimeFormat
                         ? dateTimeFormat
                         : "MM/dd/yyyy h:mm aa"
-                    : dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm", bg: theme.colors.backgroundColor.light, style: { border: error ? "1px solid #DC143C" : "" } }) })),
+                    : dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm", bg: theme.colors.backgroundColor.light, style: { border: error ? "2px solid #DC143C" : "" } }) })),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/ProfileCard/ProfileCard.d.ts

@@ -9,4 +9,4 @@ export declare const ProfileCardBody: React.FC<{
 export declare const ProfileCardFooter: React.FC<{
     children: React.ReactNode;
 }>;
-export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): React.JSX.Element;
+export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, CardHeaderStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): React.JSX.Element;

package/dist/Components/ProfileCard/ProfileCard.js

@@ -33,17 +33,19 @@ var ProfileCardFooter = function (_a) {
 };
 exports.ProfileCardFooter = ProfileCardFooter;
 function ProfileCard(_a) {
-    var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d, CardStyle = _a.CardStyle, borderTopColor = _a.borderTopColor, borderLeftColor = _a.borderLeftColor;
+    var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d, CardStyle = _a.CardStyle, CardHeaderStyle = _a.CardHeaderStyle, borderTopColor = _a.borderTopColor, borderLeftColor = _a.borderLeftColor;
     var isReactElement = function (child) {
         return child !== null && typeof child === "object" && "type" in child;
     };
     var header = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardHeader; });
     var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardBody; });
     var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardFooter; });
-    var StylesWithBorder = borderLeftColor ? __assign(__assign({}, CardStyle), { borderLeft: "2px solid #3182CE" }) : borderTopColor ? __assign(__assign({}, CardStyle), { borderTop: "2px solid #3182CE" }) : __assign({}, CardStyle);
+    var StylesWithBorder = borderLeftColor
+        ? __assign(__assign({}, CardStyle), { borderLeft: "2px solid #3182CE" }) : borderTopColor
+        ? __assign(__assign({}, CardStyle), { borderTop: "2px solid #3182CE" }) : __assign({}, CardStyle);
     return (react_1.default.createElement(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder },
         header && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.CardHeader, { style: { fontWeight: "bold" } }, header),
+            react_1.default.createElement(react_2.CardHeader, { sx: __assign(__assign({}, CardHeaderStyle), { fontWeight: "bold" }) }, header),
             react_1.default.createElement(react_2.Divider, { style: {
                     borderColor: dividercolor,
                     borderWidth: dividersize,

package/dist/Components/ProfileCard/ProfileCardProps.d.ts

@@ -9,6 +9,7 @@ export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" |
     dividersize?: string;
     dividervariant?: "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset";
     CardStyle?: React.CSSProperties;
+    CardHeaderStyle?: React.CSSProperties;
     borderTopColor?: boolean;
     borderLeftColor?: boolean;
 };

package/dist/Components/SelectSearch/SelectSearch.js

@@ -324,9 +324,6 @@ function SelectSearch(_a) {
     var filteredOptions = (0, react_1.useMemo)(function () {
         return options.filter(function (option) { var _a, _b; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes((_b = (inputValue !== null && inputValue !== void 0 ? inputValue : "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
     }, [options, inputValue]);
-    (0, react_1.useEffect)(function () {
-        setInputValue(searchQuery);
-    }, [searchQuery]);
     //   const handleOptionClick = useCallback(
     //     (option: selectOptions) => {
     //       if (isMultipleSelect) {

package/dist/Components/SideBar/SideBar.js

@@ -38,7 +38,7 @@ function Sidebar(_a) {
             return (react_1.default.createElement(react_2.Menu, { key: menu.title, placement: "right" },
                 react_1.default.createElement(react_2.Link, { backgroundColor: activeMenu === menu.title && !toggle
                         ? theme.colors.primary[500]
-                        : "none", 
+                        : "none", paddingLeft: toggle ? "" : "20px", 
                     // borderRadius={8}
                     _hover: {
                         textDecor: "none",
@@ -58,15 +58,15 @@ function Sidebar(_a) {
                     menu.subMenu.map(function (subMenuItem) { return (react_1.default.createElement(react_2.MenuItem, { key: subMenuItem.title }, subMenuItem.title)); })))));
         })));
     }, [activeMenu, menus, handleMenuClick, toggle, theme.colors]);
-    return (react_1.default.createElement(react_2.Flex, { pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: theme.colors.backgroundColor.light },
+    return (react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: theme.colors.backgroundColor.light },
         react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: "center", as: "nav", h: "100vh" },
             logo ? (react_1.default.createElement(react_2.Flex, { mt: 5, alignItems: "center", gap: 5 },
                 react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "45px", src: logo, alt: "Company Logo" }),
                 react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: 20, fontWeight: 800 }, companyName))) : (react_1.default.createElement(react_2.Box, { ml: "-8px", mt: 5, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" },
                 react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center" }, toggle ? companyName[0] : companyName))),
-            react_1.default.createElement(react_2.Flex, { position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
+            react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
                 react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(fi_1.FiChevronRight, { color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(fi_1.FiChevronLeft, { color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
-            react_1.default.createElement(react_2.Flex, { mt: 35, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
+            react_1.default.createElement(react_2.Flex, { mt: 50, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
                 react_1.default.createElement(RenderMenuItems, null)))));
 }
 exports.default = Sidebar;

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

@@ -7,7 +7,7 @@ type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
     rowsPerPage: number;
     currentPage: number;
     pages: number;
-    handleColumnVisibilityChange: (header: string) => void;
+    handleColumnVisibilityChange: (header: string | number) => void;
     setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
     dataLength: number;
 };

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, }: TableBodyPageProps) => React.JSX.Element;
+declare const TableBody: ({ data, isCheckbox, columns, visibleColumns, startRow, endRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, }: TableBodyPageProps) => React.JSX.Element;
 export default TableBody;

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

@@ -1,19 +1,78 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@chakra-ui/react");
-var react_2 = __importDefault(require("react"));
+var react_2 = __importStar(require("react"));
 var table_1 = require("../../../Utils/table");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var TableLoading_1 = require("./TableLoading");
+var fa_1 = require("react-icons/fa");
+var icons_1 = require("@chakra-ui/icons");
 var TableBody = function (_a) {
-    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, visibleColumns = _a.visibleColumns, startRow = _a.startRow, endRow = _a.endRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick;
+    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;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _c = (0, react_2.useState)(new Set()), expandedRows = _c[0], setExpandedRows = _c[1];
+    var toggleRowExpansion = function (rowIndex) {
+        setExpandedRows(function (prev) {
+            var newSet = new Set(prev);
+            if (newSet.has(rowIndex)) {
+                newSet.delete(rowIndex);
+            }
+            else {
+                newSet.add(rowIndex);
+            }
+            return newSet;
+        });
+    };
     var handleRowClick = function (row, header) {
         onRowClick && onRowClick(row, header);
     };
+    var RenderCheckbox = (0, react_2.useCallback)(function (_a) {
+        var _b;
+        var row = _a.row;
+        return (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
+            react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "subtle", onChange: function () { return handleCheckbox(row.id); }, isChecked: selections.includes(row.id) })));
+    }, [
+        freezedBgColor,
+        freezedTextColor,
+        handleCheckbox,
+        noBorders,
+        selections,
+        (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray,
+    ]);
+    var RenderContent = (0, react_2.useCallback)(function (_a) {
+        var _b, _c;
+        var isExpanded = _a.isExpanded, rowIndex = _a.rowIndex, isContent = _a.isContent;
+        return (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, isContent && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], icon: isExpanded ? (react_2.default.createElement(fa_1.FaAngleDown, { fontSize: 16 })) : (react_2.default.createElement(fa_1.FaAngleRight, { fontSize: 16 })), size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" }))));
+    }, [freezedBgColor, freezedTextColor, noBorders, theme.colors.gray]);
+    var RenderView = (0, react_2.useCallback)(function (_a) {
+        var _b, _c;
+        var row = _a.row;
+        return (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", 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" }, !!row.onLink && (react_2.default.createElement(react_1.IconButton, { "aria-label": "Link", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], icon: react_2.default.createElement(icons_1.ExternalLinkIcon, { fontSize: 16 }), size: "sm", onClick: function () { return row === null || row === void 0 ? void 0 : row.onLink(row); }, variant: "ghost" }))));
+    }, [freezedBgColor, freezedTextColor, noBorders, theme.colors.gray]);
     if (isLoading) {
         var totalVisibleColumns = Object.values(visibleColumns).filter(Boolean).length +
             (isCheckbox ? 1 : 0);
@@ -28,36 +87,43 @@ var TableBody = function (_a) {
                     react_2.default.createElement("p", null, "No data found")))));
     }
     return (react_2.default.createElement(react_2.default.Fragment, null, data.slice(startRow, endRow).map(function (row, index) {
-        var _a;
-        return (react_2.default.createElement(react_1.Tr, { key: index + 1, _hover: {
-                "& > td": {
-                    backgroundColor: theme.colors.gray[100], // Apply hover to all cells
-                },
-            } },
-            isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
-                react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "subtle", onChange: function () { return handleCheckbox(row.id); }, isChecked: selections.includes(row.id) }))),
-            columns.map(function (header, headerIndex) {
-                var _a;
-                var isFrozen = header.isFreeze;
-                var leftOffset = isFrozen
-                    ? (0, table_1.calculateLeftOffset)(columnWidths, headerIndex) +
-                        (isCheckbox ? 50 : 0)
-                    : 0;
-                return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { key: headerIndex + 1, onClick: function () {
-                        return !header.node
-                            ? handleRowClick(row, {
-                                label: header.label,
-                                id: header.id,
-                            })
-                            : null;
-                    }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: isFrozen
-                        ? freezedBgColor
-                        : index % 2 === 1
-                            ? theme.colors.backgroundColor.light
-                            : "white", textOverflow: "ellipsis", border: noBorders
-                        ? "none"
-                        : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isFrozen ? freezedTextColor : undefined }, header.node ? header.node(row) : row[header.id])));
-            })));
+        var rowIndex = startRow + index;
+        var isExpanded = expandedRows.has(rowIndex);
+        return (react_2.default.createElement(react_2.default.Fragment, { key: rowIndex },
+            react_2.default.createElement(react_1.Tr, { key: index + 1, _hover: {
+                    "& > td": {
+                        backgroundColor: theme.colors.gray[100],
+                    },
+                } },
+                isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!row.content })),
+                isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row }),
+                columns.map(function (header, headerIndex) {
+                    var _a;
+                    var isFrozen = header.isFreeze;
+                    var leftOffset = isFrozen
+                        ? (0, table_1.calculateLeftOffset)(columnWidths, headerIndex) +
+                            (isCheckbox ? 50 : 0)
+                        : 0;
+                    return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, key: headerIndex + 1, onClick: function () {
+                            return !header.node
+                                ? handleRowClick(row, {
+                                    label: header.label,
+                                    id: header.id,
+                                })
+                                : null;
+                        }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: isFrozen
+                            ? freezedBgColor
+                            : index % 2 === 1
+                                ? theme.colors.backgroundColor.light
+                                : "white", textOverflow: "ellipsis", border: noBorders
+                            ? "none"
+                            : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isFrozen ? freezedTextColor : undefined },
+                        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 })),
+            row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
+                react_2.default.createElement(react_1.Td, { colSpan: columns.length + (isCheckbox ? 1 : 0) + (isContent ? 1 : 0), p: 2 },
+                    react_2.default.createElement(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md" }, row === null || row === void 0 ? void 0 : row.content(row)))))));
     })));
 };
 exports.default = TableBody;

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

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

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

@@ -30,11 +30,34 @@ var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var fa_1 = require("react-icons/fa");
 var TableHeader = function (_a) {
     var _b;
-    var columns = _a.columns, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, handleSort = _a.handleSort, 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;
+    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;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var RenderCheckbox = (0, react_2.useCallback)(function () {
+        var _a;
+        return (react_2.default.createElement(react_1.Th, { w: "6", fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
+            react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "subtle", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })));
+    }, [
+        checked,
+        freezedBgColor,
+        freezedTextColor,
+        handleCheckbox,
+        isLoading,
+        noBorders,
+        (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray,
+    ]);
+    var RenderConent = (0, react_2.useCallback)(function () {
+        var _a;
+        return (react_2.default.createElement(react_1.Th, { w: "6", p: 0, backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
+            react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
+                react_2.default.createElement(fa_1.FaExpandArrowsAlt, { fontSize: 14 }))));
+    }, [freezedBgColor, noBorders, theme.colors.gray]);
+    var RenderView = (0, react_2.useCallback)(function () {
+        var _a;
+        return (react_2.default.createElement(react_1.Th, { w: "6", p: 0, backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" }));
+    }, [freezedBgColor, noBorders, theme.colors.gray]);
     return (react_2.default.createElement(react_1.Tr, null,
-        isCheckbox && (react_2.default.createElement(react_1.Th, { w: "6", fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
-            react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "subtle", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))),
+        isContent && react_2.default.createElement(RenderConent, null),
+        isCheckbox && react_2.default.createElement(RenderCheckbox, null),
         columns.map(function (header, index) {
             var _a, _b;
             var isFrozen = header.isFreeze;
@@ -59,7 +82,8 @@ var TableHeader = function (_a) {
                             }
                             handleSort(header.id, direction);
                         } })))))));
-        })));
+        }),
+        isLink && react_2.default.createElement(RenderView, null)));
 };
 exports.default = TableHeader;
 var SortingIcon = (0, react_2.memo)(function (_a) {

package/dist/Components/Table/Table.js

@@ -128,6 +128,8 @@ function Table(_a) {
             return (__assign(__assign({}, prev), (_a = {}, _a[header] = !prev[header], _a)));
         });
     };
+    var isContent = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.content; }); }, [data]);
+    var isLink = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.onLink; }); }, [data]);
     var RenderTable = function (_a) {
         var _b, _c, _d;
         var columns = _a.columns;
@@ -137,9 +139,9 @@ function Table(_a) {
                         ? true
                         : selection.length === 0
                             ? false
-                            : "indeterminate" })),
+                            : "indeterminate", isContent: isContent, isLink: isLink })),
             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, isLoading: isLoading, onRowClick: onRowClick }))));
+                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, isLoading: isLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink }))));
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_2.TableContainer, { sx: {

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

@@ -16,14 +16,14 @@ export type TableProps = {
     noBorders?: boolean;
     onSelection?: (selected: (string | number)[]) => void;
     isPagintaion?: boolean;
-    onRowClick?: (row: DataObject, header: Record<string, string>) => void;
+    onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
 };
 export type DataObject = {
-    [key: string]: string | number;
+    [key: string]: string | number | any;
 };
 export type TableHeaderProps = {
-    label: string;
-    id: string;
+    label: string | number;
+    id: string | number;
     isSort?: boolean;
     isSearch?: boolean;
     isFreeze?: boolean;
@@ -34,12 +34,12 @@ export type ExportOption = {
     id: string;
 };
 export type ColumnSortingProps = {
-    column: string;
+    column: string | number;
     direction: "asc" | "desc" | "none";
 };
 export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading"> & {
     visibleColumns: Record<string, boolean>;
-    handleSort: (label: string, type: "asc" | "desc" | "none") => void;
+    handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
     activeHeader?: string | null;
     isPopoverOpen?: boolean;
     closePopover?: () => void;
@@ -50,6 +50,8 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     columnsSort: ColumnSortingProps[];
     handleCheckbox: (selection: string | number) => void;
     checked: boolean | "indeterminate";
+    isContent: boolean;
+    isLink: boolean;
 };
 export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "onRowClick"> & {
     visibleColumns: Record<string, boolean>;
@@ -58,4 +60,6 @@ export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "da
     columnWidths: number[];
     handleCheckbox: (selection: string | number) => void;
     selections: (string | number)[];
+    isContent: boolean;
+    isLink: boolean;
 };

package/dist/Pages/datePick.d.ts

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

package/dist/Pages/table.js

@@ -12,12 +12,21 @@ var tableData = [
         name: "John Doe",
         age: 30,
         gender: "Male",
+        onLink: function (url) {
+            console.log("URL", url);
+        },
     },
     {
         id: 2,
         name: "Jane Doe",
         age: 25,
         gender: "Female",
+        content: function (data) {
+            return (react_1.default.createElement("div", null,
+                data.name,
+                " - ",
+                data.age));
+        },
     },
     {
         id: 3,
@@ -30,7 +39,7 @@ var column = [
     {
         label: "Name",
         id: "name",
-        isFreeze: true,
+        isFreeze: false,
         isSort: true,
     },
     {

package/dist/Utils/table.d.ts

@@ -1,7 +1,7 @@
 import { KaTableProps } from "../Components/KaTable/KaTableProps";
 import { DataObject } from "../Components/Table/TableProps";
 export declare function SortMultiColumnData(data: Record<string, string | number>[], sortConfig: {
-    column: string;
+    column: string | number;
     direction: string;
 }[]): Record<string, string | number>[];
 export declare const getPreviousColumnWidth: (columns: KaTableProps["columns"], key: string) => any;

package/package.json

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