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

package/VirtualDataTable/index.d.ts

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

package/VirtualDataTable/index.js

@@ -0,0 +1,167 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, cloneElement, useMemo, useCallback } from "react";
+import { TableVirtuoso } from "react-virtuoso";
+import Paper from "@mui/material/Paper";
+import Table from "@mui/material/Table";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableFooter from "@mui/material/TableFooter";
+import TableContainer from "@mui/material/TableContainer";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import useTheme from "@mui/material/styles/useTheme";
+function VirtualDataTable(props) {
+    var rows = props.rows, columns = props.columns, dense = props.dense;
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _a = 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]), pinnedLeftCols = _a[0], normalCols = _a[1], pinnedRightCols = _a[2];
+    var VirtuosoTableComponents = useMemo(function () { return ({
+        Scroller: forwardRef(function (props, ref) { return (_jsx(TableContainer, __assign({ component: Paper }, props, { ref: ref, 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",
+            } }))); }),
+        Table: function (props) { return (_jsx(Table, __assign({}, props, { size: dense ? "small" : "medium", sx: {
+                borderCollapse: "separate",
+                minWidth: 600,
+                tableLayout: "fixed",
+            } }))); },
+        TableHead: forwardRef(function (props, ref) { return (_jsx(TableHead, __assign({}, props, { ref: ref }))); }),
+        TableRow: TableRow,
+        TableBody: forwardRef(function (props, ref) { return (_jsx(TableBody, __assign({}, props, { ref: ref }))); }),
+        TableFoot: forwardRef(function (props, ref) { return (_jsx(TableFooter, __assign({}, props, { ref: ref }))); }),
+    }); }, []);
+    var fixedHeaderContent = useCallback(function () {
+        return (_jsxs(TableRow, { children: [pinnedLeftCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
+                    var left = pinnedLeftCols
+                        .slice(0, index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ variant: "head", title: headerTip, align: align, sx: {
+                            position: "sticky",
+                            left: left,
+                            zIndex: 20,
+                            width: width,
+                            cursor: sortable ? "pointer" : "default",
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Header) }), accessor));
+                }), normalCols.map(function (column) {
+                    var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
+                    return (_jsx(TableCell, __assign({ variant: "head", title: headerTip, align: align, sx: {
+                            zIndex: 9,
+                            width: width,
+                            cursor: sortable ? "pointer" : "default",
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Header) }), accessor));
+                }), pinnedRightCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Header = column.Header, accessor = column.accessor, headerTip = column.headerTip, sortable = column.sortable;
+                    var right = pinnedRightCols
+                        .slice(0, pinnedRightCols.length - 1 - index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ variant: "head", title: headerTip, align: align, sx: {
+                            position: "sticky",
+                            right: right,
+                            zIndex: 20,
+                            width: width,
+                            cursor: sortable ? "pointer" : "default",
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Header) }), accessor));
+                })] }));
+    }, []);
+    var fixedFooterContent = useCallback(function () {
+        return (_jsxs(TableRow, { children: [pinnedLeftCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
+                    var left = pinnedLeftCols
+                        .slice(0, index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                            position: "sticky",
+                            left: left,
+                            zIndex: 20,
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: Footer ? cloneElement(Footer) : _jsx(_Fragment, {}) }), accessor));
+                }), normalCols.map(function (column) {
+                    var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
+                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                            zIndex: 9,
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: Footer ? cloneElement(Footer) : _jsx(_Fragment, {}) }), accessor));
+                }), pinnedRightCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Footer = column.Footer, accessor = column.accessor;
+                    var right = pinnedRightCols
+                        .slice(0, pinnedRightCols.length - 1 - index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                            position: "sticky",
+                            right: right,
+                            zIndex: 20,
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: Footer ? cloneElement(Footer) : _jsx(_Fragment, {}) }), accessor));
+                })] }));
+    }, []);
+    var itemContent = useCallback(function (rowIndex, row) {
+        return (_jsxs(_Fragment, { children: [pinnedLeftCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
+                    var left = pinnedLeftCols
+                        .slice(0, index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                            position: "sticky",
+                            left: left,
+                            zIndex: 20,
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex }) }), accessor));
+                }), normalCols.map(function (column) {
+                    var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
+                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                            zIndex: 9,
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex }) }), accessor));
+                }), pinnedRightCols.map(function (column, index) {
+                    var align = column.align, width = column.width, Body = column.Body, accessor = column.accessor;
+                    var right = pinnedRightCols
+                        .slice(0, pinnedRightCols.length - 1 - index)
+                        .reduce(function (w, t) { return w + (t.width || 0); }, 0);
+                    return (_jsx(TableCell, __assign({ variant: "footer", align: align, sx: {
+                            position: "sticky",
+                            right: right,
+                            zIndex: 20,
+                            width: width,
+                            backgroundColor: "background.paper",
+                        } }, { children: cloneElement(Body, { column: column, row: row, rows: rows, rowIndex: rowIndex }) }), accessor));
+                })] }));
+    }, []);
+    return (_jsx(TableVirtuoso, { data: rows, components: VirtuosoTableComponents, fixedHeaderContent: fixedHeaderContent, fixedFooterContent: fixedFooterContent, itemContent: itemContent }));
+}
+export default VirtualDataTable;

package/VirtualDataTable/types.d.ts

@@ -0,0 +1,20 @@
+import type { ReactElement, CSSProperties } from "react";
+export declare type TVirtualTableRow = Record<string, any>;
+export declare type TVirtualTableColumn = {
+    headerTip?: string;
+    Header: ReactElement;
+    Body: ReactElement;
+    Footer?: ReactElement;
+    align?: "left" | "center" | "right";
+    accessor: string;
+    sortable?: boolean;
+    fixable?: "left" | "right";
+    width: number;
+};
+export interface VirtualTableProps<RowProps extends TVirtualTableRow> {
+    dense?: boolean;
+    rows: Array<RowProps>;
+    columns: Array<TVirtualTableColumn>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/VirtualDataTable/types.js

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

package/VirtualGrid/GridCore/{TableBody.d.ts → GridBody.d.ts}

@@ -1,3 +1,4 @@
 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;
+declare const _default: typeof VirtualGridBody;
+export default _default;

package/VirtualGrid/GridCore/{TableBody.js → GridBody.js}

@@ -21,21 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import TableRow from "@mui/material/TableRow";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
-import TableBodyRow from "./TableBodyRow";
+import GridBodyRow from "./GridBodyRow";
 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 _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 })) })) })));
+    var virtualRows = useGridVirtualizer().virtualRows;
+    return (_jsx(TableBody, { children: virtualRows.length > 0 ? (virtualRows.map(function (virtualRow, index) {
+            return (_jsx(GridBodyRow, __assign({ rowIndex: index, virtualRow: virtualRow, rows: rows, columns: columns }, rest), "Virtual_Grid_Body_Row_".concat(virtualRow.key)));
+        })) : (_jsx(TableRow, { children: _jsx(TableCell, __assign({ colSpan: columns.length, align: "center" }, { children: noDataText })) })) }));
 }
-export default VirtualGridBody;
+export default memo(VirtualGridBody);

package/VirtualGrid/GridCore/GridBodyRow.d.ts

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

package/VirtualGrid/GridCore/{TableBodyRow.js → GridBodyRow.js}

@@ -10,20 +10,19 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, useState, useMemo } from "react";
+import { memo, 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";
 import { useGridVirtualizer } from "../GridVirtualizerContext";
-function TableBodyRow(props) {
+function VirtualGridBodyRow(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 = useGridVirtualizer(), leftShadowVisible = _b.leftShadowVisible, rightShadowVisible = _b.rightShadowVisible, onMeasureElement = _b.onMeasureElement;
+    var _a = useGridVirtualizer(), leftShadowVisible = _a.leftShadowVisible, rightShadowVisible = _a.rightShadowVisible, onMeasureElement = _a.onMeasureElement;
     var row = useMemo(function () { return rows[virtualRow.index]; }, [rows, virtualRow]);
-    var _c = useMemo(function () {
+    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"; });
@@ -33,8 +32,8 @@ function TableBodyRow(props) {
         else {
             return [[], columns, []];
         }
-    }, [isUpMd, columns]), fixedLeftCols = _c[0], dynamicCols = _c[1], fixedRightCols = _c[2];
-    var _d = useMemo(function () {
+    }, [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;
@@ -44,18 +43,18 @@ function TableBodyRow(props) {
             };
         }
         return { normal: "#FEFEFE", hover: "#F2F1F3" };
-    }, [row, columns, onCustomizeRowBgColor]), normal = _d.normal, hover = _d.hover;
+    }, [row, columns, onCustomizeRowBgColor]), normal = _c.normal, hover = _c.hover;
+    var _d = useState(), rowEl = _d[0], setRowEl = _d[1];
     return (_jsxs(TableRow, __assign({ sx: {
             backgroundColor: normal,
             width: "100%",
-            position: "absolute",
-            display: "flex",
-            transform: "translateY(".concat(virtualRow.start, "px)"),
+            height: "".concat(virtualRow.size, "px"),
+            transform: "translateY(".concat(virtualRow.start - rowIndex * virtualRow.size, "px)"),
             "&:hover": {
                 cursor: onRowClick ? "pointer" : "default",
                 backgroundColor: onRowClick ? hover : normal,
             },
-        }, "data-index": virtualRow.index, ref: function (node) { return onMeasureElement(node); }, onMouseEnter: function (event) {
+        }, "data-index": virtualRow.index, onMouseEnter: function (event) {
             setRowEl(event.currentTarget);
         }, onMouseLeave: function () {
             setRowEl(undefined);
@@ -74,11 +73,10 @@ function TableBodyRow(props) {
                     .slice(0, index)
                     .reduce(function (w, t) { return w + (t.width || 0); }, 0);
                 return (_jsx(TableCell, __assign({ align: align, sx: {
-                        minWidth: width,
                         left: left,
-                        position: "sticky",
-                        display: "flex",
                         zIndex: 10,
+                        position: "sticky",
+                        width: width,
                         backgroundColor: onRowClick && rowEl ? hover : normal,
                         "&::after": index === fixedLeftCols.length - 1 && leftShadowVisible
                             ? {
@@ -93,26 +91,34 @@ function TableBodyRow(props) {
                                 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));
+                    } }, { children: cloneElement(Cell, {
+                        column: col,
+                        rows: rows,
+                        row: row,
+                        rowIndex: virtualRow.index,
+                    }) }), "Virtual_Grid_Body_Row_".concat(virtualRow.index, "_").concat(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: {
-                        minWidth: width,
                         zIndex: 9,
-                        display: "flex",
+                        width: width,
                         backgroundColor: onRowClick && rowEl ? hover : normal,
-                    } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row, rowIndex: rowIndex }) }), accessor));
+                    } }, { children: cloneElement(Cell, {
+                        column: col,
+                        rows: rows,
+                        row: row,
+                        rowIndex: virtualRow.index,
+                    }) }), "Virtual_Grid_Body_Row_".concat(virtualRow.index, "_").concat(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: {
-                        minWidth: width,
                         right: right,
+                        width: width,
                         position: "sticky",
                         zIndex: 10,
-                        display: "flex",
                         backgroundColor: onRowClick && rowEl ? hover : normal,
                         "&::after": index === 0 && rightShadowVisible
                             ? {
@@ -127,7 +133,12 @@ function TableBodyRow(props) {
                                 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));
+                    } }, { children: cloneElement(Cell, {
+                        column: col,
+                        rows: rows,
+                        row: row,
+                        rowIndex: virtualRow.index,
+                    }) }), "Virtual_Grid_Body_Row_".concat(virtualRow.index, "_").concat(accessor)));
             })] })));
 }
-export default TableBodyRow;
+export default memo(VirtualGridBodyRow);

package/VirtualGrid/GridCore/GridFooter.d.ts

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

package/VirtualGrid/GridCore/{TableFooter.js → GridFooter.js}

@@ -17,7 +17,7 @@ import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 import { useGridVirtualizer } from "../GridVirtualizerContext";
-function TableFooter(props) {
+function VirtualGridFooter(props) {
     var _a = props.footers, footers = _a === void 0 ? [] : _a, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, noData = props.noData;
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
@@ -37,11 +37,9 @@ function TableFooter(props) {
             position: "sticky",
             bottom: "-1px",
             zIndex: 20,
-            display: "grid",
         } }, { children: _jsxs(TableRow, __assign({ sx: {
                 backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
                 color: "".concat(footerTextColor || "inherit", " !important"),
-                display: "flex",
                 width: "100%",
             } }, { children: [fixedLeftFooters.map(function (footer, index) {
                     var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
@@ -54,8 +52,7 @@ function TableFooter(props) {
                             color: "".concat(footerTextColor || "inherit", " !important"),
                             zIndex: 10,
                             left: left,
-                            minWidth: width,
-                            display: "flex",
+                            width: width,
                             userSelect: "none",
                             "&::after": index === fixedLeftFooters.length - 1 && leftShadowVisible
                                 ? {
@@ -70,17 +67,16 @@ function TableFooter(props) {
                                     boxShadow: "inset 10px 0 10px -8px rgba(0, 0, 0, 0.1)",
                                 }
                                 : undefined,
-                        } }, { children: cloneElement(Cell) }), accessor));
+                        } }, { children: cloneElement(Cell) }), "Virtual_Grid_Footer_Col_".concat(accessor)));
                 }), dynamicFooters.map(function (footer) {
                     var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
                     return (_jsx(TableCell, __assign({ align: align, sx: {
                             zIndex: 9,
-                            minWidth: width,
-                            display: "flex",
+                            width: width,
                             userSelect: "none",
                             backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
                             color: "".concat(footerTextColor || "inherit", " !important"),
-                        } }, { children: cloneElement(Cell) }), accessor));
+                        } }, { children: cloneElement(Cell) }), "Virtual_Grid_Footer_Col_".concat(accessor)));
                 }), fixedRightFooters.map(function (footer, index) {
                     var accessor = footer.accessor, Cell = footer.Cell, _a = footer.align, align = _a === void 0 ? "center" : _a, width = footer.width;
                     var right = fixedRightFooters
@@ -89,9 +85,8 @@ function TableFooter(props) {
                     return (_jsx(TableCell, __assign({ align: align, sx: {
                             position: "sticky",
                             zIndex: 10,
-                            minWidth: width,
                             right: right,
-                            display: "flex",
+                            width: width,
                             backgroundColor: "".concat(footerBgColor || "#eaf0f6", " !important"),
                             color: "".concat(footerTextColor || "inherit", " !important"),
                             userSelect: "none",
@@ -108,7 +103,7 @@ function TableFooter(props) {
                                     boxShadow: "inset -10px 0 10px -8px rgba(0, 0, 0, 0.1)",
                                 }
                                 : undefined,
-                        } }, { children: cloneElement(Cell) }), accessor));
+                        } }, { children: cloneElement(Cell) }), "Virtual_Grid_Footer_Col_".concat(accessor)));
                 })] })) })));
 }
-export default memo(TableFooter);
+export default memo(VirtualGridFooter);

package/VirtualGrid/GridCore/GridHeader.d.ts

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

package/VirtualGrid/GridCore/{TableHeader.js → GridHeader.js}

@@ -17,7 +17,7 @@ import TableCell from "@mui/material/TableCell";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useTheme from "@mui/material/styles/useTheme";
 import { useGridVirtualizer } from "../GridVirtualizerContext";
-function TableHeader(props) {
+function VirtualGridHeader(props) {
     var headers = props.headers, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, noData = props.noData;
     var theme = useTheme();
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
@@ -33,10 +33,9 @@ function TableHeader(props) {
             return [[], headers, []];
         }
     }, [isUpMd, noData, headers]), fixedLeftHeaders = _b[0], dynamicHeaders = _b[1], fixedRightHeaders = _b[2];
-    return (_jsx(TableHead, __assign({ sx: { position: "sticky", top: 0, zIndex: 20, display: "grid" } }, { children: _jsxs(TableRow, __assign({ sx: {
+    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"),
-                display: "flex",
                 width: "100%",
             } }, { children: [fixedLeftHeaders.map(function (header, index) {
                     var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
@@ -48,9 +47,8 @@ function TableHeader(props) {
                             backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
                             color: "".concat(headerTextColor || "inherit", " !important"),
                             zIndex: 10,
-                            minWidth: width,
                             left: left,
-                            display: "flex",
+                            width: width,
                             userSelect: "none",
                             cursor: sortable ? "pointer" : "default",
                             "&::after": index === fixedLeftHeaders.length - 1 && leftShadowVisible
@@ -68,20 +66,19 @@ function TableHeader(props) {
                                 : undefined,
                         }, onClick: function () {
                             onSort({ accessor: accessor });
-                        } }, { children: cloneElement(Cell) }), accessor));
+                        } }, { children: cloneElement(Cell) }), "Virtual_Grid_Header_Col_".concat(accessor)));
                 }), dynamicHeaders.map(function (header) {
                     var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
                     return (_jsx(TableCell, __assign({ title: title, align: align, sx: {
-                            minWidth: width,
                             zIndex: 9,
+                            width: width,
                             userSelect: "none",
-                            display: "flex",
                             cursor: sortable ? "pointer" : "default",
                             backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
                             color: "".concat(headerTextColor || "inherit", " !important"),
                         }, onClick: function () {
                             onSort({ accessor: accessor });
-                        } }, { children: cloneElement(Cell) }), accessor));
+                        } }, { children: cloneElement(Cell) }), "Virtual_Grid_Header_Col_".concat(accessor)));
                 }), fixedRightHeaders.map(function (header, index) {
                     var accessor = header.accessor, Cell = header.Cell, _a = header.align, align = _a === void 0 ? "center" : _a, width = header.width, title = header.title, _b = header.sortable, sortable = _b === void 0 ? false : _b, onSort = header.onSort;
                     var right = fixedRightHeaders
@@ -92,9 +89,8 @@ function TableHeader(props) {
                             backgroundColor: "".concat(headerBgColor || "#eaf0f6", " !important"),
                             color: "".concat(headerTextColor || "inherit", " !important"),
                             zIndex: 10,
-                            minWidth: width,
                             right: right,
-                            display: "flex",
+                            width: width,
                             userSelect: "none",
                             cursor: sortable ? "pointer" : "default",
                             "&::after": index === 0 && rightShadowVisible
@@ -112,7 +108,7 @@ function TableHeader(props) {
                                 : undefined,
                         }, onClick: function () {
                             onSort({ accessor: accessor });
-                        } }, { children: cloneElement(Cell) }), accessor));
+                        } }, { children: cloneElement(Cell) }), "Virtual_Grid_Header_Col_".concat(accessor)));
                 })] })) })));
 }
-export default memo(TableHeader);
+export default memo(VirtualGridHeader);

package/VirtualGrid/GridCore/index.d.ts

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

package/VirtualGrid/GridCore/index.js

@@ -10,15 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import Grid from "@mui/material/Grid";
 import Table from "@mui/material/Table";
 import TableContainer from "@mui/material/TableContainer";
-import TableBody from "./TableBody";
-import TableHeader from "./TableHeader";
-import TableFooter from "./TableFooter";
+import TableBody from "./GridBody";
+import TableHeader from "./GridHeader";
+import TableFooter from "./GridFooter";
 import { useGridVirtualizer } from "../GridVirtualizerContext";
 function VirtualGridCore(props) {
     var dense = props.dense, _a = props.rows, rows = _a === void 0 ? [] : _a, _b = props.columns, columns = _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, headerBgColor = props.headerBgColor, headerTextColor = props.headerTextColor, footerBgColor = props.footerBgColor, footerTextColor = props.footerTextColor, onRowClick = props.onRowClick, onContextMenu = props.onContextMenu, onCustomizeRowBgColor = props.onCustomizeRowBgColor;
-    var _f = useGridVirtualizer(), tableRef = _f.tableRef, onProcessShadowVisible = _f.onProcessShadowVisible;
+    var _f = useGridVirtualizer(), tableRef = _f.tableRef, getTotalSize = _f.getTotalSize, onProcessShadowVisible = _f.onProcessShadowVisible;
     return (_jsx(TableContainer, __assign({ ref: tableRef, onScroll: onProcessShadowVisible, sx: {
             maxHeight: "inherit",
             borderWidth: "thin",
@@ -27,6 +29,6 @@ function VirtualGridCore(props) {
             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 }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onContextMenu: onContextMenu, onCustomizeRowBgColor: onCustomizeRowBgColor }), (footers === null || footers === void 0 ? void 0 : footers.length) > 0 ? (_jsx(TableFooter, { footers: footers, footerBgColor: footerBgColor, footerTextColor: footerTextColor, noData: rows.length === 0 })) : (_jsx(_Fragment, {}))] })) })));
+        } }, { children: _jsx(Grid, __assign({ sx: { height: "".concat(getTotalSize(), "px") } }, { 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 }), _jsx(TableBody, { rows: rows, columns: columns, noDataText: noDataText, onRowClick: onRowClick, onContextMenu: onContextMenu, onCustomizeRowBgColor: onCustomizeRowBgColor }), (footers === null || footers === void 0 ? void 0 : footers.length) > 0 ? (_jsx(TableFooter, { footers: footers, footerBgColor: footerBgColor, footerTextColor: footerTextColor, noData: rows.length === 0 })) : (_jsx(_Fragment, {}))] })) })) })));
 }
-export default VirtualGridCore;
+export default memo(VirtualGridCore);

package/VirtualGrid/GridVirtualizerContext.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useContext, useCallback, createContext, } from "react";
+import { useRef, useMemo, useState, useEffect, useContext, useCallback, createContext, } from "react";
 import { useVirtualizer, elementScroll } from "@tanstack/react-virtual";
 var PI = 3.1415965359;
 function easeInOutQuint(t) {
@@ -28,7 +28,7 @@ var GridVirtualizerContext = createContext({
     onProcessShadowVisible: function () { },
 });
 export function GridVirtualizerContextProvider(props) {
-    var children = props.children, rows = props.rows, columns = props.columns, dense = props.dense;
+    var children = props.children, rows = props.rows, columns = props.columns, dense = props.dense, estimateRowHeight = props.estimateRowHeight;
     var tableRef = useRef(null);
     var scrollingRef = useRef();
     var scrollToFn = useCallback(function (offset, canSmooth, instance) {
@@ -53,15 +53,18 @@ export function GridVirtualizerContextProvider(props) {
         };
         requestAnimationFrame(run);
     }, []);
+    var measureElementHeight = useMemo(function () {
+        return typeof window !== "undefined" &&
+            navigator.userAgent.indexOf("Firefox") === -1
+            ? function (element) { return element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height; }
+            : undefined;
+    }, []);
     var rowVirtualizer = useVirtualizer({
         count: rows.length,
         getScrollElement: function () { return tableRef.current; },
-        estimateSize: function () { return (dense ? 48 : 72); },
-        measureElement: typeof window !== "undefined" &&
-            navigator.userAgent.indexOf("Firefox") === -1
-            ? function (element) { return element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height; }
-            : undefined,
-        overscan: Math.round(rows.length / PI),
+        estimateSize: function () { return estimateRowHeight || (dense ? 48 : 72); },
+        measureElement: measureElementHeight,
+        overscan: Math.round(rows.length / (2 * PI)),
         scrollToFn: scrollToFn,
     });
     var _a = useState(false), leftShadowVisible = _a[0], setLeftShadowVisible = _a[1];

package/VirtualGrid/index.js

@@ -27,9 +27,9 @@ import useVirtualGrid from "./useVirtualGrid";
 import VirtualGridCore from "./GridCore";
 import { GridVirtualizerContextProvider } from "./GridVirtualizerContext";
 function VirtualGrid(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 estimateRowHeight = props.estimateRowHeight, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rows = props.rows, columns = props.columns, dense = props.dense, rest = __rest(props, ["estimateRowHeight", "primaryColor", "secondaryColor", "rows", "columns", "dense"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(GridVirtualizerContextProvider, __assign({ rows: rows, columns: columns, dense: dense }, { children: _jsx(VirtualGridCore, __assign({}, rest, { rows: rows, columns: columns, dense: dense })) })) })));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(GridVirtualizerContextProvider, __assign({ rows: rows, columns: columns, dense: dense, estimateRowHeight: estimateRowHeight }, { children: _jsx(VirtualGridCore, __assign({}, rest, { rows: rows, columns: columns, dense: dense })) })) })));
 }
 export default VirtualGrid;
 export * from "./types";

package/VirtualGrid/types.d.ts

@@ -79,10 +79,9 @@ export declare type VirtualGridFooterProps<RowProps extends Record<string, any>,
 };
 export declare type VirtualGridCoreProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Omit<VirtualGridHeaderProps<RowProps, ExtendedProps>, "noData"> & VirtualGridBodyProps<RowProps, ExtendedProps> & Omit<VirtualGridFooterProps<RowProps, ExtendedProps>, "noData"> & {
     dense?: boolean;
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
 };
 export declare type VirtualGridProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = VirtualGridCoreProps<RowProps, ExtendedProps> & {
+    estimateRowHeight?: number;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 };
@@ -90,6 +89,7 @@ export interface GridVirtualizerContextProviderProps<RowProps extends Record<str
     dense?: boolean;
     children: ReactNode;
     rows: Array<RowProps>;
+    estimateRowHeight?: number;
     columns: Array<VirtualGridBodyCellProps<RowProps, ExtendedProps>>;
 }
 export interface IGridVirtualizerContext {

package/index.d.ts

@@ -29,6 +29,7 @@ export * from "./TablePagination";
 export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
+export * from "./VirtualDataTable";
 export * from "./VirtualGrid";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
@@ -58,4 +59,5 @@ export { default as TabGroup } from "./TabGroup";
 export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";
+export { default as VirtualDataTable } from "./VirtualDataTable";
 export { default as VirtualGrid } from "./VirtualGrid";

package/index.js

@@ -29,6 +29,7 @@ export * from "./TablePagination";
 export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
+export * from "./VirtualDataTable";
 export * from "./VirtualGrid";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
@@ -58,4 +59,5 @@ export { default as TabGroup } from "./TabGroup";
 export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";
+export { default as VirtualDataTable } from "./VirtualDataTable";
 export { default as VirtualGrid } from "./VirtualGrid";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.7.0-alpha.1",
+  "version": "1.7.0-alpha.3",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -60,6 +60,7 @@
     "color-alpha": "^1.1.3",
     "react-dropzone": "14.2.3",
     "react-player": "2.11.0",
+    "react-virtuoso": "^4.12.0",
     "rifm": "^0.12.1"
   },
   "resolutions": {

package/VirtualGrid/GridCore/TableBodyRow.d.ts

@@ -1,3 +0,0 @@
-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/VirtualGrid/GridCore/TableFooter.d.ts

@@ -1,5 +0,0 @@
-/// <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;

package/VirtualGrid/GridCore/TableHeader.d.ts

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