@equinor/apollo-components 1.7.0 → 1.8.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, Row, ColumnDef, RowSelectionState, SortingState, Table, HeaderContext } from '@tanstack/react-table';
+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';
 import { CellProps, TypographyProps as TypographyProps$1 } from '@equinor/eds-core-react';
@@ -41,11 +41,24 @@ interface HeaderConfig {
     tableCaption?: string;
 }
 interface FilterConfig {
+    columnSelect?: boolean;
     globalFilter?: boolean;
     globalFilterPlaceholder?: string;
     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;
@@ -53,6 +66,7 @@ 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> = {
@@ -81,7 +95,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;
@@ -96,6 +110,11 @@ declare const tableSortingAtom: jotai.PrimitiveAtom<SortingState> & {
     init: SortingState;
 };
 
+interface ColumnSelectProps<T> {
+    table: Table<T>;
+}
+declare function ColumnSelect<T>({ table }: ColumnSelectProps<T>): JSX.Element;
+
 interface TableHeaderProps<T> {
     table: Table<T>;
     sticky?: boolean;
@@ -133,4 +152,4 @@ declare type TypographyProps = {
  */
 declare const TypographyCustom: (props: TypographyProps) => JSX.Element;
 
-export { AppShell, AppSidebar, CellConfig, ChipsCell, 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

@@ -29,6 +29,7 @@ __export(src_exports, {
   AppShell: () => AppShell,
   AppSidebar: () => AppSidebar,
   ChipsCell: () => ChipsCell,
+  ColumnSelect: () => ColumnSelect,
   DataTable: () => DataTable2,
   DynamicCell: () => DynamicCell,
   HierarchyCell: () => HierarchyCell,
@@ -538,20 +539,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)
@@ -590,11 +601,83 @@ function BasicTable({
   });
 }
 
-// src/DataTable/components/ColumnSelect.tsx
+// src/DataTable/components/DataTableHeader.tsx
+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_icons5 = require("@equinor/eds-icons");
 var import_react2 = require("react");
 var import_styled_components12 = __toESM(require("styled-components"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Wrapper3 = import_styled_components12.default.div`
+  width: 200px;
+`;
+var CloseButton = (0, import_styled_components12.default)(import_eds_core_react12.Button)`
+  width: 24px;
+  height: 24px;
+`;
+function DebouncedInput({
+  value: initialValue,
+  onChange,
+  icon,
+  debounce = 500,
+  ...props
+}) {
+  const [value, setValue] = (0, import_react2.useState)(initialValue);
+  (0, import_react2.useEffect)(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  (0, import_react2.useEffect)(() => {
+    const timeout = setTimeout(() => {
+      onChange(value);
+    }, 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, {
+      ...props,
+      value,
+      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Icon, {
+        name: icon.name,
+        data: icon,
+        size: 18
+      }),
+      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Tooltip, {
+        title: "Clear input",
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, {
+          variant: "ghost_icon",
+          onClick: () => setValue(""),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Icon, {
+            name: import_eds_icons5.close.name,
+            data: import_eds_icons5.close,
+            size: 18
+          })
+        })
+      }),
+      onChange: (event) => setValue(event.target.value)
+    })
+  });
+}
+
+// src/DataTable/filters/functions.ts
+var import_match_sorter_utils = require("@tanstack/match-sorter-utils");
+var fuzzyFilter = (row, columnId, value, addMeta) => {
+  const itemRank = (0, import_match_sorter_utils.rankItem)(row.getValue(columnId), value);
+  addMeta({
+    itemRank
+  });
+  return itemRank.passed;
+};
+
+// src/DataTable/components/ColumnSelect.tsx
+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"));
 
 // src/DataTable/utils.tsx
 function capitalizeHeader(context) {
@@ -619,25 +702,25 @@ function prependSelectColumn(columns, config) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var ColumnSelectContent = import_styled_components12.default.div`
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ColumnSelectContent = import_styled_components13.default.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.5rem;
 `;
-var ActionsWrapper = import_styled_components12.default.div`
+var ActionsWrapper = import_styled_components13.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0.5rem;
 `;
 function ColumnSelect({ table }) {
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
-  const referenceElement = (0, import_react2.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const referenceElement = (0, import_react3.useRef)(null);
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Button, {
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Button, {
         "aria-haspopup": true,
         id: "column-select-anchor",
         "aria-controls": "column-select-popover",
@@ -645,51 +728,51 @@ function ColumnSelect({ table }) {
         ref: referenceElement,
         variant: "ghost_icon",
         onClick: () => setIsOpen(true),
-        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: "view_column",
-          data: import_eds_icons5.view_column
+          data: import_eds_icons6.view_column
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_eds_core_react12.Popover, {
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_eds_core_react13.Popover, {
         open: isOpen,
         id: "column-select-popover",
         anchorEl: referenceElement.current,
         placement: "bottom-end",
         onClose: () => setIsOpen(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_eds_core_react12.Popover.Header, {
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_eds_core_react13.Popover.Header, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Popover.Title, {
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Popover.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Button, {
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Button, {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                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: "close",
-                  data: import_eds_icons5.close,
+                  data: import_eds_icons6.close,
                   size: 24
                 })
               })
             ]
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_eds_core_react12.Popover.Content, {
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_eds_core_react13.Popover.Content, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ColumnSelectContent, {
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Checkbox, {
+                  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Checkbox, {
                     checked: column.getIsVisible(),
                     label: getColumnHeader(column),
                     onChange: column.getToggleVisibilityHandler()
                   }, column.id);
                 })
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Divider, {
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Divider, {
                 variant: "small"
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ActionsWrapper, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Button, {
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionsWrapper, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Button, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -705,78 +788,6 @@ function ColumnSelect({ table }) {
   });
 }
 
-// src/DataTable/components/DataTableHeader.tsx
-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_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_runtime14 = require("react/jsx-runtime");
-var Wrapper3 = import_styled_components13.default.div`
-  width: 200px;
-`;
-var CloseButton = (0, import_styled_components13.default)(import_eds_core_react13.Button)`
-  width: 24px;
-  height: 24px;
-`;
-function DebouncedInput({
-  value: initialValue,
-  onChange,
-  icon,
-  debounce = 500,
-  ...props
-}) {
-  const [value, setValue] = (0, import_react3.useState)(initialValue);
-  (0, import_react3.useEffect)(() => {
-    setValue(initialValue);
-  }, [initialValue]);
-  (0, import_react3.useEffect)(() => {
-    const timeout = setTimeout(() => {
-      onChange(value);
-    }, debounce);
-    return () => clearTimeout(timeout);
-  }, [value]);
-  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_runtime14.jsx)(import_eds_core_react13.Icon, {
-        name: icon.name,
-        data: icon,
-        size: 18
-      }),
-      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Tooltip, {
-        title: "Clear input",
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseButton, {
-          variant: "ghost_icon",
-          onClick: () => setValue(""),
-          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
-          })
-        })
-      }),
-      onChange: (event) => setValue(event.target.value)
-    })
-  });
-}
-
-// src/DataTable/filters/functions.ts
-var import_match_sorter_utils = require("@tanstack/match-sorter-utils");
-var fuzzyFilter = (row, columnId, value, addMeta) => {
-  const itemRank = (0, import_match_sorter_utils.rankItem)(row.getValue(columnId), value);
-  addMeta({
-    itemRank
-  });
-  return itemRank.passed;
-};
-
 // src/DataTable/components/DataTableHeader.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var DataTableHeaderWrapper = import_styled_components14.default.div`
@@ -792,7 +803,8 @@ var FilterContainer = import_styled_components14.default.div`
   gap: 1rem;
   justify-content: flex-end;
 `;
-var DataTableHeader = (props) => {
+function DataTableHeader({ config, table, ...props }) {
+  var _a;
   const [globalFilter, setGlobalFilter] = (0, import_jotai2.useAtom)(globalFilterAtom);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DataTableHeaderWrapper, {
     className: "--table-caption",
@@ -802,21 +814,26 @@ var DataTableHeader = (props) => {
         variant: "h3",
         children: props == null ? void 0 : props.tableCaption
       }),
-      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(FilterContainer, {
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FilterContainer, {
         className: "--filter-container",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DebouncedInput, {
-            value: globalFilter,
-            icon: import_eds_icons7.search,
-            placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
-            onChange: (value) => setGlobalFilter(String(value))
-          }),
-          props.filterActions
-        ]
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, {
+          children: [
+            (config == null ? void 0 : config.globalFilter) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DebouncedInput, {
+              value: globalFilter,
+              icon: import_eds_icons7.search,
+              placeholder: (config == null ? void 0 : config.globalFilterPlaceholder) ?? "Search all columns",
+              onChange: (value) => setGlobalFilter(String(value))
+            }),
+            (_a = config == null ? void 0 : config.filterActions) == null ? void 0 : _a.call(config, table),
+            (config == null ? void 0 : config.columnSelect) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColumnSelect, {
+              table
+            })
+          ]
+        })
       })
     ]
   });
-};
+}
 
 // src/DataTable/components/VirtualTable.tsx
 var import_eds_core_react16 = require("@equinor/eds-core-react");
@@ -907,6 +924,7 @@ function DataTable({
   header,
   filters,
   config,
+  cellConfig,
   rowConfig
 }) {
   const [columnVisibility, setColumnVisibility] = (0, import_jotai3.useAtom)(columnVisibilityAtom);
@@ -964,12 +982,9 @@ function DataTable({
     children: [
       /* @__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_runtime18.jsx)(ColumnSelect, {
-          table
-        })
+        table,
+        config: filters
       }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", {
         ref: tableContainerRef,
@@ -978,11 +993,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
         })
@@ -1009,6 +1026,7 @@ DataTable2.Provider = DataTableProvider;
   AppShell,
   AppSidebar,
   ChipsCell,
+  ColumnSelect,
   DataTable,
   DynamicCell,
   HierarchyCell,

package/dist/index.mjs

@@ -500,20 +500,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)
@@ -552,11 +562,83 @@ function BasicTable({
   });
 }
 
-// src/DataTable/components/ColumnSelect.tsx
-import { Button as Button3, Checkbox as Checkbox2, Divider, Icon as Icon5, Popover } from "@equinor/eds-core-react";
-import { close, view_column } from "@equinor/eds-icons";
-import { useRef, useState as useState2 } from "react";
+// src/DataTable/components/DataTableHeader.tsx
+import { Typography as Typography2 } from "@equinor/eds-core-react";
+import { search } from "@equinor/eds-icons";
+import { useAtom } from "jotai";
+import styled13 from "styled-components";
+
+// src/DataTable/filters/DebouncedInput.tsx
+import { Button as Button3, Icon as Icon5, Input, Tooltip } from "@equinor/eds-core-react";
+import { close } from "@equinor/eds-icons";
+import { useEffect, useState as useState2 } from "react";
 import styled11 from "styled-components";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Wrapper3 = styled11.div`
+  width: 200px;
+`;
+var CloseButton = styled11(Button3)`
+  width: 24px;
+  height: 24px;
+`;
+function DebouncedInput({
+  value: initialValue,
+  onChange,
+  icon,
+  debounce = 500,
+  ...props
+}) {
+  const [value, setValue] = useState2(initialValue);
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value);
+    }, debounce);
+    return () => clearTimeout(timeout);
+  }, [value]);
+  return /* @__PURE__ */ jsx13(Wrapper3, {
+    children: /* @__PURE__ */ jsx13(Input, {
+      ...props,
+      value,
+      leftAdornments: icon && /* @__PURE__ */ jsx13(Icon5, {
+        name: icon.name,
+        data: icon,
+        size: 18
+      }),
+      rightAdornments: !!value && /* @__PURE__ */ jsx13(Tooltip, {
+        title: "Clear input",
+        children: /* @__PURE__ */ jsx13(CloseButton, {
+          variant: "ghost_icon",
+          onClick: () => setValue(""),
+          children: /* @__PURE__ */ jsx13(Icon5, {
+            name: close.name,
+            data: close,
+            size: 18
+          })
+        })
+      }),
+      onChange: (event) => setValue(event.target.value)
+    })
+  });
+}
+
+// src/DataTable/filters/functions.ts
+import { rankItem } from "@tanstack/match-sorter-utils";
+var fuzzyFilter = (row, columnId, value, addMeta) => {
+  const itemRank = rankItem(row.getValue(columnId), value);
+  addMeta({
+    itemRank
+  });
+  return itemRank.passed;
+};
+
+// src/DataTable/components/ColumnSelect.tsx
+import { Button as Button4, Checkbox as Checkbox2, Divider, Icon as Icon6, Popover } from "@equinor/eds-core-react";
+import { close as close2, view_column } from "@equinor/eds-icons";
+import { useRef, useState as useState3 } from "react";
+import styled12 from "styled-components";
 
 // src/DataTable/utils.tsx
 function capitalizeHeader(context) {
@@ -581,25 +663,25 @@ function prependSelectColumn(columns, config) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var ColumnSelectContent = styled11.div`
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var ColumnSelectContent = styled12.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.5rem;
 `;
-var ActionsWrapper = styled11.div`
+var ActionsWrapper = styled12.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0.5rem;
 `;
 function ColumnSelect({ table }) {
-  const [isOpen, setIsOpen] = useState2(false);
+  const [isOpen, setIsOpen] = useState3(false);
   const referenceElement = useRef(null);
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
   return /* @__PURE__ */ jsxs8(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx13(Button3, {
+      /* @__PURE__ */ jsx14(Button4, {
         "aria-haspopup": true,
         id: "column-select-anchor",
         "aria-controls": "column-select-popover",
@@ -607,7 +689,7 @@ function ColumnSelect({ table }) {
         ref: referenceElement,
         variant: "ghost_icon",
         onClick: () => setIsOpen(true),
-        children: /* @__PURE__ */ jsx13(Icon5, {
+        children: /* @__PURE__ */ jsx14(Icon6, {
           name: "view_column",
           data: view_column
         })
@@ -621,16 +703,16 @@ function ColumnSelect({ table }) {
         children: [
           /* @__PURE__ */ jsxs8(Popover.Header, {
             children: [
-              /* @__PURE__ */ jsx13(Popover.Title, {
+              /* @__PURE__ */ jsx14(Popover.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ jsx13(Button3, {
+              /* @__PURE__ */ jsx14(Button4, {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ jsx13(Icon5, {
+                children: /* @__PURE__ */ jsx14(Icon6, {
                   name: "close",
-                  data: close,
+                  data: close2,
                   size: 24
                 })
               })
@@ -638,20 +720,20 @@ function ColumnSelect({ table }) {
           }),
           /* @__PURE__ */ jsxs8(Popover.Content, {
             children: [
-              /* @__PURE__ */ jsx13(ColumnSelectContent, {
+              /* @__PURE__ */ jsx14(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ jsx13(Checkbox2, {
+                  return /* @__PURE__ */ jsx14(Checkbox2, {
                     checked: column.getIsVisible(),
                     label: getColumnHeader(column),
                     onChange: column.getToggleVisibilityHandler()
                   }, column.id);
                 })
               }),
-              /* @__PURE__ */ jsx13(Divider, {
+              /* @__PURE__ */ jsx14(Divider, {
                 variant: "small"
               }),
-              /* @__PURE__ */ jsx13(ActionsWrapper, {
-                children: /* @__PURE__ */ jsx13(Button3, {
+              /* @__PURE__ */ jsx14(ActionsWrapper, {
+                children: /* @__PURE__ */ jsx14(Button4, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -668,79 +750,7 @@ function ColumnSelect({ table }) {
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-import { Typography as Typography2 } from "@equinor/eds-core-react";
-import { search } from "@equinor/eds-icons";
-import { useAtom } from "jotai";
-import styled13 from "styled-components";
-
-// src/DataTable/filters/DebouncedInput.tsx
-import { Button as Button4, Icon as Icon6, Input, Tooltip } from "@equinor/eds-core-react";
-import { close as close2 } from "@equinor/eds-icons";
-import { useEffect, useState as useState3 } from "react";
-import styled12 from "styled-components";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var Wrapper3 = styled12.div`
-  width: 200px;
-`;
-var CloseButton = styled12(Button4)`
-  width: 24px;
-  height: 24px;
-`;
-function DebouncedInput({
-  value: initialValue,
-  onChange,
-  icon,
-  debounce = 500,
-  ...props
-}) {
-  const [value, setValue] = useState3(initialValue);
-  useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      onChange(value);
-    }, debounce);
-    return () => clearTimeout(timeout);
-  }, [value]);
-  return /* @__PURE__ */ jsx14(Wrapper3, {
-    children: /* @__PURE__ */ jsx14(Input, {
-      ...props,
-      value,
-      leftAdornments: icon && /* @__PURE__ */ jsx14(Icon6, {
-        name: icon.name,
-        data: icon,
-        size: 18
-      }),
-      rightAdornments: !!value && /* @__PURE__ */ jsx14(Tooltip, {
-        title: "Clear input",
-        children: /* @__PURE__ */ jsx14(CloseButton, {
-          variant: "ghost_icon",
-          onClick: () => setValue(""),
-          children: /* @__PURE__ */ jsx14(Icon6, {
-            name: close2.name,
-            data: close2,
-            size: 18
-          })
-        })
-      }),
-      onChange: (event) => setValue(event.target.value)
-    })
-  });
-}
-
-// src/DataTable/filters/functions.ts
-import { rankItem } from "@tanstack/match-sorter-utils";
-var fuzzyFilter = (row, columnId, value, addMeta) => {
-  const itemRank = rankItem(row.getValue(columnId), value);
-  addMeta({
-    itemRank
-  });
-  return itemRank.passed;
-};
-
-// src/DataTable/components/DataTableHeader.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var DataTableHeaderWrapper = styled13.div`
   display: flex;
   align-items: center;
@@ -754,7 +764,8 @@ var FilterContainer = styled13.div`
   gap: 1rem;
   justify-content: flex-end;
 `;
-var DataTableHeader = (props) => {
+function DataTableHeader({ config, table, ...props }) {
+  var _a;
   const [globalFilter, setGlobalFilter] = useAtom(globalFilterAtom);
   return /* @__PURE__ */ jsxs9(DataTableHeaderWrapper, {
     className: "--table-caption",
@@ -764,21 +775,26 @@ var DataTableHeader = (props) => {
         variant: "h3",
         children: props == null ? void 0 : props.tableCaption
       }),
-      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ jsxs9(FilterContainer, {
+      /* @__PURE__ */ jsx15(FilterContainer, {
         className: "--filter-container",
-        children: [
-          /* @__PURE__ */ jsx15(DebouncedInput, {
-            value: globalFilter,
-            icon: search,
-            placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
-            onChange: (value) => setGlobalFilter(String(value))
-          }),
-          props.filterActions
-        ]
+        children: /* @__PURE__ */ jsxs9(Fragment3, {
+          children: [
+            (config == null ? void 0 : config.globalFilter) && /* @__PURE__ */ jsx15(DebouncedInput, {
+              value: globalFilter,
+              icon: search,
+              placeholder: (config == null ? void 0 : config.globalFilterPlaceholder) ?? "Search all columns",
+              onChange: (value) => setGlobalFilter(String(value))
+            }),
+            (_a = config == null ? void 0 : config.filterActions) == null ? void 0 : _a.call(config, table),
+            (config == null ? void 0 : config.columnSelect) && /* @__PURE__ */ jsx15(ColumnSelect, {
+              table
+            })
+          ]
+        })
       })
     ]
   });
-};
+}
 
 // src/DataTable/components/VirtualTable.tsx
 import { Table as Table8 } from "@equinor/eds-core-react";
@@ -869,6 +885,7 @@ function DataTable({
   header,
   filters,
   config,
+  cellConfig,
   rowConfig
 }) {
   const [columnVisibility, setColumnVisibility] = useAtom2(columnVisibilityAtom);
@@ -926,12 +943,9 @@ function DataTable({
     children: [
       /* @__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__ */ jsx18(ColumnSelect, {
-          table
-        })
+        table,
+        config: filters
       }),
       /* @__PURE__ */ jsx18("div", {
         ref: tableContainerRef,
@@ -940,11 +954,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
         })
@@ -970,6 +986,7 @@ export {
   AppShell,
   AppSidebar,
   ChipsCell,
+  ColumnSelect,
   DataTable2 as DataTable,
   DynamicCell,
   HierarchyCell,

package/package.json

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