@symply.io/basic-components 1.3.11-alpha.8 → 1.4.0-beta.1

package/DataTable/TableBodyRow.js

@@ -1,3 +1,14 @@
+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);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useState, useMemo } from "react";
 import TableRow from "@mui/material/TableRow";
@@ -5,54 +16,54 @@ import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 function TableBodyRow(props) {
-    const { row, rows, columns, leftShadowVisible, rightShadowVisible, onRowClick, onCustomizeRowBgColor } = props;
-    const [rowEl, setRowEl] = useState();
-    const theme = useTheme();
-    const isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    const [fixedLeftCols, dynamicCols, fixedRightCols] = useMemo(() => {
+    var row = props.row, rows = props.rows, columns = props.columns, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _b = useMemo(function () {
         if (isUpMd) {
-            const left = columns.filter(c => c.fixable === "left");
-            const right = columns.filter(c => c.fixable === "right");
-            const dynamic = columns.filter(c => !c.fixable);
+            var left = columns.filter(function (c) { return c.fixable === "left"; });
+            var right = columns.filter(function (c) { return c.fixable === "right"; });
+            var dynamic = columns.filter(function (c) { return !c.fixable; });
             return [left, dynamic, right];
         }
         else {
             return [[], columns, []];
         }
-    }, [isUpMd, columns]);
-    const { normal, hover } = useMemo(() => {
+    }, [isUpMd, columns]), fixedLeftCols = _b[0], dynamicCols = _b[1], fixedRightCols = _b[2];
+    var _c = useMemo(function () {
         if (onCustomizeRowBgColor) {
-            const regex = /^#(\d|[a-f]|[A-F]){6}/i;
-            const { normal, hover } = onCustomizeRowBgColor({ row, columns });
+            var regex = /^#(\d|[a-f]|[A-F]){6}/i;
+            var _a = onCustomizeRowBgColor({ row: row, columns: columns }), normal_1 = _a.normal, hover_1 = _a.hover;
             return {
-                normal: normal && regex.test(normal) ? normal : "#FEFEFE",
-                hover: hover && regex.test(hover) ? hover : "#F2F1F3"
+                normal: normal_1 && regex.test(normal_1) ? normal_1 : "#FEFEFE",
+                hover: hover_1 && regex.test(hover_1) ? hover_1 : "#F2F1F3"
             };
         }
         return { normal: "#FEFEFE", hover: "#F2F1F3" };
-    }, [row, columns, onCustomizeRowBgColor]);
-    return (_jsxs(TableRow, { sx: {
+    }, [row, columns, onCustomizeRowBgColor]), normal = _c.normal, hover = _c.hover;
+    return (_jsxs(TableRow, __assign({ sx: {
             backgroundColor: normal,
             "&:hover": {
                 cursor: onRowClick ? "pointer" : "default",
                 backgroundColor: onRowClick ? hover : normal
             }
-        }, onMouseEnter: event => {
+        }, onMouseEnter: function (event) {
             setRowEl(event.currentTarget);
-        }, onMouseLeave: () => {
+        }, onMouseLeave: function () {
             setRowEl(undefined);
         }, onClick: onRowClick
-            ? () => {
+            ? function () {
                 onRowClick(row);
             }
-            : undefined, children: [fixedLeftCols.map((col, index) => {
-                const { accessor, Cell, width, align = "center" } = col;
-                const left = fixedLeftCols
+            : undefined }, { children: [fixedLeftCols.map(function (col, index) {
+                var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
+                var left = fixedLeftCols
                     .slice(0, index)
-                    .reduce((w, t) => w + (t.width || 0), 0);
-                return (_jsx(TableCell, { align: align, sx: {
-                        width,
-                        left,
+                    .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                return (_jsx(TableCell, __assign({ align: align, sx: {
+                        width: width,
+                        left: left,
                         position: "sticky",
                         zIndex: 10,
                         backgroundColor: onRowClick && rowEl ? hover : normal,
@@ -69,22 +80,22 @@ function TableBodyRow(props) {
                                 boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
                             }
                             : undefined
-                    }, children: cloneElement(Cell, { column: col, rows, row }) }, accessor));
-            }), dynamicCols.map(col => {
-                const { accessor, Cell, width, align = "center" } = col;
-                return (_jsx(TableCell, { align: align, sx: {
-                        width,
+                    } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
+            }), dynamicCols.map(function (col) {
+                var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
+                return (_jsx(TableCell, __assign({ align: align, sx: {
+                        width: width,
                         zIndex: 9,
                         backgroundColor: onRowClick && rowEl ? hover : normal
-                    }, children: cloneElement(Cell, { column: col, rows, row }) }, accessor));
-            }), fixedRightCols.map((col, index) => {
-                const { accessor, Cell, width, align = "center" } = col;
-                const right = fixedRightCols
+                    } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
+            }), fixedRightCols.map(function (col, index) {
+                var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
+                var right = fixedRightCols
                     .slice(0, fixedRightCols.length - 1 - index)
-                    .reduce((w, t) => w + (t.width || 0), 0);
-                return (_jsx(TableCell, { align: align, sx: {
-                        width,
-                        right,
+                    .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                return (_jsx(TableCell, __assign({ align: align, sx: {
+                        width: width,
+                        right: right,
                         position: "sticky",
                         zIndex: 10,
                         backgroundColor: onRowClick && rowEl ? hover : normal,
@@ -101,7 +112,7 @@ function TableBodyRow(props) {
                                 boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
                             }
                             : undefined
-                    }, children: cloneElement(Cell, { column: col, rows, row }) }, accessor));
-            })] }));
+                    } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
+            })] })));
 }
 export default TableBodyRow;

package/DataTable/TableFooter.js

@@ -1,3 +1,14 @@
+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);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useMemo } from "react";
 import TableRow from "@mui/material/TableRow";
@@ -6,31 +17,31 @@ import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 function TableFooter(props) {
-    const { footers, noData, leftShadowVisible, rightShadowVisible } = props;
-    const theme = useTheme();
-    const isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    const [fixedLeftFooters, dynamicFooters, fixedRightFooters] = useMemo(() => {
+    var footers = props.footers, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _a = useMemo(function () {
         if (isUpMd && !noData) {
-            const left = footers.filter(f => f.fixable === "left");
-            const right = footers.filter(f => f.fixable === "right");
-            const dynamic = footers.filter(f => !f.fixable);
+            var left = footers.filter(function (f) { return f.fixable === "left"; });
+            var right = footers.filter(function (f) { return f.fixable === "right"; });
+            var dynamic = footers.filter(function (f) { return !f.fixable; });
             return [left, dynamic, right];
         }
         else {
             return [[], footers, []];
         }
-    }, [isUpMd, noData, footers]);
-    return (_jsx(Footer, { sx: { position: "sticky", bottom: "-1px", zIndex: 20 }, children: _jsxs(TableRow, { sx: { backgroundColor: "#eaf0f6" }, children: [fixedLeftFooters.map((footer, index) => {
-                    const { accessor, Cell, align = "center", width } = footer;
-                    const left = fixedLeftFooters
+    }, [isUpMd, noData, footers]), fixedLeftFooters = _a[0], dynamicFooters = _a[1], fixedRightFooters = _a[2];
+    return (_jsx(Footer, __assign({ sx: { position: "sticky", bottom: "-1px", zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftFooters.map(function (footer, index) {
+                    var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
+                    var left = fixedLeftFooters
                         .slice(0, index)
-                        .reduce((w, t) => w + (t.width || 0), 0);
-                    return (_jsx(TableCell, { align: align, sx: {
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ align: align, sx: {
                             position: "sticky",
                             backgroundColor: "#eaf0f6",
                             zIndex: 10,
-                            left,
-                            width,
+                            left: left,
+                            width: width,
                             userSelect: "none",
                             "&::after": index === fixedLeftFooters.length - 1 && leftShadowVisible
                                 ? {
@@ -45,24 +56,24 @@ function TableFooter(props) {
                                     boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
                                 }
                                 : undefined
-                        }, children: cloneElement(Cell) }, accessor));
-                }), dynamicFooters.map(footer => {
-                    const { accessor, Cell, align = "center", width } = footer;
-                    return (_jsx(TableCell, { align: align, sx: {
+                        } }, { children: cloneElement(Cell) }), accessor));
+                }), dynamicFooters.map(function (footer) {
+                    var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
+                    return (_jsx(TableCell, __assign({ align: align, sx: {
                             zIndex: 9,
-                            width,
+                            width: width,
                             userSelect: "none"
-                        }, children: cloneElement(Cell) }, accessor));
-                }), fixedRightFooters.map((footer, index) => {
-                    const { accessor, Cell, align = "center", width } = footer;
-                    const right = fixedRightFooters
+                        } }, { children: cloneElement(Cell) }), accessor));
+                }), fixedRightFooters.map(function (footer, index) {
+                    var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
+                    var right = fixedRightFooters
                         .slice(0, fixedRightFooters.length - 1 - index)
-                        .reduce((w, t) => w + (t.width || 0), 0);
-                    return (_jsx(TableCell, { align: align, sx: {
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ align: align, sx: {
                             position: "sticky",
                             zIndex: 10,
-                            width,
-                            right,
+                            width: width,
+                            right: right,
                             backgroundColor: "#eaf0f6",
                             userSelect: "none",
                             "&::after": index === 0 && rightShadowVisible
@@ -78,7 +89,7 @@ function TableFooter(props) {
                                     boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
                                 }
                                 : undefined
-                        }, children: cloneElement(Cell) }, accessor));
-                })] }) }));
+                        } }, { children: cloneElement(Cell) }), accessor));
+                })] })) })));
 }
 export default TableFooter;

package/DataTable/TableHeader.js

@@ -1,3 +1,14 @@
+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);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useMemo } from "react";
 import TableRow from "@mui/material/TableRow";
@@ -6,31 +17,31 @@ import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 function TableHeader(props) {
-    const { headers, noData, leftShadowVisible, rightShadowVisible } = props;
-    const theme = useTheme();
-    const isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    const [fixedLeftHeaders, dynamicHeaders, fixedRightHeaders] = useMemo(() => {
+    var headers = props.headers, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _a = useMemo(function () {
         if (isUpMd && !noData) {
-            const left = headers.filter(h => h.fixable === "left");
-            const right = headers.filter(h => h.fixable === "right");
-            const dynamic = headers.filter(h => !h.fixable);
+            var left = headers.filter(function (h) { return h.fixable === "left"; });
+            var right = headers.filter(function (h) { return h.fixable === "right"; });
+            var dynamic = headers.filter(function (h) { return !h.fixable; });
             return [left, dynamic, right];
         }
         else {
             return [[], headers, []];
         }
-    }, [isUpMd, noData, headers]);
-    return (_jsx(TableHead, { sx: { position: "sticky", top: 0, zIndex: 20 }, children: _jsxs(TableRow, { sx: { backgroundColor: "#eaf0f6" }, children: [fixedLeftHeaders.map((header, index) => {
-                    const { accessor, Cell, align = "center", width, title, sortable = false, onSort } = header;
-                    const left = fixedLeftHeaders
+    }, [isUpMd, noData, headers]), fixedLeftHeaders = _a[0], dynamicHeaders = _a[1], fixedRightHeaders = _a[2];
+    return (_jsx(TableHead, __assign({ sx: { position: "sticky", top: 0, zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: { backgroundColor: "#eaf0f6" } }, { children: [fixedLeftHeaders.map(function (header, index) {
+                    var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
+                    var left = fixedLeftHeaders
                         .slice(0, index)
-                        .reduce((w, t) => w + (t.width || 0), 0);
-                    return (_jsx(TableCell, { title: title, align: align, sx: {
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
                             position: "sticky",
                             backgroundColor: "#eaf0f6",
                             zIndex: 10,
-                            width,
-                            left,
+                            width: width,
+                            left: left,
                             userSelect: "none",
                             cursor: sortable ? "pointer" : "default",
                             "&::after": index === fixedLeftHeaders.length - 1 && leftShadowVisible
@@ -46,30 +57,30 @@ function TableHeader(props) {
                                     boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
                                 }
                                 : undefined
-                        }, onClick: () => {
-                            onSort({ accessor });
-                        }, children: cloneElement(Cell) }, accessor));
-                }), dynamicHeaders.map(header => {
-                    const { accessor, Cell, align = "center", width, title, sortable = false, onSort } = header;
-                    return (_jsx(TableCell, { title: title, align: align, sx: {
-                            width,
+                        }, onClick: function () {
+                            onSort({ accessor: accessor });
+                        } }, { children: cloneElement(Cell) }), accessor));
+                }), dynamicHeaders.map(function (header) {
+                    var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
+                    return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
+                            width: width,
                             zIndex: 9,
                             userSelect: "none",
                             cursor: sortable ? "pointer" : "default"
-                        }, onClick: () => {
-                            onSort({ accessor });
-                        }, children: cloneElement(Cell) }, accessor));
-                }), fixedRightHeaders.map((header, index) => {
-                    const { accessor, Cell, align = "center", width, title, sortable = false, onSort } = header;
-                    const right = fixedRightHeaders
+                        }, onClick: function () {
+                            onSort({ accessor: accessor });
+                        } }, { children: cloneElement(Cell) }), accessor));
+                }), fixedRightHeaders.map(function (header, index) {
+                    var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
+                    var right = fixedRightHeaders
                         .slice(0, fixedRightHeaders.length - 1 - index)
-                        .reduce((w, t) => w + (t.width || 0), 0);
-                    return (_jsx(TableCell, { title: title, align: align, sx: {
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
                             position: "sticky",
                             backgroundColor: "#eaf0f6",
                             zIndex: 10,
-                            width,
-                            right,
+                            width: width,
+                            right: right,
                             userSelect: "none",
                             cursor: sortable ? "pointer" : "default",
                             "&::after": index === 0 && rightShadowVisible
@@ -85,9 +96,9 @@ function TableHeader(props) {
                                     boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
                                 }
                                 : undefined
-                        }, onClick: () => {
-                            onSort({ accessor });
-                        }, children: cloneElement(Cell) }, accessor));
-                })] }) }));
+                        }, onClick: function () {
+                            onSort({ accessor: accessor });
+                        } }, { children: cloneElement(Cell) }), accessor));
+                })] })) })));
 }
 export default TableHeader;

package/DataTable/index.js

@@ -1,3 +1,14 @@
+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);
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useRef, useEffect } from "react";
 import Table from "@mui/material/Table";
@@ -8,34 +19,34 @@ import TableBody from "./TableBody";
 import TableHeader from "./TableHeader";
 import TableFooter from "./TableFooter";
 function DataTable(props) {
-    const { columns = [], rows = [], headers = [], footers = [], noDataText = "No Data!", dense, stickyHeader, primaryColor, secondaryColor, onRowClick, onCustomizeRowBgColor } = props;
-    const theme = useCustomTheme({ primaryColor, secondaryColor });
-    const tableRef = useRef(null);
-    const [leftShadowVisible, setLeftShadowVisible] = useState(false);
-    const [rightShadowVisible, setRightShadowVisible] = useState(false);
-    const onProcessShadowVisible = useCallback(() => {
+    var _a = props.columns, columns = _a === void 0 ? [] : _a, _b = props.rows, rows = _b === void 0 ? [] : _b, _c = props.headers, headers = _c === void 0 ? [] : _c, _d = props.footers, footers = _d === void 0 ? [] : _d, _e = props.noDataText, noDataText = _e === void 0 ? "No Data!" : _e, dense = props.dense, stickyHeader = props.stickyHeader, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var tableRef = useRef(null);
+    var _f = useState(false), leftShadowVisible = _f[0], setLeftShadowVisible = _f[1];
+    var _g = useState(false), rightShadowVisible = _g[0], setRightShadowVisible = _g[1];
+    var onProcessShadowVisible = useCallback(function () {
         if (tableRef.current) {
-            const target = tableRef.current;
-            const scrollLeft = target.scrollLeft;
-            const scrollWidth = target.scrollWidth;
-            const clientWidth = target.clientWidth;
-            const hasScrollBar = scrollWidth > clientWidth;
+            var target = tableRef.current;
+            var scrollLeft = target.scrollLeft;
+            var scrollWidth = target.scrollWidth;
+            var clientWidth = target.clientWidth;
+            var hasScrollBar = scrollWidth > clientWidth;
             setLeftShadowVisible(hasScrollBar && scrollLeft > 0);
             setRightShadowVisible(hasScrollBar && scrollWidth - scrollLeft > clientWidth + 1);
         }
     }, []);
-    useEffect(() => {
+    useEffect(function () {
         if (columns) {
             onProcessShadowVisible();
         }
     }, [columns, onProcessShadowVisible]);
-    useEffect(() => {
+    useEffect(function () {
         window.addEventListener("resize", onProcessShadowVisible);
     }, [onProcessShadowVisible]);
-    useEffect(() => () => {
+    useEffect(function () { return function () {
         window.removeEventListener("scroll", onProcessShadowVisible);
-    }, [onProcessShadowVisible]);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TableContainer, { ref: tableRef, onScroll: onProcessShadowVisible, sx: {
+    }; }, [onProcessShadowVisible]);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TableContainer, __assign({ ref: tableRef, onScroll: onProcessShadowVisible, sx: {
                 maxHeight: "inherit",
                 borderWidth: "thin",
                 borderColor: "#e5e5e5",
@@ -43,7 +54,7 @@ function DataTable(props) {
                 borderRadius: "4px",
                 borderCollapse: "unset !important",
                 transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
-            }, children: _jsxs(Table, { sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium", children: [_jsx(TableHeader, { headers: headers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onCustomizeRowBgColor: onCustomizeRowBgColor, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] }) }) }));
+            } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onCustomizeRowBgColor: onCustomizeRowBgColor, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
 }
 export default DataTable;
 export * from "./types";

package/DataTable/useTable.js

@@ -1,40 +1,63 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useState, useMemo, useCallback } from "react";
 function useTable(props) {
-    const { data, columns, initialState, disableSortBy, onSort, ...rest } = props;
+    var data = props.data, columns = props.columns, initialState = props.initialState, disableSortBy = props.disableSortBy, onSort = props.onSort, rest = __rest(props, ["data", "columns", "initialState", "disableSortBy", "onSort"]);
     if (!data) {
         throw new Error('"data" is required but got null or undefined');
     }
     if (!columns) {
         throw new Error('"columns" is required but got null or undefined');
     }
-    const { sortBy } = initialState || {};
-    const { accessor, order } = sortBy || {};
-    const [sortingProps, setSortingProps] = useState({
+    var sortBy = (initialState || {}).sortBy;
+    var _a = sortBy || {}, accessor = _a.accessor, order = _a.order;
+    var _b = useState({
         accessor: accessor || "",
         order: !!accessor ? order || "NONE" : "NONE"
-    });
-    const handleSort = useCallback(({ accessor }) => {
+    }), sortingProps = _b[0], setSortingProps = _b[1];
+    var handleSort = useCallback(function (_a) {
+        var accessor = _a.accessor;
         if (!disableSortBy) {
-            let newSortingProps = { ...sortingProps };
+            var newSortingProps = __assign({}, sortingProps);
             if (accessor !== sortingProps.accessor ||
                 sortingProps.order === "NONE") {
-                newSortingProps = { accessor, order: "ASC" };
+                newSortingProps = { accessor: accessor, order: "ASC" };
             }
             else if (sortingProps.order === "ASC") {
-                newSortingProps = { ...sortingProps, order: "DESC" };
+                newSortingProps = __assign(__assign({}, sortingProps), { order: "DESC" });
             }
             else {
-                newSortingProps = { ...sortingProps, order: "NONE" };
+                newSortingProps = __assign(__assign({}, sortingProps), { order: "NONE" });
             }
             if (onSort) {
-                onSort({ ...newSortingProps });
+                onSort(__assign({}, newSortingProps));
             }
-            setSortingProps({ ...newSortingProps });
+            setSortingProps(__assign({}, newSortingProps));
         }
     }, [disableSortBy, onSort, sortingProps]);
-    const renderSortingSymbol = useCallback((accessor) => {
-        const { accessor: field, order } = sortingProps;
+    var renderSortingSymbol = useCallback(function (accessor) {
+        var field = sortingProps.accessor, order = sortingProps.order;
         if (accessor !== field || order === "NONE") {
             return "";
         }
@@ -43,44 +66,29 @@ function useTable(props) {
         }
         return "↓";
     }, [sortingProps]);
-    const rows = useMemo(() => data.map(d => ({ ...d })), [data]);
-    const cols = useMemo(() => {
-        return columns.map(col => {
-            const { Body } = col;
-            return {
-                Cell: cloneElement(Body || _jsx(_Fragment, {}), { column: col }),
-                ...col,
-                ...rest
-            };
+    var rows = useMemo(function () { return data.map(function (d) { return (__assign({}, d)); }); }, [data]);
+    var cols = useMemo(function () {
+        return columns.map(function (col) {
+            var Body = col.Body;
+            return __assign(__assign({ Cell: cloneElement(Body || _jsx(_Fragment, {}), { column: col }) }, col), rest);
         });
     }, [columns, rest]);
-    const headers = useMemo(() => {
-        return columns.map(col => {
-            const { Header, accessor, sortable, headerTip } = col;
-            const canSortBy = sortable && !disableSortBy;
-            return {
-                Cell: (_jsxs(_Fragment, { children: [cloneElement(Header || _jsx(_Fragment, {}), { column: col }), canSortBy && renderSortingSymbol(accessor)] })),
-                title: `${headerTip || ""}${canSortBy ? " (Click to sort)" : ""}`,
-                sortable: canSortBy,
-                onSort: canSortBy ? handleSort : () => { },
-                ...col,
-                ...rest
-            };
+    var headers = useMemo(function () {
+        return columns.map(function (col) {
+            var Header = col.Header, accessor = col.accessor, sortable = col.sortable, headerTip = col.headerTip;
+            var canSortBy = sortable && !disableSortBy;
+            return __assign(__assign({ Cell: (_jsxs(_Fragment, { children: [cloneElement(Header || _jsx(_Fragment, {}), { column: col }), canSortBy && renderSortingSymbol(accessor)] })), title: "".concat(headerTip || "").concat(canSortBy ? " (Click to sort)" : ""), sortable: canSortBy, onSort: canSortBy ? handleSort : function () { } }, col), rest);
         });
     }, [columns, disableSortBy, handleSort, renderSortingSymbol, rest]);
-    const footers = useMemo(() => {
-        return columns.map(col => {
-            const { Footer } = col;
-            return {
-                Cell: cloneElement(Footer || _jsx(_Fragment, {}), {
+    var footers = useMemo(function () {
+        return columns.map(function (col) {
+            var Footer = col.Footer;
+            return __assign(__assign({ Cell: cloneElement(Footer || _jsx(_Fragment, {}), {
                     column: col,
-                    rows
-                }),
-                ...col,
-                ...rest
-            };
+                    rows: rows
+                }) }, col), rest);
         });
     }, [columns, rest, rows]);
-    return { headers, footers, columns: cols, rows };
+    return { headers: headers, footers: footers, columns: cols, rows: rows };
 }
 export default useTable;