@equinor/apollo-components 1.7.1 → 1.8.1

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { IconData } from '@equinor/eds-icons';
 import * as react from 'react';
-import { ReactNode, ComponentProps } from 'react';
+import { ReactNode, ReactElement, ComponentProps } from 'react';
 import { Cell, CellContext, Table, Row, ColumnDef, RowSelectionState, SortingState, HeaderContext } from '@tanstack/react-table';
 import { ColumnDef as ColumnDef$1 } from '@tanstack/table-core';
 import * as styled_components from 'styled-components';
@@ -47,7 +47,18 @@ interface FilterConfig {
     filterFromLeafRows?: boolean;
     filterActions?: <T>(table: Table<T>) => ReactNode;
 }
+interface TableRowWrapper<T> {
+    (props: TableRowWrapperProps<T>): ReactElement;
+}
+interface TableRowWrapperProps<T> {
+    row: Row<T>;
+    children: ReactNode;
+}
 interface RowConfig<T> {
+    /**
+     * ! Unstable - Row Wrapper has not been tested for compatibility with virtualization. Use with caution.
+     */
+    rowWrapper?: TableRowWrapper<T>;
     getRowBackground?: (row: Row<T>) => string | undefined;
     onClick?: (row: Row<T>) => void;
     onMouseEnter?: (row: Row<T>) => void;
@@ -55,10 +66,12 @@ interface RowConfig<T> {
 }
 interface CellConfig<T> {
     getStickyCellColor?: (cell: Cell<T, unknown>) => string;
+    getShouldHighlight?: (cell: Cell<T, unknown>) => boolean;
 }
 declare type RowSelectionMode = 'single' | 'multiple';
 declare type DataTableConfig<T> = {
     height?: string;
+    tableLayout?: 'auto' | 'fixed';
     sortable?: boolean;
     virtual?: boolean;
     rowSelectionMode?: RowSelectionMode;
@@ -83,7 +96,7 @@ interface DataTableProps<T> {
     filters?: FilterConfig;
     header?: HeaderConfig;
 }
-declare function DataTable$1<T>({ columns, data, isLoading, header, filters, config, rowConfig, }: DataTableProps<T>): JSX.Element;
+declare function DataTable$1<T>({ columns, data, isLoading, header, filters, config, cellConfig, rowConfig, }: DataTableProps<T>): JSX.Element;
 
 declare type DataTableProviderProps = ComponentProps<typeof Provider>;
 declare function DataTableProvider({ children, ...props }: DataTableProviderProps): JSX.Element;
@@ -140,4 +153,4 @@ declare type TypographyProps = {
  */
 declare const TypographyCustom: (props: TypographyProps) => JSX.Element;
 
-export { AppShell, AppSidebar, CellConfig, ChipsCell, ColumnSelect, DataTable, DataTableConfig, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowConfig, RowSelectionMode, SelectColumnDef, StickyCell, TableHeader, TypographyCustom, capitalizeHeader, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };
+export { AppShell, AppSidebar, CellConfig, ChipsCell, ColumnSelect, DataTable, DataTableConfig, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowConfig, RowSelectionMode, SelectColumnDef, StickyCell, TableHeader, TableRowWrapper, TableRowWrapperProps, TypographyCustom, capitalizeHeader, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };

package/dist/index.js

@@ -195,24 +195,12 @@ var ChipsCell = (props) => {
 // src/cells/DynamicCell.tsx
 var import_eds_core_react4 = require("@equinor/eds-core-react");
 var import_react_table = require("@tanstack/react-table");
-var import_styled_components6 = __toESM(require("styled-components"));
+var import_styled_components5 = __toESM(require("styled-components"));
 
 // src/cells/StickyCell.tsx
 var import_eds_core_react3 = require("@equinor/eds-core-react");
 var import_styled_components4 = __toESM(require("styled-components"));
-var StickyCell = (0, import_styled_components4.default)(import_eds_core_react3.Table.Cell)`
-  position: sticky;
-  right: 0;
-  top: 0;
-  z-index: 4;
-`;
-var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
-  z-index: 5;
-`;
-
-// src/cells/styles.ts
-var import_styled_components5 = require("styled-components");
-var leftCellShadow = import_styled_components5.css`
+var leftCellShadow = import_styled_components4.css`
   &:before {
     box-shadow: -1px 0 1px -1px inset;
     content: ' ';
@@ -223,15 +211,24 @@ var leftCellShadow = import_styled_components5.css`
     width: 1px;
   }
 `;
+var StickyCell = (0, import_styled_components4.default)(import_eds_core_react3.Table.Cell)`
+  position: sticky;
+  right: 0;
+  top: 0;
+  z-index: 4;
+  background-clip: padding-box;
+  ${leftCellShadow}
+`;
+var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
+  z-index: 5;
+`;
 
 // src/cells/DynamicCell.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var StyledStickyCell = (0, import_styled_components6.default)(StickyCell)`
-  background-clip: padding-box;
-  ${leftCellShadow}
+var StyledStickyCell = (0, import_styled_components5.default)(StickyCell)`
   ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
 `;
-var StyledCell = (0, import_styled_components6.default)(import_eds_core_react4.Table.Cell)`
+var StyledCell = (0, import_styled_components5.default)(import_eds_core_react4.Table.Cell)`
   ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
 `;
 function DynamicCell({ cell, highlight, getStickyCellColor }) {
@@ -253,12 +250,12 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
 
 // src/cells/HierarchyCell.tsx
 var import_eds_tokens4 = require("@equinor/eds-tokens");
-var import_styled_components8 = __toESM(require("styled-components"));
+var import_styled_components7 = __toESM(require("styled-components"));
 
 // src/cells/TypographyCustom.tsx
 var import_eds_core_react5 = require("@equinor/eds-core-react");
 var import_eds_tokens3 = require("@equinor/eds-tokens");
-var import_styled_components7 = __toESM(require("styled-components"));
+var import_styled_components6 = __toESM(require("styled-components"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var truncateStyle = {
   overflow: "hidden",
@@ -294,7 +291,7 @@ var TypographyCustom = (props) => {
     style: { ...styleFromProps, ...noWrap ? truncateStyle : {} }
   });
 };
-var HoverCapture = import_styled_components7.default.div`
+var HoverCapture = import_styled_components6.default.div`
   position: relative;
   z-index: 0;
 
@@ -305,7 +302,7 @@ var HoverCapture = import_styled_components7.default.div`
     opacity: 1;
   }
 `;
-var ShowAllWrapperWrapper = import_styled_components7.default.div`
+var ShowAllWrapperWrapper = import_styled_components6.default.div`
   position: absolute;
   z-index: 1;
   pointer-events: none;
@@ -317,14 +314,14 @@ var ShowAllWrapperWrapper = import_styled_components7.default.div`
 
 // src/cells/HierarchyCell.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
+var CellWrapper = (0, import_styled_components7.default)(TypographyCustom)`
   height: 100%;
   display: flex;
   align-items: center;
 
   ${({ depth, expanded }) => expanded && depth === 0 && "font-weight: bold;"}
 
-  ${({ depth }) => depth > 0 && import_styled_components8.css`
+  ${({ depth }) => depth > 0 && import_styled_components7.css`
       border-left: 3px solid ${import_eds_tokens4.tokens.colors.infographic.primary__moss_green_34.hex};
       gap: 0.5rem;
       .--divider {
@@ -352,9 +349,9 @@ function HierarchyCell(cell, options = {}) {
 // src/cells/SelectColumnDef.tsx
 var import_eds_core_react6 = require("@equinor/eds-core-react");
 var import_eds_icons3 = require("@equinor/eds-icons");
-var import_styled_components9 = __toESM(require("styled-components"));
+var import_styled_components8 = __toESM(require("styled-components"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var CellWrapper2 = import_styled_components9.default.div`
+var CellWrapper2 = import_styled_components8.default.div`
   display: flex;
   align-items: center;
   width: 48px;
@@ -410,7 +407,7 @@ function SelectColumnDef(selectionMode) {
 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"));
+var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/DataTable/atoms.ts
 var import_jotai = require("jotai");
@@ -425,9 +422,9 @@ 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");
-var import_styled_components10 = __toESM(require("styled-components"));
+var import_styled_components9 = __toESM(require("styled-components"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var PlaceholderTextWrapper = import_styled_components10.default.div`
+var PlaceholderTextWrapper = import_styled_components9.default.div`
   display: flex;
   justify-content: center;
 `;
@@ -453,17 +450,14 @@ var import_eds_core_react9 = require("@equinor/eds-core-react");
 var import_eds_core_react8 = require("@equinor/eds-core-react");
 var import_eds_icons4 = require("@equinor/eds-icons");
 var import_react_table2 = require("@tanstack/react-table");
-var import_styled_components11 = __toESM(require("styled-components"));
+var import_styled_components10 = __toESM(require("styled-components"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var HeaderDiv = import_styled_components11.default.div`
+var HeaderDiv = import_styled_components10.default.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
   z-index: 5;
 `;
-var StyledStickyCell2 = (0, import_styled_components11.default)(StickyCell)`
-  ${leftCellShadow}
-`;
 var HeaderCell = ({ header }) => {
   var _a;
   const style = {
@@ -476,7 +470,7 @@ var HeaderCell = ({ header }) => {
     colSpan: header.colSpan
   };
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky)
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledStickyCell2, {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StickyHeaderCell, {
       ...cellProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderContent, {
         header
@@ -539,20 +533,30 @@ function TableHeader({ table, sticky }) {
 var import_eds_core_react10 = require("@equinor/eds-core-react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function TableRow({ row, rowConfig, cellConfig }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Row, {
+  var _a;
+  const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
+  const tableRowContent = /* @__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" },
+    style: {
+      cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
+      backgroundColor: (_a = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _a.call(rowConfig, row)
+    },
     onClick: () => {
-      var _a;
-      return (_a = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a.call(rowConfig, row);
+      var _a2;
+      return (_a2 = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a2.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))
+    children: row.getVisibleCells().map((cell) => {
+      var _a2;
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DynamicCell, {
+        cell,
+        getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
+        highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
+      }, cell.id);
+    })
   });
+  return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
 function handleRowEvent(row, handler) {
   if (!handler)
@@ -595,18 +599,18 @@ function BasicTable({
 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"));
+var import_styled_components13 = __toESM(require("styled-components"));
 
 // src/DataTable/filters/DebouncedInput.tsx
 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"));
+var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Wrapper3 = import_styled_components12.default.div`
+var Wrapper3 = import_styled_components11.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components12.default)(import_eds_core_react12.Button)`
+var CloseButton = (0, import_styled_components11.default)(import_eds_core_react12.Button)`
   width: 24px;
   height: 24px;
 `;
@@ -667,7 +671,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 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_styled_components12 = __toESM(require("styled-components"));
 
 // src/DataTable/utils.tsx
 function capitalizeHeader(context) {
@@ -693,12 +697,12 @@ function prependSelectColumn(columns, config) {
 
 // src/DataTable/components/ColumnSelect.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var ColumnSelectContent = import_styled_components13.default.div`
+var ColumnSelectContent = import_styled_components12.default.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.5rem;
 `;
-var ActionsWrapper = import_styled_components13.default.div`
+var ActionsWrapper = import_styled_components12.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -780,14 +784,14 @@ function ColumnSelect({ table }) {
 
 // src/DataTable/components/DataTableHeader.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var DataTableHeaderWrapper = import_styled_components14.default.div`
+var DataTableHeaderWrapper = import_styled_components13.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.captionPadding ?? "1rem"};
 `;
-var FilterContainer = import_styled_components14.default.div`
+var FilterContainer = import_styled_components13.default.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -893,7 +897,7 @@ function VirtualTable({
 
 // src/DataTable/DataTable.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var DataTableWrapper = import_styled_components15.default.div`
+var DataTableWrapper = import_styled_components14.default.div`
   width: ${(props) => props.width ?? "100%"};
 
   .--table-container {
@@ -902,8 +906,10 @@ var DataTableWrapper = import_styled_components15.default.div`
     overflow: auto;
 
     table {
-      width: 100%;
-      table-layout: auto;
+      width: ${(props) => props.width ?? "100%"};
+      height: ${(props) => props.height ?? "100%"};
+      table-layout: ${(props) => props.tableLayout ?? "fixed"};
+      border-collapse: collapse;
     }
   }
 `;
@@ -914,6 +920,7 @@ function DataTable({
   header,
   filters,
   config,
+  cellConfig,
   rowConfig
 }) {
   const [columnVisibility, setColumnVisibility] = (0, import_jotai3.useAtom)(columnVisibilityAtom);
@@ -965,9 +972,9 @@ function DataTable({
   }, [table, config == null ? void 0 : config.expandAllByDefault]);
   const tableContainerRef = (0, import_react4.useRef)(null);
   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,
+    tableLayout: config == null ? void 0 : config.tableLayout,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DataTableHeader, {
         tableCaption: header == null ? void 0 : header.tableCaption,
@@ -982,11 +989,13 @@ function DataTable({
           containerRef: tableContainerRef,
           table,
           rowConfig,
+          cellConfig,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BasicTable, {
           table,
           rowConfig,
+          cellConfig,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })

package/dist/index.mjs

@@ -152,19 +152,7 @@ import styled5 from "styled-components";
 
 // src/cells/StickyCell.tsx
 import { Table } from "@equinor/eds-core-react";
-import styled4 from "styled-components";
-var StickyCell = styled4(Table.Cell)`
-  position: sticky;
-  right: 0;
-  top: 0;
-  z-index: 4;
-`;
-var StickyHeaderCell = styled4(StickyCell)`
-  z-index: 5;
-`;
-
-// src/cells/styles.ts
-import { css as css2 } from "styled-components";
+import styled4, { css as css2 } from "styled-components";
 var leftCellShadow = css2`
   &:before {
     box-shadow: -1px 0 1px -1px inset;
@@ -176,12 +164,21 @@ var leftCellShadow = css2`
     width: 1px;
   }
 `;
+var StickyCell = styled4(Table.Cell)`
+  position: sticky;
+  right: 0;
+  top: 0;
+  z-index: 4;
+  background-clip: padding-box;
+  ${leftCellShadow}
+`;
+var StickyHeaderCell = styled4(StickyCell)`
+  z-index: 5;
+`;
 
 // src/cells/DynamicCell.tsx
 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)`
@@ -422,9 +419,6 @@ var HeaderDiv = styled10.div`
   gap: 0.25rem;
   z-index: 5;
 `;
-var StyledStickyCell2 = styled10(StickyCell)`
-  ${leftCellShadow}
-`;
 var HeaderCell = ({ header }) => {
   var _a;
   const style = {
@@ -437,7 +431,7 @@ var HeaderCell = ({ header }) => {
     colSpan: header.colSpan
   };
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky)
-    return /* @__PURE__ */ jsx9(StyledStickyCell2, {
+    return /* @__PURE__ */ jsx9(StickyHeaderCell, {
       ...cellProps,
       children: /* @__PURE__ */ jsx9(HeaderContent, {
         header
@@ -500,20 +494,30 @@ function TableHeader({ table, sticky }) {
 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, {
+  var _a;
+  const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
+  const tableRowContent = /* @__PURE__ */ jsx11(Table6.Row, {
     active: row.getIsSelected(),
-    style: { cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial" },
+    style: {
+      cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
+      backgroundColor: (_a = rowConfig == null ? void 0 : rowConfig.getRowBackground) == null ? void 0 : _a.call(rowConfig, row)
+    },
     onClick: () => {
-      var _a;
-      return (_a = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a.call(rowConfig, row);
+      var _a2;
+      return (_a2 = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a2.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))
+    children: row.getVisibleCells().map((cell) => {
+      var _a2;
+      return /* @__PURE__ */ jsx11(DynamicCell, {
+        cell,
+        getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
+        highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
+      }, cell.id);
+    })
   });
+  return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
 function handleRowEvent(row, handler) {
   if (!handler)
@@ -863,8 +867,10 @@ var DataTableWrapper = styled14.div`
     overflow: auto;
 
     table {
-      width: 100%;
-      table-layout: auto;
+      width: ${(props) => props.width ?? "100%"};
+      height: ${(props) => props.height ?? "100%"};
+      table-layout: ${(props) => props.tableLayout ?? "fixed"};
+      border-collapse: collapse;
     }
   }
 `;
@@ -875,6 +881,7 @@ function DataTable({
   header,
   filters,
   config,
+  cellConfig,
   rowConfig
 }) {
   const [columnVisibility, setColumnVisibility] = useAtom2(columnVisibilityAtom);
@@ -926,9 +933,9 @@ function DataTable({
   }, [table, config == null ? void 0 : config.expandAllByDefault]);
   const tableContainerRef = useRef2(null);
   return /* @__PURE__ */ jsxs11(DataTableWrapper, {
-    captionPadding: header == null ? void 0 : header.captionPadding,
     height: config == null ? void 0 : config.height,
     width: config == null ? void 0 : config.width,
+    tableLayout: config == null ? void 0 : config.tableLayout,
     children: [
       /* @__PURE__ */ jsx18(DataTableHeader, {
         tableCaption: header == null ? void 0 : header.tableCaption,
@@ -943,11 +950,13 @@ function DataTable({
           containerRef: tableContainerRef,
           table,
           rowConfig,
+          cellConfig,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         }) : /* @__PURE__ */ jsx18(BasicTable, {
           table,
           rowConfig,
+          cellConfig,
           isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })

package/package.json

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