pixelize-design-library 1.1.15 → 1.1.17

package/dist/Components/KaTable/KaTable.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { KaTableProps } from "./KaTableProps";
 import * as TableEnums from "ka-table/enums";
 import * as TableProps from "ka-table/props";
 import * as TableActionCreator from "ka-table/actionCreators";
@@ -8,6 +7,6 @@ import * as TableUtils from "ka-table/utils";
 import * as TableFun from "ka-table";
 import "ka-table/style.css";
 import "./ka-table.css";
-declare const KaTable: ({ columns, data, rowKey, Edit, format, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading, checkSelect, onRowClick, onSelectionChange, onSortChange, onMenuItemClick, menuItems, }: KaTableProps) => React.JSX.Element;
-export default KaTable;
+declare const _default: React.MemoExoticComponent<({ columns, data, rowKey, Edit, format, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading, checkSelect, onRowClick, onSelectionChange, onSortChange, onMenuItemClick, menuItems, selected, }: any) => React.JSX.Element>;
+export default _default;
 export { TableEnums, TableActionCreator, TableProps, TableModel, TableUtils, TableFun, };

package/dist/Components/KaTable/KaTable.js

@@ -1,15 +1,4 @@
 "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);
@@ -33,21 +22,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 });
 exports.TableFun = exports.TableUtils = exports.TableModel = exports.TableProps = exports.TableActionCreator = exports.TableEnums = void 0;
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var ka_table_1 = require("ka-table");
 var TableEnums = __importStar(require("ka-table/enums"));
 exports.TableEnums = TableEnums;
@@ -63,166 +43,25 @@ var TableFun = __importStar(require("ka-table"));
 exports.TableFun = TableFun;
 require("ka-table/style.css");
 require("./ka-table.css");
-var CustomHeader_1 = __importDefault(require("./CustomHeader"));
+var useMergedChildComponents_1 = __importDefault(require("./useMergedChildComponents"));
+var selectionCellColumn = {
+    key: "select-cell",
+    width: 65,
+    columnFreeze: true,
+    customHeader: false,
+    className: "select-cell",
+};
 var KaTable = function (_a) {
     var columns = _a.columns, data = _a.data, _b = _a.rowKey, rowKey = _b === void 0 ? "id" : _b, Edit = _a.Edit, 
     // sorting,
     format = _a.format, 
     // paging,
-    filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading, checkSelect = _a.checkSelect, onRowClick = _a.onRowClick, onSelectionChange = _a.onSelectionChange, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems;
-    var selectionCellColumn = {
-        key: "select-cell",
-        width: 65,
-        columnFreeze: true,
-        customHeader: false,
-        className: "select-cell",
-    };
+    filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading, checkSelect = _a.checkSelect, onRowClick = _a.onRowClick, onSelectionChange = _a.onSelectionChange, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems, selected = _a.selected;
     if (checkSelect &&
         !columns.some(function (column) { return column.key === "select-cell"; })) {
         columns.unshift(selectionCellColumn);
     }
-    var getPreviousColumnWidth = function (key) {
-        var index = columns.findIndex(function (column) { return column.key === key; });
-        if (index > 0) {
-            return columns[index - 1].width;
-        }
-        return 0;
-    };
-    var SelectionHeader = function () {
-        var _a, _b;
-        var table = TableFun.useTableInstance();
-        var areAllRowsSelected = TableUtils.kaPropsUtils.areAllFilteredRowsSelected(table.props);
-        var selectedRows = ((_b = (_a = table === null || table === void 0 ? void 0 : table.props) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : []).filter(function (row) { var _a; return ((_a = table.props.selectedRows) !== null && _a !== void 0 ? _a : []).includes(row[rowKey]); });
-        var areSomeRowsSelected = selectedRows.length > 0 && !areAllRowsSelected;
-        var selectAllRef = (0, react_1.useRef)(null);
-        var prevSelectedRowsRef = (0, react_1.useRef)([]);
-        (0, react_1.useEffect)(function () {
-            if (selectAllRef.current) {
-                selectAllRef.current.indeterminate = areSomeRowsSelected;
-            }
-        }, [areSomeRowsSelected]);
-        (0, react_1.useEffect)(function () {
-            var prevSelectedRows = prevSelectedRowsRef.current;
-            if (onSelectionChange &&
-                selectedRows &&
-                JSON.stringify(prevSelectedRows) !== JSON.stringify(selectedRows)) {
-                var selectedRowIds = selectedRows.map(function (row) { return row[rowKey]; });
-                onSelectionChange(selectedRowIds);
-                prevSelectedRowsRef.current = selectedRows;
-            }
-        }, [selectedRows]);
-        return (react_1.default.createElement("input", { ref: selectAllRef, type: "checkbox", checked: areAllRowsSelected, onChange: function (event) {
-                if (event.currentTarget.checked) {
-                    table.selectAllFilteredRows();
-                }
-                else {
-                    table.deselectAllFilteredRows();
-                }
-            } }));
-    };
-    var SelectionCell = function (_a) {
-        var rowKeyValue = _a.rowKeyValue, isSelectedRow = _a.isSelectedRow, selectedRows = _a.selectedRows, onSelectionChange = _a.onSelectionChange, rowKey = _a.rowKey;
-        var table = TableFun.useTableInstance();
-        var prevSelectedRowsRef = (0, react_1.useRef)([]);
-        (0, react_1.useEffect)(function () {
-            var prevSelectedRows = prevSelectedRowsRef.current;
-            if (onSelectionChange &&
-                selectedRows &&
-                JSON.stringify(prevSelectedRows) !== JSON.stringify(selectedRows)) {
-                var selectedRowIds = selectedRows
-                    .filter(function (row) { return row && row[rowKey] !== undefined; })
-                    .map(function (row) { return row[rowKey]; });
-                onSelectionChange(selectedRowIds);
-                prevSelectedRowsRef.current = selectedRows;
-            }
-        }, [selectedRows, onSelectionChange, rowKey]);
-        return (react_1.default.createElement("input", { type: "checkbox", checked: isSelectedRow, onChange: function (event) {
-                if (event.nativeEvent.shiftKey) {
-                    table.selectRowsRange(rowKeyValue, __spreadArray([], selectedRows, true).pop());
-                }
-                else if (event.currentTarget.checked) {
-                    table.selectRow(rowKeyValue);
-                }
-                else {
-                    table.deselectRow(rowKeyValue);
-                }
-            } }));
-    };
-    var mergedChildComponents = __assign(__assign({}, childComponents), { headCell: {
-            content: function (props) {
-                var _a;
-                var existingContent = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.content;
-                if (existingContent) {
-                    var result = existingContent(props);
-                    if (result) {
-                        return result;
-                    }
-                }
-                if (props.column.customHeader === undefined ||
-                    props.column.customHeader === true) {
-                    return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: onSortChange, onMenuItemClick: onMenuItemClick, menuItems: menuItems })));
-                }
-                if (props.column.key === "select-cell") {
-                    return react_1.default.createElement(SelectionHeader, null);
-                }
-            },
-            elementAttributes: function (props) {
-                var _a;
-                var existingElementAttributes = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
-                if (existingElementAttributes) {
-                    var result = existingElementAttributes(props);
-                    if (result) {
-                        return result;
-                    }
-                }
-                if (props.column.columnFreeze) {
-                    var stickyLeft = getPreviousColumnWidth(props.column.key);
-                    return {
-                        style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: "#d9d9db", textAlign: "center" }),
-                    };
-                }
-            },
-        }, cell: {
-            elementAttributes: function (props) {
-                var _a;
-                var existingElementAttributes = (_a = childComponents.cell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
-                if (existingElementAttributes) {
-                    var result = existingElementAttributes(props);
-                    if (result) {
-                        return result;
-                    }
-                }
-                if (props.column.columnFreeze) {
-                    var stickyLeft = getPreviousColumnWidth(props.column.key);
-                    return {
-                        style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 2, backgroundColor: "#d9d9db" }),
-                    };
-                }
-                return {
-                    onClick: function () {
-                        if (onRowClick) {
-                            onRowClick(props.rowData, props.column.key);
-                        }
-                    },
-                };
-            },
-        }, tableWrapper: {
-            elementAttributes: function () { return ({ style: { maxHeight: 600 } }); },
-        }, cellText: {
-            content: function (props) {
-                var _a;
-                var existingContent = (_a = childComponents.cellText) === null || _a === void 0 ? void 0 : _a.content;
-                if (existingContent) {
-                    var result = existingContent(props);
-                    if (result) {
-                        return result;
-                    }
-                }
-                if (props.column.key === "select-cell") {
-                    return react_1.default.createElement(SelectionCell, __assign({}, props));
-                }
-            },
-        } });
+    var mergedChildComponents = (0, useMergedChildComponents_1.default)(childComponents, onSortChange, onMenuItemClick, menuItems, onSelectionChange, rowKey, onRowClick, selected, data.length);
     return (react_1.default.createElement(ka_table_1.Table, { columns: columns, data: data, rowKeyField: rowKey, editingMode: Edit, 
         // sortingMode={sorting}
         format: format, 
@@ -231,4 +70,4 @@ var KaTable = function (_a) {
             enabled: true,
         } }));
 };
-exports.default = KaTable;
+exports.default = react_1.default.memo(KaTable);

package/dist/Components/KaTable/SelectionCell.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TableProps } from "./KaTable";
+declare const _default: React.MemoExoticComponent<({ rowKeyValue, selectedRows, onSelectionChange, selected, }: TableProps.ICellTextProps<any> & {
+    onSelectionChange: (ids: any[], type: string) => void;
+    rowKey: any;
+    selected: any;
+}) => React.JSX.Element>;
+export default _default;

package/dist/Components/KaTable/SelectionCell.js

@@ -0,0 +1,35 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var KaTable_1 = require("./KaTable");
+var SelectionCell = function (_a) {
+    var rowKeyValue = _a.rowKeyValue, selectedRows = _a.selectedRows, onSelectionChange = _a.onSelectionChange, selected = _a.selected;
+    var table = KaTable_1.TableFun.useTableInstance();
+    var onChangeHandle = function (event) {
+        if (event.nativeEvent.shiftKey) {
+            table.selectRowsRange(rowKeyValue, __spreadArray([], selectedRows, true).pop());
+        }
+        else if (event.currentTarget.checked) {
+            onSelectionChange(rowKeyValue, "add");
+            table.selectRow(rowKeyValue);
+        }
+        else {
+            onSelectionChange(rowKeyValue, "remove");
+            table.deselectRow(rowKeyValue);
+        }
+    };
+    return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle });
+};
+exports.default = react_1.default.memo(SelectionCell);

package/dist/Components/KaTable/SelectionHeader.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.MemoExoticComponent<({ onSelectionChange, rowKey, selected }: any) => React.JSX.Element>;
+export default _default;

package/dist/Components/KaTable/SelectionHeader.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var KaTable_1 = require("./KaTable");
+var SelectionHeader = function (_a) {
+    var onSelectionChange = _a.onSelectionChange, rowKey = _a.rowKey, selected = _a.selected;
+    var table = KaTable_1.TableFun.useTableInstance();
+    var selectAllRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (selectAllRef.current) {
+            selectAllRef.current.indeterminate = selected === null || selected === void 0 ? void 0 : selected.intederminate;
+        }
+    }, [selected.intederminate]);
+    var handleSelectionChange = (0, react_1.useCallback)(function (checked) {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked);
+    }, [onSelectionChange]);
+    return (react_1.default.createElement("input", { ref: selectAllRef, type: "checkbox", checked: selected === null || selected === void 0 ? void 0 : selected.checked, onChange: function (event) {
+            var _a, _b;
+            if (event.currentTarget.checked) {
+                var totalIds = (_b = (_a = table === null || table === void 0 ? void 0 : table.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map(function (row) { return row[rowKey]; });
+                handleSelectionChange(totalIds);
+                table.selectAllFilteredRows();
+            }
+            else {
+                handleSelectionChange([]);
+                table.deselectAllFilteredRows();
+            }
+        } }));
+};
+exports.default = react_1.default.memo(SelectionHeader);

package/dist/Components/KaTable/useMergedChildComponents.d.ts

@@ -0,0 +1,2 @@
+declare const useMergedChildComponents: (childComponents: any, onSortChange: any, onMenuItemClick: any, menuItems: any, handleSelection: any, rowKey: any, onRowClick: any, selected: any, dataLength: number) => any;
+export default useMergedChildComponents;

package/dist/Components/KaTable/useMergedChildComponents.js

@@ -0,0 +1,172 @@
+"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 CustomHeader_1 = __importDefault(require("./CustomHeader"));
+var SelectionHeader_1 = __importDefault(require("./SelectionHeader"));
+var SelectionCell_1 = __importDefault(require("./SelectionCell"));
+var getPreviousColumnWidth = function (columns, key) {
+    var index = columns === null || columns === void 0 ? void 0 : columns.findIndex(function (column) { return column.key === key; });
+    if (index > 0) {
+        return columns[index - 1].width;
+    }
+    return 0;
+};
+var useMergedChildComponents = function (childComponents, onSortChange, onMenuItemClick, menuItems, handleSelection, rowKey, onRowClick, selected, dataLength) {
+    var _a = react_1.default.useState(selected), selections = _a[0], setSelections = _a[1];
+    var isAllSelected = (0, react_1.useMemo)(function () {
+        return {
+            checked: selections.length === dataLength,
+            intederminate: selections.length > 0 && selections.length < dataLength,
+        };
+    }, [selections, dataLength]);
+    var cellSelectionHandle = (0, react_1.useCallback)(function (values, type) {
+        if (type === "add") {
+            setSelections(__spreadArray(__spreadArray([], selections, true), [values], false));
+            handleSelection(__spreadArray(__spreadArray([], selections, true), [values], false));
+        }
+        else if (type === "remove") {
+            setSelections(selections.filter(function (value) { return value !== values; }));
+            handleSelection(selections.filter(function (value) { return value !== values; }));
+        }
+        else {
+            handleSelection(selections.filter(function (value) { return value !== values; }));
+        }
+    }, [selections]);
+    var headerSelectionHandle = (0, react_1.useCallback)(function (values) {
+        setSelections(values);
+        handleSelection(values);
+    }, [selections]);
+    return (0, react_1.useMemo)(function () {
+        return __assign(__assign({}, childComponents), { headCell: {
+                content: function (props) {
+                    var _a;
+                    var existingContent = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.content;
+                    if (existingContent) {
+                        var result = existingContent(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.customHeader === undefined ||
+                        props.column.customHeader === true) {
+                        return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: onSortChange, onMenuItemClick: onMenuItemClick, menuItems: menuItems })));
+                    }
+                    if (props.column.key === "select-cell") {
+                        return (react_1.default.createElement(SelectionHeader_1.default, { onSelectionChange: headerSelectionHandle, rowKey: rowKey, selected: isAllSelected }));
+                    }
+                },
+                elementAttributes: function (props) {
+                    var _a;
+                    var existingElementAttributes = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                    if (existingElementAttributes) {
+                        var result = existingElementAttributes(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.columnFreeze) {
+                        var stickyLeft = getPreviousColumnWidth(props.columns, props.column.key);
+                        return {
+                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: "#d9d9db", textAlign: "center" }),
+                        };
+                    }
+                },
+            }, cell: {
+                elementAttributes: function (props) {
+                    var _a;
+                    var existingElementAttributes = (_a = childComponents.cell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                    if (existingElementAttributes) {
+                        var result = existingElementAttributes(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.columnFreeze) {
+                        var stickyLeft = getPreviousColumnWidth(props.columns, props.column.key);
+                        return {
+                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 2, backgroundColor: "#d9d9db" }),
+                        };
+                    }
+                    return {
+                        onClick: function () {
+                            if (onRowClick) {
+                                onRowClick(props.rowData, props.column.key);
+                            }
+                        },
+                    };
+                },
+            }, tableWrapper: {
+                elementAttributes: function () { return ({ style: { maxHeight: 600 } }); },
+            }, cellText: {
+                content: function (props) {
+                    var _a;
+                    var existingContent = (_a = childComponents.cellText) === null || _a === void 0 ? void 0 : _a.content;
+                    if (existingContent) {
+                        var result = existingContent(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.key === "select-cell") {
+                        var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
+                        return (react_1.default.createElement(SelectionCell_1.default, __assign({}, props, { selected: isSelected, onSelectionChange: cellSelectionHandle })));
+                    }
+                },
+            } });
+    }, [
+        childComponents,
+        onSortChange,
+        onMenuItemClick,
+        menuItems,
+        handleSelection,
+        rowKey,
+        onRowClick,
+    ]);
+};
+exports.default = useMergedChildComponents;

package/dist/Layout.js

@@ -56,7 +56,7 @@ var modal_1 = __importDefault(require("./Pages/modal"));
 var checkbox_1 = __importDefault(require("./Pages/checkbox"));
 var toster_1 = __importDefault(require("./Pages/toster"));
 var input_1 = __importDefault(require("./Pages/input"));
-var katable_1 = __importDefault(require("./Pages/katable"));
+var KaTableExample_1 = __importDefault(require("./Pages/KaTableExample"));
 var alertdialog_1 = __importDefault(require("./Pages/alertdialog"));
 var Layout = function () {
     var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
@@ -76,7 +76,7 @@ var Layout = function () {
     var renderPage = function () {
         switch (currentPath) {
             case "/katable":
-                return react_2.default.createElement(katable_1.default, null);
+                return react_2.default.createElement(KaTableExample_1.default, null);
             case "/alertdialog":
                 return react_2.default.createElement(alertdialog_1.default, null);
             case "/accordion":

package/dist/Pages/KaTableExample.d.ts

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

package/dist/Pages/KaTableExample.js

@@ -0,0 +1,234 @@
+"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 __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 KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
+var KaTable_2 = require("../Components/KaTable/KaTable");
+var icons_1 = require("@chakra-ui/icons");
+var menuItems = [
+    { label: "Sort", action: "Sort" },
+    { label: "Hide column", action: "Hide column" },
+    {
+        label: "Filter",
+        submenu: [
+            { label: "Filter by Date", action: "Filter by Date" },
+            { label: "Filter by Name", action: "Filter by Name" },
+            { label: "Filter by Status", action: "Filter by Status" },
+        ],
+    },
+];
+var DataType = KaTable_2.TableEnums.DataType;
+var dataArray = Array(5)
+    .fill(undefined)
+    .map(function (_, index) { return ({
+    column1: index % 2 === 0,
+    column2: "column:2 row:".concat(index + 1),
+    column3: index + 5,
+    column4: index + 10,
+    column5: index + 15,
+    column6: index + 20,
+    column7: index + 25,
+    column8: index + 30,
+    column9: index + 35,
+    column10: index + 40,
+    column11: index + 45,
+    column12: index + 50,
+    column13: index + 55,
+    column14: index + 60,
+    column15: new Date(2022, 11, index),
+    id: index + 1,
+}); });
+var columns = [
+    {
+        key: "column1",
+        title: "Column 1",
+        dataType: DataType.Boolean,
+        width: 150,
+        columnFreeze: true,
+        customHeader: false,
+    },
+    {
+        key: "column2",
+        title: "Column 2",
+        dataType: DataType.String,
+        width: 150,
+    },
+    {
+        key: "column3",
+        title: "Column 3",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column4",
+        title: "Column 4",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column5",
+        title: "Column 5",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column6",
+        title: "Column 6",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column7",
+        title: "Column 7",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column8",
+        title: "Column 8",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column9",
+        title: "Column 9",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column10",
+        title: "Column 10",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column11",
+        title: "Column 11",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column12",
+        title: "Column 12",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column13",
+        title: "Column 13",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column14",
+        title: "Column 14",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column15",
+        title: "Column 15",
+        dataType: DataType.Date,
+        width: 150,
+    },
+    {
+        key: "editColumn",
+        width: 80,
+        customHeader: false,
+    },
+];
+var KaTableExample = function () {
+    var _a = (0, react_1.useState)(false), actionButtons = _a[0], setActionButtons = _a[1];
+    var _b = (0, react_1.useState)([]), selectedRows = _b[0], setSelectedRows = _b[1];
+    var kaTableFormat = function (props) {
+        if (props.column.dataType === DataType.Date) {
+            return (props.value &&
+                props.value.toLocaleDateString("en", {
+                    month: "2-digit",
+                    day: "2-digit",
+                    year: "numeric",
+                }));
+        }
+    };
+    var EditButton = function (_a) {
+        var dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue;
+        return (react_1.default.createElement("div", { className: "edit-cell-button" },
+            react_1.default.createElement(icons_1.EditIcon, null),
+            react_1.default.createElement(icons_1.DeleteIcon, null)));
+    };
+    var handleSortChange = function (newSortState, columnName) {
+        console.log("Sort state for ".concat(columnName, " changed to:"), newSortState);
+    };
+    var handleMenuItemClick = function (action, columnName) {
+        console.log("Menu item clicked for ".concat(columnName, ":"), action);
+    };
+    var handleCheckSelect = (0, react_1.useCallback)(function (selectedRows) {
+        console.log("CB", selectedRows);
+        if (selectedRows.length !== 0) {
+            setActionButtons(true);
+        }
+        else {
+            setActionButtons(false);
+        }
+        setSelectedRows(selectedRows);
+    }, []);
+    console.log(actionButtons, "actionButtons");
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
+                console.log("Row clicked", rowKeyValue);
+            }, selected: selectedRows, onSelectionChange: function (selectedRows) {
+                handleCheckSelect(selectedRows);
+            }, menuItems: menuItems, 
+            // onSortChange={handleSortChange}
+            // onMenuItemClick={handleMenuItemClick}
+            // format={kaTableFormat}
+            childComponents: {
+                cellText: {
+                    content: function (props) {
+                        if (props.column.key === "editColumn") {
+                            return react_1.default.createElement(EditButton, __assign({}, props));
+                        }
+                    },
+                },
+            }, loading: {
+                enabled: false,
+                text: "Loading data",
+            } })));
+};
+exports.default = KaTableExample;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./bootstrap";
 import Accordian from "./Components/Accordion/Accordion";
 import AlertDialog from "./Components/AlertDialog/AlertDialog";
 import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";

package/dist/index.js

@@ -1,5 +1,4 @@
 "use strict";
-// import "./bootstrap";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -29,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.TableFun = exports.TableUtils = exports.TableModel = exports.TableProps = exports.TableEnums = exports.TableActionCreator = exports.KaTable = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
 exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = void 0;
+require("./bootstrap");
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));

package/package.json

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