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

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

@@ -27,7 +27,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; }

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.2",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",