@symply.io/basic-components 1.0.0-beta.6 → 1.0.0-beta.9

package/BasicTable/TableBody.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BasicTableBodyProps } from "./types";
+declare const BasicTableBody: import("react").ForwardRefExoticComponent<BasicTableBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BasicTableBody;

package/BasicTable/TableBody.js

@@ -0,0 +1,51 @@
+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 } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Grid from "@mui/material/Grid";
+import useCustomTheme from "../useCustomTheme";
+import TableBodyRow from "./TableBodyRow";
+var BasicTableBody = forwardRef(function (props, ref) {
+    var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText, cellMinWidth = props.cellMinWidth;
+    var theme = useCustomTheme();
+    return (_jsx(Grid, __assign({ item: true, sx: {
+            maxHeight: "41vh",
+            overflowY: "auto",
+            display: "block",
+            minWidth: "100%",
+            scrollbarWidth: forFrozen ? "none" : "initial",
+            "&::-webkit-scrollbar": {
+                width: forFrozen ? 0 : "initial"
+            }
+        } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows && rows.length > 0 ? (rows.map(function (row, index) {
+                return (_jsx(TableBodyRow, { row: row, rows: rows, columns: columns, cellMinWidth: cellMinWidth }, "BasicTable_".concat(index)));
+            })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
+                    height: "60px",
+                    borderBottomWidth: "thin",
+                    borderBottomColor: "#e5e5e5",
+                    borderBottomStyle: "solid",
+                    padding: theme.spacing(0.5, 0),
+                    minHeight: theme.spacing(6),
+                    "& :nth-of-last-type(1)": {
+                        borderBottom: "none"
+                    },
+                    "& input": {
+                        fontSize: "0.9rem",
+                        fontWeight: 600
+                    }
+                } }, { children: _jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: "center", sx: {
+                        minWidth: cellMinWidth,
+                        paddingLeft: theme.spacing(0.625),
+                        paddingRight: theme.spacing(0.625)
+                    } }, { children: noDataText })) }))) })) })));
+});
+export default BasicTableBody;

package/BasicTable/TableBodyRow.d.ts

@@ -0,0 +1,3 @@
+import { BasicTableBodyRowProps } from "./types";
+declare function BasicTableBodyRow(props: BasicTableBodyRowProps): JSX.Element;
+export default BasicTableBodyRow;

package/BasicTable/TableBodyRow.js

@@ -0,0 +1,42 @@
+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 } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import Grid from "@mui/material/Grid";
+import useCustomTheme from "../useCustomTheme";
+function BasicTableBodyRow(props) {
+    var row = props.row, rows = props.rows, columns = props.columns, cellMinWidth = props.cellMinWidth;
+    var theme = useCustomTheme();
+    return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
+            height: "60px",
+            borderBottomWidth: "thin",
+            borderBottomColor: "#e5e5e5",
+            borderBottomStyle: "solid",
+            padding: theme.spacing(0.5, 0),
+            minHeight: theme.spacing(6),
+            "& :nth-of-last-type(1)": {
+                borderBottom: "none"
+            },
+            "& input": {
+                fontSize: "0.9rem",
+                fontWeight: 600
+            }
+        } }, { children: columns.map(function (col) {
+            var accessor = col.accessor, Cell = col.Cell, _a = col.align, align = _a === void 0 ? "center" : _a;
+            return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
+                    minWidth: cellMinWidth,
+                    paddingLeft: theme.spacing(0.625),
+                    paddingRight: theme.spacing(0.625)
+                } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
+        }) })));
+}
+export default BasicTableBodyRow;

package/BasicTable/TableFooter.d.ts

@@ -0,0 +1,3 @@
+import { BasicTableFooterProps } from "./types";
+declare function BasicTableFooter(props: BasicTableFooterProps): JSX.Element;
+export default BasicTableFooter;

package/BasicTable/TableFooter.js

@@ -0,0 +1,44 @@
+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 } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import Grid from "@mui/material/Grid";
+import useCustomTheme from "../useCustomTheme";
+function BasicTableFooter(props) {
+    var footers = props.footers, cellMinWidth = props.cellMinWidth;
+    var theme = useCustomTheme();
+    return footers && footers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
+            backgroundColor: "#eaf0f6",
+            padding: theme.spacing(1.5, 0),
+            height: "50px"
+        } }, { children: _jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
+                lineHeight: "24px",
+                minWidth: "100%",
+                "& span": {
+                    color: "#172b4d",
+                    fontSize: "1rem",
+                    fontWeight: 600
+                }
+            } }, { children: footers.map(function (footer) {
+                var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a;
+                return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
+                        minWidth: cellMinWidth,
+                        paddingLeft: theme.spacing(0.625),
+                        paddingRight: theme.spacing(0.625),
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis",
+                        overflow: "hidden",
+                        userSelect: "none"
+                    } }, { children: cloneElement(Cell) }), accessor));
+            }) })) }))) : (_jsx(_Fragment, {}));
+}
+export default BasicTableFooter;

package/BasicTable/TableHeader.d.ts

@@ -0,0 +1,3 @@
+import { BasicTableHeaderProps } from "./types";
+declare function BasicTableHeader(props: BasicTableHeaderProps): JSX.Element;
+export default BasicTableHeader;

package/BasicTable/TableHeader.js

@@ -0,0 +1,47 @@
+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 } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import Grid from "@mui/material/Grid";
+import useCustomTheme from "../useCustomTheme";
+function BasicTableHeader(props) {
+    var headers = props.headers, cellMinWidth = props.cellMinWidth;
+    var theme = useCustomTheme();
+    return headers && headers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
+            backgroundColor: "#eaf0f6",
+            padding: theme.spacing(1.5, 0),
+            height: "50px"
+        } }, { children: _jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
+                lineHeight: "24px",
+                minWidth: "100%",
+                "& span": {
+                    color: "#172b4d",
+                    fontSize: "1rem",
+                    fontWeight: 600
+                }
+            } }, { children: headers.map(function (header) {
+                var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, title = header.title, onSort = header.onSort, _b = header.canSort, canSort = _b === void 0 ? false : _b;
+                return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, title: title, textAlign: align, sx: {
+                        minWidth: cellMinWidth,
+                        paddingLeft: theme.spacing(0.625),
+                        paddingRight: theme.spacing(0.625),
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis",
+                        overflow: "hidden",
+                        userSelect: "none",
+                        cursor: canSort ? "pointer" : "default"
+                    }, onClick: function () {
+                        onSort({ field: accessor });
+                    } }, { children: cloneElement(Cell) }), accessor));
+            }) })) }))) : (_jsx(_Fragment, {}));
+}
+export default BasicTableHeader;

package/BasicTable/index.d.ts

@@ -0,0 +1,5 @@
+import { BasicTableProps } from "./types";
+declare function BasicTable(props: BasicTableProps): JSX.Element;
+export default BasicTable;
+export * from "./types";
+export { default as useTable } from "./useTable";

package/BasicTable/index.js

@@ -0,0 +1,88 @@
+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 { useMemo, useEffect } from "react";
+import Grid from "@mui/material/Grid";
+import TableContainer from "@mui/material/TableContainer";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+import useScroll from "./useScroll";
+import TableBody from "./TableBody";
+import TableHeader from "./TableHeader";
+import TableFooter from "./TableFooter";
+function BasicTable(props) {
+    var _a;
+    var _b;
+    var _c = props.columns, columns = _c === void 0 ? [] : _c, _d = props.rows, rows = _d === void 0 ? [] : _d, _e = props.headers, headers = _e === void 0 ? [] : _e, _f = props.footers, footers = _f === void 0 ? [] : _f, _g = props.noDataText, noDataText = _g === void 0 ? "No Data!" : _g, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _h = props.cellMinWidth, cellMinWidth = _h === void 0 ? "initial" : _h;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var fronzenColsCount = useMemo(function () { var _a; return (_a = columns.filter(function (col) { return col.canBeFrozen; })) === null || _a === void 0 ? void 0 : _a.length; }, [columns]);
+    var canFreeze = useMemo(function () { return isUpMd && (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && fronzenColsCount > 0; }, [fronzenColsCount, isUpMd, rows.length]);
+    var _j = useScroll({
+        canFreeze: canFreeze
+    }), frozenWidth = _j.frozenWidth, setFrozenWidth = _j.setFrozenWidth, fixedRef = _j.fixedRef, dynamicRef = _j.dynamicRef;
+    useEffect(function () {
+        var _a, _b;
+        var initFrozenWidth = ((_a = document.getElementById("frozenContainer")) === null || _a === void 0 ? void 0 : _a.clientWidth) ||
+            ((_b = fixedRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) ||
+            fronzenColsCount * 123 ||
+            370;
+        if (columns) {
+            setFrozenWidth(function (fw) {
+                if (fw !== initFrozenWidth) {
+                    return initFrozenWidth;
+                }
+                return fw;
+            });
+        }
+    }, [columns, fixedRef, fronzenColsCount, setFrozenWidth]);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TableContainer, __assign({ sx: (_a = {
+                    borderWidth: "thin",
+                    borderColor: "#e5e5e5",
+                    borderStyle: "solid",
+                    borderRadius: "4px",
+                    borderCollapse: "unset !important",
+                    margin: theme.spacing(2, 0, 3, 0),
+                    width: "100%"
+                },
+                _a[theme.breakpoints.up("sm")] = {
+                    minWidth: "600px"
+                },
+                _a.position = "relative",
+                _a.transition = "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+                _a) }, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center", wrap: "nowrap" }, { children: [canFreeze && (_jsx(Grid, __assign({ id: "frozenContainer", item: true, sx: {
+                            top: 0,
+                            left: 0,
+                            position: "absolute",
+                            zIndex: 999,
+                            backgroundColor: "Menu",
+                            boxShadow: "6px 0 6px -4px rgba(0,0,0,0.15)"
+                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { cellMinWidth: cellMinWidth, headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, cellMinWidth: cellMinWidth, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { cellMinWidth: cellMinWidth, footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
+                            width: "100%",
+                            marginLeft: canFreeze
+                                ? ((_b = document.getElementById("frozenContainer")) === null || _b === void 0 ? void 0 : _b.clientWidth) ||
+                                    frozenWidth ||
+                                    0
+                                : 0,
+                            overflow: "auto"
+                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { cellMinWidth: cellMinWidth, headers: headers.filter(function (header) {
+                                        return isUpMd ? !header.canBeFrozen : true;
+                                    }) }), _jsx(TableBody, { rows: rows, ref: dynamicRef, noDataText: noDataText, columns: columns.filter(function (col) {
+                                        return isUpMd ? !col.canBeFrozen : true;
+                                    }), cellMinWidth: cellMinWidth }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
+                                        return isUpMd ? !footer.canBeFrozen : true;
+                                    }), cellMinWidth: cellMinWidth })] })) }))] })) })) })));
+}
+export default BasicTable;
+export * from "./types";
+export { default as useTable } from "./useTable";

package/BasicTable/types.d.ts

@@ -0,0 +1,74 @@
+import { ReactElement, CSSProperties } from "react";
+interface SortByProps {
+    id: string;
+    desc: boolean;
+}
+interface InitialStateProps {
+    sortBy?: SortByProps;
+}
+export interface IColumn {
+    Header: ReactElement;
+    headerTip?: string;
+    Body: ReactElement;
+    Footer?: ReactElement;
+    align?: "left" | "center" | "right";
+    accessor: string;
+    canSort?: boolean;
+    canBeFrozen?: boolean;
+    [name: string]: unknown;
+}
+interface IHeader extends IColumn {
+    Cell: ReactElement;
+    title: string;
+    canSort?: boolean;
+    onSort: (props: SortingProps) => unknown;
+}
+interface IFooter extends IColumn {
+    Cell: ReactElement;
+}
+interface IBodyColumn extends IColumn {
+    Cell: ReactElement;
+}
+export interface IRow {
+    [name: string]: unknown;
+}
+export interface SortingProps {
+    field: string;
+    isSorted?: boolean;
+    descending?: boolean;
+}
+export interface UseTableProps {
+    data: Array<IRow>;
+    columns: Array<IColumn>;
+    initialState?: InitialStateProps;
+    disableSortBy?: boolean;
+    onSort?: (props: SortingProps) => unknown;
+}
+export interface UseScrollProps {
+    canFreeze?: boolean;
+}
+interface BasicTableBaseProps {
+    cellMinWidth?: CSSProperties["minWidth"];
+}
+export interface BasicTableHeaderProps extends BasicTableBaseProps {
+    headers: Array<IHeader>;
+}
+export interface BasicTableFooterProps extends BasicTableBaseProps {
+    footers: Array<IFooter>;
+}
+export interface BasicTableBodyProps extends BasicTableBaseProps {
+    columns: Array<IBodyColumn>;
+    rows: Array<IRow>;
+    noDataText?: string;
+    forFrozen?: boolean;
+}
+export interface BasicTableBodyRowProps extends BasicTableBaseProps {
+    columns: Array<IBodyColumn>;
+    rows: Array<IRow>;
+    row: IRow;
+}
+export declare type BasicTableProps = BasicTableHeaderProps & Omit<BasicTableBodyProps, "forFrozen"> & Partial<BasicTableFooterProps> & {
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+};
+export {};

package/BasicTable/types.js

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

package/BasicTable/useScroll.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { UseScrollProps } from "./types";
+declare function useScroll(props: UseScrollProps): {
+    frozenWidth: number;
+    setFrozenWidth: import("react").Dispatch<import("react").SetStateAction<number>>;
+    fixedRef: import("react").RefObject<HTMLDivElement>;
+    dynamicRef: import("react").RefObject<HTMLDivElement>;
+};
+export default useScroll;

package/BasicTable/useScroll.js

@@ -0,0 +1,76 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import useTheme from "@mui/material/styles/useTheme";
+import useMediaQuery from "@mui/material/useMediaQuery";
+function useScroll(props) {
+    var canFreeze = props.canFreeze;
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _a = useState(370), frozenWidth = _a[0], setFrozenWidth = _a[1];
+    var fixedRef = useRef(null);
+    var dynamicRef = useRef(null);
+    var resetFrozenWidth = useCallback(function () {
+        setFrozenWidth(function (fw) {
+            var _a, _b;
+            if (fw !== ((_a = fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth)) {
+                return ((_b = fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || fw;
+            }
+            return fw;
+        });
+    }, [fixedRef]);
+    var onFixedScroll = useCallback(function (event) {
+        if (isUpMd && (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current)) {
+            var targetDiv = event.target;
+            dynamicRef.current.scrollTop = targetDiv.scrollTop;
+            resetFrozenWidth();
+        }
+    }, [dynamicRef, isUpMd, resetFrozenWidth]);
+    var onDynamicScroll = useCallback(function (event) {
+        if (isUpMd && (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current)) {
+            var targetDiv = event.target;
+            fixedRef.current.scrollTop = targetDiv.scrollTop;
+            resetFrozenWidth();
+        }
+    }, [fixedRef, isUpMd, resetFrozenWidth]);
+    var removeEventFixed = useCallback(function () {
+        if (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) {
+            fixedRef.current.removeEventListener("scroll", onFixedScroll);
+        }
+    }, [fixedRef, onFixedScroll]);
+    var removeEventDynamic = useCallback(function () {
+        if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
+            dynamicRef.current.removeEventListener("scroll", onDynamicScroll);
+        }
+    }, [dynamicRef, onDynamicScroll]);
+    var bindEventFixed = useCallback(function () {
+        removeEventDynamic();
+        if (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) {
+            fixedRef.current.addEventListener("scroll", onFixedScroll);
+        }
+    }, [fixedRef, onFixedScroll, removeEventDynamic]);
+    var bindEventDynamic = useCallback(function () {
+        removeEventFixed();
+        if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
+            dynamicRef.current.addEventListener("scroll", onDynamicScroll);
+        }
+    }, [dynamicRef, onDynamicScroll, removeEventFixed]);
+    useEffect(function () {
+        if (canFreeze) {
+            if (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) {
+                fixedRef.current.addEventListener("mouseover", bindEventFixed);
+            }
+            if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
+                dynamicRef.current.addEventListener("mouseover", bindEventDynamic);
+            }
+        }
+    }, [
+        bindEventDynamic,
+        bindEventFixed,
+        canFreeze,
+        dynamicRef,
+        fixedRef,
+        onDynamicScroll,
+        onFixedScroll
+    ]);
+    return { frozenWidth: frozenWidth, setFrozenWidth: setFrozenWidth, fixedRef: fixedRef, dynamicRef: dynamicRef };
+}
+export default useScroll;

package/BasicTable/useTable.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { UseTableProps, SortingProps } from "./types";
+declare function useTable(props: UseTableProps): {
+    headers: {
+        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        headerTip?: string | undefined;
+        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        align?: "left" | "right" | "center" | undefined;
+        accessor: string;
+        canSort: boolean | undefined;
+        canBeFrozen?: boolean | undefined;
+        Cell: JSX.Element;
+        title: string;
+        onSort: ({ field }: Pick<SortingProps, "field">) => void;
+    }[];
+    footers: {
+        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        headerTip?: string | undefined;
+        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        align?: "left" | "right" | "center" | undefined;
+        accessor: string;
+        canSort?: boolean | undefined;
+        canBeFrozen?: boolean | undefined;
+        Cell: import("react").FunctionComponentElement<any>;
+    }[];
+    columns: {
+        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        headerTip?: string | undefined;
+        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        align?: "left" | "right" | "center" | undefined;
+        accessor: string;
+        canSort?: boolean | undefined;
+        canBeFrozen?: boolean | undefined;
+        Cell: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    }[];
+    rows: import("./types").IRow[];
+};
+export default useTable;

package/BasicTable/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 || {}, id = _a.id, desc = _a.desc;
+    var _b = useState({
+        field: id || "",
+        isSorted: !!id,
+        descending: desc || false
+    }), sortingProps = _b[0], setSortingProps = _b[1];
+    var handleSort = useCallback(function (_a) {
+        var field = _a.field;
+        if (!disableSortBy) {
+            var newSortingProps = __assign({}, sortingProps);
+            if (field !== sortingProps.field || !sortingProps.isSorted) {
+                newSortingProps = { field: field, isSorted: true, descending: false };
+            }
+            else if (!sortingProps.descending) {
+                newSortingProps = __assign(__assign({}, sortingProps), { descending: true });
+            }
+            else {
+                newSortingProps = __assign(__assign({}, sortingProps), { isSorted: false });
+            }
+            if (onSort) {
+                onSort(__assign({}, newSortingProps));
+            }
+            setSortingProps(__assign({}, newSortingProps));
+        }
+    }, [disableSortBy, onSort, sortingProps]);
+    var renderSortingSymbol = useCallback(function (accessor) {
+        var field = sortingProps.field, isSorted = sortingProps.isSorted, descending = sortingProps.descending;
+        if (accessor !== field || !isSorted) {
+            return "";
+        }
+        if (!descending) {
+            return "↑";
+        }
+        return "↓";
+    }, [sortingProps]);
+    var rows = useMemo(function () { return data.map(function (d) { return 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, canSort = col.canSort, headerTip = col.headerTip;
+            var canSortBy = canSort && !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)" : ""), canSort: 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,6 +15,7 @@
   - [Autocomplete](#autocomplete)
   - [AutocompleteWithFilter](#autocompletewithfilter)
   - [BasicModal](#basicmodal)
+  - [BasicTable](#basictable)
   - [BreadCrumbs](#breadcrumbs)
   - [CheckBox](#checkbox)
   - [CheckBoxGroup](#checkboxgroup)
@@ -201,6 +202,61 @@ import BasicModal from '@symply.io/basic-components/BasicModal';
 
 
 
+<h3>BasicTable</h3>
+
+Reusable table component
+
+<h5>Import</h5>
+
+```tsx
+import { BasicTable, useTable } from '@symply.io/basic-components';
+// or 
+import BasicTable, { useTable } from '@symply.io/basic-components//BasicTable'; 
+```
+
+<h5>Column Props (IColumn)</h5>
+
+| Name        | Type                        | Default | Required | Description                                     |
+| ----------- | --------------------------- | ------- | -------- | ----------------------------------------------- |
+| Body        | ReactElement                |         | true     | The component to render the column body cell.   |
+| Header      | ReactElement                |         | true     | The component to render the column header cell. |
+| Footer      | ReactElement                |         | false    | The component to render the column footer cell. |
+| accessor    | string                      |         | true     | The key of the column, it should be unique.     |
+| align       | "left" \|"center" \|"right" |         | false    | The alignment of the column.                    |
+| canBeFrozen | bool                        |         | false    | If true, the column can be frozen               |
+| canSort     | bool                        |         | false    | If true, the column can be sortable.            |
+
+<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)   |
+| footers    | Array\<IFooter>      | []         | false    | The cells for the footer. (from the hook) |
+| noDataText | string               | 'No Data!' | false    | The text when no data rendered.           |
+| rows       | Array<IRow\>         |            | true     | The rows for the table. (from the hook)   |
+
+
+
 <h3>BreadCrumbs</h3>
 
 A list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".
@@ -213,7 +269,7 @@ import { BreadCrumbs } from '@symply.io/basic-components/';
 import BreadCrumbs from '@symply.io/basic-components/BreadCrumbs'; 
 ```
 
-<h5>Props</h5>
+ <h5>Props</h5>
 
 | Name   | Type                                    | Default | Required | Description               |
 | ------ | --------------------------------------- | ------- | -------- | ------------------------- |

package/index.d.ts

@@ -2,6 +2,7 @@ export * from "./AlertDialog";
 export * from "./Autocomplete";
 export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
+export * from "./BasicTable";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./Copyright";
@@ -28,6 +29,7 @@ export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
 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 DigitInput } from "./DigitInput";

package/index.js

@@ -2,6 +2,7 @@ export * from "./AlertDialog";
 export * from "./Autocomplete";
 export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
+export * from "./BasicTable";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
 export * from "./Copyright";
@@ -28,6 +29,7 @@ export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
 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 DigitInput } from "./DigitInput";

package/package.json

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