@equinor/apollo-components 1.6.1 → 1.7.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { IconData } from '@equinor/eds-icons';
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
-import { Cell, CellContext, ColumnDef, Row, RowSelectionState, SortingState, Table, HeaderContext } from '@tanstack/react-table';
+import { Cell, CellContext, Row, ColumnDef, RowSelectionState, SortingState, Table, HeaderContext } from '@tanstack/react-table';
 import { ColumnDef as ColumnDef$1 } from '@tanstack/table-core';
 import * as styled_components from 'styled-components';
 import { CellProps, TypographyProps as TypographyProps$1 } from '@equinor/eds-core-react';
@@ -45,6 +45,15 @@ interface FilterConfig {
     globalFilterPlaceholder?: string;
     filterFromLeafRows?: boolean;
 }
+interface RowConfig<T> {
+    getRowBackground?: (row: Row<T>) => string | undefined;
+    onClick?: (row: Row<T>) => void;
+    onMouseEnter?: (row: Row<T>) => void;
+    onMouseLeave?: (row: Row<T>) => void;
+}
+interface CellConfig<T> {
+    getStickyCellColor?: (cell: Cell<T, unknown>) => string;
+}
 declare type RowSelectionMode = 'single' | 'multiple';
 declare type DataTableConfig<T> = {
     height?: string;
@@ -55,7 +64,6 @@ declare type DataTableConfig<T> = {
     selectColumn?: 'default' | ((options?: Record<string, any>) => ColumnDef<T, any>);
     getSubRows?: (originalRow: T) => T[] | undefined;
     getRowId?: (originalRow: T, index: number, parent: Row<T> | undefined) => string;
-    onRowClick?: (row: Row<T>) => void;
 } & ExpansionConfig;
 interface ExpansionConfig {
     expandAllByDefault?: boolean;
@@ -68,10 +76,12 @@ interface DataTableProps<T> {
     isLoading?: boolean;
     className?: string;
     config?: DataTableConfig<T>;
+    cellConfig?: CellConfig<T>;
+    rowConfig?: RowConfig<T>;
     filters?: FilterConfig;
     header?: HeaderConfig;
 }
-declare function DataTable$1<T>({ columns, data, isLoading, header, filters, config, }: DataTableProps<T>): JSX.Element;
+declare function DataTable$1<T>({ columns, data, isLoading, header, filters, config, rowConfig, }: DataTableProps<T>): JSX.Element;
 
 declare type DataTableProviderProps = ComponentProps<typeof Provider>;
 declare function DataTableProvider({ children, ...props }: DataTableProviderProps): JSX.Element;
@@ -123,4 +133,4 @@ declare type TypographyProps = {
  */
 declare const TypographyCustom: (props: TypographyProps) => JSX.Element;
 
-export { AppShell, AppSidebar, ChipsCell, DataTable, DataTableConfig, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowSelectionMode, SelectColumnDef, StickyCell, TableHeader, TypographyCustom, capitalizeHeader, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };
+export { AppShell, AppSidebar, CellConfig, ChipsCell, DataTable, DataTableConfig, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowConfig, RowSelectionMode, SelectColumnDef, StickyCell, TableHeader, TypographyCustom, capitalizeHeader, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };

package/dist/index.js

@@ -159,6 +159,12 @@ function stringToHslColor(str, s = 80, l = 85) {
   const h = hash % 360;
   return "hsl(" + h + ", " + s + "%, " + l + "%)";
 }
+function stopPropagation(handler) {
+  return (e) => {
+    e.stopPropagation();
+    handler(e);
+  };
+}
 
 // src/cells/ChipsCell.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -222,6 +228,7 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var StyledStickyCell = (0, import_styled_components6.default)(StickyCell)`
   background-clip: padding-box;
   ${leftCellShadow}
+  ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
 `;
 var StyledCell = (0, import_styled_components6.default)(import_eds_core_react4.Table.Cell)`
   ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
@@ -374,27 +381,18 @@ function SelectColumnDef(selectionMode) {
             selectionMode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Radio, {
               checked: row.getIsSelected(),
               "aria-label": `Select row ${row.id}`,
-              onChange: (e) => {
-                e.stopPropagation();
-                row.getToggleSelectedHandler()(e);
-              }
+              onChange: stopPropagation(row.getToggleSelectedHandler())
             }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Checkbox, {
               checked: row.getIsSelected(),
               indeterminate: row.getIsSomeSelected(),
               "aria-label": `Select row ${row.id}`,
-              onChange: (e) => {
-                e.stopPropagation();
-                row.getToggleSelectedHandler()(e);
-              }
+              onChange: stopPropagation(row.getToggleSelectedHandler())
             }),
             row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Button, {
               variant: "ghost_icon",
               color: "secondary",
               "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
-              onClick: (e) => {
-                e.stopPropagation();
-                row.getToggleExpandedHandler()();
-              },
+              onClick: stopPropagation(row.getToggleExpandedHandler()),
               style: { cursor: "pointer" },
               children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Icon, {
                 data: row.getIsExpanded() ? import_eds_icons3.chevron_up : import_eds_icons3.chevron_down
@@ -408,7 +406,7 @@ function SelectColumnDef(selectionMode) {
 }
 
 // src/DataTable/DataTable.tsx
-var import_react_table5 = require("@tanstack/react-table");
+var import_react_table3 = require("@tanstack/react-table");
 var import_jotai3 = require("jotai");
 var import_react4 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
@@ -422,8 +420,7 @@ var tableSortingAtom = (0, import_jotai.atom)([]);
 var expandedRowsAtom = (0, import_jotai.atom)({});
 
 // src/DataTable/components/BasicTable.tsx
-var import_eds_core_react10 = require("@equinor/eds-core-react");
-var import_react_table3 = require("@tanstack/react-table");
+var import_eds_core_react11 = require("@equinor/eds-core-react");
 
 // src/DataTable/components/PlaceholderRow.tsx
 var import_eds_core_react7 = require("@equinor/eds-core-react");
@@ -537,28 +534,55 @@ function TableHeader({ table, sticky }) {
   });
 }
 
-// src/DataTable/components/BasicTable.tsx
+// src/DataTable/components/TableRow.tsx
+var import_eds_core_react10 = require("@equinor/eds-core-react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-function BasicTable({ table, config, stickyHeader, isLoading }) {
+function TableRow({ row, rowConfig, cellConfig }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Row, {
+    active: row.getIsSelected(),
+    style: { cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial" },
+    onClick: () => {
+      var _a;
+      return (_a = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a.call(rowConfig, row);
+    },
+    onMouseEnter: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseEnter),
+    onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
+    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DynamicCell, {
+      cell,
+      getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor
+    }, cell.id))
+  });
+}
+function handleRowEvent(row, handler) {
+  if (!handler)
+    return void 0;
+  return () => {
+    handler(row);
+  };
+}
+
+// src/DataTable/components/BasicTable.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function BasicTable({
+  table,
+  rowConfig,
+  cellConfig,
+  stickyHeader,
+  isLoading
+}) {
   const tableRows = table.getRowModel().rows;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Table, {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react11.Table, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableHeader, {
         sticky: stickyHeader,
         table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Body, {
-        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Row, {
-          active: row.getIsSelected(),
-          style: { cursor: (config == null ? void 0 : config.onRowClick) ? "pointer" : "initial" },
-          onClick: () => {
-            var _a;
-            return (_a = config == null ? void 0 : config.onRowClick) == null ? void 0 : _a.call(config, row);
-          },
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Cell, {
-            children: (0, import_react_table3.flexRender)(cell.column.columnDef.cell, cell.getContext())
-          }, cell.id))
-        }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlaceholderRow, {
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Body, {
+        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableRow, {
+          row,
+          rowConfig,
+          cellConfig
+        }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlaceholderRow, {
           isLoading
         })
       })
@@ -567,7 +591,7 @@ function BasicTable({ table, config, stickyHeader, isLoading }) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_eds_core_react11 = require("@equinor/eds-core-react");
+var import_eds_core_react12 = require("@equinor/eds-core-react");
 var import_eds_icons5 = require("@equinor/eds-icons");
 var import_react2 = require("react");
 var import_styled_components12 = __toESM(require("styled-components"));
@@ -595,7 +619,7 @@ function prependSelectColumn(columns, config) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var ColumnSelectContent = import_styled_components12.default.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -611,9 +635,9 @@ function ColumnSelect({ table }) {
   const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
   const referenceElement = (0, import_react2.useRef)(null);
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Button, {
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Button, {
         "aria-haspopup": true,
         id: "column-select-anchor",
         "aria-controls": "column-select-popover",
@@ -621,28 +645,28 @@ function ColumnSelect({ table }) {
         ref: referenceElement,
         variant: "ghost_icon",
         onClick: () => setIsOpen(true),
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Icon, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Icon, {
           name: "view_column",
           data: import_eds_icons5.view_column
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react11.Popover, {
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_eds_core_react12.Popover, {
         open: isOpen,
         id: "column-select-popover",
         anchorEl: referenceElement.current,
         placement: "bottom-end",
         onClose: () => setIsOpen(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react11.Popover.Header, {
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_eds_core_react12.Popover.Header, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Popover.Title, {
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Popover.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Button, {
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Button, {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Icon, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Icon, {
                   name: "close",
                   data: import_eds_icons5.close,
                   size: 24
@@ -650,22 +674,22 @@ function ColumnSelect({ table }) {
               })
             ]
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react11.Popover.Content, {
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_eds_core_react12.Popover.Content, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ColumnSelectContent, {
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Checkbox, {
+                  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Checkbox, {
                     checked: column.getIsVisible(),
                     label: getColumnHeader(column),
                     onChange: column.getToggleVisibilityHandler()
                   }, column.id);
                 })
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Divider, {
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Divider, {
                 variant: "small"
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionsWrapper, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Button, {
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ActionsWrapper, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Button, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -682,21 +706,21 @@ function ColumnSelect({ table }) {
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_eds_core_react13 = require("@equinor/eds-core-react");
+var import_eds_core_react14 = require("@equinor/eds-core-react");
 var import_eds_icons7 = require("@equinor/eds-icons");
 var import_jotai2 = require("jotai");
 var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/DataTable/filters/DebouncedInput.tsx
-var import_eds_core_react12 = require("@equinor/eds-core-react");
+var import_eds_core_react13 = require("@equinor/eds-core-react");
 var import_eds_icons6 = require("@equinor/eds-icons");
 var import_react3 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Wrapper3 = import_styled_components13.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components13.default)(import_eds_core_react12.Button)`
+var CloseButton = (0, import_styled_components13.default)(import_eds_core_react13.Button)`
   width: 24px;
   height: 24px;
 `;
@@ -717,21 +741,21 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Wrapper3, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Input, {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Wrapper3, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Icon, {
+      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Icon, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Tooltip, {
+      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Tooltip, {
         title: "Clear input",
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Icon, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Icon, {
             name: import_eds_icons6.close.name,
             data: import_eds_icons6.close,
             size: 18
@@ -754,7 +778,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var DataTableHeaderWrapper = import_styled_components14.default.div`
   display: flex;
   align-items: center;
@@ -770,18 +794,18 @@ var FilterContainer = import_styled_components14.default.div`
 `;
 var DataTableHeader = (props) => {
   const [globalFilter, setGlobalFilter] = (0, import_jotai2.useAtom)(globalFilterAtom);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DataTableHeaderWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DataTableHeaderWrapper, {
     className: "--table-caption",
     captionPadding: props.captionPadding,
     children: [
-      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Typography, {
+      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react14.Typography, {
         variant: "h3",
         children: props == null ? void 0 : props.tableCaption
       }),
-      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(FilterContainer, {
+      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(FilterContainer, {
         className: "--filter-container",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DebouncedInput, {
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DebouncedInput, {
             value: globalFilter,
             icon: import_eds_icons7.search,
             placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
@@ -795,26 +819,31 @@ var DataTableHeader = (props) => {
 };
 
 // src/DataTable/components/VirtualTable.tsx
-var import_eds_core_react15 = require("@equinor/eds-core-react");
-var import_react_table4 = require("@tanstack/react-table");
+var import_eds_core_react16 = require("@equinor/eds-core-react");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/DataTable/components/PaddingRow.tsx
-var import_eds_core_react14 = require("@equinor/eds-core-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_eds_core_react15 = require("@equinor/eds-core-react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react14.Table.Row, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react14.Table.Cell, {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react15.Table.Row, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react15.Table.Cell, {
       style: { height: `${props.height}px` }
     })
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function VirtualTable({ table, config, containerRef, ...props }) {
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function VirtualTable({
+  table,
+  rowConfig,
+  cellConfig,
+  containerRef,
+  ...props
+}) {
   var _a, _b;
   const { rows } = table.getRowModel();
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
@@ -825,34 +854,28 @@ function VirtualTable({ table, config, containerRef, ...props }) {
   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_runtime16.jsxs)(import_eds_core_react15.Table, {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_eds_core_react16.Table, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_eds_core_react15.Table.Body, {
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_eds_core_react16.Table.Body, {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PaddingRow, {
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PaddingRow, {
             height: paddingTop
           }),
           rows.length ? virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
-            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react15.Table.Row, {
-              active: row.getIsSelected(),
-              style: { cursor: (config == null ? void 0 : config.onRowClick) ? "pointer" : "initial" },
-              onClick: () => {
-                var _a2;
-                return (_a2 = config == null ? void 0 : config.onRowClick) == null ? void 0 : _a2.call(config, row);
-              },
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react15.Table.Cell, {
-                children: (0, import_react_table4.flexRender)(cell.column.columnDef.cell, cell.getContext())
-              }, cell.id))
+            return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableRow, {
+              row,
+              rowConfig,
+              cellConfig
             }, row.id);
-          }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PlaceholderRow, {
+          }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PlaceholderRow, {
             isLoading: props.isLoading
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PaddingRow, {
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -862,7 +885,7 @@ function VirtualTable({ table, config, containerRef, ...props }) {
 }
 
 // src/DataTable/DataTable.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var DataTableWrapper = import_styled_components15.default.div`
   width: ${(props) => props.width ?? "100%"};
 
@@ -883,7 +906,8 @@ function DataTable({
   isLoading,
   header,
   filters,
-  config
+  config,
+  rowConfig
 }) {
   const [columnVisibility, setColumnVisibility] = (0, import_jotai3.useAtom)(columnVisibilityAtom);
   const [globalFilter, setGlobalFilter] = (0, import_jotai3.useAtom)(globalFilterAtom);
@@ -893,7 +917,7 @@ function DataTable({
   function enableGlobalFilter(value) {
     return enableOrUndefined(filters == null ? void 0 : filters.globalFilter, value);
   }
-  const table = (0, import_react_table5.useReactTable)({
+  const table = (0, import_react_table3.useReactTable)({
     columns: prependSelectColumn(columns, config),
     data,
     globalFilterFn: enableGlobalFilter(fuzzyFilter),
@@ -905,7 +929,7 @@ function DataTable({
       columnVisibility
     },
     defaultColumn: {
-      cell: (cell) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TypographyCustom, {
+      cell: (cell) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TypographyCustom, {
         noWrap: true,
         children: cell.getValue()
       })
@@ -915,10 +939,10 @@ function DataTable({
     enableMultiRowSelection: (config == null ? void 0 : config.rowSelectionMode) === "multiple",
     enableSubRowSelection: (config == null ? void 0 : config.rowSelectionMode) !== "single",
     filterFromLeafRows: filters == null ? void 0 : filters.filterFromLeafRows,
-    getFilteredRowModel: enableGlobalFilter((0, import_react_table5.getFilteredRowModel)()),
-    getCoreRowModel: (0, import_react_table5.getCoreRowModel)(),
-    getExpandedRowModel: (0, import_react_table5.getExpandedRowModel)(),
-    getSortedRowModel: (0, import_react_table5.getSortedRowModel)(),
+    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)(),
     onExpandedChange: setExpanded,
     onRowSelectionChange: setRowSelectionState,
     onSortingChange: enableOrUndefined(config == null ? void 0 : config.sortable, setSorting),
@@ -933,32 +957,32 @@ function DataTable({
     }
   }, [table, config == null ? void 0 : config.expandAllByDefault]);
   const tableContainerRef = (0, import_react4.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DataTableWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DataTableWrapper, {
     captionPadding: header == null ? void 0 : header.captionPadding,
     height: config == null ? void 0 : config.height,
     width: config == null ? void 0 : config.width,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DataTableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DataTableHeader, {
         tableCaption: header == null ? void 0 : header.tableCaption,
         enableGlobalFilter: filters == null ? void 0 : filters.globalFilter,
         globalFilterPlaceholder: filters == null ? void 0 : filters.globalFilterPlaceholder,
         captionPadding: header == null ? void 0 : header.captionPadding,
-        filterActions: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColumnSelect, {
+        filterActions: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ColumnSelect, {
           table
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", {
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", {
         ref: tableContainerRef,
         className: "--table-container",
-        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(VirtualTable, {
+        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VirtualTable, {
           containerRef: tableContainerRef,
           table,
-          config,
+          rowConfig,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
-        }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BasicTable, {
+        }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BasicTable, {
           table,
-          config,
+          rowConfig,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })
@@ -969,9 +993,9 @@ function DataTable({
 
 // src/DataTable/Provider.tsx
 var import_jotai4 = require("jotai");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function DataTableProvider({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jotai4.Provider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jotai4.Provider, {
     ...props,
     children
   });

package/dist/index.mjs

@@ -113,6 +113,12 @@ function stringToHslColor(str, s = 80, l = 85) {
   const h = hash % 360;
   return "hsl(" + h + ", " + s + "%, " + l + "%)";
 }
+function stopPropagation(handler) {
+  return (e) => {
+    e.stopPropagation();
+    handler(e);
+  };
+}
 
 // src/cells/ChipsCell.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -176,6 +182,7 @@ import { jsx as jsx4 } from "react/jsx-runtime";
 var StyledStickyCell = styled5(StickyCell)`
   background-clip: padding-box;
   ${leftCellShadow}
+  ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
 `;
 var StyledCell = styled5(Table2.Cell)`
   ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
@@ -330,27 +337,18 @@ function SelectColumnDef(selectionMode) {
             selectionMode === "single" ? /* @__PURE__ */ jsx7(Radio, {
               checked: row.getIsSelected(),
               "aria-label": `Select row ${row.id}`,
-              onChange: (e) => {
-                e.stopPropagation();
-                row.getToggleSelectedHandler()(e);
-              }
+              onChange: stopPropagation(row.getToggleSelectedHandler())
             }) : /* @__PURE__ */ jsx7(Checkbox, {
               checked: row.getIsSelected(),
               indeterminate: row.getIsSomeSelected(),
               "aria-label": `Select row ${row.id}`,
-              onChange: (e) => {
-                e.stopPropagation();
-                row.getToggleSelectedHandler()(e);
-              }
+              onChange: stopPropagation(row.getToggleSelectedHandler())
             }),
             row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ jsx7(Button2, {
               variant: "ghost_icon",
               color: "secondary",
               "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
-              onClick: (e) => {
-                e.stopPropagation();
-                row.getToggleExpandedHandler()();
-              },
+              onClick: stopPropagation(row.getToggleExpandedHandler()),
               style: { cursor: "pointer" },
               children: /* @__PURE__ */ jsx7(Icon3, {
                 data: row.getIsExpanded() ? chevron_up : chevron_down
@@ -385,7 +383,6 @@ var expandedRowsAtom = atom({});
 
 // src/DataTable/components/BasicTable.tsx
 import { Table as EdsTable } from "@equinor/eds-core-react";
-import { flexRender as flexRender3 } from "@tanstack/react-table";
 
 // src/DataTable/components/PlaceholderRow.tsx
 import { DotProgress, Table as Table3, Typography } from "@equinor/eds-core-react";
@@ -499,28 +496,55 @@ function TableHeader({ table, sticky }) {
   });
 }
 
+// src/DataTable/components/TableRow.tsx
+import { Table as Table6 } from "@equinor/eds-core-react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function TableRow({ row, rowConfig, cellConfig }) {
+  return /* @__PURE__ */ jsx11(Table6.Row, {
+    active: row.getIsSelected(),
+    style: { cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial" },
+    onClick: () => {
+      var _a;
+      return (_a = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a.call(rowConfig, row);
+    },
+    onMouseEnter: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseEnter),
+    onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
+    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx11(DynamicCell, {
+      cell,
+      getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor
+    }, cell.id))
+  });
+}
+function handleRowEvent(row, handler) {
+  if (!handler)
+    return void 0;
+  return () => {
+    handler(row);
+  };
+}
+
 // src/DataTable/components/BasicTable.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-function BasicTable({ table, config, stickyHeader, isLoading }) {
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function BasicTable({
+  table,
+  rowConfig,
+  cellConfig,
+  stickyHeader,
+  isLoading
+}) {
   const tableRows = table.getRowModel().rows;
   return /* @__PURE__ */ jsxs7(EdsTable, {
     children: [
-      /* @__PURE__ */ jsx11(TableHeader, {
+      /* @__PURE__ */ jsx12(TableHeader, {
         sticky: stickyHeader,
         table
       }),
-      /* @__PURE__ */ jsx11(EdsTable.Body, {
-        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx11(EdsTable.Row, {
-          active: row.getIsSelected(),
-          style: { cursor: (config == null ? void 0 : config.onRowClick) ? "pointer" : "initial" },
-          onClick: () => {
-            var _a;
-            return (_a = config == null ? void 0 : config.onRowClick) == null ? void 0 : _a.call(config, row);
-          },
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx11(EdsTable.Cell, {
-            children: flexRender3(cell.column.columnDef.cell, cell.getContext())
-          }, cell.id))
-        }, row.id)) : /* @__PURE__ */ jsx11(PlaceholderRow, {
+      /* @__PURE__ */ jsx12(EdsTable.Body, {
+        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx12(TableRow, {
+          row,
+          rowConfig,
+          cellConfig
+        }, row.id)) : /* @__PURE__ */ jsx12(PlaceholderRow, {
           isLoading
         })
       })
@@ -557,7 +581,7 @@ function prependSelectColumn(columns, config) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var ColumnSelectContent = styled11.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -575,7 +599,7 @@ function ColumnSelect({ table }) {
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
   return /* @__PURE__ */ jsxs8(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx12(Button3, {
+      /* @__PURE__ */ jsx13(Button3, {
         "aria-haspopup": true,
         id: "column-select-anchor",
         "aria-controls": "column-select-popover",
@@ -583,7 +607,7 @@ function ColumnSelect({ table }) {
         ref: referenceElement,
         variant: "ghost_icon",
         onClick: () => setIsOpen(true),
-        children: /* @__PURE__ */ jsx12(Icon5, {
+        children: /* @__PURE__ */ jsx13(Icon5, {
           name: "view_column",
           data: view_column
         })
@@ -597,14 +621,14 @@ function ColumnSelect({ table }) {
         children: [
           /* @__PURE__ */ jsxs8(Popover.Header, {
             children: [
-              /* @__PURE__ */ jsx12(Popover.Title, {
+              /* @__PURE__ */ jsx13(Popover.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ jsx12(Button3, {
+              /* @__PURE__ */ jsx13(Button3, {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ jsx12(Icon5, {
+                children: /* @__PURE__ */ jsx13(Icon5, {
                   name: "close",
                   data: close,
                   size: 24
@@ -614,20 +638,20 @@ function ColumnSelect({ table }) {
           }),
           /* @__PURE__ */ jsxs8(Popover.Content, {
             children: [
-              /* @__PURE__ */ jsx12(ColumnSelectContent, {
+              /* @__PURE__ */ jsx13(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ jsx12(Checkbox2, {
+                  return /* @__PURE__ */ jsx13(Checkbox2, {
                     checked: column.getIsVisible(),
                     label: getColumnHeader(column),
                     onChange: column.getToggleVisibilityHandler()
                   }, column.id);
                 })
               }),
-              /* @__PURE__ */ jsx12(Divider, {
+              /* @__PURE__ */ jsx13(Divider, {
                 variant: "small"
               }),
-              /* @__PURE__ */ jsx12(ActionsWrapper, {
-                children: /* @__PURE__ */ jsx12(Button3, {
+              /* @__PURE__ */ jsx13(ActionsWrapper, {
+                children: /* @__PURE__ */ jsx13(Button3, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -654,7 +678,7 @@ import { Button as Button4, Icon as Icon6, Input, Tooltip } from "@equinor/eds-c
 import { close as close2 } from "@equinor/eds-icons";
 import { useEffect, useState as useState3 } from "react";
 import styled12 from "styled-components";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var Wrapper3 = styled12.div`
   width: 200px;
 `;
@@ -679,21 +703,21 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ jsx13(Wrapper3, {
-    children: /* @__PURE__ */ jsx13(Input, {
+  return /* @__PURE__ */ jsx14(Wrapper3, {
+    children: /* @__PURE__ */ jsx14(Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ jsx13(Icon6, {
+      leftAdornments: icon && /* @__PURE__ */ jsx14(Icon6, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ jsx13(Tooltip, {
+      rightAdornments: !!value && /* @__PURE__ */ jsx14(Tooltip, {
         title: "Clear input",
-        children: /* @__PURE__ */ jsx13(CloseButton, {
+        children: /* @__PURE__ */ jsx14(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ jsx13(Icon6, {
+          children: /* @__PURE__ */ jsx14(Icon6, {
             name: close2.name,
             data: close2,
             size: 18
@@ -716,7 +740,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/DataTableHeader.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var DataTableHeaderWrapper = styled13.div`
   display: flex;
   align-items: center;
@@ -736,14 +760,14 @@ var DataTableHeader = (props) => {
     className: "--table-caption",
     captionPadding: props.captionPadding,
     children: [
-      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ jsx14(Typography2, {
+      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ jsx15(Typography2, {
         variant: "h3",
         children: props == null ? void 0 : props.tableCaption
       }),
       (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ jsxs9(FilterContainer, {
         className: "--filter-container",
         children: [
-          /* @__PURE__ */ jsx14(DebouncedInput, {
+          /* @__PURE__ */ jsx15(DebouncedInput, {
             value: globalFilter,
             icon: search,
             placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
@@ -758,25 +782,30 @@ var DataTableHeader = (props) => {
 
 // src/DataTable/components/VirtualTable.tsx
 import { Table as Table8 } from "@equinor/eds-core-react";
-import { flexRender as flexRender4 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/DataTable/components/PaddingRow.tsx
 import { Table as Table7 } from "@equinor/eds-core-react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ jsx15(Table7.Row, {
-    children: /* @__PURE__ */ jsx15(Table7.Cell, {
+  return /* @__PURE__ */ jsx16(Table7.Row, {
+    children: /* @__PURE__ */ jsx16(Table7.Cell, {
       style: { height: `${props.height}px` }
     })
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-function VirtualTable({ table, config, containerRef, ...props }) {
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+function VirtualTable({
+  table,
+  rowConfig,
+  cellConfig,
+  containerRef,
+  ...props
+}) {
   var _a, _b;
   const { rows } = table.getRowModel();
   const rowVirtualizer = useVirtualizer({
@@ -789,32 +818,26 @@ function VirtualTable({ table, config, containerRef, ...props }) {
   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(Table8, {
     children: [
-      /* @__PURE__ */ jsx16(TableHeader, {
+      /* @__PURE__ */ jsx17(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
       /* @__PURE__ */ jsxs10(Table8.Body, {
         children: [
-          /* @__PURE__ */ jsx16(PaddingRow, {
+          /* @__PURE__ */ jsx17(PaddingRow, {
             height: paddingTop
           }),
           rows.length ? virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
-            return /* @__PURE__ */ jsx16(Table8.Row, {
-              active: row.getIsSelected(),
-              style: { cursor: (config == null ? void 0 : config.onRowClick) ? "pointer" : "initial" },
-              onClick: () => {
-                var _a2;
-                return (_a2 = config == null ? void 0 : config.onRowClick) == null ? void 0 : _a2.call(config, row);
-              },
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx16(Table8.Cell, {
-                children: flexRender4(cell.column.columnDef.cell, cell.getContext())
-              }, cell.id))
+            return /* @__PURE__ */ jsx17(TableRow, {
+              row,
+              rowConfig,
+              cellConfig
             }, row.id);
-          }) : /* @__PURE__ */ jsx16(PlaceholderRow, {
+          }) : /* @__PURE__ */ jsx17(PlaceholderRow, {
             isLoading: props.isLoading
           }),
-          /* @__PURE__ */ jsx16(PaddingRow, {
+          /* @__PURE__ */ jsx17(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -824,7 +847,7 @@ function VirtualTable({ table, config, containerRef, ...props }) {
 }
 
 // src/DataTable/DataTable.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var DataTableWrapper = styled14.div`
   width: ${(props) => props.width ?? "100%"};
 
@@ -845,7 +868,8 @@ function DataTable({
   isLoading,
   header,
   filters,
-  config
+  config,
+  rowConfig
 }) {
   const [columnVisibility, setColumnVisibility] = useAtom2(columnVisibilityAtom);
   const [globalFilter, setGlobalFilter] = useAtom2(globalFilterAtom);
@@ -867,7 +891,7 @@ function DataTable({
       columnVisibility
     },
     defaultColumn: {
-      cell: (cell) => /* @__PURE__ */ jsx17(TypographyCustom, {
+      cell: (cell) => /* @__PURE__ */ jsx18(TypographyCustom, {
         noWrap: true,
         children: cell.getValue()
       })
@@ -900,27 +924,27 @@ function DataTable({
     height: config == null ? void 0 : config.height,
     width: config == null ? void 0 : config.width,
     children: [
-      /* @__PURE__ */ jsx17(DataTableHeader, {
+      /* @__PURE__ */ jsx18(DataTableHeader, {
         tableCaption: header == null ? void 0 : header.tableCaption,
         enableGlobalFilter: filters == null ? void 0 : filters.globalFilter,
         globalFilterPlaceholder: filters == null ? void 0 : filters.globalFilterPlaceholder,
         captionPadding: header == null ? void 0 : header.captionPadding,
-        filterActions: /* @__PURE__ */ jsx17(ColumnSelect, {
+        filterActions: /* @__PURE__ */ jsx18(ColumnSelect, {
           table
         })
       }),
-      /* @__PURE__ */ jsx17("div", {
+      /* @__PURE__ */ jsx18("div", {
         ref: tableContainerRef,
         className: "--table-container",
-        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ jsx17(VirtualTable, {
+        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ jsx18(VirtualTable, {
           containerRef: tableContainerRef,
           table,
-          config,
+          rowConfig,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
-        }) : /* @__PURE__ */ jsx17(BasicTable, {
+        }) : /* @__PURE__ */ jsx18(BasicTable, {
           table,
-          config,
+          rowConfig,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })
@@ -931,9 +955,9 @@ function DataTable({
 
 // src/DataTable/Provider.tsx
 import { Provider } from "jotai";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function DataTableProvider({ children, ...props }) {
-  return /* @__PURE__ */ jsx18(Provider, {
+  return /* @__PURE__ */ jsx19(Provider, {
     ...props,
     children
   });

package/package.json

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