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

package/DataTable/TableBody.js

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

package/DataTable/TableBodyRow.js

@@ -16,10 +16,11 @@ 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 rows = props.rows, columns = props.columns, rowIndex = props.rowIndex, virtualRow = props.virtualRow, 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 row = useMemo(function () { return rows[virtualRow.index]; }, [rows, virtualRow]);
     var _b = useMemo(function () {
         if (isUpMd) {
             var left = columns.filter(function (c) { return c.fixable === "left"; });
@@ -44,6 +45,7 @@ function TableBodyRow(props) {
     }, [row, columns, onCustomizeRowBgColor]), normal = _c.normal, hover = _c.hover;
     return (_jsxs(TableRow, __assign({ sx: {
             backgroundColor: normal,
+            transform: "translateY(".concat(virtualRow.start - rowIndex * virtualRow.size, "px)"),
             "&:hover": {
                 cursor: onRowClick ? "pointer" : "default",
                 backgroundColor: onRowClick ? hover : normal,

package/DataTable/index.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useRef, useEffect } from "react";
+import Grid from "@mui/material/Grid";
 import Table from "@mui/material/Table";
 import TableContainer from "@mui/material/TableContainer";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
@@ -27,7 +28,7 @@ function DataTable(props) {
     var rowVirtualizer = useVirtualizer({
         count: rows.length,
         getScrollElement: function () { return tableRef.current; },
-        estimateSize: function () { return (dense ? 48 : 64); },
+        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; }
@@ -67,7 +68,7 @@ function DataTable(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, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, virtualRows: virtualRows, 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, {}))] })) })) })));
+            } }, { children: _jsx(Grid, __assign({ sx: { height: "".concat(rowVirtualizer.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, leftShadowVisible: leftShadowVisible, rightShadowVisible: rightShadowVisible }), _jsx(TableBody, { rows: rows, virtualRows: virtualRows, 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

@@ -74,8 +74,8 @@ 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" | "virtualRows"> & {
-    row: RowProps;
     rowIndex: number;
+    virtualRow: VirtualItem;
 };
 export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps extends KvProps> = {
     footers?: Array<TableFooterCellProps<RowProps, ExtendedProps>>;
@@ -85,7 +85,7 @@ export declare type TableFooterProps<RowProps extends KvProps, ExtendedProps ext
     leftShadowVisible?: boolean;
     rightShadowVisible?: boolean;
 };
-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"> & {
+export declare type DataTableProps<RowProps extends KvProps, ExtendedProps extends KvProps> = Omit<TableHeaderProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & Omit<TableBodyProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "virtualRows"> & Omit<TableFooterProps<RowProps, ExtendedProps>, "leftShadowVisible" | "rightShadowVisible" | "noData"> & {
     dense?: boolean;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/package.json

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