npm - pixelize-design-library - Versions diffs - 1.1.36 → 1.1.38 - Mend

pixelize-design-library 1.1.36 → 1.1.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/Components/SelectSearch/SelectSearch.js +5 -6
package/dist/Components/Table/Components/TableBody.d.ts +2 -10
package/dist/Components/Table/Components/TableBody.js +31 -3
package/dist/Components/Table/Components/TableHeader.d.ts +2 -16
package/dist/Components/Table/Components/TableHeader.js +2 -4
package/dist/Components/Table/Components/TableLoading.d.ts +4 -0
package/dist/Components/Table/Components/TableLoading.js +10 -0
package/dist/Components/Table/Table.d.ts +1 -1
package/dist/Components/Table/Table.js +11 -260
package/dist/Components/Table/TableProps.d.ts +23 -0
package/dist/Components/Table/TableToDo.d.ts +2 -0
package/dist/Components/Table/TableToDo.js +291 -0
package/dist/Pages/table.js +1 -1
package/package.json +1 -1

package/dist/Components/SelectSearch/SelectSearch.js CHANGED Viewed

@@ -322,10 +322,11 @@ function SelectSearch(_a) {
     var inputRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
     var filteredOptions = (0, react_1.useMemo)(function () {
-        return options.filter(function (option) {
-            return option.label.toLowerCase().includes((inputValue !== null && inputValue !== void 0 ? inputValue : "").toLowerCase());
-        });
+        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) {
@@ -390,9 +391,7 @@ function SelectSearch(_a) {
     };
     var handleKeyDown = function (e) {
         if (e.key === "Enter") {
-            var matchingOption = options.find(function (option) {
-                return option.label.toLowerCase() === (inputValue !== null && inputValue !== void 0 ? inputValue : "").toLowerCase();
-            });
+            var matchingOption = options.find(function (option) { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = (inputValue !== null && inputValue !== void 0 ? inputValue : "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
             if (matchingOption) {
                 handleOptionClick(matchingOption);
             }

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

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

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

@@ -7,12 +7,33 @@ var react_1 = require("@chakra-ui/react");
 var react_2 = __importDefault(require("react"));
 var table_1 = require("../../../Utils/table");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var TableLoading_1 = require("./TableLoading");
 var TableBody = function (_a) {
-    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, visibleColumns = _a.visibleColumns, startRow = _a.startRow, endRow = _a.endRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections;
+    var 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 theme = (0, useCustomTheme_1.useCustomTheme)();
+    var handleRowClick = function (row, header) {
+        onRowClick && onRowClick(row, header);
+    };
+    if (isLoading) {
+        var totalVisibleColumns = Object.values(visibleColumns).filter(Boolean).length +
+            (isCheckbox ? 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);
+        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 },
+                    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 },
+        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) {
@@ -22,7 +43,14 @@ var TableBody = function (_a) {
                     ? (0, table_1.calculateLeftOffset)(columnWidths, headerIndex) +
                         (isCheckbox ? 50 : 0)
                     : 0;
-                return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { key: headerIndex + 1, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: isFrozen
+                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

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

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

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

@@ -30,13 +30,11 @@ var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var fa_1 = require("react-icons/fa");
 var TableHeader = function (_a) {
     var _b;
-    var columns = _a.columns, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, handleSort = _a.handleSort, activeHeader = _a.activeHeader, isPopoverOpen = _a.isPopoverOpen, closePopover = _a.closePopover, searchFeatures = _a.searchFeatures,
-    // hoveredHeaderIndex,
-    handleHeaderClick = _a.handleHeaderClick, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked;
+    var 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 theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_2.default.createElement(react_1.Tr, null,
         isCheckbox && (react_2.default.createElement(react_1.Th, { w: "6", fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
-            react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "subtle", onChange: function () { return handleCheckbox(0); }, isChecked: checked === true, isIndeterminate: checked === "indeterminate" }))),
+            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" }))),
         columns.map(function (header, index) {
             var _a, _b;
             var isFrozen = header.isFreeze;

package/dist/Components/Table/Components/TableLoading.d.ts CHANGED Viewed

@@ -1,3 +1,7 @@
 import React from "react";
 declare const TableLoading: () => React.JSX.Element;
 export default TableLoading;
+export declare const TableBodyLoading: ({ noOfColumns, borderColor, }: {
+    noOfColumns: number;
+    borderColor: string;
+}) => React.JSX.Element;

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableBodyLoading = void 0;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var TableLoading = function () {
@@ -29,3 +30,12 @@ var TableLoading = function () {
                     react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })))); })))));
 };
 exports.default = TableLoading;
+var TableBodyLoading = function (_a) {
+    var noOfColumns = _a.noOfColumns, borderColor = _a.borderColor;
+    return (react_1.default.createElement(react_1.default.Fragment, null, Array.from({ length: 5 }).map(function (_, index) {
+        return (react_1.default.createElement(react_2.Tr, null,
+            react_1.default.createElement(react_2.Td, { colSpan: noOfColumns, textAlign: "center", border: "1px solid ".concat(borderColor) },
+                react_1.default.createElement(react_2.Skeleton, { height: "15px", variant: "shine" }))));
+    })));
+};
+exports.TableBodyLoading = TableBodyLoading;

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

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

package/dist/Components/Table/Table.js CHANGED Viewed

@@ -55,28 +55,21 @@ var table_1 = require("../../Utils/table");
 var TableHeader_1 = __importDefault(require("./Components/TableHeader"));
 var TableBody_1 = __importDefault(require("./Components/TableBody"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var TableLoading_1 = __importDefault(require("./Components/TableLoading"));
-// import "./Table.css";
 var defaultPageSize = 5;
 function Table(_a) {
     var _b;
-    var data = _a.data, columns = _a.columns, handleExportChange = _a.handleExportChange, onSelection = _a.onSelection, exportOptions = _a.exportOptions, exportLabel = _a.exportLabel, isLoading = _a.isLoading, _c = _a.isVisiblity, isVisiblity = _c === void 0 ? true : _c, _d = _a.isCheckbox, isCheckbox = _d === void 0 ? false : _d, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _e = _a.noBorders, noBorders = _e === void 0 ? false : _e, _f = _a.isPagintaion, isPagintaion = _f === void 0 ? true : _f;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _c = _a.isCheckbox, isCheckbox = _c === void 0 ? false : _c, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _d = _a.noBorders, noBorders = _d === void 0 ? false : _d, _e = _a.isPagintaion, isPagintaion = _e === void 0 ? true : _e, onRowClick = _a.onRowClick;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _g = (0, react_4.useState)([]), selection = _g[0], setSelection = _g[1];
-    var _h = (0, react_4.useState)(0), currentPage = _h[0], setCurrentPage = _h[1];
-    var _j = (0, react_4.useState)(defaultPageSize), rowsPerPage = _j[0], setRowsPerPage = _j[1];
-    var _k = (0, react_4.useState)(false), isPopoverOpen = _k[0], setPopoverOpen = _k[1];
-    var _l = (0, react_4.useState)(null), activeHeader = _l[0], setActiveHeader = _l[1];
-    var _m = (0, react_4.useState)({}), searchTerms = _m[0], setSearchTerms = _m[1];
-    var _o = (0, react_4.useState)({}), searchOperation = _o[0], setSearchOperation = _o[1];
-    var _p = (0, react_4.useState)({}), betweenValues = _p[0], setBetweenValues = _p[1];
-    var _q = (0, react_4.useState)(columns.reduce(function (acc, curr) {
+    var _f = (0, react_4.useState)([]), selection = _f[0], setSelection = _f[1];
+    var _g = (0, react_4.useState)(0), currentPage = _g[0], setCurrentPage = _g[1];
+    var _h = (0, react_4.useState)(defaultPageSize), rowsPerPage = _h[0], setRowsPerPage = _h[1];
+    var _j = (0, react_4.useState)(columns.reduce(function (acc, curr) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[curr.label] = true, _a)));
-    }, {})), visibleColumns = _q[0], setVisibleColumns = _q[1];
-    var _r = (0, react_4.useState)([]), columnWidths = _r[0], setColumnWidths = _r[1];
+    }, {})), visibleColumns = _j[0], setVisibleColumns = _j[1];
+    var _k = (0, react_4.useState)([]), columnWidths = _k[0], setColumnWidths = _k[1];
     var headerRefs = (0, react_1.useRef)([]);
-    var _s = (0, react_4.useState)([]), columnsSort = _s[0], setColumnsSort = _s[1];
+    var _l = (0, react_4.useState)([]), columnsSort = _l[0], setColumnsSort = _l[1];
     (0, react_1.useEffect)(function () {
         // Measure widths after the component mounts
         var widths = headerRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
@@ -87,24 +80,6 @@ function Table(_a) {
         setRowsPerPage(value !== 0 ? value : defaultPageSize);
         setCurrentPage(0);
     };
-    // const sortedData = [...data].sort((a, b) => {
-    //   if (!sortField) return 0;
-    //   if (a[sortField] < b[sortField]) return sortDirection === "asc" ? -1 : 1;
-    //   if (a[sortField] > b[sortField]) return sortDirection === "asc" ? 1 : -1;
-    //   return 0;
-    // });
-    var getValue = function (header) {
-        var value = data.reduce(function (acc, item) {
-            var itemValue = item[header];
-            if (itemValue !== undefined &&
-                itemValue !== null &&
-                !acc.includes(itemValue)) {
-                acc.push(itemValue);
-            }
-            return acc;
-        }, []);
-        return value;
-    };
     var handleSort = (0, react_1.useCallback)(function (field, sort) {
         if (!sort)
             return;
@@ -122,63 +97,6 @@ function Table(_a) {
         }
         setColumnsSort(newSortState);
     }, [columnsSort]);
-    var handleSearchOperation = function (header, operation) {
-        setSearchOperation(function (prev) {
-            var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[header] = operation, _a)));
-        });
-        var list_ofdata = getValue(header);
-        if (operation === "between") {
-            var smallestValue_1 = String(Math.min(Number.apply(void 0, list_ofdata)));
-            var highestValue_1 = String(Math.max(Number.apply(void 0, list_ofdata)));
-            setBetweenValues(function (prev) {
-                var _a;
-                return (__assign(__assign({}, prev), (_a = {}, _a[header] = { min: smallestValue_1, max: highestValue_1 }, _a)));
-            });
-            setSearchTerms(function (prev) {
-                var _a;
-                return (__assign(__assign({}, prev), (_a = {}, _a[header] = "between", _a)));
-            });
-        }
-        else {
-            if (operation === "blank" || operation === "notBlank") {
-                setSearchTerms(function (prev) {
-                    var _a;
-                    return (__assign(__assign({}, prev), (_a = {}, _a[header] = "", _a)));
-                });
-            }
-            else {
-                setSearchTerms(function (prev) {
-                    var _a;
-                    return (__assign(__assign({}, prev), (_a = {}, _a[header] = list_ofdata[0].toString(), _a)));
-                });
-            }
-        }
-    };
-    var handleSearch = function (field, term) {
-        if (searchOperation[field] === "between") {
-            setBetweenValues(function (prev) {
-                var _a;
-                return (__assign(__assign({}, prev), (_a = {}, _a[field] = { min: term.split("-")[0], max: term.split("-")[1] }, _a)));
-            });
-        }
-        else {
-            setSearchTerms(function (prev) {
-                var _a;
-                return (__assign(__assign({}, prev), (_a = {}, _a[field] = term, _a)));
-            });
-        }
-    };
-    var handleHeaderClick = function (header, search) {
-        if (!search) {
-            return;
-        }
-        setActiveHeader(header);
-        setPopoverOpen(true);
-    };
-    var closePopover = function () {
-        setPopoverOpen(false);
-    };
     var handleCheckbox = function (id) {
         if (id === 0) {
             if (selection.length === data.length) {
@@ -198,199 +116,32 @@ function Table(_a) {
     (0, react_1.useEffect)(function () {
         onSelection && onSelection(selection);
     }, [selection, onSelection]);
-    // const filteredData = sortedData.filter((item) => {
-    //   return Object.keys(searchTerms).every((key) => {
-    //     const term = String(searchTerms[key]).toLowerCase();
-    //     const value = String(item[key]).toLowerCase();
-    //     const operation = searchOperation[key] || "notBlank";
-    //     switch (operation) {
-    //       case "contains":
-    //         return value.includes(term);
-    //       case "notContains":
-    //         return !value.includes(term);
-    //       case "equals":
-    //         return value === term;
-    //       case "notEquals":
-    //         return value !== term;
-    //       case "beginsWith":
-    //         return value.startsWith(term);
-    //       case "endsWith":
-    //         return value.endsWith(term);
-    //       case "greaterThan":
-    //         return Number(value) > Number(term);
-    //       case "greaterThanOrEqual":
-    //         return Number(value) >= Number(term);
-    //       case "lessThan":
-    //         return Number(value) < Number(term);
-    //       case "lessThanOrEqual":
-    //         return Number(value) <= Number(term);
-    //       case "between": {
-    //         const { min, max } = betweenValues[key] || {};
-    //         return Number(value) >= Number(min) && Number(value) <= Number(max);
-    //       }
-    //       case "blank":
-    //         return value === "";
-    //       case "notBlank":
-    //         return value !== "";
-    //       default:
-    //         return true;
-    //     }
-    //   });
-    // });
     var pages = Math.ceil(data.length / rowsPerPage);
     var startRow = currentPage * rowsPerPage;
     var endRow = startRow + rowsPerPage;
-    // const hasSelection = selection.length > 0;
-    // const indeterminate = hasSelection && selection.length < data.length;
     var tableData = (0, react_1.useMemo)(function () {
         return (0, table_1.SortMultiColumnData)(data, columnsSort);
     }, [data, columnsSort]);
-    var searchFeatures = function (header) {
-        var _a, _b;
-        var fieldType = (0, table_1.getFieldType)(header, data);
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.Select, { value: searchOperation[header] || "notBlank", onChange: function (e) { return handleSearchOperation(header, e.target.value); }, style: { background: "#3182ce", color: "white" } },
-                react_1.default.createElement("option", { value: "equals" }, "Equals"),
-                react_1.default.createElement("option", { value: "notEquals" }, "Does not equal"),
-                fieldType === "number" ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("option", { value: "greaterThan" }, "Greater than"),
-                    react_1.default.createElement("option", { value: "greaterThanOrEqual" }, "Greater than or equal to"),
-                    react_1.default.createElement("option", { value: "lessThan" }, "Less than"),
-                    react_1.default.createElement("option", { value: "lessThanOrEqual" }, "Less than or equal to"),
-                    react_1.default.createElement("option", { value: "between" }, "Between"))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("option", { value: "contains" }, "Contains"),
-                    react_1.default.createElement("option", { value: "notContains" }, "Does not contain"),
-                    react_1.default.createElement("option", { value: "beginsWith" }, "Begins with"),
-                    react_1.default.createElement("option", { value: "endsWith" }, "Ends with"))),
-                react_1.default.createElement("option", { value: "blank" }, "Blank"),
-                react_1.default.createElement("option", { value: "notBlank" }, "Not blank")),
-            searchOperation[header] !== undefined &&
-                searchOperation[header] === "between" &&
-                fieldType === "number" && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("br", null),
-                react_1.default.createElement(react_2.Input, { value: ((_a = betweenValues[header]) === null || _a === void 0 ? void 0 : _a.min) || "", onChange: function (e) {
-                        setBetweenValues(function (prev) {
-                            var _a;
-                            return (__assign(__assign({}, prev), (_a = {}, _a[header] = __assign(__assign({}, prev[header]), { min: e.target.value }), _a)));
-                        });
-                        setSearchTerms(function (prev) {
-                            var _a;
-                            return (__assign(__assign({}, prev), (_a = {}, _a[header] = "between", _a)));
-                        });
-                    }, placeholder: "Min...", background: "white", color: "black" }),
-                react_1.default.createElement("br", null),
-                react_1.default.createElement("br", null),
-                react_1.default.createElement(react_2.Input, { value: ((_b = betweenValues[header]) === null || _b === void 0 ? void 0 : _b.max) || "", onChange: function (e) {
-                        setBetweenValues(function (prev) {
-                            var _a;
-                            return (__assign(__assign({}, prev), (_a = {}, _a[header] = __assign(__assign({}, prev[header]), { max: e.target.value }), _a)));
-                        });
-                        setSearchTerms(function (prev) {
-                            var _a;
-                            return (__assign(__assign({}, prev), (_a = {}, _a[header] = "between", _a)));
-                        });
-                    }, placeholder: "Max...", background: "white", color: "black" }))),
-            searchOperation[header] !== undefined &&
-                searchOperation[header] !== "between" &&
-                searchOperation[header] !== "blank" &&
-                searchOperation[header] !== "notBlank" && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("br", null),
-                react_1.default.createElement(react_2.Input, { value: searchTerms[header] || "", onChange: function (e) { return handleSearch(header, e.target.value); }, placeholder: "Search...", background: "white", color: "black" })))));
-    };
     var handleColumnVisibilityChange = function (header) {
         setVisibleColumns(function (prev) {
             var _a;
             return (__assign(__assign({}, prev), (_a = {}, _a[header] = !prev[header], _a)));
         });
     };
-    // const handleMouseEnter = (index: number) => setHoveredHeaderIndex(index);
-    // const handleMouseLeave = () => {
-    //   setHoveredHeaderIndex(null);
-    //   closePopover();
-    // };
-    // const removeSearchOptionTerm = (key: any) => {
-    //   const newSearchTerms = { ...searchTerms };
-    //   const newSearchOperation = { ...searchOperation };
-    //   const newBetweenValues = { ...betweenValues };
-    //   delete newSearchTerms[key];
-    //   delete newSearchOperation[key];
-    //   delete newBetweenValues[key];
-    //   setSearchTerms(newSearchTerms);
-    //   setSearchOperation(newSearchOperation);
-    //   setBetweenValues(newBetweenValues);
-    // };
-    // const SearchOptions = () => {
-    //   return (
-    //     <Wrap>
-    //       {searchOperation &&
-    //         Object.keys(searchOperation).map((key, index) => {
-    //           return (
-    //             <Tag
-    //               size="sm"
-    //               key={index}
-    //               borderRadius="full"
-    //               variant="solid"
-    //               colorScheme="gray"
-    //               m={1}
-    //             >
-    //               <Box display="flex" alignItems="center">
-    //                 <TagLabel>{key}</TagLabel>
-    //                 <TagLabel mx={2}>{searchOperation[key]}</TagLabel>
-    //                 {searchOperation[key] === "between" ? (
-    //                   <TagLabel>
-    //                     {betweenValues[key]?.min} - {betweenValues[key]?.max}
-    //                   </TagLabel>
-    //                 ) : (
-    //                   <TagLabel>{searchTerms[key]}</TagLabel>
-    //                 )}
-    //               </Box>
-    //               <TagCloseButton onClick={() => removeSearchOptionTerm(key)} />
-    //             </Tag>
-    //           );
-    //         })}
-    //     </Wrap>
-    //   );
-    // };
-    // const Export = ({
-    //   exportOptions,
-    // }: {
-    //   exportOptions: TableProps["exportOptions"];
-    // }) => {
-    //   return (
-    //     <Select
-    //       placeholder="Exports"
-    //       width={160}
-    //       onChange={(e) => {
-    //         handleExportChange && handleExportChange(e.target.value);
-    //       }}
-    //       value={exportLabel}
-    //       key={exportLabel}
-    //     >
-    //       {exportOptions?.map((option) => (
-    //         <option key={option.id} value={option.id}>
-    //           {option.label}
-    //         </option>
-    //       ))}
-    //     </Select>
-    //   );
-    // };
     var RenderTable = function (_a) {
         var _b, _c, _d;
         var columns = _a.columns;
         return (react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "sticky-columns" },
             react_1.default.createElement(react_3.Thead, null,
-                react_1.default.createElement(TableHeader_1.default, { columns: columns, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], visibleColumns: visibleColumns, handleSort: handleSort, activeHeader: activeHeader, isPopoverOpen: isPopoverOpen, closePopover: closePopover, searchFeatures: searchFeatures, handleHeaderClick: handleHeaderClick, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, checked: selection.length === data.length
+                react_1.default.createElement(TableHeader_1.default, { columns: columns, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], visibleColumns: visibleColumns, handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isLoading, checked: data.length !== 0 && selection.length === data.length
                         ? true
                         : selection.length === 0
                             ? false
                             : "indeterminate" })),
             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 }))));
+                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 }))));
     };
-    if (isLoading)
-        return react_1.default.createElement(TableLoading_1.default, null);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("br", null),
         react_1.default.createElement(react_2.TableContainer, { sx: {
                 borderRadius: "10px 0 0 10px",
                 borderWidth: "0px 0px 0px 5px",
@@ -398,6 +149,6 @@ function Table(_a) {
                 boxShadow: theme.shadows.lg,
             } },
             react_1.default.createElement(RenderTable, { columns: columns })),
-        isPagintaion && (react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: "".concat(startRow + 1, " to ").concat(endRow, " of ").concat(data.length), handlePageSizeChange: handlePageSizeChange, dataLength: data.length, visibleColumns: visibleColumns, handleColumnVisibilityChange: handleColumnVisibilityChange, isVisiblity: true }))));
+        isPagintaion && !!tableData.length && (react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: "".concat(startRow + 1, " to ").concat(endRow, " of ").concat(data.length), handlePageSizeChange: handlePageSizeChange, dataLength: data.length, visibleColumns: visibleColumns, handleColumnVisibilityChange: handleColumnVisibilityChange, isVisiblity: true }))));
 }
 exports.default = Table;

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

@@ -16,6 +16,7 @@ export type TableProps = {
     noBorders?: boolean;
     onSelection?: (selected: (string | number)[]) => void;
     isPagintaion?: boolean;
+    onRowClick?: (row: DataObject, header: Record<string, string>) => void;
 };
 export type DataObject = {
     [key: string]: string | number;
@@ -36,3 +37,25 @@ export type ColumnSortingProps = {
     column: string;
     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;
+    activeHeader?: string | null;
+    isPopoverOpen?: boolean;
+    closePopover?: () => void;
+    searchFeatures?: (header: string) => React.ReactNode;
+    handleHeaderClick?: (header: string, search: boolean) => void;
+    headerRefs: React.MutableRefObject<(HTMLTableCellElement | null)[]>;
+    columnWidths: number[];
+    columnsSort: ColumnSortingProps[];
+    handleCheckbox: (selection: string | number) => void;
+    checked: boolean | "indeterminate";
+};
+export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "onRowClick"> & {
+    visibleColumns: Record<string, boolean>;
+    startRow: number;
+    endRow: number;
+    columnWidths: number[];
+    handleCheckbox: (selection: string | number) => void;
+    selections: (string | number)[];
+};

package/dist/Components/Table/TableToDo.d.ts ADDED Viewed

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

package/dist/Components/Table/TableToDo.js ADDED Viewed

@@ -0,0 +1,291 @@
+"use strict";
+// const [isPopoverOpen, setPopoverOpen] = useState(false);
+// const [activeHeader, setActiveHeader] = useState<string | null>(null);
+// const [searchTerms, setSearchTerms] = useState<Record<string, string>>({});
+// const [searchOperation, setSearchOperation] = useState<
+//   Record<string, string>
+// >({});
+// const [betweenValues, setBetweenValues] = useState<
+//   Record<string, { min: string; max: string }>
+// >({});
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchFeatures = void 0;
+// const sortedData = [...data].sort((a, b) => {
+//   if (!sortField) return 0;
+//   if (a[sortField] < b[sortField]) return sortDirection === "asc" ? -1 : 1;
+//   if (a[sortField] > b[sortField]) return sortDirection === "asc" ? 1 : -1;
+//   return 0;
+// });
+// const getValue = (header: string) => {
+//   const value = data.reduce((acc: (string | number)[], item: DataObject) => {
+//     const itemValue = item[header];
+//     if (
+//       itemValue !== undefined &&
+//       itemValue !== null &&
+//       !acc.includes(itemValue)
+//     ) {
+//       acc.push(itemValue);
+//     }
+//     return acc;
+//   }, []);
+//   return value;
+// };
+// const handleSearchOperation = (header: string, operation: string) => {
+//   // setSearchOperation((prev) => ({ ...prev, [header]: operation }));
+//   // const list_ofdata = getValue(header);
+//   // if (operation === "between") {
+//   //   const smallestValue = String(Math.min(Number(...list_ofdata)));
+//   //   const highestValue = String(Math.max(Number(...list_ofdata)));
+//   //   setBetweenValues((prev) => ({
+//   //     ...prev,
+//   //     [header]: { min: smallestValue, max: highestValue },
+//   //   }));
+//   //   setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
+//   // } else {
+//   //   if (operation === "blank" || operation === "notBlank") {
+//   //     setSearchTerms((prev) => ({ ...prev, [header]: "" }));
+//   //   } else {
+//   //     setSearchTerms((prev) => ({
+//   //       ...prev,
+//   //       [header]: list_ofdata[0].toString(),
+//   //     }));
+//   //   }
+//   // }
+// };
+// const handleSearch = (field: string, term: string) => {
+//   // if (searchOperation[field] === "between") {
+//   //   setBetweenValues((prev) => ({
+//   //     ...prev,
+//   //     [field]: { min: term.split("-")[0], max: term.split("-")[1] },
+//   //   }));
+//   // } else {
+//   //   setSearchTerms((prev) => ({ ...prev, [field]: term }));
+//   // }
+// };
+// const handleHeaderClick = (header: string, search: boolean) => {
+//   // if (!search) {
+//   //   return;
+//   // }
+//   // setActiveHeader(header);
+//   // setPopoverOpen(true);
+// };
+// const closePopover = () => {
+//   // setPopoverOpen(false);
+// };
+// const filteredData = sortedData.filter((item) => {
+//   return Object.keys(searchTerms).every((key) => {
+//     const term = String(searchTerms[key]).toLowerCase();
+//     const value = String(item[key]).toLowerCase();
+//     const operation = searchOperation[key] || "notBlank";
+//     switch (operation) {
+//       case "contains":
+//         return value.includes(term);
+//       case "notContains":
+//         return !value.includes(term);
+//       case "equals":
+//         return value === term;
+//       case "notEquals":
+//         return value !== term;
+//       case "beginsWith":
+//         return value.startsWith(term);
+//       case "endsWith":
+//         return value.endsWith(term);
+//       case "greaterThan":
+//         return Number(value) > Number(term);
+//       case "greaterThanOrEqual":
+//         return Number(value) >= Number(term);
+//       case "lessThan":
+//         return Number(value) < Number(term);
+//       case "lessThanOrEqual":
+//         return Number(value) <= Number(term);
+//       case "between": {
+//         const { min, max } = betweenValues[key] || {};
+//         return Number(value) >= Number(min) && Number(value) <= Number(max);
+//       }
+//       case "blank":
+//         return value === "";
+//       case "notBlank":
+//         return value !== "";
+//       default:
+//         return true;
+//     }
+//   });
+// });
+var react_1 = __importDefault(require("react"));
+var searchFeatures = function (header) {
+    return react_1.default.createElement(react_1.default.Fragment, null, "hi");
+    // const fieldType = getFieldType(header, data);
+    // return (
+    //   <>
+    //     <Select
+    //       value={searchOperation[header] || "notBlank"}
+    //       onChange={(e) => handleSearchOperation(header, e.target.value)}
+    //       style={{ background: "#3182ce", color: "white" }}
+    //     >
+    //       <option value="equals">Equals</option>
+    //       <option value="notEquals">Does not equal</option>
+    //       {fieldType === "number" ? (
+    //         <>
+    //           <option value="greaterThan">Greater than</option>
+    //           <option value="greaterThanOrEqual">
+    //             Greater than or equal to
+    //           </option>
+    //           <option value="lessThan">Less than</option>
+    //           <option value="lessThanOrEqual">Less than or equal to</option>
+    //           <option value="between">Between</option>
+    //         </>
+    //       ) : (
+    //         <>
+    //           <option value="contains">Contains</option>
+    //           <option value="notContains">Does not contain</option>
+    //           <option value="beginsWith">Begins with</option>
+    //           <option value="endsWith">Ends with</option>
+    //         </>
+    //       )}
+    //       <option value="blank">Blank</option>
+    //       <option value="notBlank">Not blank</option>
+    //     </Select>
+    //     {searchOperation[header] !== undefined &&
+    //       searchOperation[header] === "between" &&
+    //       fieldType === "number" && (
+    //         <>
+    //           <br />
+    //           <Input
+    //             value={betweenValues[header]?.min || ""}
+    //             onChange={(e) => {
+    //               setBetweenValues((prev) => ({
+    //                 ...prev,
+    //                 [header]: { ...prev[header], min: e.target.value },
+    //               }));
+    //               setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
+    //             }}
+    //             placeholder="Min..."
+    //             background="white"
+    //             color="black"
+    //           />
+    //           <br />
+    //           <br />
+    //           <Input
+    //             value={betweenValues[header]?.max || ""}
+    //             onChange={(e) => {
+    //               setBetweenValues((prev) => ({
+    //                 ...prev,
+    //                 [header]: { ...prev[header], max: e.target.value },
+    //               }));
+    //               setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
+    //             }}
+    //             placeholder="Max..."
+    //             background="white"
+    //             color="black"
+    //           />
+    //         </>
+    //       )}
+    //     {searchOperation[header] !== undefined &&
+    //       searchOperation[header] !== "between" &&
+    //       searchOperation[header] !== "blank" &&
+    //       searchOperation[header] !== "notBlank" && (
+    //         <>
+    //           <br />
+    //           <Input
+    //             value={searchTerms[header] || ""}
+    //             onChange={(e) => handleSearch(header, e.target.value)}
+    //             placeholder="Search..."
+    //             background="white"
+    //             color="black"
+    //           />
+    //           {/* <br />
+    //                         <select onChange={(e) => console.log("option 1")} style={{ width: "100%", borderRadius: "2px", height: "30px" }}>
+    //                             <option value="">Select an option</option>
+    //                             <option value="option1">Option 1</option>
+    //                             <option value="option2">Option 2</option>
+    //                             <option value="option3">Option 3</option>
+    //                         </select> */}
+    //         </>
+    //       )}
+    //   </>
+    // );
+};
+exports.searchFeatures = searchFeatures;
+// const hasSelection = selection.length > 0;
+// const indeterminate = hasSelection && selection.length < data.length;
+// const handleMouseEnter = (index: number) => setHoveredHeaderIndex(index);
+// const handleMouseLeave = () => {
+//   setHoveredHeaderIndex(null);
+//   closePopover();
+// };
+// const removeSearchOptionTerm = (key: any) => {
+//   const newSearchTerms = { ...searchTerms };
+//   const newSearchOperation = { ...searchOperation };
+//   const newBetweenValues = { ...betweenValues };
+//   delete newSearchTerms[key];
+//   delete newSearchOperation[key];
+//   delete newBetweenValues[key];
+//   setSearchTerms(newSearchTerms);
+//   setSearchOperation(newSearchOperation);
+//   setBetweenValues(newBetweenValues);
+// };
+// const SearchOptions = () => {
+//   return (
+//     <Wrap>
+//       {searchOperation &&
+//         Object.keys(searchOperation).map((key, index) => {
+//           return (
+//             <Tag
+//               size="sm"
+//               key={index}
+//               borderRadius="full"
+//               variant="solid"
+//               colorScheme="gray"
+//               m={1}
+//             >
+//               <Box display="flex" alignItems="center">
+//                 <TagLabel>{key}</TagLabel>
+//                 <TagLabel mx={2}>{searchOperation[key]}</TagLabel>
+//                 {searchOperation[key] === "between" ? (
+//                   <TagLabel>
+//                     {betweenValues[key]?.min} - {betweenValues[key]?.max}
+//                   </TagLabel>
+//                 ) : (
+//                   <TagLabel>{searchTerms[key]}</TagLabel>
+//                 )}
+//               </Box>
+//               <TagCloseButton onClick={() => removeSearchOptionTerm(key)} />
+//             </Tag>
+//           );
+//         })}
+//     </Wrap>
+//   );
+// };
+// const Export = ({
+//   exportOptions,
+// }: {
+//   exportOptions: TableProps["exportOptions"];
+// }) => {
+//   return (
+//     <Select
+//       placeholder="Exports"
+//       width={160}
+//       onChange={(e) => {
+//         handleExportChange && handleExportChange(e.target.value);
+//       }}
+//       value={exportLabel}
+//       key={exportLabel}
+//     >
+//       {exportOptions?.map((option) => (
+//         <option key={option.id} value={option.id}>
+//           {option.label}
+//         </option>
+//       ))}
+//     </Select>
+//   );
+// };
+/* <Box display="flex" justifyContent="flex-end">
+        <SearchOptions />
+        {exportOptions && exportOptions.length > 0 && (
+          <Export exportOptions={exportOptions} />
+        )}
+      </Box> */
+//   <br />

package/dist/Pages/table.js CHANGED Viewed

@@ -54,6 +54,6 @@ var column = [
 ];
 var TableExample = function () {
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(Table_1.default, { columns: column, data: tableData, isCheckbox: true, isVisiblity: false, isLoading: false, noBorders: false, onSelection: function (dd) { return console.log(dd); } })));
+        react_1.default.createElement(Table_1.default, { columns: column, data: tableData, isCheckbox: true, isVisiblity: false, isLoading: false, noBorders: false, onSelection: function (checked) { return console.log(checked); }, onRowClick: function (row, header) { return console.log(row, header); } })));
 };
 exports.TableExample = TableExample;

package/package.json CHANGED Viewed

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