@equinor/apollo-components 1.7.1 → 1.8.0

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,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> = {
@@ -83,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;
@@ -140,4 +152,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

@@ -539,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)
@@ -914,6 +924,7 @@ function DataTable({
   header,
   filters,
   config,
+  cellConfig,
   rowConfig
 }) {
   const [columnVisibility, setColumnVisibility] = (0, import_jotai3.useAtom)(columnVisibilityAtom);
@@ -982,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
         })

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)
@@ -875,6 +885,7 @@ function DataTable({
   header,
   filters,
   config,
+  cellConfig,
   rowConfig
 }) {
   const [columnVisibility, setColumnVisibility] = useAtom2(columnVisibilityAtom);
@@ -943,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
         })

package/package.json

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