@equinor/apollo-components 3.1.2-rowfix.21 → 3.1.2-rowfix.22

package/dist/index.js

@@ -661,7 +661,6 @@ function TableHeader({ table, sticky }) {
 }
 
 // src/DataTable/DataTable.tsx
-var import_eds_core_react18 = require("@equinor/eds-core-react");
 var import_react_table3 = require("@tanstack/react-table");
 var import_react7 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
@@ -922,7 +921,8 @@ function TableBanner({
   });
 }
 
-// src/DataTable/components/VirtualTableBody.tsx
+// src/DataTable/components/VirtualTable.tsx
+var import_eds_core_react18 = require("@equinor/eds-core-react");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/DataTable/components/PaddingRow.tsx
@@ -938,13 +938,12 @@ var PaddingRow = (props) => {
   });
 };
 
-// src/DataTable/components/VirtualTableBody.tsx
+// src/DataTable/components/VirtualTable.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function VirtualTableBody({
+function VirtualTable({
   table,
   rowConfig,
   cellConfig,
-  hasRef,
   containerRef,
   ...props
 }) {
@@ -952,37 +951,45 @@ function VirtualTableBody({
   const { rows } = table.getRowModel();
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: rows.length,
-    getScrollElement: () => containerRef.current,
     estimateSize: () => 48,
+    getScrollElement: () => containerRef.current,
     measureElement: (element) => element == null ? void 0 : element.getBoundingClientRect().height,
-    overscan: 2
+    overscan: 5
   });
-  if (!rowVirtualizer)
-    return null;
   const virtualRows = rowVirtualizer.getVirtualItems();
-  console.log("VirtualTableBody", { container: containerRef.current, virtualRows, hasRef });
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TableBody, {
-    style: { height: rowVirtualizer.getTotalSize() },
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_eds_core_react18.Table, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaddingRow, {
-        height: paddingTop
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Caption, {
+        hidden: true,
+        children: props.tableCaption
       }),
-      rows.length ? virtualRows.map((virtualRow) => {
-        const row = rows[virtualRow.index];
-        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, {
-          row,
-          rowConfig,
-          cellConfig,
-          measureElement: rowVirtualizer.measureElement,
-          index: virtualRow.index
-        }, row.id);
-      }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlaceholderRow, {
-        isLoading: props.isLoading
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableHeader, {
+        sticky: props.stickyHeader,
+        table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaddingRow, {
-        height: paddingBottom
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TableBody, {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaddingRow, {
+            height: paddingTop
+          }),
+          rows.length ? virtualRows.map((virtualRow) => {
+            const row = rows[virtualRow.index];
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, {
+              row,
+              rowConfig,
+              cellConfig,
+              index: virtualRow.index,
+              measureElement: rowVirtualizer.measureElement
+            }, row.id);
+          }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlaceholderRow, {
+            isLoading: props.isLoading
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaddingRow, {
+            height: paddingBottom
+          })
+        ]
       })
     ]
   });
@@ -1121,7 +1128,6 @@ function DataTable(props) {
   }, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
   const { isLoading, rowConfig } = props;
   const tableContainerRef = (0, import_react7.useRef)(null);
-  console.log("DataTable", { container: tableContainerRef.current });
   const onTableContainerScroll = useFetchMoreOnBottomReached(
     tableContainerRef,
     props.infiniteScroll
@@ -1149,7 +1155,6 @@ function DataTable(props) {
         onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
         ref: (node) => {
           var _a2;
-          console.log({ node });
           if (node) {
             tableContainerRef.current = node;
             if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
@@ -1157,26 +1162,14 @@ function DataTable(props) {
             }
           }
         },
-        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_eds_core_react18.Table, {
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react18.Table.Caption, {
-              hidden: true,
-              children: props.tableCaption
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableHeader, {
-              sticky: props.stickyHeader,
-              table
-            }),
-            tableContainerRef.current !== null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VirtualTableBody, {
-              containerRef: tableContainerRef,
-              tableCaption: props.tableCaption,
-              table,
-              rowConfig,
-              cellConfig,
-              isLoading,
-              stickyHeader: props.stickyHeader
-            })
-          ]
+        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VirtualTable, {
+          containerRef: tableContainerRef,
+          tableCaption: props.tableCaption,
+          table,
+          rowConfig,
+          cellConfig,
+          isLoading,
+          stickyHeader: props.stickyHeader
         }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BasicTable, {
           tableCaption: props.tableCaption,
           table,

package/dist/index.mjs

@@ -612,7 +612,6 @@ function TableHeader({ table, sticky }) {
 }
 
 // src/DataTable/DataTable.tsx
-import { Table as Table9 } from "@equinor/eds-core-react";
 import {
   getCoreRowModel,
   getExpandedRowModel,
@@ -879,7 +878,8 @@ function TableBanner({
   });
 }
 
-// src/DataTable/components/VirtualTableBody.tsx
+// src/DataTable/components/VirtualTable.tsx
+import { Table as Table9 } from "@equinor/eds-core-react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/DataTable/components/PaddingRow.tsx
@@ -895,13 +895,12 @@ var PaddingRow = (props) => {
   });
 };
 
-// src/DataTable/components/VirtualTableBody.tsx
+// src/DataTable/components/VirtualTable.tsx
 import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
-function VirtualTableBody({
+function VirtualTable({
   table,
   rowConfig,
   cellConfig,
-  hasRef,
   containerRef,
   ...props
 }) {
@@ -909,37 +908,45 @@ function VirtualTableBody({
   const { rows } = table.getRowModel();
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
-    getScrollElement: () => containerRef.current,
     estimateSize: () => 48,
+    getScrollElement: () => containerRef.current,
     measureElement: (element) => element == null ? void 0 : element.getBoundingClientRect().height,
-    overscan: 2
+    overscan: 5
   });
-  if (!rowVirtualizer)
-    return null;
   const virtualRows = rowVirtualizer.getVirtualItems();
-  console.log("VirtualTableBody", { container: containerRef.current, virtualRows, hasRef });
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
-  return /* @__PURE__ */ jsxs10(TableBody, {
-    style: { height: rowVirtualizer.getTotalSize() },
+  return /* @__PURE__ */ jsxs10(Table9, {
     children: [
-      /* @__PURE__ */ jsx18(PaddingRow, {
-        height: paddingTop
+      /* @__PURE__ */ jsx18(Table9.Caption, {
+        hidden: true,
+        children: props.tableCaption
       }),
-      rows.length ? virtualRows.map((virtualRow) => {
-        const row = rows[virtualRow.index];
-        return /* @__PURE__ */ jsx18(TableRow, {
-          row,
-          rowConfig,
-          cellConfig,
-          measureElement: rowVirtualizer.measureElement,
-          index: virtualRow.index
-        }, row.id);
-      }) : /* @__PURE__ */ jsx18(PlaceholderRow, {
-        isLoading: props.isLoading
+      /* @__PURE__ */ jsx18(TableHeader, {
+        sticky: props.stickyHeader,
+        table
       }),
-      /* @__PURE__ */ jsx18(PaddingRow, {
-        height: paddingBottom
+      /* @__PURE__ */ jsxs10(TableBody, {
+        children: [
+          /* @__PURE__ */ jsx18(PaddingRow, {
+            height: paddingTop
+          }),
+          rows.length ? virtualRows.map((virtualRow) => {
+            const row = rows[virtualRow.index];
+            return /* @__PURE__ */ jsx18(TableRow, {
+              row,
+              rowConfig,
+              cellConfig,
+              index: virtualRow.index,
+              measureElement: rowVirtualizer.measureElement
+            }, row.id);
+          }) : /* @__PURE__ */ jsx18(PlaceholderRow, {
+            isLoading: props.isLoading
+          }),
+          /* @__PURE__ */ jsx18(PaddingRow, {
+            height: paddingBottom
+          })
+        ]
       })
     ]
   });
@@ -1078,7 +1085,6 @@ function DataTable(props) {
   }, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
   const { isLoading, rowConfig } = props;
   const tableContainerRef = useRef3(null);
-  console.log("DataTable", { container: tableContainerRef.current });
   const onTableContainerScroll = useFetchMoreOnBottomReached(
     tableContainerRef,
     props.infiniteScroll
@@ -1106,7 +1112,6 @@ function DataTable(props) {
         onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
         ref: (node) => {
           var _a2;
-          console.log({ node });
           if (node) {
             tableContainerRef.current = node;
             if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
@@ -1114,26 +1119,14 @@ function DataTable(props) {
             }
           }
         },
-        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsxs11(Table9, {
-          children: [
-            /* @__PURE__ */ jsx19(Table9.Caption, {
-              hidden: true,
-              children: props.tableCaption
-            }),
-            /* @__PURE__ */ jsx19(TableHeader, {
-              sticky: props.stickyHeader,
-              table
-            }),
-            tableContainerRef.current !== null && /* @__PURE__ */ jsx19(VirtualTableBody, {
-              containerRef: tableContainerRef,
-              tableCaption: props.tableCaption,
-              table,
-              rowConfig,
-              cellConfig,
-              isLoading,
-              stickyHeader: props.stickyHeader
-            })
-          ]
+        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx19(VirtualTable, {
+          containerRef: tableContainerRef,
+          tableCaption: props.tableCaption,
+          table,
+          rowConfig,
+          cellConfig,
+          isLoading,
+          stickyHeader: props.stickyHeader
         }) : /* @__PURE__ */ jsx19(BasicTable, {
           tableCaption: props.tableCaption,
           table,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "3.1.2-rowfix.21",
+  "version": "3.1.2-rowfix.22",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",