pixelize-design-library 1.1.40 → 1.1.42

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 (9) hide show
  1. package/dist/Components/SideBar/SideBar.js +2 -2
  2. package/dist/Components/Table/Components/TableBody.d.ts +1 -1
  3. package/dist/Components/Table/Components/TableBody.js +100 -35
  4. package/dist/Components/Table/Components/TableHeader.d.ts +1 -1
  5. package/dist/Components/Table/Components/TableHeader.js +28 -4
  6. package/dist/Components/Table/Table.js +4 -2
  7. package/dist/Components/Table/TableProps.d.ts +5 -1
  8. package/dist/Pages/table.js +10 -1
  9. package/package.json +1 -1
package/dist/Components/SideBar/SideBar.js CHANGED
@@ -47,12 +47,12 @@ function Sidebar(_a) {
47
47
  }, _active: { color: theme.colors.white }, w: "98%", onClick: function () { return handleMenuClick(menu === null || menu === void 0 ? void 0 : menu.title, menu === null || menu === void 0 ? void 0 : menu.url); }, mt: "5px", className: "custom-link", width: toggle ? "none" : "100%" },
48
48
  react_1.default.createElement(react_2.MenuButton, { w: "100%", p: "12px", fontWeight: 700 },
49
49
  react_1.default.createElement(react_2.Flex, { gap: "10px" },
50
- react_1.default.createElement(react_2.Icon, { as: menu.icon, fontSize: "xl", color: activeMenu === menu.title
50
+ react_1.default.createElement(react_2.Icon, { as: menu.icon, fontSize: "18px", color: activeMenu === menu.title
51
51
  ? toggle
52
52
  ? theme.colors.primary["500"]
53
53
  : "white"
54
54
  : "" }),
55
- react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", color: activeMenu === menu.title ? (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white : "" }, menu.title)))),
55
+ react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: "14px", color: activeMenu === menu.title ? (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white : "" }, menu.title)))),
56
56
  menu.subMenu && (react_1.default.createElement(react_2.MenuList, { py: 0, border: "none", ml: toggle ? 3 : 6, boxShadow: "0 4px 12px 0 rgba(0, 0, 0, 0.05)" },
57
57
  react_1.default.createElement(react_2.Flex, { pos: "absolute", mt: "calc(100px - 70px)", ml: "-10px", width: 0, height: 0, borderTop: "10px solid transparent", borderBottom: "10px solid transparent", borderRight: "10px solid #3182CE" }),
58
58
  menu.subMenu.map(function (subMenuItem) { return (react_1.default.createElement(react_2.MenuItem, { key: subMenuItem.title }, subMenuItem.title)); })))));
package/dist/Components/Table/Components/TableBody.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { TableBodyPageProps } from "../TableProps";
3
- declare const TableBody: ({ data, isCheckbox, columns, visibleColumns, startRow, endRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, }: TableBodyPageProps) => React.JSX.Element;
3
+ declare const TableBody: ({ data, isCheckbox, columns, visibleColumns, startRow, endRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, }: TableBodyPageProps) => React.JSX.Element;
4
4
  export default TableBody;
package/dist/Components/Table/Components/TableBody.js CHANGED
@@ -1,19 +1,78 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
4
24
  };
5
25
  Object.defineProperty(exports, "__esModule", { value: true });
6
26
  var react_1 = require("@chakra-ui/react");
7
- var react_2 = __importDefault(require("react"));
27
+ var react_2 = __importStar(require("react"));
8
28
  var table_1 = require("../../../Utils/table");
9
29
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
10
30
  var TableLoading_1 = require("./TableLoading");
31
+ var fa_1 = require("react-icons/fa");
32
+ var icons_1 = require("@chakra-ui/icons");
11
33
  var TableBody = function (_a) {
12
- 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;
34
+ var _b;
35
+ 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;
13
36
  var theme = (0, useCustomTheme_1.useCustomTheme)();
37
+ var _c = (0, react_2.useState)(new Set()), expandedRows = _c[0], setExpandedRows = _c[1];
38
+ var toggleRowExpansion = function (rowIndex) {
39
+ setExpandedRows(function (prev) {
40
+ var newSet = new Set(prev);
41
+ if (newSet.has(rowIndex)) {
42
+ newSet.delete(rowIndex);
43
+ }
44
+ else {
45
+ newSet.add(rowIndex);
46
+ }
47
+ return newSet;
48
+ });
49
+ };
14
50
  var handleRowClick = function (row, header) {
15
51
  onRowClick && onRowClick(row, header);
16
52
  };
53
+ var RenderCheckbox = (0, react_2.useCallback)(function (_a) {
54
+ var _b;
55
+ var row = _a.row;
56
+ 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" },
57
+ 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) })));
58
+ }, [
59
+ freezedBgColor,
60
+ freezedTextColor,
61
+ handleCheckbox,
62
+ noBorders,
63
+ selections,
64
+ (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray,
65
+ ]);
66
+ var RenderContent = (0, react_2.useCallback)(function (_a) {
67
+ var _b, _c;
68
+ var isExpanded = _a.isExpanded, rowIndex = _a.rowIndex, isContent = _a.isContent;
69
+ 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" }))));
70
+ }, [freezedBgColor, freezedTextColor, noBorders, theme.colors.gray]);
71
+ var RenderView = (0, react_2.useCallback)(function (_a) {
72
+ var _b, _c;
73
+ var row = _a.row;
74
+ 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" }))));
75
+ }, [freezedBgColor, freezedTextColor, noBorders, theme.colors.gray]);
17
76
  if (isLoading) {
18
77
  var totalVisibleColumns = Object.values(visibleColumns).filter(Boolean).length +
19
78
  (isCheckbox ? 1 : 0);
@@ -28,37 +87,43 @@ var TableBody = function (_a) {
28
87
  react_2.default.createElement("p", null, "No data found")))));
29
88
  }
30
89
  return (react_2.default.createElement(react_2.default.Fragment, null, data.slice(startRow, endRow).map(function (row, index) {
31
- var _a;
32
- return (react_2.default.createElement(react_1.Tr, { key: index + 1, _hover: {
33
- "& > td": {
34
- backgroundColor: theme.colors.gray[100], // Apply hover to all cells
35
- },
36
- } },
37
- 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" },
38
- 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) }))),
39
- columns.map(function (header, headerIndex) {
40
- var _a;
41
- var isFrozen = header.isFreeze;
42
- var leftOffset = isFrozen
43
- ? (0, table_1.calculateLeftOffset)(columnWidths, headerIndex) +
44
- (isCheckbox ? 50 : 0)
45
- : 0;
46
- return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, key: headerIndex + 1, onClick: function () {
47
- return !header.node
48
- ? handleRowClick(row, {
49
- label: header.label,
50
- id: header.id,
51
- })
52
- : null;
53
- }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: isFrozen
54
- ? freezedBgColor
55
- : index % 2 === 1
56
- ? theme.colors.backgroundColor.light
57
- : "white", textOverflow: "ellipsis", border: noBorders
58
- ? "none"
59
- : "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 },
60
- react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.node ? header.node(row) : row[header.id]))));
61
- })));
90
+ var rowIndex = startRow + index;
91
+ var isExpanded = expandedRows.has(rowIndex);
92
+ return (react_2.default.createElement(react_2.default.Fragment, { key: rowIndex },
93
+ react_2.default.createElement(react_1.Tr, { key: index + 1, _hover: {
94
+ "& > td": {
95
+ backgroundColor: theme.colors.gray[100],
96
+ },
97
+ } },
98
+ isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!row.content })),
99
+ isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row }),
100
+ columns.map(function (header, headerIndex) {
101
+ var _a;
102
+ var isFrozen = header.isFreeze;
103
+ var leftOffset = isFrozen
104
+ ? (0, table_1.calculateLeftOffset)(columnWidths, headerIndex) +
105
+ (isCheckbox ? 50 : 0)
106
+ : 0;
107
+ return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, key: headerIndex + 1, onClick: function () {
108
+ return !header.node
109
+ ? handleRowClick(row, {
110
+ label: header.label,
111
+ id: header.id,
112
+ })
113
+ : null;
114
+ }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: isFrozen
115
+ ? freezedBgColor
116
+ : index % 2 === 1
117
+ ? theme.colors.backgroundColor.light
118
+ : "white", textOverflow: "ellipsis", border: noBorders
119
+ ? "none"
120
+ : "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 },
121
+ react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.node ? header.node(row) : row[header.id]))));
122
+ }),
123
+ isLink && react_2.default.createElement(RenderView, { row: row })),
124
+ row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
125
+ react_2.default.createElement(react_1.Td, { colSpan: columns.length + (isCheckbox ? 1 : 0) + (isContent ? 1 : 0), p: 2 },
126
+ 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)))))));
62
127
  })));
63
128
  };
64
129
  exports.default = TableBody;
package/dist/Components/Table/Components/TableHeader.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { TableHeaderPageProps } from "../TableProps";
3
- declare const TableHeader: ({ columns, isCheckbox, visibleColumns, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, }: TableHeaderPageProps) => React.JSX.Element;
3
+ declare const TableHeader: ({ columns, isCheckbox, visibleColumns, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, }: TableHeaderPageProps) => React.JSX.Element;
4
4
  export default TableHeader;
package/dist/Components/Table/Components/TableHeader.js CHANGED
@@ -30,11 +30,34 @@ var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
30
30
  var fa_1 = require("react-icons/fa");
31
31
  var TableHeader = function (_a) {
32
32
  var _b;
33
- 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;
33
+ 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;
34
34
  var theme = (0, useCustomTheme_1.useCustomTheme)();
35
+ var RenderCheckbox = (0, react_2.useCallback)(function () {
36
+ var _a;
37
+ 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)" },
38
+ 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" })));
39
+ }, [
40
+ checked,
41
+ freezedBgColor,
42
+ freezedTextColor,
43
+ handleCheckbox,
44
+ isLoading,
45
+ noBorders,
46
+ (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray,
47
+ ]);
48
+ var RenderConent = (0, react_2.useCallback)(function () {
49
+ var _a;
50
+ 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)" },
51
+ react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
52
+ react_2.default.createElement(fa_1.FaExpandArrowsAlt, { fontSize: 14 }))));
53
+ }, [freezedBgColor, noBorders, theme.colors.gray]);
54
+ var RenderView = (0, react_2.useCallback)(function () {
55
+ var _a;
56
+ 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)" }));
57
+ }, [freezedBgColor, noBorders, theme.colors.gray]);
35
58
  return (react_2.default.createElement(react_1.Tr, null,
36
- 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)" },
37
- 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" }))),
59
+ isContent && react_2.default.createElement(RenderConent, null),
60
+ isCheckbox && react_2.default.createElement(RenderCheckbox, null),
38
61
  columns.map(function (header, index) {
39
62
  var _a, _b;
40
63
  var isFrozen = header.isFreeze;
@@ -59,7 +82,8 @@ var TableHeader = function (_a) {
59
82
  }
60
83
  handleSort(header.id, direction);
61
84
  } })))))));
62
- })));
85
+ }),
86
+ isLink && react_2.default.createElement(RenderView, null)));
63
87
  };
64
88
  exports.default = TableHeader;
65
89
  var SortingIcon = (0, react_2.memo)(function (_a) {
package/dist/Components/Table/Table.js CHANGED
@@ -128,6 +128,8 @@ function Table(_a) {
128
128
  return (__assign(__assign({}, prev), (_a = {}, _a[header] = !prev[header], _a)));
129
129
  });
130
130
  };
131
+ var isContent = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.content; }); }, [data]);
132
+ var isLink = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.onLink; }); }, [data]);
131
133
  var RenderTable = function (_a) {
132
134
  var _b, _c, _d;
133
135
  var columns = _a.columns;
@@ -137,9 +139,9 @@ function Table(_a) {
137
139
  ? true
138
140
  : selection.length === 0
139
141
  ? false
140
- : "indeterminate" })),
142
+ : "indeterminate", isContent: isContent, isLink: isLink })),
141
143
  react_1.default.createElement(react_3.Tbody, null,
142
- 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 }))));
144
+ 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 }))));
143
145
  };
144
146
  return (react_1.default.createElement(react_1.default.Fragment, null,
145
147
  react_1.default.createElement(react_2.TableContainer, { sx: {
package/dist/Components/Table/TableProps.d.ts CHANGED
@@ -19,7 +19,7 @@ export type TableProps = {
19
19
  onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
20
20
  };
21
21
  export type DataObject = {
22
- [key: string]: string | number;
22
+ [key: string]: string | number | any;
23
23
  };
24
24
  export type TableHeaderProps = {
25
25
  label: string | number;
@@ -50,6 +50,8 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
50
50
  columnsSort: ColumnSortingProps[];
51
51
  handleCheckbox: (selection: string | number) => void;
52
52
  checked: boolean | "indeterminate";
53
+ isContent: boolean;
54
+ isLink: boolean;
53
55
  };
54
56
  export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "onRowClick"> & {
55
57
  visibleColumns: Record<string, boolean>;
@@ -58,4 +60,6 @@ export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "da
58
60
  columnWidths: number[];
59
61
  handleCheckbox: (selection: string | number) => void;
60
62
  selections: (string | number)[];
63
+ isContent: boolean;
64
+ isLink: boolean;
61
65
  };
package/dist/Pages/table.js CHANGED
@@ -12,12 +12,21 @@ var tableData = [
12
12
  name: "John Doe",
13
13
  age: 30,
14
14
  gender: "Male",
15
+ onLink: function (url) {
16
+ console.log("URL", url);
17
+ },
15
18
  },
16
19
  {
17
20
  id: 2,
18
21
  name: "Jane Doe",
19
22
  age: 25,
20
23
  gender: "Female",
24
+ content: function (data) {
25
+ return (react_1.default.createElement("div", null,
26
+ data.name,
27
+ " - ",
28
+ data.age));
29
+ },
21
30
  },
22
31
  {
23
32
  id: 3,
@@ -30,7 +39,7 @@ var column = [
30
39
  {
31
40
  label: "Name",
32
41
  id: "name",
33
- isFreeze: true,
42
+ isFreeze: false,
34
43
  isSort: true,
35
44
  },
36
45
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "1.1.40",
3
+ "version": "1.1.42",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",