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

package/dist/index.js

@@ -661,8 +661,9 @@ 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_react6 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/DataTable/components/BasicTable.tsx
@@ -921,8 +922,7 @@ function TableBanner({
   });
 }
 
-// src/DataTable/components/VirtualTable.tsx
-var import_eds_core_react18 = require("@equinor/eds-core-react");
+// src/DataTable/components/VirtualTableBody.tsx
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/DataTable/components/PaddingRow.tsx
@@ -938,9 +938,9 @@ var PaddingRow = (props) => {
   });
 };
 
-// src/DataTable/components/VirtualTable.tsx
+// src/DataTable/components/VirtualTableBody.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function VirtualTable({
+function VirtualTableBody({
   table,
   rowConfig,
   cellConfig,
@@ -951,45 +951,36 @@ function VirtualTable({
   const { rows } = table.getRowModel();
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: rows.length,
-    estimateSize: () => 48,
     getScrollElement: () => containerRef.current,
+    estimateSize: () => 48,
     measureElement: (element) => element == null ? void 0 : element.getBoundingClientRect().height,
-    overscan: 5
+    overscan: 2
   });
+  if (!rowVirtualizer)
+    return null;
   const virtualRows = rowVirtualizer.getVirtualItems();
   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)(import_eds_core_react18.Table, {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TableBody, {
+    style: { height: rowVirtualizer.getTotalSize() },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Caption, {
-        hidden: true,
-        children: props.tableCaption
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaddingRow, {
+        height: paddingTop
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableHeader, {
-        sticky: props.stickyHeader,
-        table
+      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.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
-          })
-        ]
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaddingRow, {
+        height: paddingBottom
       })
     ]
   });
@@ -1024,13 +1015,6 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
   return onTableContainerScroll;
 }
 
-// src/DataTable/hooks/useForceRerender.ts
-var import_react6 = require("react");
-function useForceRerender() {
-  const [, setTick] = (0, import_react6.useState)(0);
-  return (0, import_react6.useCallback)(() => setTick((tick) => tick + 1), []);
-}
-
 // src/DataTable/DataTable.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var DataTableWrapper = import_styled_components16.default.div`
@@ -1053,12 +1037,12 @@ var DataTableWrapper = import_styled_components16.default.div`
 function DataTable(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const { columns, data, bannerConfig, cellConfig, sorting } = props;
-  const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react7.useState)({});
+  const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react6.useState)({});
   const [columnVisibility, setColumnVisibility] = [
     ((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
     ((_b = props.columnVisibility) == null ? void 0 : _b.onChange) ?? setInternalColumnVisibility
   ];
-  const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react7.useState)("");
+  const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react6.useState)("");
   const [globalFilterState, setGlobalFilterState] = [
     ((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
     ((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
@@ -1067,17 +1051,17 @@ function DataTable(props) {
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
-  const [internalSortingState, setInternalSortingState] = (0, import_react7.useState)([]);
+  const [internalSortingState, setInternalSortingState] = (0, import_react6.useState)([]);
   const [sortingState, setSortingState] = [
     ((_f = props.sorting) == null ? void 0 : _f.state) ?? internalSortingState,
     ((_g = props.sorting) == null ? void 0 : _g.onChange) ?? setInternalSortingState
   ];
-  const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react7.useState)({});
+  const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react6.useState)({});
   const [rowSelectionState, setRowSelectionState] = [
     ((_h = props.rowSelection) == null ? void 0 : _h.state) ?? internalRowSelectionState,
     ((_i = props.rowSelection) == null ? void 0 : _i.onChange) ?? setInternalRowSelectionState
   ];
-  const [internalExpandedState, setInternalExpandedState] = (0, import_react7.useState)({});
+  const [internalExpandedState, setInternalExpandedState] = (0, import_react6.useState)({});
   const [expandedState, setExpandedState] = [
     ((_j = props.expansion) == null ? void 0 : _j.state) ?? internalExpandedState,
     ((_k = props.expansion) == null ? void 0 : _k.onChange) ?? setInternalExpandedState
@@ -1120,23 +1104,18 @@ function DataTable(props) {
     getSubRows: props == null ? void 0 : props.getSubRows,
     getRowId: props == null ? void 0 : props.getRowId
   });
-  (0, import_react7.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     var _a2;
     if ((_a2 = props.expansion) == null ? void 0 : _a2.expandAllByDefault) {
       table.toggleAllRowsExpanded();
     }
   }, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
   const { isLoading, rowConfig } = props;
-  const tableContainerRef = (0, import_react7.useRef)(null);
+  const tableContainerRef = (0, import_react6.useRef)(null);
   const onTableContainerScroll = useFetchMoreOnBottomReached(
     tableContainerRef,
     props.infiniteScroll
   );
-  const forceRerender = useForceRerender();
-  (0, import_react7.useEffect)(() => {
-    if (Boolean(tableContainerRef.current))
-      forceRerender();
-  }, [tableContainerRef.current === null]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DataTableWrapper, {
     height: props == null ? void 0 : props.height,
     width: props == null ? void 0 : props.width,
@@ -1162,14 +1141,26 @@ function DataTable(props) {
             }
           }
         },
-        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
+        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
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VirtualTableBody, {
+              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,6 +612,7 @@ function TableHeader({ table, sticky }) {
 }
 
 // src/DataTable/DataTable.tsx
+import { Table as Table9 } from "@equinor/eds-core-react";
 import {
   getCoreRowModel,
   getExpandedRowModel,
@@ -619,7 +620,7 @@ import {
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
 import styled16 from "styled-components";
 
 // src/DataTable/components/BasicTable.tsx
@@ -878,8 +879,7 @@ function TableBanner({
   });
 }
 
-// src/DataTable/components/VirtualTable.tsx
-import { Table as Table9 } from "@equinor/eds-core-react";
+// src/DataTable/components/VirtualTableBody.tsx
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/DataTable/components/PaddingRow.tsx
@@ -895,9 +895,9 @@ var PaddingRow = (props) => {
   });
 };
 
-// src/DataTable/components/VirtualTable.tsx
+// src/DataTable/components/VirtualTableBody.tsx
 import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
-function VirtualTable({
+function VirtualTableBody({
   table,
   rowConfig,
   cellConfig,
@@ -908,45 +908,36 @@ function VirtualTable({
   const { rows } = table.getRowModel();
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
-    estimateSize: () => 48,
     getScrollElement: () => containerRef.current,
+    estimateSize: () => 48,
     measureElement: (element) => element == null ? void 0 : element.getBoundingClientRect().height,
-    overscan: 5
+    overscan: 2
   });
+  if (!rowVirtualizer)
+    return null;
   const virtualRows = rowVirtualizer.getVirtualItems();
   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(Table9, {
+  return /* @__PURE__ */ jsxs10(TableBody, {
+    style: { height: rowVirtualizer.getTotalSize() },
     children: [
-      /* @__PURE__ */ jsx18(Table9.Caption, {
-        hidden: true,
-        children: props.tableCaption
+      /* @__PURE__ */ jsx18(PaddingRow, {
+        height: paddingTop
       }),
-      /* @__PURE__ */ jsx18(TableHeader, {
-        sticky: props.stickyHeader,
-        table
+      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__ */ 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
-          })
-        ]
+      /* @__PURE__ */ jsx18(PaddingRow, {
+        height: paddingBottom
       })
     ]
   });
@@ -981,13 +972,6 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
   return onTableContainerScroll;
 }
 
-// src/DataTable/hooks/useForceRerender.ts
-import { useCallback as useCallback2, useState as useState5 } from "react";
-function useForceRerender() {
-  const [, setTick] = useState5(0);
-  return useCallback2(() => setTick((tick) => tick + 1), []);
-}
-
 // src/DataTable/DataTable.tsx
 import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var DataTableWrapper = styled16.div`
@@ -1010,12 +994,12 @@ var DataTableWrapper = styled16.div`
 function DataTable(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const { columns, data, bannerConfig, cellConfig, sorting } = props;
-  const [internalColumnVisibility, setInternalColumnVisibility] = useState6({});
+  const [internalColumnVisibility, setInternalColumnVisibility] = useState5({});
   const [columnVisibility, setColumnVisibility] = [
     ((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
     ((_b = props.columnVisibility) == null ? void 0 : _b.onChange) ?? setInternalColumnVisibility
   ];
-  const [internalGlobalFilterState, setInternalGlobalFilterState] = useState6("");
+  const [internalGlobalFilterState, setInternalGlobalFilterState] = useState5("");
   const [globalFilterState, setGlobalFilterState] = [
     ((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
     ((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
@@ -1024,17 +1008,17 @@ function DataTable(props) {
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
-  const [internalSortingState, setInternalSortingState] = useState6([]);
+  const [internalSortingState, setInternalSortingState] = useState5([]);
   const [sortingState, setSortingState] = [
     ((_f = props.sorting) == null ? void 0 : _f.state) ?? internalSortingState,
     ((_g = props.sorting) == null ? void 0 : _g.onChange) ?? setInternalSortingState
   ];
-  const [internalRowSelectionState, setInternalRowSelectionState] = useState6({});
+  const [internalRowSelectionState, setInternalRowSelectionState] = useState5({});
   const [rowSelectionState, setRowSelectionState] = [
     ((_h = props.rowSelection) == null ? void 0 : _h.state) ?? internalRowSelectionState,
     ((_i = props.rowSelection) == null ? void 0 : _i.onChange) ?? setInternalRowSelectionState
   ];
-  const [internalExpandedState, setInternalExpandedState] = useState6({});
+  const [internalExpandedState, setInternalExpandedState] = useState5({});
   const [expandedState, setExpandedState] = [
     ((_j = props.expansion) == null ? void 0 : _j.state) ?? internalExpandedState,
     ((_k = props.expansion) == null ? void 0 : _k.onChange) ?? setInternalExpandedState
@@ -1089,11 +1073,6 @@ function DataTable(props) {
     tableContainerRef,
     props.infiniteScroll
   );
-  const forceRerender = useForceRerender();
-  useEffect3(() => {
-    if (Boolean(tableContainerRef.current))
-      forceRerender();
-  }, [tableContainerRef.current === null]);
   return /* @__PURE__ */ jsxs11(DataTableWrapper, {
     height: props == null ? void 0 : props.height,
     width: props == null ? void 0 : props.width,
@@ -1119,14 +1098,26 @@ function DataTable(props) {
             }
           }
         },
-        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx19(VirtualTable, {
-          containerRef: tableContainerRef,
-          tableCaption: props.tableCaption,
-          table,
-          rowConfig,
-          cellConfig,
-          isLoading,
-          stickyHeader: props.stickyHeader
+        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
+            }),
+            /* @__PURE__ */ jsx19(VirtualTableBody, {
+              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.22",
+  "version": "3.1.2-rowfix.3",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",