@equinor/apollo-components 3.3.0 → 3.4.0-beta.1

package/dist/index.d.ts

@@ -1,13 +1,14 @@
 import { IconData } from '@equinor/eds-icons';
 import * as react from 'react';
 import { ReactNode, ReactElement, HTMLProps, MutableRefObject, Dispatch, SetStateAction, SyntheticEvent } from 'react';
-import { CellContext, Cell, Header, Table, Row, SortingState, OnChangeFn, ColumnDef, RowSelectionState, ExpandedState, VisibilityState, HeaderContext } from '@tanstack/react-table';
+import { CellContext, Cell, Header, Table, Row, SortingState, OnChangeFn, ColumnDef, RowSelectionState, ExpandedState, ColumnPinningState, VisibilityState, HeaderContext, Column } from '@tanstack/react-table';
 import * as styled_components from 'styled-components';
 import * as _equinor_eds_core_react from '@equinor/eds-core-react';
 import { CellProps, TypographyProps as TypographyProps$1 } from '@equinor/eds-core-react';
 import { ColumnDef as ColumnDef$1 } from '@tanstack/table-core';
 import { SetRequired } from 'type-fest';
 import { TableOptions } from '@tanstack/table-core/build/lib/types';
+import { Variants } from '@equinor/eds-core-react/dist/types/components/types';
 import { FieldError } from 'react-hook-form';
 
 interface AppShellProps {
@@ -150,6 +151,9 @@ interface DataTableProps<T> {
         enableSorting?: boolean;
         manualSorting?: boolean;
     };
+    columnPinning?: boolean | (ControlledState<ColumnPinningState> & {
+        enable?: boolean;
+    });
     globalFilter?: ControlledState<string>;
     columnVisibility?: ControlledState<VisibilityState>;
     /**
@@ -178,7 +182,7 @@ interface DataTableProps<T> {
     infiniteScroll?: InfiniteScrollConfig;
 }
 declare type ControlledState<T> = {
-    state: T;
+    state?: T;
     /** Callback when state chagnes. Using this requires the state to be fully controlled. */
     onChange?: Dispatch<SetStateAction<T>>;
 };
@@ -217,6 +221,10 @@ declare const TypographyCustom: (props: TypographyProps) => JSX.Element;
 declare function stringToHslColor(str: string, s?: number, l?: number): string;
 /** Wrap an event handler and stop event propagation */
 declare function stopPropagation<T extends HTMLElement>(handler: (e: SyntheticEvent<T>) => void): (e: SyntheticEvent<T>) => void;
+/** Used for calculating the `right` px value of pinned cells */
+declare function getTotalRight<TData>(table: Table<TData>, column: Column<TData>): number;
+declare function getIsFirstRightPinnedColumn<TData>(column: Column<TData>): boolean;
+declare function getIsLastLeftPinnedColumn<TData>(table: Table<TData>, column: Column<TData>): boolean;
 
 declare type FormMeta = {
     _isNew?: boolean;
@@ -245,10 +253,23 @@ declare function useSetFormMeta<T extends FormMeta>(): (newValues: Partial<T>) =
 declare function removeFormMeta<T extends FormMeta>(withFormMeta: T): Omit<T, keyof FormMeta>;
 declare function addFormMeta<T>(withoutFormMeta: T): T & FormMeta;
 
+interface GetHelperTextPropsProps {
+    error?: {
+        message?: string;
+    };
+    warning?: {
+        message: string;
+    };
+    helperText?: string;
+}
+interface GetHelperTextProps {
+    variant?: Variants;
+    helperText?: string;
+    helperIcon: JSX.Element | null;
+}
 interface EditableCellBaseProps<T extends FormMeta, Value> extends CellContext<T, Value> {
     /**
-     * FieldError object used to overwrite react-hook-form validation result. It is prioritized over
-     * react-hook-form's validation.
+     * FieldError object used to overwrite react-hook-form validation result. It is prioritized over react-hook-form's validation. If prefixed with the exported `WARNING_PREFIX` it will be displayed as an warning.
      */
     error?: FieldError;
     /**
@@ -286,4 +307,7 @@ declare function EditableTextAreaCell<T extends FormMeta>({ title, error: errorF
 
 declare function EditableTextFieldCell<T extends FormMeta>({ error: errorFromProps, ...context }: EditableCellBaseProps<T, string>): JSX.Element;
 
-export { AppShell, AppSidebar, CellConfig, CheckboxCell, ChipsCell, ColumnSelect, DataTable, DataTableProps, DynamicCell, EditableCheckboxCell, EditableDateCell, EditableDateCellProps, EditableDropdownSingleCell, EditableDropdownSingleCellProps, EditableNumberCell, EditableTextAreaCell, EditableTextFieldCell, FormMeta, HTMLPropsRef, HeaderCell, HierarchyCell, InfiniteScrollConfig, Option, PopoverCell, RowConfig, RowSelectionMode, SelectColumnDef, SortConfig, StickyCell, StickyHeaderCell, StyledStickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TruncateMode, TypographyCustom, TypographyProps, WithoutFormMeta, addFormMeta, capitalizeHeader, leftCellShadow, prependSelectColumn, removeFormMeta, stopPropagation, stringToHslColor, useEditMode, useGetIsNew, useHasRemoteChange, useSetFormMeta };
+declare const WARNING_PREFIX = "WARNING";
+declare function getHelperTextProps({ error, warning, helperText, }: GetHelperTextPropsProps): GetHelperTextProps;
+
+export { AppShell, AppSidebar, CellConfig, CheckboxCell, ChipsCell, ColumnSelect, DataTable, DataTableProps, DynamicCell, EditableCellBaseProps, EditableCheckboxCell, EditableDateCell, EditableDateCellProps, EditableDropdownSingleCell, EditableDropdownSingleCellProps, EditableNumberCell, EditableTextAreaCell, EditableTextFieldCell, FormMeta, GetHelperTextProps, GetHelperTextPropsProps, HTMLPropsRef, HeaderCell, HierarchyCell, InfiniteScrollConfig, Option, PopoverCell, RowConfig, RowSelectionMode, SelectColumnDef, SortConfig, StickyCell, StickyHeaderCell, StyledStickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TruncateMode, TypographyCustom, TypographyProps, WARNING_PREFIX, WithoutFormMeta, addFormMeta, capitalizeHeader, getHelperTextProps, getIsFirstRightPinnedColumn, getIsLastLeftPinnedColumn, getTotalRight, leftCellShadow, prependSelectColumn, removeFormMeta, stopPropagation, stringToHslColor, useEditMode, useGetIsNew, useHasRemoteChange, useSetFormMeta };

package/dist/index.js

@@ -2394,8 +2394,13 @@ __export(src_exports, {
   StyledStickyCell: () => StyledStickyCell,
   TableHeader: () => TableHeader,
   TypographyCustom: () => TypographyCustom,
+  WARNING_PREFIX: () => WARNING_PREFIX,
   addFormMeta: () => addFormMeta,
   capitalizeHeader: () => capitalizeHeader,
+  getHelperTextProps: () => getHelperTextProps,
+  getIsFirstRightPinnedColumn: () => getIsFirstRightPinnedColumn,
+  getIsLastLeftPinnedColumn: () => getIsLastLeftPinnedColumn,
+  getTotalRight: () => getTotalRight,
   leftCellShadow: () => leftCellShadow,
   prependSelectColumn: () => prependSelectColumn,
   removeFormMeta: () => removeFormMeta,
@@ -2522,6 +2527,15 @@ function stopPropagation(handler) {
     handler(e);
   };
 }
+function getTotalRight(table, column) {
+  return table.getRightLeafHeaders().slice(column.getPinnedIndex() + 1).reduce((acc, col) => acc + col.getSize(), 0);
+}
+function getIsFirstRightPinnedColumn(column) {
+  return column.getIsPinned() === "right" && column.getPinnedIndex() === 0;
+}
+function getIsLastLeftPinnedColumn(table, column) {
+  return column.getIsPinned() === "left" && table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
+}
 
 // src/cells/ChipsCell.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -2551,6 +2565,7 @@ var ChipsCell = (props) => {
 
 // src/cells/DynamicCell.tsx
 var import_eds_core_react5 = require("@equinor/eds-core-react");
+var import_eds_tokens3 = require("@equinor/eds-tokens");
 var import_react_table = require("@tanstack/react-table");
 var import_styled_components5 = __toESM(require("styled-components"));
 
@@ -2589,9 +2604,33 @@ var StyledCell = (0, import_styled_components5.default)(import_eds_core_react5.T
   background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
 function DynamicCell({ cell, highlight, getStickyCellColor }) {
-  var _a;
+  var _a, _b;
   const cellContent = (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
-  if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
+  const columnPinningDirection = cell.column.getIsPinned();
+  if (columnPinningDirection) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_eds_core_react5.Table.Cell,
+      {
+        "data-column": cell.column.id,
+        style: __spreadValues({
+          position: "sticky",
+          top: 0,
+          backgroundColor: (_a = getStickyCellColor == null ? void 0 : getStickyCellColor(cell)) != null ? _a : "inherit",
+          zIndex: 5,
+          backgroundClip: "padding-box",
+          display: "table-cell"
+        }, columnPinningDirection === "left" ? {
+          left: `${cell.column.getStart("left")}px`,
+          borderRight: getIsLastLeftPinnedColumn(cell.getContext().table, cell.column) ? `1px solid ${import_eds_tokens3.tokens.colors.ui.background__medium.hex}` : void 0
+        } : {
+          right: `${getTotalRight(cell.getContext().table, cell.column)}px`,
+          borderLeft: getIsFirstRightPinnedColumn(cell.column) ? `1px solid ${import_eds_tokens3.tokens.colors.ui.background__medium.hex}` : void 0
+        }),
+        children: cellContent
+      }
+    );
+  }
+  if ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.sticky) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledStickyCell, { backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell), "data-column": cell.column.id, children: cellContent });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCell, { "data-column": cell.column.id, backgroundColor: highlight ? "#d5eaf4" : void 0, children: cellContent });
@@ -2600,7 +2639,7 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
 // src/cells/HeaderCell.tsx
 var import_eds_core_react6 = require("@equinor/eds-core-react");
 var import_eds_icons3 = require("@equinor/eds-icons");
-var import_eds_tokens3 = require("@equinor/eds-tokens");
+var import_eds_tokens4 = require("@equinor/eds-tokens");
 var import_react_table2 = require("@tanstack/react-table");
 var import_styled_components6 = __toESM(require("styled-components"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -2619,7 +2658,7 @@ var resizeCellStyle = import_styled_components6.css`
   }
 
   .resizer.isResizing {
-    background: ${import_eds_tokens3.tokens.colors.interactive.focus.hex};
+    background: ${import_eds_tokens4.tokens.colors.interactive.focus.hex};
     opacity: 1;
   }
 
@@ -2645,6 +2684,28 @@ var HeaderCell = ({ header, table }) => {
     onClick: header.column.getToggleSortingHandler(),
     colSpan: header.colSpan
   };
+  const columnPinningDirection = header.column.getIsPinned();
+  if (columnPinningDirection) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_eds_core_react6.Table.Cell,
+      __spreadProps(__spreadValues({}, cellProps), {
+        style: __spreadValues(__spreadProps(__spreadValues({}, cellProps.style), {
+          position: "sticky",
+          top: 0,
+          zIndex: 11,
+          backgroundClip: "padding-box",
+          display: "table-cell"
+        }), columnPinningDirection === "left" ? {
+          left: `${header.column.getStart("left")}px`,
+          borderRight: getIsLastLeftPinnedColumn(table, header.column) ? `1px solid ${import_eds_tokens4.tokens.colors.ui.background__medium.hex}` : void 0
+        } : {
+          right: `${getTotalRight(table, header.column)}px`,
+          borderLeft: getIsFirstRightPinnedColumn(header.column) ? `1px solid ${import_eds_tokens4.tokens.colors.ui.background__medium.hex}` : void 0
+        }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, { header, table })
+      })
+    );
+  }
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StickyCell2, __spreadProps(__spreadValues({}, cellProps), { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, { header, table }) }), header.id);
   }
@@ -2695,12 +2756,12 @@ function getSort({ column }) {
 }
 
 // src/cells/HierarchyCell.tsx
-var import_eds_tokens5 = require("@equinor/eds-tokens");
+var import_eds_tokens6 = require("@equinor/eds-tokens");
 var import_styled_components8 = __toESM(require("styled-components"));
 
 // src/cells/TypographyCustom.tsx
 var import_eds_core_react7 = require("@equinor/eds-core-react");
-var import_eds_tokens4 = require("@equinor/eds-tokens");
+var import_eds_tokens5 = require("@equinor/eds-tokens");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var truncateStyle = {
@@ -2727,7 +2788,7 @@ var TypographyCustom = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react7.Typography, __spreadProps(__spreadValues({}, edsTypographyProps), { style: styleFromProps }));
 };
 var HoverCapture = import_styled_components7.default.div`
-  height: ${import_eds_tokens4.tokens.typography.table.cell_text.lineHeight};
+  height: ${import_eds_tokens5.tokens.typography.table.cell_text.lineHeight};
   background-color: inherit;
 
   position: relative;
@@ -2762,11 +2823,11 @@ var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
   ${({ depth, expanded }) => expanded && depth === 0 && "font-weight: bold;"}
 
   ${({ depth }) => depth > 0 && import_styled_components8.css`
-      border-left: 3px solid ${import_eds_tokens5.tokens.colors.infographic.primary__moss_green_34.hex};
+      border-left: 3px solid ${import_eds_tokens6.tokens.colors.infographic.primary__moss_green_34.hex};
       gap: 0.5rem;
       .--divider {
         width: ${depth * 32}px;
-        background-color: ${import_eds_tokens5.tokens.colors.infographic.primary__moss_green_34.hex};
+        background-color: ${import_eds_tokens6.tokens.colors.infographic.primary__moss_green_34.hex};
         height: 3px;
         border-radius: 0 5px 5px 0;
       }
@@ -3396,6 +3457,11 @@ function DataTable(props) {
     (_s = (_r = props.expansion) == null ? void 0 : _r.state) != null ? _s : internalExpandedState,
     (_u = (_t = props.expansion) == null ? void 0 : _t.onChange) != null ? _u : setInternalExpandedState
   ];
+  const [internalColumnPinning, setInternalColumnPinning] = (0, import_react7.useState)({});
+  const [columnPinning, setColumnPinning] = [
+    typeof props.columnPinning === "object" && props.columnPinning.state ? props.columnPinning.state : internalColumnPinning,
+    typeof props.columnPinning === "object" && props.columnPinning.onChange ? props.columnPinning.onChange : setInternalColumnPinning
+  ];
   const table = (0, import_react_table3.useReactTable)({
     columns: prependSelectColumn(columns, props.rowSelection),
     data,
@@ -3405,7 +3471,8 @@ function DataTable(props) {
       globalFilter: enableGlobalFilter(globalFilterState),
       sorting: ((_v = props.sorting) == null ? void 0 : _v.enableSorting) ? (_x = (_w = props.sorting) == null ? void 0 : _w.state) != null ? _x : sortingState : void 0,
       rowSelection: rowSelectionState,
-      columnVisibility
+      columnVisibility,
+      columnPinning
     },
     defaultColumn: {
       cell: ({ cell }) => {
@@ -3421,12 +3488,14 @@ function DataTable(props) {
     enableMultiRowSelection: ((_y = props.rowSelection) == null ? void 0 : _y.mode) === "multiple",
     enableSubRowSelection: ((_z = props.rowSelection) == null ? void 0 : _z.mode) !== "single",
     filterFromLeafRows: bannerConfig == null ? void 0 : bannerConfig.filterFromLeafRows,
+    enablePinning: props.columnPinning !== void 0 && (typeof props.columnPinning === "boolean" ? props.columnPinning : props.columnPinning.enable),
     getFilteredRowModel: enableGlobalFilter((0, import_react_table3.getFilteredRowModel)()),
     getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
     getExpandedRowModel: (0, import_react_table3.getExpandedRowModel)(),
     getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
     onExpandedChange: setExpandedState,
     onRowSelectionChange: setRowSelectionState,
+    onColumnPinningChange: setColumnPinning,
     onSortingChange: (sorting == null ? void 0 : sorting.enableSorting) ? (_A = sorting == null ? void 0 : sorting.onChange) != null ? _A : setSortingState : void 0,
     onColumnVisibilityChange: setColumnVisibility,
     onGlobalFilterChange: enableGlobalFilter(setGlobalFilterState),
@@ -3598,17 +3667,27 @@ var import_styled_components17 = __toESM(require("styled-components"));
 var import_eds_core_react21 = require("@equinor/eds-core-react");
 var import_eds_icons8 = require("@equinor/eds-icons");
 var import_jsx_runtime22 = require("react/jsx-runtime");
+var WARNING_PREFIX = "WARNING";
 function getHelperTextProps({
   error,
   warning,
   helperText
 }) {
-  if (error)
+  var _a;
+  if (error) {
+    if ((_a = error.message) == null ? void 0 : _a.startsWith(WARNING_PREFIX)) {
+      return {
+        variant: "warning",
+        helperText: error.message.substring(WARNING_PREFIX.length),
+        helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, { data: import_eds_icons8.warning_filled, size: 16 })
+      };
+    }
     return {
       variant: "error",
       helperText: error.message,
       helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, { data: import_eds_icons8.error_filled, size: 16 })
     };
+  }
   if (warning)
     return {
       variant: "warning",
@@ -3620,12 +3699,6 @@ function getHelperTextProps({
     helperIcon: null
   };
 }
-function stopPropagation2(handler) {
-  return (e) => {
-    e.stopPropagation();
-    handler(e);
-  };
-}
 
 // src/form-cells/EditableDateCell.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -3709,12 +3782,12 @@ var import_react_hook_form4 = require("react-hook-form");
 
 // src/form-cells/FormHelperText.tsx
 var import_eds_core_react23 = require("@equinor/eds-core-react");
-var import_eds_tokens6 = require("@equinor/eds-tokens");
+var import_eds_tokens7 = require("@equinor/eds-tokens");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var colors = {
-  error: import_eds_tokens6.tokens.colors.interactive.danger__text.hex,
-  warning: import_eds_tokens6.tokens.colors.interactive.warning__text.hex,
-  success: import_eds_tokens6.tokens.colors.interactive.success__text.hex
+  error: import_eds_tokens7.tokens.colors.interactive.danger__text.hex,
+  warning: import_eds_tokens7.tokens.colors.interactive.warning__text.hex,
+  success: import_eds_tokens7.tokens.colors.interactive.success__text.hex
 };
 function HelperText({ helperText, variant, helperIcon }) {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: helperText && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { marginTop: "8px", marginLeft: "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
@@ -3907,7 +3980,7 @@ function EditableTextAreaCell(_a) {
                     ref
                   }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { variant: "ghost_icon", onClick: stopPropagation2(openDialog), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_eds_core_react26.Icon, { data: import_eds_icons9.arrow_up, size: 24, style: { transform: "rotateZ(45deg)" } }) })
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { variant: "ghost_icon", onClick: stopPropagation(openDialog), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_eds_core_react26.Icon, { data: import_eds_icons9.arrow_up, size: 24, style: { transform: "rotateZ(45deg)" } }) })
               ]
             }
           ),
@@ -4067,8 +4140,13 @@ var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_r
   StyledStickyCell,
   TableHeader,
   TypographyCustom,
+  WARNING_PREFIX,
   addFormMeta,
   capitalizeHeader,
+  getHelperTextProps,
+  getIsFirstRightPinnedColumn,
+  getIsLastLeftPinnedColumn,
+  getTotalRight,
   leftCellShadow,
   prependSelectColumn,
   removeFormMeta,

package/dist/index.mjs

@@ -2477,6 +2477,15 @@ function stopPropagation(handler) {
     handler(e);
   };
 }
+function getTotalRight(table, column) {
+  return table.getRightLeafHeaders().slice(column.getPinnedIndex() + 1).reduce((acc, col) => acc + col.getSize(), 0);
+}
+function getIsFirstRightPinnedColumn(column) {
+  return column.getIsPinned() === "right" && column.getPinnedIndex() === 0;
+}
+function getIsLastLeftPinnedColumn(table, column) {
+  return column.getIsPinned() === "left" && table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
+}
 
 // src/cells/ChipsCell.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -2505,7 +2514,8 @@ var ChipsCell = (props) => {
 };
 
 // src/cells/DynamicCell.tsx
-import { Table as Table2 } from "@equinor/eds-core-react";
+import { Table as EdsTable } from "@equinor/eds-core-react";
+import { tokens as tokens3 } from "@equinor/eds-tokens";
 import { flexRender } from "@tanstack/react-table";
 import styled5 from "styled-components";
 
@@ -2540,22 +2550,46 @@ import { jsx as jsx5 } from "react/jsx-runtime";
 var StyledStickyCell = styled5(StickyCell)`
   background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
-var StyledCell = styled5(Table2.Cell)`
+var StyledCell = styled5(EdsTable.Cell)`
   background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
 function DynamicCell({ cell, highlight, getStickyCellColor }) {
-  var _a;
+  var _a, _b;
   const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
-  if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
+  const columnPinningDirection = cell.column.getIsPinned();
+  if (columnPinningDirection) {
+    return /* @__PURE__ */ jsx5(
+      EdsTable.Cell,
+      {
+        "data-column": cell.column.id,
+        style: __spreadValues({
+          position: "sticky",
+          top: 0,
+          backgroundColor: (_a = getStickyCellColor == null ? void 0 : getStickyCellColor(cell)) != null ? _a : "inherit",
+          zIndex: 5,
+          backgroundClip: "padding-box",
+          display: "table-cell"
+        }, columnPinningDirection === "left" ? {
+          left: `${cell.column.getStart("left")}px`,
+          borderRight: getIsLastLeftPinnedColumn(cell.getContext().table, cell.column) ? `1px solid ${tokens3.colors.ui.background__medium.hex}` : void 0
+        } : {
+          right: `${getTotalRight(cell.getContext().table, cell.column)}px`,
+          borderLeft: getIsFirstRightPinnedColumn(cell.column) ? `1px solid ${tokens3.colors.ui.background__medium.hex}` : void 0
+        }),
+        children: cellContent
+      }
+    );
+  }
+  if ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.sticky) {
     return /* @__PURE__ */ jsx5(StyledStickyCell, { backgroundColor: getStickyCellColor == null ? void 0 : getStickyCellColor(cell), "data-column": cell.column.id, children: cellContent });
   }
   return /* @__PURE__ */ jsx5(StyledCell, { "data-column": cell.column.id, backgroundColor: highlight ? "#d5eaf4" : void 0, children: cellContent });
 }
 
 // src/cells/HeaderCell.tsx
-import { Icon as Icon3, Table as EdsTable } from "@equinor/eds-core-react";
+import { Icon as Icon3, Table as EdsTable2 } from "@equinor/eds-core-react";
 import { arrow_drop_down, arrow_drop_up } from "@equinor/eds-icons";
-import { tokens as tokens3 } from "@equinor/eds-tokens";
+import { tokens as tokens4 } from "@equinor/eds-tokens";
 import { flexRender as flexRender2 } from "@tanstack/react-table";
 import styled6, { css as css3 } from "styled-components";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -2574,7 +2608,7 @@ var resizeCellStyle = css3`
   }
 
   .resizer.isResizing {
-    background: ${tokens3.colors.interactive.focus.hex};
+    background: ${tokens4.colors.interactive.focus.hex};
     opacity: 1;
   }
 
@@ -2585,7 +2619,7 @@ var resizeCellStyle = css3`
 var StickyCell2 = styled6(StickyHeaderCell)`
   ${resizeCellStyle}
 `;
-var Cell2 = styled6(EdsTable.Cell)`
+var Cell2 = styled6(EdsTable2.Cell)`
   ${resizeCellStyle}
 `;
 var HeaderCell = ({ header, table }) => {
@@ -2600,6 +2634,28 @@ var HeaderCell = ({ header, table }) => {
     onClick: header.column.getToggleSortingHandler(),
     colSpan: header.colSpan
   };
+  const columnPinningDirection = header.column.getIsPinned();
+  if (columnPinningDirection) {
+    return /* @__PURE__ */ jsx6(
+      EdsTable2.Cell,
+      __spreadProps(__spreadValues({}, cellProps), {
+        style: __spreadValues(__spreadProps(__spreadValues({}, cellProps.style), {
+          position: "sticky",
+          top: 0,
+          zIndex: 11,
+          backgroundClip: "padding-box",
+          display: "table-cell"
+        }), columnPinningDirection === "left" ? {
+          left: `${header.column.getStart("left")}px`,
+          borderRight: getIsLastLeftPinnedColumn(table, header.column) ? `1px solid ${tokens4.colors.ui.background__medium.hex}` : void 0
+        } : {
+          right: `${getTotalRight(table, header.column)}px`,
+          borderLeft: getIsFirstRightPinnedColumn(header.column) ? `1px solid ${tokens4.colors.ui.background__medium.hex}` : void 0
+        }),
+        children: /* @__PURE__ */ jsx6(HeaderContent, { header, table })
+      })
+    );
+  }
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
     return /* @__PURE__ */ jsx6(StickyCell2, __spreadProps(__spreadValues({}, cellProps), { children: /* @__PURE__ */ jsx6(HeaderContent, { header, table }) }), header.id);
   }
@@ -2650,14 +2706,14 @@ function getSort({ column }) {
 }
 
 // src/cells/HierarchyCell.tsx
-import { tokens as tokens5 } from "@equinor/eds-tokens";
+import { tokens as tokens6 } from "@equinor/eds-tokens";
 import styled8, { css as css4 } from "styled-components";
 
 // src/cells/TypographyCustom.tsx
 import {
   Typography as EdsTypography
 } from "@equinor/eds-core-react";
-import { tokens as tokens4 } from "@equinor/eds-tokens";
+import { tokens as tokens5 } from "@equinor/eds-tokens";
 import styled7 from "styled-components";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var truncateStyle = {
@@ -2684,7 +2740,7 @@ var TypographyCustom = (props) => {
   return /* @__PURE__ */ jsx7(EdsTypography, __spreadProps(__spreadValues({}, edsTypographyProps), { style: styleFromProps }));
 };
 var HoverCapture = styled7.div`
-  height: ${tokens4.typography.table.cell_text.lineHeight};
+  height: ${tokens5.typography.table.cell_text.lineHeight};
   background-color: inherit;
 
   position: relative;
@@ -2719,11 +2775,11 @@ var CellWrapper = styled8(TypographyCustom)`
   ${({ depth, expanded }) => expanded && depth === 0 && "font-weight: bold;"}
 
   ${({ depth }) => depth > 0 && css4`
-      border-left: 3px solid ${tokens5.colors.infographic.primary__moss_green_34.hex};
+      border-left: 3px solid ${tokens6.colors.infographic.primary__moss_green_34.hex};
       gap: 0.5rem;
       .--divider {
         width: ${depth * 32}px;
-        background-color: ${tokens5.colors.infographic.primary__moss_green_34.hex};
+        background-color: ${tokens6.colors.infographic.primary__moss_green_34.hex};
         height: 3px;
         border-radius: 0 5px 5px 0;
       }
@@ -2961,10 +3017,10 @@ function ColumnSelect({ table }) {
 }
 
 // src/DataTable/components/TableHeader.tsx
-import { Table as Table4 } from "@equinor/eds-core-react";
+import { Table as Table3 } from "@equinor/eds-core-react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 function TableHeader({ table, sticky }) {
-  return /* @__PURE__ */ jsx12(Table4.Head, { sticky, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12(Table4.Row, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx12(HeaderCell, { header, table }, header.id)) }, headerGroup.id)) });
+  return /* @__PURE__ */ jsx12(Table3.Head, { sticky, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12(Table3.Row, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx12(HeaderCell, { header, table }, header.id)) }, headerGroup.id)) });
 }
 
 // src/DataTable/DataTable.tsx
@@ -2979,10 +3035,10 @@ import { useEffect as useEffect3, useRef as useRef3, useState as useState6 } fro
 import styled16 from "styled-components";
 
 // src/DataTable/components/BasicTable.tsx
-import { Table as EdsTable2 } from "@equinor/eds-core-react";
+import { Table as EdsTable3 } from "@equinor/eds-core-react";
 
 // src/DataTable/components/PlaceholderRow.tsx
-import { DotProgress, Table as Table5, Typography as Typography2 } from "@equinor/eds-core-react";
+import { DotProgress, Table as Table4, Typography as Typography2 } from "@equinor/eds-core-react";
 import styled11 from "styled-components";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var PlaceholderTextWrapper = styled11.div`
@@ -2990,20 +3046,20 @@ var PlaceholderTextWrapper = styled11.div`
   justify-content: center;
 `;
 function PlaceholderRow({ isLoading }) {
-  return /* @__PURE__ */ jsx13(Table5.Row, { children: /* @__PURE__ */ jsx13(Table5.Cell, { colSpan: 100, children: /* @__PURE__ */ jsx13(PlaceholderTextWrapper, { children: isLoading ? /* @__PURE__ */ jsx13(DotProgress, { color: "primary" }) : /* @__PURE__ */ jsx13(Typography2, { children: "No data available" }) }) }) });
+  return /* @__PURE__ */ jsx13(Table4.Row, { children: /* @__PURE__ */ jsx13(Table4.Cell, { colSpan: 100, children: /* @__PURE__ */ jsx13(PlaceholderTextWrapper, { children: isLoading ? /* @__PURE__ */ jsx13(DotProgress, { color: "primary" }) : /* @__PURE__ */ jsx13(Typography2, { children: "No data available" }) }) }) });
 }
 
 // src/DataTable/components/TableBody.tsx
-import { Table as Table6 } from "@equinor/eds-core-react";
+import { Table as Table5 } from "@equinor/eds-core-react";
 import styled12 from "styled-components";
-var TableBody = styled12(Table6.Body)`
+var TableBody = styled12(Table5.Body)`
   // The following attribute are important for fixed column width
   // CHANGE THES WITH CAUTION
   background: inherit;
 `;
 
 // src/DataTable/components/TableRow.tsx
-import { Table as Table7 } from "@equinor/eds-core-react";
+import { Table as Table6 } from "@equinor/eds-core-react";
 import styled13 from "styled-components";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function TableRow({
@@ -3047,7 +3103,7 @@ function TableRow({
   );
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
-var StyledTableRow = styled13(Table7.Row)`
+var StyledTableRow = styled13(Table6.Row)`
   /* Background color must be inherited here. Does not work with inline styling */
   ${({ active }) => active ? "" : "background-color: inherit;"}
 `;
@@ -3070,8 +3126,8 @@ function BasicTable({
   tableCaption
 }) {
   const tableRows = table.getRowModel().rows;
-  return /* @__PURE__ */ jsxs8(EdsTable2, { children: [
-    /* @__PURE__ */ jsx15(EdsTable2.Caption, { hidden: true, children: tableCaption }),
+  return /* @__PURE__ */ jsxs8(EdsTable3, { children: [
+    /* @__PURE__ */ jsx15(EdsTable3.Caption, { hidden: true, children: tableCaption }),
     /* @__PURE__ */ jsx15(TableHeader, { sticky: stickyHeader, table }),
     /* @__PURE__ */ jsx15(TableBody, { children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx15(TableRow, { row, rowConfig, cellConfig }, row.id)) : /* @__PURE__ */ jsx15(PlaceholderRow, { isLoading }) })
   ] });
@@ -3189,16 +3245,16 @@ function TableBanner({
 }
 
 // src/DataTable/components/VirtualTable.tsx
-import { Table as Table9 } from "@equinor/eds-core-react";
+import { Table as Table8 } from "@equinor/eds-core-react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/DataTable/components/PaddingRow.tsx
-import { Table as Table8 } from "@equinor/eds-core-react";
+import { Table as Table7 } from "@equinor/eds-core-react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ jsx18(Table8.Row, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx18(Table8.Cell, { style: { height: `${props.height}px` } }) });
+  return /* @__PURE__ */ jsx18(Table7.Row, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx18(Table7.Cell, { style: { height: `${props.height}px` } }) });
 };
 
 // src/DataTable/components/VirtualTable.tsx
@@ -3227,8 +3283,8 @@ function VirtualTable(_a) {
   const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a2 = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a2.start) || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
-  return /* @__PURE__ */ jsxs10(Table9, { children: [
-    /* @__PURE__ */ jsx19(Table9.Caption, { hidden: true, children: props.tableCaption }),
+  return /* @__PURE__ */ jsxs10(Table8, { children: [
+    /* @__PURE__ */ jsx19(Table8.Caption, { hidden: true, children: props.tableCaption }),
     /* @__PURE__ */ jsx19(TableHeader, { sticky: props.stickyHeader, table }),
     /* @__PURE__ */ jsxs10(TableBody, { children: [
       /* @__PURE__ */ jsx19(PaddingRow, { height: paddingTop }),
@@ -3359,6 +3415,11 @@ function DataTable(props) {
     (_s = (_r = props.expansion) == null ? void 0 : _r.state) != null ? _s : internalExpandedState,
     (_u = (_t = props.expansion) == null ? void 0 : _t.onChange) != null ? _u : setInternalExpandedState
   ];
+  const [internalColumnPinning, setInternalColumnPinning] = useState6({});
+  const [columnPinning, setColumnPinning] = [
+    typeof props.columnPinning === "object" && props.columnPinning.state ? props.columnPinning.state : internalColumnPinning,
+    typeof props.columnPinning === "object" && props.columnPinning.onChange ? props.columnPinning.onChange : setInternalColumnPinning
+  ];
   const table = useReactTable({
     columns: prependSelectColumn(columns, props.rowSelection),
     data,
@@ -3368,7 +3429,8 @@ function DataTable(props) {
       globalFilter: enableGlobalFilter(globalFilterState),
       sorting: ((_v = props.sorting) == null ? void 0 : _v.enableSorting) ? (_x = (_w = props.sorting) == null ? void 0 : _w.state) != null ? _x : sortingState : void 0,
       rowSelection: rowSelectionState,
-      columnVisibility
+      columnVisibility,
+      columnPinning
     },
     defaultColumn: {
       cell: ({ cell }) => {
@@ -3384,12 +3446,14 @@ function DataTable(props) {
     enableMultiRowSelection: ((_y = props.rowSelection) == null ? void 0 : _y.mode) === "multiple",
     enableSubRowSelection: ((_z = props.rowSelection) == null ? void 0 : _z.mode) !== "single",
     filterFromLeafRows: bannerConfig == null ? void 0 : bannerConfig.filterFromLeafRows,
+    enablePinning: props.columnPinning !== void 0 && (typeof props.columnPinning === "boolean" ? props.columnPinning : props.columnPinning.enable),
     getFilteredRowModel: enableGlobalFilter(getFilteredRowModel()),
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getSortedRowModel: getSortedRowModel(),
     onExpandedChange: setExpandedState,
     onRowSelectionChange: setRowSelectionState,
+    onColumnPinningChange: setColumnPinning,
     onSortingChange: (sorting == null ? void 0 : sorting.enableSorting) ? (_A = sorting == null ? void 0 : sorting.onChange) != null ? _A : setSortingState : void 0,
     onColumnVisibilityChange: setColumnVisibility,
     onGlobalFilterChange: enableGlobalFilter(setGlobalFilterState),
@@ -3561,17 +3625,27 @@ import styled17 from "styled-components";
 import { Icon as Icon7 } from "@equinor/eds-core-react";
 import { error_filled, warning_filled } from "@equinor/eds-icons";
 import { jsx as jsx22 } from "react/jsx-runtime";
+var WARNING_PREFIX = "WARNING";
 function getHelperTextProps({
   error,
   warning,
   helperText
 }) {
-  if (error)
+  var _a;
+  if (error) {
+    if ((_a = error.message) == null ? void 0 : _a.startsWith(WARNING_PREFIX)) {
+      return {
+        variant: "warning",
+        helperText: error.message.substring(WARNING_PREFIX.length),
+        helperIcon: /* @__PURE__ */ jsx22(Icon7, { data: warning_filled, size: 16 })
+      };
+    }
     return {
       variant: "error",
       helperText: error.message,
       helperIcon: /* @__PURE__ */ jsx22(Icon7, { data: error_filled, size: 16 })
     };
+  }
   if (warning)
     return {
       variant: "warning",
@@ -3583,12 +3657,6 @@ function getHelperTextProps({
     helperIcon: null
   };
 }
-function stopPropagation2(handler) {
-  return (e) => {
-    e.stopPropagation();
-    handler(e);
-  };
-}
 
 // src/form-cells/EditableDateCell.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -3672,12 +3740,12 @@ import { Controller as Controller3 } from "react-hook-form";
 
 // src/form-cells/FormHelperText.tsx
 import { Typography as Typography4 } from "@equinor/eds-core-react";
-import { tokens as tokens6 } from "@equinor/eds-tokens";
+import { tokens as tokens7 } from "@equinor/eds-tokens";
 import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var colors = {
-  error: tokens6.colors.interactive.danger__text.hex,
-  warning: tokens6.colors.interactive.warning__text.hex,
-  success: tokens6.colors.interactive.success__text.hex
+  error: tokens7.colors.interactive.danger__text.hex,
+  warning: tokens7.colors.interactive.warning__text.hex,
+  success: tokens7.colors.interactive.success__text.hex
 };
 function HelperText({ helperText, variant, helperIcon }) {
   return /* @__PURE__ */ jsx24(Fragment4, { children: helperText && /* @__PURE__ */ jsx24("div", { style: { marginTop: "8px", marginLeft: "8px" }, children: /* @__PURE__ */ jsxs12(
@@ -3870,7 +3938,7 @@ function EditableTextAreaCell(_a) {
                     ref
                   }, field), getHelperTextProps({ error: errorFromProps != null ? errorFromProps : error }))
                 ),
-                /* @__PURE__ */ jsx27(IconButton, { variant: "ghost_icon", onClick: stopPropagation2(openDialog), children: /* @__PURE__ */ jsx27(Icon8, { data: arrow_up, size: 24, style: { transform: "rotateZ(45deg)" } }) })
+                /* @__PURE__ */ jsx27(IconButton, { variant: "ghost_icon", onClick: stopPropagation(openDialog), children: /* @__PURE__ */ jsx27(Icon8, { data: arrow_up, size: 24, style: { transform: "rotateZ(45deg)" } }) })
               ]
             }
           ),
@@ -4029,8 +4097,13 @@ export {
   StyledStickyCell,
   TableHeader,
   TypographyCustom,
+  WARNING_PREFIX,
   addFormMeta,
   capitalizeHeader,
+  getHelperTextProps,
+  getIsFirstRightPinnedColumn,
+  getIsLastLeftPinnedColumn,
+  getTotalRight,
   leftCellShadow,
   prependSelectColumn,
   removeFormMeta,

package/package.json

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