@symply.io/basic-components 1.6.11-alpha.6 → 1.7.0-alpha.1

package/DataTable/{TableCore/TableBody.d.ts → TableBody.d.ts}

@@ -1,3 +1,3 @@
-import type { TableBodyProps, KvProps } from "../types";
+import type { TableBodyProps, KvProps } from "./types";
 declare function TBody<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableBodyProps<RowProps, ExtendedProps>): import("react/jsx-runtime").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({ rowIndex: index, 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/{TableCore/TableBodyRow.d.ts → TableBodyRow.d.ts}

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

package/DataTable/TableBodyRow.js

@@ -0,0 +1,123 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useState, useMemo } from "react";
+import TableRow from "@mui/material/TableRow";
+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, rowIndex = props.rowIndex, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
+    var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _b = useMemo(function () {
+        if (isUpMd) {
+            var left = columns.filter(function (c) { return c.fixable === "left"; });
+            var right = columns.filter(function (c) { return c.fixable === "right"; });
+            var dynamic = columns.filter(function (c) { return !c.fixable; });
+            return [left, dynamic, right];
+        }
+        else {
+            return [[], columns, []];
+        }
+    }, [isUpMd, columns]), fixedLeftCols = _b[0], dynamicCols = _b[1], fixedRightCols = _b[2];
+    var _c = useMemo(function () {
+        if (onCustomizeRowBgColor) {
+            var regex = /^#(\d|[a-f]|[A-F]){6}/i;
+            var _a = onCustomizeRowBgColor({ row: row, columns: columns }), normal_1 = _a.normal, hover_1 = _a.hover;
+            return {
+                normal: normal_1 && regex.test(normal_1) ? normal_1 : "#FEFEFE",
+                hover: hover_1 && regex.test(hover_1) ? hover_1 : "#F2F1F3"
+            };
+        }
+        return { normal: "#FEFEFE", hover: "#F2F1F3" };
+    }, [row, columns, onCustomizeRowBgColor]), normal = _c.normal, hover = _c.hover;
+    return (_jsxs(TableRow, __assign({ sx: {
+            backgroundColor: normal,
+            "&:hover": {
+                cursor: onRowClick ? "pointer" : "default",
+                backgroundColor: onRowClick ? hover : normal
+            }
+        }, onMouseEnter: function (event) {
+            setRowEl(event.currentTarget);
+        }, onMouseLeave: function () {
+            setRowEl(undefined);
+        }, onClick: onRowClick
+            ? function () {
+                onRowClick(row);
+            }
+            : undefined, onContextMenu: function (event) {
+            event.preventDefault();
+            if (onContextMenu) {
+                onContextMenu(event, row);
+            }
+        } }, { 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 ? hover : normal,
+                        "&::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, rowIndex: rowIndex }) }), accessor));
+            }), dynamicCols.map(function (col) {
+                var accessor = col.accessor, Cell = col.Cell, width = col.width, _a = col.align, align = _a === void 0 ? "center" : _a;
+                return (_jsx(TableCell, __assign({ align: align, sx: {
+                        width: width,
+                        zIndex: 9,
+                        backgroundColor: onRowClick && rowEl ? hover : normal
+                    } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row, rowIndex: rowIndex }) }), 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 ? hover : normal,
+                        "&::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, rowIndex: rowIndex }) }), accessor));
+            })] })));
+}
+export default TableBodyRow;

package/DataTable/TableFooter.d.ts

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

package/DataTable/{TableCore/TableFooter.js → TableFooter.js}

@@ -10,19 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, cloneElement, useMemo } from "react";
+import { cloneElement, useMemo } 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";
-import { useTableVirtualizer } from "../VirtualizerContext";
 function TableFooter(props) {
-    var _a = props.footers, footers = _a === void 0 ? [] : _a, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, noData = props.noData;
+    var _a = props.footers, footers = _a === void 0 ? [] : _a, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    var _b = useTableVirtualizer(), leftShadowVisible = _b.leftShadowVisible, rightShadowVisible = _b.rightShadowVisible;
-    var _c = useMemo(function () {
+    var _b = useMemo(function () {
         if (isUpMd && !noData) {
             var left = footers.filter(function (f) { return f.fixable === "left"; });
             var right = footers.filter(function (f) { return f.fixable === "right"; });
@@ -32,7 +30,7 @@ function TableFooter(props) {
         else {
             return [[], footers, []];
         }
-    }, [isUpMd, noData, footers]), fixedLeftFooters = _c[0], dynamicFooters = _c[1], fixedRightFooters = _c[2];
+    }, [isUpMd, noData, footers]), fixedLeftFooters = _b[0], dynamicFooters = _b[1], fixedRightFooters = _b[2];
     return (_jsx(Footer, __assign({ sx: { position: "sticky", bottom: "-1px", zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: {
                 backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
                 color: "".concat(footerTextColor || "inherit", " !important"),
@@ -101,4 +99,4 @@ function TableFooter(props) {
                         } }, { children: cloneElement(Cell) }), accessor));
                 })] })) })));
 }
-export default memo(TableFooter);
+export default TableFooter;

package/DataTable/TableHeader.d.ts

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

package/DataTable/{TableCore/TableHeader.js → TableHeader.js}

@@ -10,19 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, cloneElement, useMemo } from "react";
+import { cloneElement, useMemo } 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";
-import { useTableVirtualizer } from "../VirtualizerContext";
 function TableHeader(props) {
-    var headers = props.headers, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, noData = props.noData;
+    var headers = props.headers, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, noData = props.noData, leftShadowVisible = props.leftShadowVisible, rightShadowVisible = props.rightShadowVisible;
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    var _a = useTableVirtualizer(), leftShadowVisible = _a.leftShadowVisible, rightShadowVisible = _a.rightShadowVisible;
-    var _b = useMemo(function () {
+    var _a = useMemo(function () {
         if (isUpMd && !noData) {
             var left = headers.filter(function (h) { return h.fixable === "left"; });
             var right = headers.filter(function (h) { return h.fixable === "right"; });
@@ -32,7 +30,7 @@ function TableHeader(props) {
         else {
             return [[], headers, []];
         }
-    }, [isUpMd, noData, headers]), fixedLeftHeaders = _b[0], dynamicHeaders = _b[1], fixedRightHeaders = _b[2];
+    }, [isUpMd, noData, headers]), fixedLeftHeaders = _a[0], dynamicHeaders = _a[1], fixedRightHeaders = _a[2];
     return (_jsx(TableHead, __assign({ sx: { position: "sticky", top: 0, zIndex: 20 } }, { children: _jsxs(TableRow, __assign({ sx: {
                 backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
                 color: "".concat(headerTextColor || "inherit", " !important"),
@@ -110,4 +108,4 @@ function TableHeader(props) {
                         } }, { children: cloneElement(Cell) }), accessor));
                 })] })) })));
 }
-export default memo(TableHeader);
+export default TableHeader;

package/DataTable/index.js

@@ -9,27 +9,53 @@ var __assign = (this && this.__assign) || function () {
     };
     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 { 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 useDataTable from "./useTable";
-import TableCore from "./TableCore";
-import { VirtualizerContextProvider } from "./VirtualizerContext";
+import TableBody from "./TableBody";
+import TableHeader from "./TableHeader";
+import TableFooter from "./TableFooter";
 function DataTable(props) {
-    var primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rows = props.rows, columns = props.columns, dense = props.dense, rest = __rest(props, ["primaryColor", "secondaryColor", "rows", "columns", "dense"]);
+    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, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(VirtualizerContextProvider, __assign({ rows: rows, columns: columns, dense: dense }, { children: _jsx(TableCore, __assign({}, rest, { rows: rows, columns: columns, dense: dense })) })) })));
+    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 + 1);
+        }
+    }, []);
+    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: {
+                maxHeight: "inherit",
+                borderWidth: "thin",
+                borderColor: "#e5e5e5",
+                borderStyle: "solid",
+                borderRadius: "4px",
+                borderCollapse: "unset !important",
+                transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+            } }, { children: _jsxs(Table, __assign({ sx: { minWidth: 600, tableLayout: "fixed" }, size: dense ? "small" : "medium" }, { children: [_jsx(TableHeader, { headers: headers, headerBgColor: headerBgColor, headerTextColor: headerTextColor, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onContextMenu: onContextMenu, onCustomizeRowBgColor: onCustomizeRowBgColor, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), (footers === null || footers === void 0 ? void 0 : footers.length) > 0 ? (_jsx(TableFooter, { footers: footers, footerBgColor: footerBgColor, footerTextColor: footerTextColor, noData: rows.length === 0, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible })) : (_jsx(_Fragment, {}))] })) })) })));
 }
 export default DataTable;
 export * from "./types";

package/DataTable/types.d.ts

@@ -1,5 +1,4 @@
-import type { ReactNode, RefObject, MouseEvent, ReactElement, CSSProperties } from "react";
-import type { VirtualItem } from "@tanstack/react-virtual";
+import type { ReactElement, CSSProperties, MouseEvent } from "react";
 declare type HexColor = `#${string}`;
 export declare type CustomRowBgColor = {
     normal?: HexColor;
@@ -44,7 +43,7 @@ export declare type TableBodyCellProps<RowProps extends KvProps, ExtendedProps e
 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 UseTableReturns<RowProps extends KvProps, ExtendedProps extends KvProps> = {
+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>>;
@@ -56,10 +55,14 @@ export declare type TableHeaderProps<RowProps extends KvProps, ExtendedProps ext
     headerBgColor?: CSSProperties["color"];
     headerTextColor?: CSSProperties["color"];
     noData?: boolean;
+    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;
     onContextMenu?: (event: MouseEvent<HTMLTableRowElement>, row: RowProps) => unknown;
@@ -69,36 +72,20 @@ export declare type TableBodyProps<RowProps extends KvProps, ExtendedProps exten
     }) => CustomRowBgColor;
 };
 export declare type TableBodyRowProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
+    row: RowProps;
     rowIndex: number;
-    virtualRow: VirtualItem;
 };
 export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
     footers?: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
     footerBgColor?: CSSProperties["color"];
     footerTextColor?: CSSProperties["color"];
     noData?: boolean;
+    leftShadowVisible?: boolean;
+    rightShadowVisible?: boolean;
 };
-export declare type DataTableCoreProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "noData"> & TableBodyProps<RowProps, ExtendedProps> & Omit<TableFooterProps<RowProps, ExtendedProps>, "noData"> & {
+export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & Omit<TableBodyProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible"> & Omit<TableFooterProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & {
     dense?: boolean;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 };
-export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = DataTableCoreProps<RowProps, ExtendedProps> & {
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
-};
-export interface VirtualizerContextProviderProps<RowProps extends KvProps, ExtendedProps extends KvProps> {
-    dense?: boolean;
-    children: ReactNode;
-    rows: Array<RowProps>;
-    columns: Array<TableBodyCellProps<RowProps, ExtendedProps>>;
-}
-export interface IVirtualizerContext {
-    tableRef: RefObject<HTMLDivElement>;
-    virtualRows: Array<VirtualItem>;
-    leftShadowVisible: boolean;
-    rightShadowVisible: boolean;
-    onMeasureElement: (node: Element | null | undefined) => void;
-    onProcessShadowVisible: () => void;
-}
 export {};

package/DataTable/useTable.d.ts

@@ -1,3 +1,3 @@
-import type { KvProps, UseTableProps, UseTableReturns } from "./types";
-declare function useTable<T extends KvProps, F extends KvProps>(props: UseTableProps<T, F>): UseTableReturns<T, F>;
+import type { 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

@@ -35,7 +35,7 @@ function useTable(props) {
         var _a = sortBy || {}, accessor = _a.accessor, order = _a.order;
         return {
             accessor: accessor || "",
-            order: !!accessor ? order || "NONE" : "NONE"
+            order: !!accessor ? order || "NONE" : "NONE",
         };
     }, [initialState]);
     var _a = useState(initialSortingProps), sortingProps = _a[0], setSortingProps = _a[1];
@@ -75,7 +75,7 @@ function useTable(props) {
         }
         return "↓";
     }, [sortingProps]);
-    var rows = useMemo(function () { return data.map(function (d) { return d; }); }, [data]);
+    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;
@@ -94,7 +94,7 @@ function useTable(props) {
             var Footer = col.Footer;
             return __assign(__assign({ Cell: cloneElement(Footer || _jsx(_Fragment, {}), {
                     column: col,
-                    rows: rows
+                    rows: rows,
                 }) }, col), rest);
         });
     }, [columns, rest, rows]);

package/README.md

@@ -968,6 +968,77 @@ import VideoPlayerModal from '@symply.io/basic-components/VideoPlayerModal';
 
 
 
+<h3>VirtualGird</h3>
+
+Reusable data grid component with virtualizer
+
+<h5>Import</h5>
+
+```tsx
+import { VirtualGird, useVirtualGrid } from '@symply.io/basic-components';
+// or 
+import VirtualGird, { useVirtualGird } from '@symply.io/basic-components/VirtualGird'; 
+```
+
+<h5>Column Props</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>Sorting Props</h5>
+
+| Name     | Type                      | Default | Required | Description            |
+| -------- | ------------------------- | ------- | -------- | ---------------------- |
+| accessor | string                    |         | true     | The key of the column. |
+| order    | "ASC" \| "DESC" \| "NONE" |         | true     | The sorting order.     |
+
+<h5>Hook Props</h5>
+
+| Name          | Type                       | Default | Required | Description                                                  |
+| ------------- | -------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| columns       | Array                      |         | 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?: SortingProps}   |         | false    | Set the initial states                                       |
+| onSort        | func                       |         | false    | The function for sorting rows.<br />**Signature:**<br/>`function(props: SortingProps) => unknown` |
+
+<h5>Hook Returns</h5>
+
+| Name           | Type  | Description                                                  |
+| -------------- | ----- | ------------------------------------------------------------ |
+| columns        | Array | The cells for the body.                                      |
+| footers        | Array | The cells for the footer.                                    |
+| headers        | Array | The cells for the header.                                    |
+| rows           | Array | The rows for the table.                                      |
+| onResetSorting | func  | An one-key function for resetting sorting to the initial state. |
+
+<h5>Component Props</h5>
+
+| Name                  | Type                   | Default    | Required | Description                                                  |
+| --------------------- | ---------------------- | ---------- | -------- | ------------------------------------------------------------ |
+| columns               | Array                  | []         | true     | The cells for the body. (from the hook)                      |
+| dense                 | bool                   |            | false    | If `true` the table size/density would be tight.             |
+| footers               | Array                  | []         | false    | The cells for the footer. (from the hook)                    |
+| footerBgColor         | CSSProperties["color"] |            | false    | Customized footer background color.                          |
+| footerTextColor       | CSSProperties["color"] |            | false    | Customized footer text color.                                |
+| headers               | Array                  |            | true     | The cells for the header. (from the hook)                    |
+| headerBgColor         | CSSProperties["color"] |            | false    | Customized header background color.                          |
+| headerTextColor       | CSSProperties["color"] |            | false    | Customized header text color.                                |
+| noDataText            | string                 | 'No Data!' | false    | The text when no data rendered.                              |
+| onContextMenu         | func                   |            | false    | The function for row right-clicking.<br />**Signature:**<br/>`function(event: MouseEvent, row: RowProps) => unknown` |
+| onCustomizeRowBgColor | func                   |            | false    | The function for customizing the row background color.<br />**Signature:**<br/>`function(props: {row: RowProps, columns: Array\<ColumnProps\>}) => {normal?: HexColor;<br/>  hover?: HexColor;<br/>}` |
+| onRowClick            | func                   |            | false    | The function for row clicking.<br />**Signature:**<br/>`function(row: RowProps) => unknown` |
+| rows                  | Array                  |            | true     | The rows for the table. (from the hook)                      |
+
 
 
 <h2>Changelog</h2>

package/VirtualGrid/GridCore/TableBody.d.ts

@@ -0,0 +1,3 @@
+import type { VirtualGridBodyProps } from "../types";
+declare function VirtualGridBody<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>>(props: VirtualGridBodyProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
+export default VirtualGridBody;

package/{DataTable/TableCore → VirtualGrid/GridCore}/TableBody.js

@@ -25,12 +25,17 @@ import TableRow from "@mui/material/TableRow";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableBodyRow from "./TableBodyRow";
-import { useTableVirtualizer } from "../VirtualizerContext";
-function TBody(props) {
+import { useGridVirtualizer } from "../GridVirtualizerContext";
+function VirtualGridBody(props) {
     var rows = props.rows, columns = props.columns, _a = props.noDataText, noDataText = _a === void 0 ? "No Data!" : _a, rest = __rest(props, ["rows", "columns", "noDataText"]);
-    var virtualRows = useTableVirtualizer().virtualRows;
-    return (_jsx(TableBody, { children: virtualRows.length > 0 ? (virtualRows.map(function (virtualRow) {
+    var _b = useGridVirtualizer(), virtualRows = _b.virtualRows, getTotalSize = _b.getTotalSize;
+    return (_jsx(TableBody, __assign({ sx: {
+            height: "".concat(getTotalSize(), "px"),
+            width: "100%",
+            position: "relative",
+            display: "grid",
+        } }, { children: virtualRows.length > 0 ? (virtualRows.map(function (virtualRow) {
             return (_jsx(TableBodyRow, __assign({ rowIndex: virtualRow.index, virtualRow: virtualRow, rows: rows, columns: columns }, rest), "DataTable_".concat(virtualRow.index)));
-        })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
+        })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) })));
 }
-export default TBody;
+export default VirtualGridBody;

package/VirtualGrid/GridCore/TableBodyRow.d.ts

@@ -0,0 +1,3 @@
+import type { VirtualGridBodyRowProps } from "../types";
+declare function TableBodyRow<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>>(props: VirtualGridBodyRowProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
+export default TableBodyRow;

package/{DataTable/TableCore → VirtualGrid/GridCore}/TableBodyRow.js

@@ -15,13 +15,13 @@ 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";
-import { useTableVirtualizer } from "../VirtualizerContext";
+import { useGridVirtualizer } from "../GridVirtualizerContext";
 function TableBodyRow(props) {
     var rows = props.rows, columns = props.columns, rowIndex = props.rowIndex, virtualRow = props.virtualRow, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
     var _a = useState(), rowEl = _a[0], setRowEl = _a[1];
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
-    var _b = useTableVirtualizer(), leftShadowVisible = _b.leftShadowVisible, rightShadowVisible = _b.rightShadowVisible, onMeasureElement = _b.onMeasureElement;
+    var _b = useGridVirtualizer(), leftShadowVisible = _b.leftShadowVisible, rightShadowVisible = _b.rightShadowVisible, onMeasureElement = _b.onMeasureElement;
     var row = useMemo(function () { return rows[virtualRow.index]; }, [rows, virtualRow]);
     var _c = useMemo(function () {
         if (isUpMd) {
@@ -48,7 +48,9 @@ function TableBodyRow(props) {
     return (_jsxs(TableRow, __assign({ sx: {
             backgroundColor: normal,
             width: "100%",
-            transform: "translateY(".concat(virtualRow.start - rowIndex * virtualRow.size, "px)"),
+            position: "absolute",
+            display: "flex",
+            transform: "translateY(".concat(virtualRow.start, "px)"),
             "&:hover": {
                 cursor: onRowClick ? "pointer" : "default",
                 backgroundColor: onRowClick ? hover : normal,
@@ -72,9 +74,10 @@ function TableBodyRow(props) {
                     .slice(0, index)
                     .reduce(function (w, t) { return w + (t.width || 0); }, 0);
                 return (_jsx(TableCell, __assign({ align: align, sx: {
-                        width: width,
+                        minWidth: width,
                         left: left,
                         position: "sticky",
+                        display: "flex",
                         zIndex: 10,
                         backgroundColor: onRowClick && rowEl ? hover : normal,
                         "&::after": index === fixedLeftCols.length - 1 && leftShadowVisible
@@ -94,8 +97,9 @@ function TableBodyRow(props) {
             }), 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,
+                        minWidth: width,
                         zIndex: 9,
+                        display: "flex",
                         backgroundColor: onRowClick && rowEl ? hover : normal,
                     } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row, rowIndex: rowIndex }) }), accessor));
             }), fixedRightCols.map(function (col, index) {
@@ -104,10 +108,11 @@ function TableBodyRow(props) {
                     .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,
+                        minWidth: width,
                         right: right,
                         position: "sticky",
                         zIndex: 10,
+                        display: "flex",
                         backgroundColor: onRowClick && rowEl ? hover : normal,
                         "&::after": index === 0 && rightShadowVisible
                             ? {

package/VirtualGrid/GridCore/TableFooter.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { VirtualGridFooterProps } from "../types";
+declare function TableFooter<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>>(props: VirtualGridFooterProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TableFooter>;
+export default _default;