@equinor/apollo-components 3.4.0-skeleton.1 → 3.5.1-beta.0

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 import { IconData } from '@equinor/eds-icons';
 import * as react from 'react';
 import { ReactNode, ReactElement, HTMLProps, MutableRefObject, Dispatch, SetStateAction, SyntheticEvent } from 'react';
-import { CellContext, Cell, Header, Table, Row, SortingState, OnChangeFn, ColumnDef, RowSelectionState, ExpandedState, ColumnPinningState, VisibilityState, HeaderContext, Column } from '@tanstack/react-table';
+import { CellContext, Cell, Header, Table, Row, SortingState, OnChangeFn, ColumnDef, ColumnResizeMode, RowSelectionState, ExpandedState, ColumnPinningState, VisibilityState, HeaderContext, Column } from '@tanstack/react-table';
+export { Cell, ColumnDef, ColumnPinningState, ColumnResizeMode, ExpandedState, OnChangeFn, Row, RowSelectionState, SortingState, Table, VisibilityState } from '@tanstack/react-table';
 import * as styled_components from 'styled-components';
 import * as _equinor_eds_core_react from '@equinor/eds-core-react';
 import { CellProps, TypographyProps as TypographyProps$1 } from '@equinor/eds-core-react';
 import { ColumnDef as ColumnDef$1 } from '@tanstack/table-core';
 import { SetRequired } from 'type-fest';
-import { TableOptions } from '@tanstack/table-core/build/lib/types';
 import { Variants } from '@equinor/eds-core-react/dist/types/components/types';
 import { FieldError } from 'react-hook-form';
 
@@ -27,12 +27,12 @@ declare const ChipsCell: (props: {
     values?: string[];
 }) => JSX.Element;
 
-declare type TableCellProps<T> = {
+type TableCellProps<T> = {
     cell: Cell<T, unknown>;
     highlight?: boolean;
     getStickyCellColor?: (cell: Cell<T, unknown>) => string;
 };
-declare type StyledStickyCellProps = {
+type StyledStickyCellProps = {
     highlight?: boolean;
     backgroundColor?: string;
 };
@@ -46,7 +46,7 @@ interface HeaderCellProps<TData, TValue> {
 }
 declare const HeaderCell: <TData, TValue>({ header, table }: HeaderCellProps<TData, TValue>) => JSX.Element;
 
-declare type HierarchyCellOptions = {
+type HierarchyCellOptions = {
     getRowDepth?: () => number;
     getDisplayName?: () => string;
 };
@@ -87,8 +87,8 @@ interface RowConfig<T> {
     onMouseEnter?: (row: Row<T>) => void;
     onMouseLeave?: (row: Row<T>) => void;
 }
-declare type TruncateMode = 'wrap' | 'hover';
-declare type SortConfig = {
+type TruncateMode = 'wrap' | 'hover';
+type SortConfig = {
     enableSorting?: boolean;
     manualSorting?: boolean;
     sorting?: SortingState;
@@ -105,8 +105,8 @@ interface CellConfig<T> {
      */
     truncateMode?: TruncateMode | ((cell: Cell<T, unknown>) => TruncateMode);
 }
-declare type RowSelectionMode = 'single' | 'multiple';
-declare type TableLayout = 'auto' | 'fixed';
+type RowSelectionMode = 'single' | 'multiple';
+type TableLayout = 'auto' | 'fixed';
 interface HTMLPropsRef<T extends HTMLElement> extends HTMLProps<T> {
     ref?: MutableRefObject<T | null> | null;
 }
@@ -138,7 +138,7 @@ interface DataTableProps<T> {
     virtual?: boolean;
     getRowId?: (originalRow: T, index: number, parent: Row<T> | undefined) => string;
     getSubRows?: (originalRow: T) => T[] | undefined;
-    columnResizing?: boolean | TableOptions<T>['columnResizeMode'];
+    columnResizing?: boolean | ColumnResizeMode;
     rowSelection?: Partial<ControlledState<RowSelectionState>> & {
         mode?: RowSelectionMode;
         selectColumn?: 'default' | ((options?: Record<string, any>) => ColumnDef<T, any>);
@@ -179,17 +179,9 @@ interface DataTableProps<T> {
         padding?: string;
     };
     tableContainerProps?: HTMLPropsRef<HTMLDivElement>;
-    infiniteScroll?: {
-        /** Called on scroll below offset. */
-        onBottomScroll: () => void;
-        /** Pixels above bottom. Defines when the onBottomScroll should be called. Defaults to `300`. */
-        offset?: number;
-        /** Displays loading row on the bottom of the table */
-        isFetchingNextPage?: boolean;
-        isLastPage?: boolean;
-    };
+    infiniteScroll?: InfiniteScrollConfig;
 }
-declare type ControlledState<T> = {
+type ControlledState<T> = {
     state?: T;
     /** Callback when state chagnes. Using this requires the state to be fully controlled. */
     onChange?: Dispatch<SetStateAction<T>>;
@@ -206,7 +198,7 @@ declare function DataTable<T>(props: DataTableProps<T>): JSX.Element;
  */
 declare function capitalizeHeader<T>(context: HeaderContext<T, any>): string;
 /** Prepend a column definition array with a select column. */
-declare function prependSelectColumn<T>(columns: ColumnDef<T>[], config?: DataTableProps<T>['rowSelection']): ColumnDef<T, unknown>[];
+declare function prependSelectColumn<T>(columns: ColumnDef<T>[], config?: DataTableProps<T>['rowSelection']): ColumnDef<T>[];
 
 declare function SelectColumnDef<T>(props: SetRequired<DataTableProps<T>, 'rowSelection'>['rowSelection']): ColumnDef$1<T, any>;
 
@@ -214,7 +206,7 @@ declare const leftCellShadow: styled_components.FlattenSimpleInterpolation;
 declare const StickyCell: styled_components.StyledComponent<react.ForwardRefExoticComponent<CellProps & react.RefAttributes<HTMLTableCellElement>>, any, {} & CellProps, never>;
 declare const StickyHeaderCell: styled_components.StyledComponent<react.ForwardRefExoticComponent<CellProps & react.RefAttributes<HTMLTableCellElement>>, any, ({} & CellProps) & CellProps, never>;
 
-declare type TypographyProps = {
+type TypographyProps = {
     truncate?: boolean;
     enableShowAllOnHover?: boolean;
 } & TypographyProps$1;
@@ -234,12 +226,12 @@ declare function getTotalRight<TData>(table: Table<TData>, column: Column<TData>
 declare function getIsFirstRightPinnedColumn<TData>(column: Column<TData>): boolean;
 declare function getIsLastLeftPinnedColumn<TData>(table: Table<TData>, column: Column<TData>): boolean;
 
-declare type FormMeta = {
+type FormMeta = {
     _isNew?: boolean;
     _editMode?: boolean;
     _hasRemoteChange?: boolean;
 };
-declare type WithoutFormMeta<T extends FormMeta> = Omit<T, keyof FormMeta>;
+type WithoutFormMeta<T extends FormMeta> = Omit<T, keyof FormMeta>;
 
 /**
  * Subscribes to the `_editMode` field in a `react-hook-form` context.

package/dist/index.js

@@ -2724,9 +2724,9 @@ function HeaderContent({ header, table }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderDiv, { children: [
     (0, import_react_table2.flexRender)(header.column.columnDef.header, header.getContext()),
     (_a = {
-      asc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_up }),
-      desc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_down }),
-      none: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_down })
+      asc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_up, style: { flexShrink: 0 } }),
+      desc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_down, style: { flexShrink: 0 } }),
+      none: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_down, style: { flexShrink: 0 } })
     }[header.column.getIsSorted()]) != null ? _a : null,
     table.options.enableColumnResizing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
@@ -2954,6 +2954,7 @@ var import_react3 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
 
 // src/DataTable/utils.tsx
+var import_react_table3 = require("@tanstack/react-table");
 function capitalizeHeader(context) {
   const header = context.header.id;
   return header.charAt(0).toUpperCase() + header.slice(1);
@@ -3072,8 +3073,8 @@ function TableHeader({ table, sticky }) {
 }
 
 // src/DataTable/DataTable.tsx
-var import_react_table3 = require("@tanstack/react-table");
-var import_react9 = require("react");
+var import_react_table4 = require("@tanstack/react-table");
+var import_react7 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/DataTable/components/BasicTable.tsx
@@ -3081,43 +3082,20 @@ var import_eds_core_react15 = require("@equinor/eds-core-react");
 
 // src/DataTable/components/PlaceholderRow.tsx
 var import_eds_core_react12 = require("@equinor/eds-core-react");
-var import_react4 = require("react");
+var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function PlaceholderRow({ children }) {
-  const [width, setWidth] = (0, import_react4.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_eds_core_react12.Table.Row,
-    {
-      ref: (node) => {
-        var _a, _b, _c;
-        if (!node)
-          return;
-        setWidth((_c = (_b = (_a = node.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.clientWidth);
-      },
-      style: { pointerEvents: "none" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Cell, { colSpan: 100, style: { padding: 0 }, children: width && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        "div",
-        {
-          style: {
-            width,
-            display: "flex",
-            justifyContent: "center",
-            position: "sticky",
-            left: 0,
-            height: "100%",
-            alignItems: "center"
-          },
-          children
-        }
-      ) })
-    }
-  );
+var PlaceholderTextWrapper = import_styled_components11.default.div`
+  display: flex;
+  justify-content: center;
+`;
+function PlaceholderRow({ isLoading }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Row, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Cell, { colSpan: 100, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlaceholderTextWrapper, { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.DotProgress, { color: "primary" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Typography, { children: "No data available" }) }) }) });
 }
 
 // src/DataTable/components/TableBody.tsx
 var import_eds_core_react13 = require("@equinor/eds-core-react");
-var import_styled_components11 = __toESM(require("styled-components"));
-var TableBody = (0, import_styled_components11.default)(import_eds_core_react13.Table.Body)`
+var import_styled_components12 = __toESM(require("styled-components"));
+var TableBody = (0, import_styled_components12.default)(import_eds_core_react13.Table.Body)`
   // The following attribute are important for fixed column width
   // CHANGE THES WITH CAUTION
   background: inherit;
@@ -3125,7 +3103,7 @@ var TableBody = (0, import_styled_components11.default)(import_eds_core_react13.
 
 // src/DataTable/components/TableRow.tsx
 var import_eds_core_react14 = require("@equinor/eds-core-react");
-var import_styled_components12 = __toESM(require("styled-components"));
+var import_styled_components13 = __toESM(require("styled-components"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function TableRow({
   row,
@@ -3168,7 +3146,7 @@ function TableRow({
   );
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
-var StyledTableRow = (0, import_styled_components12.default)(import_eds_core_react14.Table.Row)`
+var StyledTableRow = (0, import_styled_components13.default)(import_eds_core_react14.Table.Row)`
   /* Background color must be inherited here. Does not work with inline styling */
   ${({ active }) => active ? "" : "background-color: inherit;"}
 `;
@@ -3201,18 +3179,18 @@ function BasicTable({
 // src/DataTable/components/DataTableHeader.tsx
 var import_eds_core_react17 = require("@equinor/eds-core-react");
 var import_eds_icons7 = require("@equinor/eds-icons");
-var import_styled_components14 = __toESM(require("styled-components"));
+var import_styled_components15 = __toESM(require("styled-components"));
 
 // src/DataTable/filters/DebouncedInput.tsx
 var import_eds_core_react16 = require("@equinor/eds-core-react");
 var import_eds_icons6 = require("@equinor/eds-icons");
-var import_react5 = require("react");
-var import_styled_components13 = __toESM(require("styled-components"));
+var import_react4 = require("react");
+var import_styled_components14 = __toESM(require("styled-components"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Wrapper3 = import_styled_components13.default.div`
+var Wrapper3 = import_styled_components14.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components13.default)(import_eds_core_react16.Button)`
+var CloseButton = (0, import_styled_components14.default)(import_eds_core_react16.Button)`
   width: 24px;
   height: 24px;
 `;
@@ -3228,11 +3206,11 @@ function DebouncedInput(_a) {
     "icon",
     "debounce"
   ]);
-  const [value, setValue] = (0, import_react5.useState)(initialValue);
-  (0, import_react5.useEffect)(() => {
+  const [value, setValue] = (0, import_react4.useState)(initialValue);
+  (0, import_react4.useEffect)(() => {
     setValue(initialValue);
   }, [initialValue]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const timeout = setTimeout(() => {
       onChange(value);
     }, debounce);
@@ -3261,14 +3239,14 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 
 // src/DataTable/components/DataTableHeader.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TableBannerWrapper = import_styled_components14.default.div`
+var TableBannerWrapper = import_styled_components15.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.padding || "1rem"};
 `;
-var FilterContainer = import_styled_components14.default.div`
+var FilterContainer = import_styled_components15.default.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -3312,8 +3290,6 @@ function TableBanner({
 // src/DataTable/components/VirtualTable.tsx
 var import_eds_core_react19 = require("@equinor/eds-core-react");
 var import_react_virtual = require("@tanstack/react-virtual");
-var import_react6 = require("react");
-var import_styled_components15 = __toESM(require("styled-components"));
 
 // src/DataTable/components/PaddingRow.tsx
 var import_eds_core_react18 = require("@equinor/eds-core-react");
@@ -3338,7 +3314,7 @@ function VirtualTable(_a) {
     "cellConfig",
     "containerRef"
   ]);
-  var _a2;
+  var _a2, _b2;
   const { rows } = table.getRowModel();
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: rows.length,
@@ -3349,13 +3325,13 @@ function VirtualTable(_a) {
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a2 = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a2.start) || 0 : 0;
-  const paddingBottom = true ? 0 : virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_eds_core_react19.Table, { style: { position: "relative" }, children: [
+  const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_eds_core_react19.Table, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Caption, { hidden: true, children: props.tableCaption }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableHeader, { sticky: props.stickyHeader, table }),
-    props.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Body, { children: new Array(...new Array(30)).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Row, { children: table.getVisibleLeafColumns().map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableCellSkeleton, { delay: (rowIndex + 1) / 20 + (columnIndex + 1) / 5 }) }, rowIndex + column.id)) }, rowIndex)) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TableBody, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, { height: paddingTop }),
-      rows.length && virtualRows.map((virtualRow) => {
+      rows.length ? virtualRows.map((virtualRow) => {
         const row = rows[virtualRow.index];
         return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           TableRow,
@@ -3368,34 +3344,16 @@ function VirtualTable(_a) {
           },
           row.id
         );
-      }),
-      !rows.length && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlaceholderRow, { children: props.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.DotProgress, { color: "primary" }) : "No data available" }),
-      props.isFetchingNextPage && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlaceholderRow, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.DotProgress, { color: "primary" }) }),
+      }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlaceholderRow, { isLoading: props.isLoading }),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, { height: paddingBottom })
     ] })
   ] });
 }
-var TableCellSkeleton = import_styled_components15.default.div`
-  opacity: 0.5;
-  animation: 1s skeleton-loading ${({ delay }) => `${delay}s`} linear infinite alternate;
-  height: 1rem;
-  border-radius: 0.5rem;
-  background-color: #ccc;
-
-  @keyframes skeleton-loading {
-    0% {
-      background-color: #ccc;
-    }
-    100% {
-      background-color: #eee;
-    }
-  }
-`;
 
 // src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
-var import_react7 = require("react");
+var import_react5 = require("react");
 function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
-  const fetchMoreOnBottomReached = (0, import_react7.useCallback)(
+  const fetchMoreOnBottomReached = (0, import_react5.useCallback)(
     (tableContainer) => {
       if (!infiniteScrollConfig)
         return;
@@ -3409,11 +3367,11 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
     },
     [infiniteScrollConfig]
   );
-  const onTableContainerScroll = (0, import_react7.useCallback)(
+  const onTableContainerScroll = (0, import_react5.useCallback)(
     (event) => fetchMoreOnBottomReached(event.target),
     [fetchMoreOnBottomReached]
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!infiniteScrollConfig)
       return;
     fetchMoreOnBottomReached(tableContainerRef.current);
@@ -3422,10 +3380,10 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
 }
 
 // src/DataTable/hooks/useForceRerender.ts
-var import_react8 = require("react");
+var import_react6 = require("react");
 function useForceRerender() {
-  const [, setTick] = (0, import_react8.useState)(0);
-  return (0, import_react8.useCallback)(() => setTick((tick) => tick + 1), []);
+  const [, setTick] = (0, import_react6.useState)(0);
+  return (0, import_react6.useCallback)(() => setTick((tick) => tick + 1), []);
 }
 
 // src/DataTable/DataTable.tsx
@@ -3454,7 +3412,6 @@ var DataTableWrapper = import_styled_components16.default.div`
 }};
     width: '100%';
     overflow: auto;
-    ${(props) => props.disableYScroll ? "overflow-y: hidden;" : ""}
     ${(props) => canUseContainStrict(props.height) ? "contain: strict;" : ""}
 
     table {
@@ -3470,14 +3427,14 @@ 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, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
   const { columns, data, bannerConfig, cellConfig, sorting } = props;
-  const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react9.useState)({});
+  const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react7.useState)({});
   const [columnVisibility, setColumnVisibility] = [
     (_b = (_a = props.columnVisibility) == null ? void 0 : _a.state) != null ? _b : internalColumnVisibility,
     (_d = (_c = props.columnVisibility) == null ? void 0 : _c.onChange) != null ? _d : setInternalColumnVisibility
   ];
-  const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react9.useState)("");
+  const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react7.useState)("");
   const [globalFilterState, setGlobalFilterState] = [
     (_f = (_e = props.globalFilter) == null ? void 0 : _e.state) != null ? _f : internalGlobalFilterState,
     (_h = (_g = props.globalFilter) == null ? void 0 : _g.onChange) != null ? _h : setInternalGlobalFilterState
@@ -3486,27 +3443,27 @@ function DataTable(props) {
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
-  const [internalSortingState, setInternalSortingState] = (0, import_react9.useState)([]);
+  const [internalSortingState, setInternalSortingState] = (0, import_react7.useState)([]);
   const [sortingState, setSortingState] = [
     (_k = (_j = props.sorting) == null ? void 0 : _j.state) != null ? _k : internalSortingState,
     (_m = (_l = props.sorting) == null ? void 0 : _l.onChange) != null ? _m : setInternalSortingState
   ];
-  const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react9.useState)({});
+  const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react7.useState)({});
   const [rowSelectionState, setRowSelectionState] = [
     (_o = (_n = props.rowSelection) == null ? void 0 : _n.state) != null ? _o : internalRowSelectionState,
     (_q = (_p = props.rowSelection) == null ? void 0 : _p.onChange) != null ? _q : setInternalRowSelectionState
   ];
-  const [internalExpandedState, setInternalExpandedState] = (0, import_react9.useState)({});
+  const [internalExpandedState, setInternalExpandedState] = (0, import_react7.useState)({});
   const [expandedState, setExpandedState] = [
     (_s = (_r = props.expansion) == null ? void 0 : _r.state) != null ? _s : internalExpandedState,
     (_u = (_t = props.expansion) == null ? void 0 : _t.onChange) != null ? _u : setInternalExpandedState
   ];
-  const [internalColumnPinning, setInternalColumnPinning] = (0, import_react9.useState)({});
+  const [internalColumnPinning, setInternalColumnPinning] = (0, import_react7.useState)({});
   const [columnPinning, setColumnPinning] = [
     typeof props.columnPinning === "object" && props.columnPinning.state ? props.columnPinning.state : internalColumnPinning,
     typeof props.columnPinning === "object" && props.columnPinning.onChange ? props.columnPinning.onChange : setInternalColumnPinning
   ];
-  const table = (0, import_react_table3.useReactTable)({
+  const table = (0, import_react_table4.useReactTable)({
     columns: prependSelectColumn(columns, props.rowSelection),
     data,
     globalFilterFn: enableGlobalFilter(fuzzyFilter),
@@ -3533,10 +3490,10 @@ function DataTable(props) {
     enableSubRowSelection: ((_z = props.rowSelection) == null ? void 0 : _z.mode) !== "single",
     filterFromLeafRows: bannerConfig == null ? void 0 : bannerConfig.filterFromLeafRows,
     enablePinning: props.columnPinning !== void 0 && (typeof props.columnPinning === "boolean" ? props.columnPinning : props.columnPinning.enable),
-    getFilteredRowModel: enableGlobalFilter((0, import_react_table3.getFilteredRowModel)()),
-    getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
-    getExpandedRowModel: (0, import_react_table3.getExpandedRowModel)(),
-    getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
+    getFilteredRowModel: enableGlobalFilter((0, import_react_table4.getFilteredRowModel)()),
+    getCoreRowModel: (0, import_react_table4.getCoreRowModel)(),
+    getExpandedRowModel: (0, import_react_table4.getExpandedRowModel)(),
+    getSortedRowModel: (0, import_react_table4.getSortedRowModel)(),
     onExpandedChange: setExpandedState,
     onRowSelectionChange: setRowSelectionState,
     onColumnPinningChange: setColumnPinning,
@@ -3546,83 +3503,72 @@ function DataTable(props) {
     getSubRows: props == null ? void 0 : props.getSubRows,
     getRowId: props == null ? void 0 : props.getRowId
   });
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     var _a2;
     if ((_a2 = props.expansion) == null ? void 0 : _a2.expandAllByDefault) {
       table.toggleAllRowsExpanded();
     }
   }, [table, (_B = props.expansion) == null ? void 0 : _B.expandAllByDefault]);
   const { isLoading, rowConfig } = props;
-  const tableContainerRef = (0, import_react9.useRef)(null);
+  const tableContainerRef = (0, import_react7.useRef)(null);
   const onTableContainerScroll = useFetchMoreOnBottomReached(
     tableContainerRef,
     props.infiniteScroll
   );
   const forceRerender = useForceRerender();
-  (0, import_react9.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (Boolean(tableContainerRef.current))
       forceRerender();
   }, [tableContainerRef.current === null]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    DataTableWrapper,
-    {
-      height: props == null ? void 0 : props.height,
-      width: props == null ? void 0 : props.width,
-      tableLayout: props == null ? void 0 : props.tableLayout,
-      disableYScroll: props.isLoading,
-      children: [
-        props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          TableBanner,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DataTableWrapper, { height: props == null ? void 0 : props.height, width: props == null ? void 0 : props.width, tableLayout: props == null ? void 0 : props.tableLayout, children: [
+    props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      TableBanner,
+      {
+        table,
+        bannerConfig: props.bannerConfig,
+        globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
+        tableCaption: props.tableCaption
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, props.tableContainerProps), {
+        className: "--table-container " + ((_D = (_C = props.tableContainerProps) == null ? void 0 : _C.className) != null ? _D : ""),
+        onScroll: (_F = (_E = props.tableContainerProps) == null ? void 0 : _E.onScroll) != null ? _F : onTableContainerScroll,
+        ref: (node) => {
+          var _a2;
+          if (node) {
+            tableContainerRef.current = node;
+            if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
+              props.tableContainerProps.ref.current = node;
+            }
+          }
+        },
+        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          VirtualTable,
           {
+            containerRef: tableContainerRef,
+            tableCaption: props.tableCaption,
             table,
-            bannerConfig: props.bannerConfig,
-            globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
-            tableCaption: props.tableCaption
+            rowConfig,
+            cellConfig,
+            isLoading,
+            stickyHeader: props.stickyHeader
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          BasicTable,
+          {
+            tableCaption: props.tableCaption,
+            table,
+            rowConfig,
+            cellConfig,
+            isLoading,
+            stickyHeader: props.stickyHeader
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "div",
-          __spreadProps(__spreadValues({}, props.tableContainerProps), {
-            className: "--table-container " + ((_D = (_C = props.tableContainerProps) == null ? void 0 : _C.className) != null ? _D : ""),
-            onScroll: (_F = (_E = props.tableContainerProps) == null ? void 0 : _E.onScroll) != null ? _F : onTableContainerScroll,
-            ref: (node) => {
-              var _a2;
-              if (node) {
-                tableContainerRef.current = node;
-                if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
-                  props.tableContainerProps.ref.current = node;
-                }
-              }
-            },
-            children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              VirtualTable,
-              {
-                containerRef: tableContainerRef,
-                tableCaption: props.tableCaption,
-                table,
-                rowConfig,
-                cellConfig,
-                isLoading,
-                stickyHeader: props.stickyHeader,
-                isFetchingNextPage: (_G = props.infiniteScroll) == null ? void 0 : _G.isFetchingNextPage
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              BasicTable,
-              {
-                tableCaption: props.tableCaption,
-                table,
-                rowConfig,
-                cellConfig,
-                isLoading,
-                stickyHeader: props.stickyHeader,
-                isFetchingNextPage: (_H = props.infiniteScroll) == null ? void 0 : _H.isFetchingNextPage
-              }
-            )
-          })
         )
-      ]
-    }
-  );
+      })
+    )
+  ] });
 }
 
 // src/form-cells/EditableCheckboxCell.tsx
@@ -3714,7 +3660,7 @@ function EditableCheckboxCell(_a) {
 
 // src/form-cells/EditableDateCell.tsx
 var import_eds_core_react22 = require("@equinor/eds-core-react");
-var import_react10 = require("react");
+var import_react8 = require("react");
 var import_react_hook_form3 = require("react-hook-form");
 var import_styled_components17 = __toESM(require("styled-components"));
 
@@ -3769,7 +3715,7 @@ function EditableDateCell(_a) {
   ]);
   const rawValue = context.getValue();
   const editMode = useEditMode();
-  const formattedValue = (0, import_react10.useMemo)(
+  const formattedValue = (0, import_react8.useMemo)(
     () => {
       var _a2;
       return (_a2 = dateStringFormatter == null ? void 0 : dateStringFormatter(rawValue)) != null ? _a2 : rawValue;
@@ -3989,7 +3935,7 @@ var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_r
 // src/form-cells/EditableTextAreaCell.tsx
 var import_eds_core_react26 = require("@equinor/eds-core-react");
 var import_eds_icons9 = require("@equinor/eds-icons");
-var import_react11 = require("react");
+var import_react9 = require("react");
 var import_react_hook_form6 = require("react-hook-form");
 var import_styled_components19 = __toESM(require("styled-components"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
@@ -4003,8 +3949,8 @@ function EditableTextAreaCell(_a) {
     "error",
     "onChange"
   ]);
-  const [textareaValue, setTextareaValue] = (0, import_react11.useState)(context.getValue());
-  const [open, setOpen] = (0, import_react11.useState)(false);
+  const [textareaValue, setTextareaValue] = (0, import_react9.useState)(context.getValue());
+  const [open, setOpen] = (0, import_react9.useState)(false);
   const editMode = useEditMode();
   const name = context.column.id;
   if (!editMode)

package/dist/index.mjs

@@ -2674,9 +2674,9 @@ function HeaderContent({ header, table }) {
   return /* @__PURE__ */ jsxs3(HeaderDiv, { children: [
     flexRender2(header.column.columnDef.header, header.getContext()),
     (_a = {
-      asc: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_up }),
-      desc: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_down }),
-      none: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_down })
+      asc: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_up, style: { flexShrink: 0 } }),
+      desc: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_down, style: { flexShrink: 0 } }),
+      none: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_down, style: { flexShrink: 0 } })
     }[header.column.getIsSorted()]) != null ? _a : null,
     table.options.enableColumnResizing && /* @__PURE__ */ jsx6(
       "div",
@@ -2906,6 +2906,7 @@ import { useRef as useRef2, useState as useState3 } from "react";
 import styled10 from "styled-components";
 
 // src/DataTable/utils.tsx
+import { createColumnHelper } from "@tanstack/react-table";
 function capitalizeHeader(context) {
   const header = context.header.id;
   return header.charAt(0).toUpperCase() + header.slice(1);
@@ -3031,51 +3032,28 @@ import {
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { useEffect as useEffect3, useRef as useRef3, useState as useState8 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
 import styled16 from "styled-components";
 
 // src/DataTable/components/BasicTable.tsx
 import { Table as EdsTable3 } from "@equinor/eds-core-react";
 
 // src/DataTable/components/PlaceholderRow.tsx
-import { Table as Table4 } from "@equinor/eds-core-react";
-import { useState as useState4 } from "react";
+import { DotProgress, Table as Table4, Typography as Typography2 } from "@equinor/eds-core-react";
+import styled11 from "styled-components";
 import { jsx as jsx13 } from "react/jsx-runtime";
-function PlaceholderRow({ children }) {
-  const [width, setWidth] = useState4();
-  return /* @__PURE__ */ jsx13(
-    Table4.Row,
-    {
-      ref: (node) => {
-        var _a, _b, _c;
-        if (!node)
-          return;
-        setWidth((_c = (_b = (_a = node.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.clientWidth);
-      },
-      style: { pointerEvents: "none" },
-      children: /* @__PURE__ */ jsx13(Table4.Cell, { colSpan: 100, style: { padding: 0 }, children: width && /* @__PURE__ */ jsx13(
-        "div",
-        {
-          style: {
-            width,
-            display: "flex",
-            justifyContent: "center",
-            position: "sticky",
-            left: 0,
-            height: "100%",
-            alignItems: "center"
-          },
-          children
-        }
-      ) })
-    }
-  );
+var PlaceholderTextWrapper = styled11.div`
+  display: flex;
+  justify-content: center;
+`;
+function PlaceholderRow({ isLoading }) {
+  return /* @__PURE__ */ jsx13(Table4.Row, { children: /* @__PURE__ */ jsx13(Table4.Cell, { colSpan: 100, children: /* @__PURE__ */ jsx13(PlaceholderTextWrapper, { children: isLoading ? /* @__PURE__ */ jsx13(DotProgress, { color: "primary" }) : /* @__PURE__ */ jsx13(Typography2, { children: "No data available" }) }) }) });
 }
 
 // src/DataTable/components/TableBody.tsx
 import { Table as Table5 } from "@equinor/eds-core-react";
-import styled11 from "styled-components";
-var TableBody = styled11(Table5.Body)`
+import styled12 from "styled-components";
+var TableBody = styled12(Table5.Body)`
   // The following attribute are important for fixed column width
   // CHANGE THES WITH CAUTION
   background: inherit;
@@ -3083,7 +3061,7 @@ var TableBody = styled11(Table5.Body)`
 
 // src/DataTable/components/TableRow.tsx
 import { Table as Table6 } from "@equinor/eds-core-react";
-import styled12 from "styled-components";
+import styled13 from "styled-components";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function TableRow({
   row,
@@ -3126,7 +3104,7 @@ function TableRow({
   );
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
-var StyledTableRow = styled12(Table6.Row)`
+var StyledTableRow = styled13(Table6.Row)`
   /* Background color must be inherited here. Does not work with inline styling */
   ${({ active }) => active ? "" : "background-color: inherit;"}
 `;
@@ -3157,20 +3135,20 @@ function BasicTable({
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-import { Typography as Typography2 } from "@equinor/eds-core-react";
+import { Typography as Typography3 } from "@equinor/eds-core-react";
 import { search } from "@equinor/eds-icons";
-import styled14 from "styled-components";
+import styled15 from "styled-components";
 
 // src/DataTable/filters/DebouncedInput.tsx
 import { Button as Button4, Icon as Icon6, Input, Tooltip as Tooltip2 } from "@equinor/eds-core-react";
 import { close as close2 } from "@equinor/eds-icons";
-import { useEffect, useState as useState5 } from "react";
-import styled13 from "styled-components";
+import { useEffect, useState as useState4 } from "react";
+import styled14 from "styled-components";
 import { jsx as jsx16 } from "react/jsx-runtime";
-var Wrapper3 = styled13.div`
+var Wrapper3 = styled14.div`
   width: 200px;
 `;
-var CloseButton = styled13(Button4)`
+var CloseButton = styled14(Button4)`
   width: 24px;
   height: 24px;
 `;
@@ -3186,7 +3164,7 @@ function DebouncedInput(_a) {
     "icon",
     "debounce"
   ]);
-  const [value, setValue] = useState5(initialValue);
+  const [value, setValue] = useState4(initialValue);
   useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
@@ -3219,14 +3197,14 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 
 // src/DataTable/components/DataTableHeader.tsx
 import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
-var TableBannerWrapper = styled14.div`
+var TableBannerWrapper = styled15.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.padding || "1rem"};
 `;
-var FilterContainer = styled14.div`
+var FilterContainer = styled15.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -3241,7 +3219,7 @@ function TableBanner({
   var _a, _b, _c, _d, _e;
   return /* @__PURE__ */ jsxs9(TableBannerWrapper, { className: "--table-caption", padding: bannerConfig == null ? void 0 : bannerConfig.padding, children: [
     /* @__PURE__ */ jsxs9(FilterContainer, { className: "--filter-container-left", children: [
-      (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx17(Typography2, { variant: "h3", as: "h2", children: tableCaption }),
+      (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx17(Typography3, { variant: "h3", as: "h2", children: tableCaption }),
       (_c = (_a = bannerConfig == null ? void 0 : bannerConfig.customActionsLeft) == null ? void 0 : _a.call(bannerConfig, table)) != null ? _c : (_b = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _b.call(bannerConfig, table)
     ] }),
     /* @__PURE__ */ jsx17(FilterContainer, { className: "--filter-container-right", children: /* @__PURE__ */ jsxs9(Fragment3, { children: [
@@ -3268,10 +3246,8 @@ function TableBanner({
 }
 
 // src/DataTable/components/VirtualTable.tsx
-import { DotProgress, Table as Table8 } from "@equinor/eds-core-react";
+import { Table as Table8 } from "@equinor/eds-core-react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useState as useState6 } from "react";
-import styled15 from "styled-components";
 
 // src/DataTable/components/PaddingRow.tsx
 import { Table as Table7 } from "@equinor/eds-core-react";
@@ -3296,7 +3272,7 @@ function VirtualTable(_a) {
     "cellConfig",
     "containerRef"
   ]);
-  var _a2;
+  var _a2, _b2;
   const { rows } = table.getRowModel();
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
@@ -3307,13 +3283,13 @@ function VirtualTable(_a) {
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a2 = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a2.start) || 0 : 0;
-  const paddingBottom = true ? 0 : virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
-  return /* @__PURE__ */ jsxs10(Table8, { style: { position: "relative" }, children: [
+  const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
+  return /* @__PURE__ */ jsxs10(Table8, { children: [
     /* @__PURE__ */ jsx19(Table8.Caption, { hidden: true, children: props.tableCaption }),
     /* @__PURE__ */ jsx19(TableHeader, { sticky: props.stickyHeader, table }),
-    props.isLoading ? /* @__PURE__ */ jsx19(Table8.Body, { children: new Array(...new Array(30)).map((_, rowIndex) => /* @__PURE__ */ jsx19(Table8.Row, { children: table.getVisibleLeafColumns().map((column, columnIndex) => /* @__PURE__ */ jsx19(Table8.Cell, { children: /* @__PURE__ */ jsx19(TableCellSkeleton, { delay: (rowIndex + 1) / 20 + (columnIndex + 1) / 5 }) }, rowIndex + column.id)) }, rowIndex)) }) : /* @__PURE__ */ jsxs10(TableBody, { children: [
+    /* @__PURE__ */ jsxs10(TableBody, { children: [
       /* @__PURE__ */ jsx19(PaddingRow, { height: paddingTop }),
-      rows.length && virtualRows.map((virtualRow) => {
+      rows.length ? virtualRows.map((virtualRow) => {
         const row = rows[virtualRow.index];
         return /* @__PURE__ */ jsx19(
           TableRow,
@@ -3326,29 +3302,11 @@ function VirtualTable(_a) {
           },
           row.id
         );
-      }),
-      !rows.length && /* @__PURE__ */ jsx19(PlaceholderRow, { children: props.isLoading ? /* @__PURE__ */ jsx19(DotProgress, { color: "primary" }) : "No data available" }),
-      props.isFetchingNextPage && /* @__PURE__ */ jsx19(PlaceholderRow, { children: /* @__PURE__ */ jsx19(DotProgress, { color: "primary" }) }),
+      }) : /* @__PURE__ */ jsx19(PlaceholderRow, { isLoading: props.isLoading }),
       /* @__PURE__ */ jsx19(PaddingRow, { height: paddingBottom })
     ] })
   ] });
 }
-var TableCellSkeleton = styled15.div`
-  opacity: 0.5;
-  animation: 1s skeleton-loading ${({ delay }) => `${delay}s`} linear infinite alternate;
-  height: 1rem;
-  border-radius: 0.5rem;
-  background-color: #ccc;
-
-  @keyframes skeleton-loading {
-    0% {
-      background-color: #ccc;
-    }
-    100% {
-      background-color: #eee;
-    }
-  }
-`;
 
 // src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
 import { useCallback, useEffect as useEffect2 } from "react";
@@ -3380,9 +3338,9 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
 }
 
 // src/DataTable/hooks/useForceRerender.ts
-import { useCallback as useCallback2, useState as useState7 } from "react";
+import { useCallback as useCallback2, useState as useState5 } from "react";
 function useForceRerender() {
-  const [, setTick] = useState7(0);
+  const [, setTick] = useState5(0);
   return useCallback2(() => setTick((tick) => tick + 1), []);
 }
 
@@ -3412,7 +3370,6 @@ var DataTableWrapper = styled16.div`
 }};
     width: '100%';
     overflow: auto;
-    ${(props) => props.disableYScroll ? "overflow-y: hidden;" : ""}
     ${(props) => canUseContainStrict(props.height) ? "contain: strict;" : ""}
 
     table {
@@ -3428,14 +3385,14 @@ 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, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
   const { columns, data, bannerConfig, cellConfig, sorting } = props;
-  const [internalColumnVisibility, setInternalColumnVisibility] = useState8({});
+  const [internalColumnVisibility, setInternalColumnVisibility] = useState6({});
   const [columnVisibility, setColumnVisibility] = [
     (_b = (_a = props.columnVisibility) == null ? void 0 : _a.state) != null ? _b : internalColumnVisibility,
     (_d = (_c = props.columnVisibility) == null ? void 0 : _c.onChange) != null ? _d : setInternalColumnVisibility
   ];
-  const [internalGlobalFilterState, setInternalGlobalFilterState] = useState8("");
+  const [internalGlobalFilterState, setInternalGlobalFilterState] = useState6("");
   const [globalFilterState, setGlobalFilterState] = [
     (_f = (_e = props.globalFilter) == null ? void 0 : _e.state) != null ? _f : internalGlobalFilterState,
     (_h = (_g = props.globalFilter) == null ? void 0 : _g.onChange) != null ? _h : setInternalGlobalFilterState
@@ -3444,22 +3401,22 @@ function DataTable(props) {
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
-  const [internalSortingState, setInternalSortingState] = useState8([]);
+  const [internalSortingState, setInternalSortingState] = useState6([]);
   const [sortingState, setSortingState] = [
     (_k = (_j = props.sorting) == null ? void 0 : _j.state) != null ? _k : internalSortingState,
     (_m = (_l = props.sorting) == null ? void 0 : _l.onChange) != null ? _m : setInternalSortingState
   ];
-  const [internalRowSelectionState, setInternalRowSelectionState] = useState8({});
+  const [internalRowSelectionState, setInternalRowSelectionState] = useState6({});
   const [rowSelectionState, setRowSelectionState] = [
     (_o = (_n = props.rowSelection) == null ? void 0 : _n.state) != null ? _o : internalRowSelectionState,
     (_q = (_p = props.rowSelection) == null ? void 0 : _p.onChange) != null ? _q : setInternalRowSelectionState
   ];
-  const [internalExpandedState, setInternalExpandedState] = useState8({});
+  const [internalExpandedState, setInternalExpandedState] = useState6({});
   const [expandedState, setExpandedState] = [
     (_s = (_r = props.expansion) == null ? void 0 : _r.state) != null ? _s : internalExpandedState,
     (_u = (_t = props.expansion) == null ? void 0 : _t.onChange) != null ? _u : setInternalExpandedState
   ];
-  const [internalColumnPinning, setInternalColumnPinning] = useState8({});
+  const [internalColumnPinning, setInternalColumnPinning] = useState6({});
   const [columnPinning, setColumnPinning] = [
     typeof props.columnPinning === "object" && props.columnPinning.state ? props.columnPinning.state : internalColumnPinning,
     typeof props.columnPinning === "object" && props.columnPinning.onChange ? props.columnPinning.onChange : setInternalColumnPinning
@@ -3521,66 +3478,55 @@ function DataTable(props) {
     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,
-      tableLayout: props == null ? void 0 : props.tableLayout,
-      disableYScroll: props.isLoading,
-      children: [
-        props.bannerConfig && /* @__PURE__ */ jsx20(
-          TableBanner,
+  return /* @__PURE__ */ jsxs11(DataTableWrapper, { height: props == null ? void 0 : props.height, width: props == null ? void 0 : props.width, tableLayout: props == null ? void 0 : props.tableLayout, children: [
+    props.bannerConfig && /* @__PURE__ */ jsx20(
+      TableBanner,
+      {
+        table,
+        bannerConfig: props.bannerConfig,
+        globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
+        tableCaption: props.tableCaption
+      }
+    ),
+    /* @__PURE__ */ jsx20(
+      "div",
+      __spreadProps(__spreadValues({}, props.tableContainerProps), {
+        className: "--table-container " + ((_D = (_C = props.tableContainerProps) == null ? void 0 : _C.className) != null ? _D : ""),
+        onScroll: (_F = (_E = props.tableContainerProps) == null ? void 0 : _E.onScroll) != null ? _F : onTableContainerScroll,
+        ref: (node) => {
+          var _a2;
+          if (node) {
+            tableContainerRef.current = node;
+            if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
+              props.tableContainerProps.ref.current = node;
+            }
+          }
+        },
+        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx20(
+          VirtualTable,
           {
+            containerRef: tableContainerRef,
+            tableCaption: props.tableCaption,
             table,
-            bannerConfig: props.bannerConfig,
-            globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
-            tableCaption: props.tableCaption
+            rowConfig,
+            cellConfig,
+            isLoading,
+            stickyHeader: props.stickyHeader
+          }
+        ) : /* @__PURE__ */ jsx20(
+          BasicTable,
+          {
+            tableCaption: props.tableCaption,
+            table,
+            rowConfig,
+            cellConfig,
+            isLoading,
+            stickyHeader: props.stickyHeader
           }
-        ),
-        /* @__PURE__ */ jsx20(
-          "div",
-          __spreadProps(__spreadValues({}, props.tableContainerProps), {
-            className: "--table-container " + ((_D = (_C = props.tableContainerProps) == null ? void 0 : _C.className) != null ? _D : ""),
-            onScroll: (_F = (_E = props.tableContainerProps) == null ? void 0 : _E.onScroll) != null ? _F : onTableContainerScroll,
-            ref: (node) => {
-              var _a2;
-              if (node) {
-                tableContainerRef.current = node;
-                if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
-                  props.tableContainerProps.ref.current = node;
-                }
-              }
-            },
-            children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx20(
-              VirtualTable,
-              {
-                containerRef: tableContainerRef,
-                tableCaption: props.tableCaption,
-                table,
-                rowConfig,
-                cellConfig,
-                isLoading,
-                stickyHeader: props.stickyHeader,
-                isFetchingNextPage: (_G = props.infiniteScroll) == null ? void 0 : _G.isFetchingNextPage
-              }
-            ) : /* @__PURE__ */ jsx20(
-              BasicTable,
-              {
-                tableCaption: props.tableCaption,
-                table,
-                rowConfig,
-                cellConfig,
-                isLoading,
-                stickyHeader: props.stickyHeader,
-                isFetchingNextPage: (_H = props.infiniteScroll) == null ? void 0 : _H.isFetchingNextPage
-              }
-            )
-          })
         )
-      ]
-    }
-  );
+      })
+    )
+  ] });
 }
 
 // src/form-cells/EditableCheckboxCell.tsx
@@ -3794,7 +3740,7 @@ import { Autocomplete } from "@equinor/eds-core-react";
 import { Controller as Controller3 } from "react-hook-form";
 
 // src/form-cells/FormHelperText.tsx
-import { Typography as Typography3 } from "@equinor/eds-core-react";
+import { Typography as Typography4 } from "@equinor/eds-core-react";
 import { tokens as tokens7 } from "@equinor/eds-tokens";
 import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var colors = {
@@ -3815,7 +3761,7 @@ function HelperText({ helperText, variant, helperIcon }) {
       children: [
         /* @__PURE__ */ jsx24("span", { style: { flexShrink: 0 }, children: helperIcon }),
         /* @__PURE__ */ jsx24(
-          Typography3,
+          Typography4,
           {
             style: {
               fontSize: "0.75rem",
@@ -3947,7 +3893,7 @@ var InlineTextField2 = styled18(TextField2)`
 // src/form-cells/EditableTextAreaCell.tsx
 import { Button as Button5, Dialog as EDS, Icon as Icon8, TextField as TextField3 } from "@equinor/eds-core-react";
 import { arrow_up } from "@equinor/eds-icons";
-import { useState as useState9 } from "react";
+import { useState as useState7 } from "react";
 import { Controller as Controller5 } from "react-hook-form";
 import styled19 from "styled-components";
 import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -3961,8 +3907,8 @@ function EditableTextAreaCell(_a) {
     "error",
     "onChange"
   ]);
-  const [textareaValue, setTextareaValue] = useState9(context.getValue());
-  const [open, setOpen] = useState9(false);
+  const [textareaValue, setTextareaValue] = useState7(context.getValue());
+  const [open, setOpen] = useState7(false);
   const editMode = useEditMode();
   const name = context.column.id;
   if (!editMode)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "3.4.0-skeleton.1",
+  "version": "3.5.1-beta.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,7 +20,7 @@
     "@equinor/eds-icons": "^0.19.1",
     "@equinor/eds-tokens": "^0.9.1",
     "@tanstack/match-sorter-utils": "^8.8.4",
-    "@tanstack/react-table": "^8.9.1",
+    "@tanstack/react-table": "^8.9.8",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "tsup": "^6.7.0",
     "type-fest": "^3.11.0"
@@ -46,7 +46,7 @@
     "eslint-config-custom": "*",
     "storybook": "^7.0.0-alpha.38",
     "tsconfig": "*",
-    "typescript": "^4.5.2"
+    "typescript": "^5.2.2"
   },
   "publishConfig": {
     "access": "public"