@symply.io/basic-components 1.0.0-beta.1 → 1.0.0-beta.10

package/Autocomplete/index.d.ts

@@ -1,4 +1,4 @@
-import { CustomAutocompleteProps } from "./types";
-declare function CustomAutocomplete(props: CustomAutocompleteProps): JSX.Element;
+import { AutocompleteProps } from "./types";
+declare function CustomAutocomplete<T, multiple extends boolean | undefined>(props: AutocompleteProps<T, multiple>): JSX.Element;
 export default CustomAutocomplete;
 export * from "./types";

package/Autocomplete/types.d.ts

@@ -1,15 +1,14 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-export interface IAutocompleteOption {
+export declare type AutocompleteOptionType<T> = T & {
     label: string;
-    [name: string]: unknown;
-}
-export declare type AutocompleteOptionType = IAutocompleteOption | string;
-export interface CustomAutocompleteProps extends Omit<TextFieldProps, "onChange"> {
-    multiple?: boolean;
-    options: Array<AutocompleteOptionType>;
-    value: Array<AutocompleteOptionType> | AutocompleteOptionType | null;
+};
+export declare type AutocompleteValueType<T, multiple> = multiple extends false | undefined ? AutocompleteOptionType<T> | null : Array<AutocompleteOptionType<T>> | null;
+export interface AutocompleteProps<T, multiple> extends Omit<TextFieldProps, "onChange"> {
+    multiple?: multiple;
+    options: Array<AutocompleteOptionType<T>>;
+    value: AutocompleteValueType<T, multiple>;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
-    onChange: (value: Array<AutocompleteOptionType> | AutocompleteOptionType | null) => void;
+    onChange: (value: AutocompleteValueType<T, multiple>) => void;
 }

package/AutocompleteWithFilter/index.d.ts

@@ -1,4 +1,4 @@
-import { AutoCompleteWithFilterProps } from "./types";
-declare function AutocompleteWithFilter(props: AutoCompleteWithFilterProps): JSX.Element;
+import { AutocompleteWithFilterProps } from "./types";
+declare function AutocompleteWithFilter<T, multiple extends boolean | undefined>(props: AutocompleteWithFilterProps<T, multiple>): JSX.Element;
 export default AutocompleteWithFilter;
 export * from "./types";

package/AutocompleteWithFilter/index.js

@@ -36,18 +36,16 @@ function AutocompleteWithFilter(props) {
         ignoreCase: true,
         ignoreAccents: true,
         trim: true,
-        stringify: function (option) {
-            return typeof option === "string" ? option : option.label;
-        }
+        stringify: function (option) { return option.label; }
     });
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Autocomplete, { size: size, fullWidth: true, limitTags: 1, options: options, multiple: multiple, filterOptions: filter, onChange: function (_, value) {
                 onChange(value);
             }, disableCloseOnSelect: disableCloseOnSelect || multiple, getOptionLabel: function (option) {
-                return typeof option === "string" ? option || "" : option.label || "";
+                return option.label || "";
             }, renderOption: function (props, option, _a) {
                 var selected = _a.selected;
-                return (_jsxs("li", __assign({}, props, { children: [_jsx(Checkbox, { icon: icon, color: "primary", checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), typeof option === "string" ? option || "" : option.label || ""] })));
+                return (_jsxs("li", __assign({}, props, { children: [_jsx(Checkbox, { icon: icon, color: "primary", checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), option.label || ""] })));
             }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { variant: "outlined" }))); } }) })));
 }
 export default AutocompleteWithFilter;

package/AutocompleteWithFilter/types.d.ts

@@ -1,16 +1,15 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-export interface IAutoCompleteWithFilterOption {
+export declare type AutocompleteWithFilterOptionType<T> = T & {
     label: string;
-    [name: string]: unknown;
-}
-export declare type AutoCompleteWithFilterOptionType = IAutoCompleteWithFilterOption | string;
-export interface AutoCompleteWithFilterProps extends Omit<TextFieldProps, "onChange"> {
-    multiple?: boolean;
-    value: Array<AutoCompleteWithFilterOptionType> | AutoCompleteWithFilterOptionType | null;
-    options: Array<AutoCompleteWithFilterOptionType>;
+};
+export declare type AutocompleteWithFilterValueType<T, multiple> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> | null : Array<AutocompleteWithFilterOptionType<T>> | null;
+export interface AutocompleteWithFilterProps<T, multiple> extends Omit<TextFieldProps, "onChange"> {
+    value: AutocompleteWithFilterValueType<T, multiple>;
+    options: Array<AutocompleteWithFilterOptionType<T>>;
     disableCloseOnSelect?: boolean;
+    multiple?: multiple;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
-    onChange: (value: Array<AutoCompleteWithFilterOptionType> | AutoCompleteWithFilterOptionType | null) => void;
+    onChange: (value: AutocompleteWithFilterValueType<T, multiple>) => void;
 }

package/BasicModal/Content.js

@@ -24,14 +24,14 @@ function Content(props) {
     var children = props.children, title = props.title, desc = props.desc, _a = props.color, color = _a === void 0 ? "primary" : _a, loading = props.loading, disabled = props.disabled, buttons = props.buttons, _b = props.submitText, submitText = _b === void 0 ? "Save" : _b, _c = props.cancelText, cancelText = _c === void 0 ? "Cancel" : _c, _d = props.showTopRightCloseButton, showTopRightCloseButton = _d === void 0 ? false : _d, _e = props.hideBottomButtons, hideBottomButtons = _e === void 0 ? false : _e, _f = props.noForm, noForm = _f === void 0 ? false : _f, onClose = props.onClose, onSubmit = props.onSubmit;
     var theme = useTheme();
     return (_jsxs(_Fragment, { children: [_jsxs(DialogTitle, __assign({ id: "form-dialog-title", sx: {
-                    "& > h6": {
-                        fontWeight: "700",
-                    },
-                } }, { children: [title, showTopRightCloseButton ? (_jsx(IconButton, __assign({ "aria-label": "close", onClick: onClose, sx: {
+                    "& > span": {
+                        fontWeight: "700!important"
+                    }
+                } }, { children: [_jsx("span", { children: title }), showTopRightCloseButton ? (_jsx(IconButton, __assign({ "aria-label": "close", onClick: onClose, sx: {
                             position: "absolute",
                             right: 8,
                             top: 8,
-                            color: theme.palette.grey[500],
+                            color: theme.palette.grey[500]
                         } }, { children: _jsx(CloseIcon, {}) }))) : null] })), _jsxs(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: [desc && _jsx(DialogContentText, { children: desc }), Boolean(children) && cloneElement(children)] })), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText })) })), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : undefined, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText })) }))] })) })) })))] }));
 }
 export default Content;

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,50 @@
+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;
+    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 }, "BasicTable_".concat(index)));
+            })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
+                    height: theme.spacing(7.5),
+                    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: {
+                        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;
+    var theme = useCustomTheme();
+    return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
+            height: theme.spacing(7.5),
+            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.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, _b = col.align, align = _b === void 0 ? "center" : _b;
+            return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
+                    minWidth: minWidth,
+                    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;
+    var theme = useCustomTheme();
+    return footers && footers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
+            backgroundColor: "#eaf0f6",
+            padding: theme.spacing(1.5, 0),
+            height: theme.spacing(6.25)
+        } }, { 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.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, _b = footer.align, align = _b === void 0 ? "center" : _b;
+                return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, textAlign: align, sx: {
+                        minWidth: minWidth,
+                        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;
+    var theme = useCustomTheme();
+    return headers && headers.length > 0 ? (_jsx(Grid, __assign({ item: true, sx: {
+            backgroundColor: "#eaf0f6",
+            padding: theme.spacing(1.5, 0),
+            height: theme.spacing(6.25)
+        } }, { 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, _b = header.minWidth, minWidth = _b === void 0 ? "120px!important" : _b, title = header.title, onSort = header.onSort, _c = header.canSort, canSort = _c === void 0 ? false : _c;
+                return (_jsx(Grid, __assign({ item: true, xs: 4, md: 3, lg: 2, title: title, textAlign: align, sx: {
+                        minWidth: minWidth,
+                        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,80 @@
+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 = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    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 _g = useScroll({
+        canFreeze: canFreeze
+    }), frozenWidth = _g.frozenWidth, setFrozenWidth = _g.setFrozenWidth, fixedRef = _g.fixedRef, dynamicRef = _g.dynamicRef;
+    useEffect(function () {
+        if (columns) {
+            var frozenCols = columns.filter(function (col) { return col.canBeFrozen; });
+            var initialFrozenWidth_1 = frozenCols.reduce(function (width, col) { return width + (col.minWidth || 120); }, 1);
+            setFrozenWidth(function (fw) {
+                if (fw !== initialFrozenWidth_1) {
+                    return initialFrozenWidth_1;
+                }
+                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, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
+                            width: "100%",
+                            marginLeft: canFreeze ? frozenWidth || 0 : 0,
+                            overflow: "auto"
+                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { 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;
+                                    }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
+                                        return isUpMd ? !footer.canBeFrozen : true;
+                                    }) })] })) }))] })) })) })));
+}
+export default BasicTable;
+export * from "./types";
+export { default as useTable } from "./useTable";

package/BasicTable/types.d.ts

@@ -0,0 +1,72 @@
+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;
+    minWidth?: number;
+    [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;
+}
+export interface BasicTableHeaderProps {
+    headers: Array<IHeader>;
+}
+export interface BasicTableFooterProps {
+    footers: Array<IFooter>;
+}
+export interface BasicTableBodyProps {
+    columns: Array<IBodyColumn>;
+    rows: Array<IRow>;
+    noDataText?: string;
+    forFrozen?: boolean;
+}
+export interface BasicTableBodyRowProps {
+    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(0), 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,44 @@
+/// <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;
+        minWidth?: number | 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;
+        minWidth?: number | 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;
+        minWidth?: number | undefined;
+        Cell: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    }[];
+    rows: import("./types").IRow[];
+};
+export default useTable;