@symply.io/basic-components 1.1.1 → 1.1.2-beta.10

package/DataTable/TableBody.d.ts

@@ -0,0 +1,3 @@
+import { TableBodyProps, KvProps } from "./types";
+declare function TBody<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableBodyProps<RowProps, ExtendedProps>): JSX.Element;
+export default TBody;

package/DataTable/TableBody.js

@@ -0,0 +1,32 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableBodyRow from "./TableBodyRow";
+function TBody(props) {
+    var rows = props.rows, columns = props.columns, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a, rest = __rest(props, ["rows", "columns", "noDataText"]);
+    return (_jsx(TableBody, { children: rows.length > 0 ? (rows.map(function (row, index) { return (_jsx(TableBodyRow, __assign({ row: row, rows: rows, columns: columns }, rest), "DataTable_".concat(index))); })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
+}
+export default TBody;

package/DataTable/TableBodyRow.d.ts

@@ -0,0 +1,3 @@
+import { TableBodyRowProps, KvProps } from "./types";
+declare function TableBodyRow<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableBodyRowProps<RowProps, ExtendedProps>): JSX.Element;
+export default TableBodyRow;

package/DataTable/TableBodyRow.js

@@ -0,0 +1,100 @@
+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 } from "react";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import useTheme from "@mui/material/styles/useTheme";
+function TableBodyRow(props) {
+    var row = props.row, rows = props.rows, columns = props.columns, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick;
+    var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var fixedLeftCols = isUpMd ? columns.filter(function (c) { return c.fixable === "left"; }) : [];
+    var fixedRightCols = isUpMd
+        ? columns.filter(function (c) { return c.fixable === "right"; })
+        : [];
+    var dynamicCols = isUpMd ? columns.filter(function (c) { return !c.fixable; }) : columns;
+    return (_jsxs(TableRow, __assign({ sx: {
+            "&:hover": {
+                cursor: onRowClick ? "pointer" : "default",
+                backgroundColor: onRowClick ? "#F2F1F3" : "#FEFEFE"
+            }
+        }, onMouseEnter: function (event) {
+            setRowEl(event.currentTarget);
+        }, onMouseLeave: function () {
+            setRowEl(undefined);
+        }, onClick: onRowClick
+            ? function () {
+                onRowClick(row);
+            }
+            : 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(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 ? "#F2F1F3" : "#FEFEFE",
+                        "&::after": index === fixedLeftCols.length - 1 && leftShadowVisible
+                            ? {
+                                position: "absolute",
+                                top: 0,
+                                right: 0,
+                                bottom: "-1px",
+                                width: "20px",
+                                transform: "translateX(100%)",
+                                transition: "box-shadow .3s",
+                                content: "''",
+                                boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
+                            }
+                            : undefined
+                    } }, { 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 ? "#F2F1F3" : "#FEFEFE"
+                    } }, { 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(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 ? "#F2F1F3" : "#FEFEFE",
+                        "&::after": index === 0 && rightShadowVisible
+                            ? {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                bottom: "-1px",
+                                width: "20px",
+                                transform: "translateX(-100%)",
+                                transition: "box-shadow .3s",
+                                content: "''",
+                                boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
+                            }
+                            : undefined
+                    } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
+            })] })));
+}
+export default TableBodyRow;

package/DataTable/TableFooter.d.ts

@@ -0,0 +1,3 @@
+import { TableFooterProps, KvProps } from "./types";
+declare function TableFooter<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableFooterProps<RowProps, ExtendedProps>): JSX.Element;
+export default TableFooter;

package/DataTable/TableFooter.js

@@ -0,0 +1,91 @@
+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 } from "react";
+import TableRow from "@mui/material/TableRow";
+import Footer from "@mui/material/TableFooter";
+import TableCell from "@mui/material/TableCell";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import useTheme from "@mui/material/styles/useTheme";
+function TableFooter(props) {
+    var footers = props.footers, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var fixedLeftFooters = isUpMd
+        ? footers.filter(function (f) { return f.fixable === "left"; })
+        : [];
+    var fixedRightFooters = isUpMd
+        ? footers.filter(function (f) { return f.fixable === "right"; })
+        : [];
+    var dynamicFooters = isUpMd ? footers.filter(function (f) { return !f.fixable; }) : footers;
+    return (_jsx(Footer, { 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(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ align: align, sx: {
+                            position: "sticky",
+                            backgroundColor: "#eaf0f6",
+                            zIndex: 10,
+                            left: left,
+                            width: width,
+                            userSelect: "none",
+                            "&::after": index === fixedLeftFooters.length - 1 && leftShadowVisible
+                                ? {
+                                    position: "absolute",
+                                    top: 0,
+                                    right: 0,
+                                    bottom: "-1px",
+                                    width: "20px",
+                                    transform: "translateX(100%)",
+                                    transition: "box-shadow .3s",
+                                    content: "''",
+                                    boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
+                                }
+                                : undefined
+                        } }, { 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,
+                            userSelect: "none"
+                        } }, { 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(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ align: align, sx: {
+                            position: "sticky",
+                            zIndex: 10,
+                            width: width,
+                            right: right,
+                            backgroundColor: "#eaf0f6",
+                            userSelect: "none",
+                            "&::after": index === 0 && rightShadowVisible
+                                ? {
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    bottom: "-1px",
+                                    width: "20px",
+                                    transform: "translateX(-100%)",
+                                    transition: "box-shadow .3s",
+                                    content: "''",
+                                    boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
+                                }
+                                : undefined
+                        } }, { children: cloneElement(Cell) }), accessor));
+                })] })) }));
+}
+export default TableFooter;

package/DataTable/TableHeader.d.ts

@@ -0,0 +1,3 @@
+import { TableHeaderProps, KvProps } from "./types";
+declare function TableHeader<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableHeaderProps<RowProps, ExtendedProps>): JSX.Element;
+export default TableHeader;

package/DataTable/TableHeader.js

@@ -0,0 +1,100 @@
+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 } from "react";
+import TableRow from "@mui/material/TableRow";
+import TableHead from "@mui/material/TableHead";
+import TableCell from "@mui/material/TableCell";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import useTheme from "@mui/material/styles/useTheme";
+function TableHeader(props) {
+    var headers = props.headers, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var fixedLeftHeaders = isUpMd
+        ? headers.filter(function (h) { return h.fixable === "left"; })
+        : [];
+    var fixedRightHeaders = isUpMd
+        ? headers.filter(function (h) { return h.fixable === "right"; })
+        : [];
+    var dynamicHeaders = isUpMd ? headers.filter(function (h) { return !h.fixable; }) : headers;
+    return (_jsx(TableHead, { 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(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: width,
+                            left: left,
+                            userSelect: "none",
+                            cursor: sortable ? "pointer" : "default",
+                            "&::after": index === fixedLeftHeaders.length - 1 && leftShadowVisible
+                                ? {
+                                    position: "absolute",
+                                    top: 0,
+                                    right: 0,
+                                    bottom: "-1px",
+                                    width: "20px",
+                                    transform: "translateX(100%)",
+                                    transition: "box-shadow .3s",
+                                    content: "''",
+                                    boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)"
+                                }
+                                : undefined
+                        }, 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: 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(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: width,
+                            right: right,
+                            userSelect: "none",
+                            cursor: sortable ? "pointer" : "default",
+                            "&::after": index === 0 && rightShadowVisible
+                                ? {
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    bottom: "-1px",
+                                    width: "20px",
+                                    transform: "translateX(-100%)",
+                                    transition: "box-shadow .3s",
+                                    content: "''",
+                                    boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)"
+                                }
+                                : undefined
+                        }, onClick: function () {
+                            onSort({ accessor: accessor });
+                        } }, { children: cloneElement(Cell) }), accessor));
+                })] })) }));
+}
+export default TableHeader;

package/DataTable/index.d.ts

@@ -0,0 +1,4 @@
+import { DataTableProps, KvProps } from "./types";
+declare function DataTable<RowProps extends KvProps, ExtendedProps extends KvProps>(props: DataTableProps<RowProps, ExtendedProps>): JSX.Element;
+export default DataTable;
+export { default as useDataTable } from "./useTable";

package/DataTable/index.js

@@ -0,0 +1,58 @@
+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";
+import TableContainer from "@mui/material/TableContainer";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+import TableBody from "./TableBody";
+import TableHeader from "./TableHeader";
+import TableFooter from "./TableFooter";
+function DataTable(props) {
+    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;
+    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) {
+            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);
+        }
+    }, []);
+    useEffect(function () {
+        if (columns) {
+            onProcessShadowVisible();
+        }
+    }, [columns, onProcessShadowVisible]);
+    useEffect(function () {
+        window.addEventListener("resize", onProcessShadowVisible);
+    }, [onProcessShadowVisible]);
+    useEffect(function () { return function () {
+        window.removeEventListener("scroll", onProcessShadowVisible);
+    }; }, [onProcessShadowVisible]);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TableContainer, __assign({ ref: tableRef, onScroll: onProcessShadowVisible, sx: {
+                borderWidth: "thin",
+                borderColor: "#e5e5e5",
+                borderStyle: "solid",
+                borderRadius: "4px",
+                borderCollapse: "unset !important"
+            } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, stickyHeader: stickyHeader, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), footers.length > 0 ? (_jsx(TableFooter, { footers: footers, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
+}
+export default DataTable;
+export { default as useDataTable } from "./useTable";

package/DataTable/types.d.ts

@@ -0,0 +1,74 @@
+import { ReactElement, CSSProperties } from "react";
+export declare type OrderType = "ASC" | "DESC" | "NONE";
+export declare type KvProps = Record<string, unknown>;
+export declare type SortingProps = {
+    accessor: string;
+    order: OrderType;
+};
+declare type InitialStateProps = {
+    sortBy?: SortingProps;
+};
+export declare type ColumnProps = {
+    headerTip?: string;
+    Header: ReactElement;
+    Body: ReactElement;
+    Footer?: ReactElement;
+    align?: "left" | "center" | "right";
+    accessor: string;
+    sortable?: boolean;
+    fixable?: "left" | "right";
+    width?: number;
+};
+export declare type UseTableBaseProps<RowProps extends KvProps> = {
+    data: Array<RowProps>;
+    columns: Array<ColumnProps>;
+    initialState?: InitialStateProps;
+    disableSortBy?: boolean;
+    onSort?: (props: SortingProps) => unknown;
+};
+export declare type UseTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = UseTableBaseProps<RowProps> & ExtendedProps;
+export declare type TableHeaderCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
+    Cell: ReactElement;
+    title: string;
+    onSort: ({ accessor }: Pick<SortingProps, "accessor">) => unknown;
+};
+export declare type TableBodyCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
+    Cell: ReactElement;
+};
+export declare type TableFooterCellProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Pick<ColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseTableProps<RowProps, ExtendedProps>, keyof UseTableBaseProps<RowProps>> & {
+    Cell: ReactElement;
+};
+export declare type UserTableReturns<RowProps extends KvProps, ExtendedProps extends KvProps> = {
+    headers: Array<TableHeaderCellProps<RowProps, ExtendedProps>>;
+    footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
+    columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
+    rows: Array<RowProps>;
+};
+export declare type TableHeaderProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
+    headers: Array<TableHeaderCellProps<RowProps, ExtendedProps>>;
+    leftShadowVisible?: boolean;
+    rightShadowVisible?: boolean;
+};
+export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
+    columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
+    rows: Array<RowProps>;
+    leftShadowVisible?: boolean;
+    rightShadowVisible?: boolean;
+    noDataText?: string;
+    onRowClick?: (row: RowProps) => unknown;
+};
+export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
+    row: RowProps;
+};
+export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
+    footers: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
+    leftShadowVisible?: boolean;
+    rightShadowVisible?: boolean;
+};
+export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableBodyProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableFooterProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & {
+    dense?: boolean;
+    stickyHeader?: boolean;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+};
+export {};

package/DataTable/types.js

@@ -0,0 +1 @@
+export {};

package/DataTable/useTable.d.ts

@@ -0,0 +1,3 @@
+import { UseTableProps, KvProps, UserTableReturns } from "./types";
+declare function useTable<T extends KvProps, F extends KvProps>(props: UseTableProps<T, F>): UserTableReturns<T, F>;
+export default useTable;

package/DataTable/useTable.js

@@ -0,0 +1,94 @@
+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) {
+    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');
+    }
+    var sortBy = (initialState || {}).sortBy;
+    var _a = sortBy || {}, accessor = _a.accessor, order = _a.order;
+    var _b = useState({
+        accessor: accessor || "",
+        order: !!accessor ? order || "NONE" : "NONE"
+    }), sortingProps = _b[0], setSortingProps = _b[1];
+    var handleSort = useCallback(function (_a) {
+        var accessor = _a.accessor;
+        if (!disableSortBy) {
+            var newSortingProps = __assign({}, sortingProps);
+            if (accessor !== sortingProps.accessor ||
+                sortingProps.order === "NONE") {
+                newSortingProps = { accessor: accessor, order: "ASC" };
+            }
+            else if (sortingProps.order === "ASC") {
+                newSortingProps = __assign(__assign({}, sortingProps), { order: "DESC" });
+            }
+            else {
+                newSortingProps = __assign(__assign({}, sortingProps), { order: "NONE" });
+            }
+            if (onSort) {
+                onSort(__assign({}, newSortingProps));
+            }
+            setSortingProps(__assign({}, newSortingProps));
+        }
+    }, [disableSortBy, onSort, sortingProps]);
+    var renderSortingSymbol = useCallback(function (accessor) {
+        var field = sortingProps.accessor, order = sortingProps.order;
+        if (accessor !== field || order === "NONE") {
+            return "";
+        }
+        if (order === "ASC") {
+            return "↑";
+        }
+        return "↓";
+    }, [sortingProps]);
+    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]);
+    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]);
+    var footers = useMemo(function () {
+        return columns.map(function (col) {
+            var Footer = col.Footer;
+            return __assign(__assign({ Cell: cloneElement(Footer || _jsx(_Fragment, {}), {
+                    column: col,
+                    rows: rows
+                }) }, col), rest);
+        });
+    }, [columns, rest, rows]);
+    return { headers: headers, footers: footers, columns: cols, rows: rows };
+}
+export default useTable;

package/README.md

@@ -15,11 +15,12 @@
   - [Autocomplete](#autocomplete)
   - [AutocompleteWithFilter](#autocompletewithfilter)
   - [BasicModal](#basicmodal)
-  - [BasicTable](#basictable)
+  - [BasicTable [⚠️Deprecated]](#basictable)
   - [BreadCrumbs](#breadcrumbs)
   - [CheckBox](#checkbox)
   - [CheckBoxGroup](#checkboxgroup)
   - [Copyright](#copyright)
+  - [DataTable](#datatable)
   - [DateInput](#dateinput)
     - [FullDateInput](#fulldateinput)
     - [MonthDayInput](#monthdayinput)
@@ -206,6 +207,8 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
 
 Reusable table component
 
+⚠️ This component will be deprecated in the next release. Please use [`DataTable`](#datatable) instead.
+
 <h5>Import</h5>
 
 ```tsx
@@ -343,6 +346,65 @@ import Copyright from '@symply.io/basic-components/Copyright';
 
 
 
+<h3>DataTable</h3>
+
+Reusable table component
+
+<h5>Import</h5>
+
+```tsx
+import { DataTable, useDataTable } from '@symply.io/basic-components';
+// or 
+import DataTable, { useDataTable } from '@symply.io/basic-components/DataTable'; 
+```
+
+<h5>Column Props (ColumnProps)</h5>
+
+| Name      | Type                          | Default | Required | Description                                                  |
+| --------- | ----------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| accessor  | string                        |         | true     | The key of the column, it should be unique.                  |
+| align     | "left" \|"center" \|"right"   |         | false    | The alignment of the column.                                 |
+| Body      | ReactElement                  |         | true     | The component to render the column body cell.                |
+| fixable   | "left" \| "right" \|undefined |         | false    | If not undefined, the column can be frozen. <br/>⚠️ It doesn't work with IE11. |
+| Footer    | ReactElement                  |         | false    | The component to render the column footer cell.              |
+| Header    | ReactElement                  |         | true     | The component to render the column header cell.              |
+| headerTip | string                        |         | false    | The tip title text when the mouse is over the header.        |
+| sortable  | bool                          |         | false    | If true, the column can be sortable.                         |
+| width     | number                        |         | false    | The fixed width of cells.                                    |
+
+<h5>Hook Props</h5>
+
+| Name          | Type                       | Default | Required | Description                                 |
+| ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
+| columns       | Array\<IColumn\>           |         | true     | table columns                               |
+| data          | Array<{ [name]: unknown }> |         | true     | table data/rows                             |
+| disableSortBy | bool                       |         | false    | If true, the whole table can't be sortable. |
+| initialState  | { sortBy?: SortByProps }   |         | false    | Set the initial states                      |
+| onSort        | func                       |         | false    | The function for sorting rows.              |
+
+<h5>Hook Returns</h5>
+
+| Name    | Type                 | Description               |
+| ------- | -------------------- | ------------------------- |
+| headers | Array\<IHeader\>     | The cells for the header. |
+| columns | Array\<IBodyColumn\> | The cells for the body.   |
+| footers | Array\<IFooter>      | The cells for the footer. |
+| rows    | Array<IRow\>         | The rows for the table.   |
+
+<h5>Component Props</h5>
+
+| Name         | Type                 | Default    | Required | Description                                             |
+| ------------ | -------------------- | ---------- | -------- | ------------------------------------------------------- |
+| headers      | Array\<IHeader\>     |            | true     | The cells for the header. (from the hook)               |
+| columns      | Array\<IBodyColumn\> |            | true     | The cells for the body. (from the hook)                 |
+| dense        | bool                 |            | false    | If `true` the table size/density would be tight.        |
+| noDataText   | string               | 'No Data!' | false    | The text when no data rendered.                         |
+| rows         | Array<IRow\>         |            | true     | The rows for the table. (from the hook)                 |
+| stickyHeader | bool                 |            | false    | Set the header sticky.<br/>⚠️ It doesn't work with IE11. |
+| footers      | Array\<IFooter>      | []         | false    | The cells for the footer. (from the hook)               |
+
+
+
 <h3>DateInput</h3>
 
 <h4>FullDateInput</h4>

package/Sidebar/SidebarItem.js

@@ -10,27 +10,28 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import colorAlpha from "color-alpha";
 import Chip from "@mui/material/Chip";
-import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemButton from "@mui/material/ListItemButton";
 import LockIcon from "@mui/icons-material/LockRounded";
-import useTheme from "@mui/material/styles/useTheme";
+import { useTheme, alpha } from "@mui/material/styles";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 function SidebarItem(props) {
     var icon = props.icon, name = props.name, active = props.active, expand = props.expand, lock = props.lock, beta = props.beta, isSub = props.isSub, hasChildren = props.hasChildren, _a = props.betaTagColor, betaTagColor = _a === void 0 ? "#00A2A9" : _a, _b = props.showIconOnly, showIconOnly = _b === void 0 ? false : _b, onClick = props.onClick;
     var theme = useTheme();
-    return (_jsxs(ListItem, __assign({ button: true, onClick: onClick, disabled: lock, sx: {
+    return (_jsxs(ListItemButton, __assign({ onClick: onClick, disabled: lock, sx: {
             paddingLeft: isSub ? theme.spacing(4) : undefined,
             display: "flex",
             width: "100%",
             "&:hover": {
-                backgroundColor: colorAlpha(theme.palette.primary.main, 0.3)
+                backgroundColor: alpha(theme.palette.primary.main, active
+                    ? theme.palette.action.activatedOpacity
+                    : theme.palette.action.selectedOpacity)
             },
             backgroundColor: active
-                ? colorAlpha(theme.palette.primary.main, 0.2)
+                ? alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)
                 : undefined
         } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
                     color: active ? theme.palette.primary.main : undefined,

package/index.d.ts

@@ -6,6 +6,7 @@ export * from "./BasicTable";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./Copyright";
+export * from "./DataTable";
 export * from "./DateInput";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";
@@ -33,6 +34,7 @@ export { default as BasicModal } from "./BasicModal";
 export { default as BasicTable } from "./BasicTable";
 export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as Copyright } from "./Copyright";
+export { default as DataTable } from "./DataTable";
 export { default as DigitInput } from "./DigitInput";
 export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
 export { default as FeinInput } from "./FeinInput";

package/index.js

@@ -6,6 +6,7 @@ export * from "./BasicTable";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./Copyright";
+export * from "./DataTable";
 export * from "./DateInput";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";
@@ -33,6 +34,7 @@ export { default as BasicModal } from "./BasicModal";
 export { default as BasicTable } from "./BasicTable";
 export { default as BreadCrumbs } from "./BreadCrumbs";
 export { default as Copyright } from "./Copyright";
+export { default as DataTable } from "./DataTable";
 export { default as DigitInput } from "./DigitInput";
 export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
 export { default as FeinInput } from "./FeinInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.1.1",
+  "version": "1.1.2-beta.10",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",