@equinor/apollo-components 3.4.0 → 3.5.1-beta.0

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 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, ColumnResizeMode, RowSelectionState, ExpandedState, ColumnPinningState, VisibilityState, HeaderContext, Column } from '@tanstack/react-table';
+export { Cell, ColumnDef, ColumnPinningState, ColumnResizeMode, ExpandedState, OnChangeFn, Row, RowSelectionState, SortingState, Table, VisibilityState } 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';
 
@@ -27,12 +27,12 @@ declare const ChipsCell: (props: {
     values?: string[];
 }) => JSX.Element;
 
-declare type TableCellProps<T> = {
+type TableCellProps<T> = {
     cell: Cell<T, unknown>;
     highlight?: boolean;
     getStickyCellColor?: (cell: Cell<T, unknown>) => string;
 };
-declare type StyledStickyCellProps = {
+type StyledStickyCellProps = {
     highlight?: boolean;
     backgroundColor?: string;
 };
@@ -46,7 +46,7 @@ interface HeaderCellProps<TData, TValue> {
 }
 declare const HeaderCell: <TData, TValue>({ header, table }: HeaderCellProps<TData, TValue>) => JSX.Element;
 
-declare type HierarchyCellOptions = {
+type HierarchyCellOptions = {
     getRowDepth?: () => number;
     getDisplayName?: () => string;
 };
@@ -87,8 +87,8 @@ interface RowConfig<T> {
     onMouseEnter?: (row: Row<T>) => void;
     onMouseLeave?: (row: Row<T>) => void;
 }
-declare type TruncateMode = 'wrap' | 'hover';
-declare type SortConfig = {
+type TruncateMode = 'wrap' | 'hover';
+type SortConfig = {
     enableSorting?: boolean;
     manualSorting?: boolean;
     sorting?: SortingState;
@@ -105,8 +105,8 @@ interface CellConfig<T> {
      */
     truncateMode?: TruncateMode | ((cell: Cell<T, unknown>) => TruncateMode);
 }
-declare type RowSelectionMode = 'single' | 'multiple';
-declare type TableLayout = 'auto' | 'fixed';
+type RowSelectionMode = 'single' | 'multiple';
+type TableLayout = 'auto' | 'fixed';
 interface HTMLPropsRef<T extends HTMLElement> extends HTMLProps<T> {
     ref?: MutableRefObject<T | null> | null;
 }
@@ -138,7 +138,7 @@ interface DataTableProps<T> {
     virtual?: boolean;
     getRowId?: (originalRow: T, index: number, parent: Row<T> | undefined) => string;
     getSubRows?: (originalRow: T) => T[] | undefined;
-    columnResizing?: boolean | TableOptions<T>['columnResizeMode'];
+    columnResizing?: boolean | ColumnResizeMode;
     rowSelection?: Partial<ControlledState<RowSelectionState>> & {
         mode?: RowSelectionMode;
         selectColumn?: 'default' | ((options?: Record<string, any>) => ColumnDef<T, any>);
@@ -151,6 +151,9 @@ interface DataTableProps<T> {
         enableSorting?: boolean;
         manualSorting?: boolean;
     };
+    columnPinning?: boolean | (ControlledState<ColumnPinningState> & {
+        enable?: boolean;
+    });
     globalFilter?: ControlledState<string>;
     columnVisibility?: ControlledState<VisibilityState>;
     /**
@@ -178,8 +181,8 @@ interface DataTableProps<T> {
     tableContainerProps?: HTMLPropsRef<HTMLDivElement>;
     infiniteScroll?: InfiniteScrollConfig;
 }
-declare type ControlledState<T> = {
-    state: T;
+type ControlledState<T> = {
+    state?: T;
     /** Callback when state chagnes. Using this requires the state to be fully controlled. */
     onChange?: Dispatch<SetStateAction<T>>;
 };
@@ -195,7 +198,7 @@ declare function DataTable<T>(props: DataTableProps<T>): JSX.Element;
  */
 declare function capitalizeHeader<T>(context: HeaderContext<T, any>): string;
 /** Prepend a column definition array with a select column. */
-declare function prependSelectColumn<T>(columns: ColumnDef<T>[], config?: DataTableProps<T>['rowSelection']): ColumnDef<T, unknown>[];
+declare function prependSelectColumn<T>(columns: ColumnDef<T>[], config?: DataTableProps<T>['rowSelection']): ColumnDef<T>[];
 
 declare function SelectColumnDef<T>(props: SetRequired<DataTableProps<T>, 'rowSelection'>['rowSelection']): ColumnDef$1<T, any>;
 
@@ -203,7 +206,7 @@ declare const leftCellShadow: styled_components.FlattenSimpleInterpolation;
 declare const StickyCell: styled_components.StyledComponent<react.ForwardRefExoticComponent<CellProps & react.RefAttributes<HTMLTableCellElement>>, any, {} & CellProps, never>;
 declare const StickyHeaderCell: styled_components.StyledComponent<react.ForwardRefExoticComponent<CellProps & react.RefAttributes<HTMLTableCellElement>>, any, ({} & CellProps) & CellProps, never>;
 
-declare type TypographyProps = {
+type TypographyProps = {
     truncate?: boolean;
     enableShowAllOnHover?: boolean;
 } & TypographyProps$1;
@@ -218,13 +221,17 @@ 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 = {
+type FormMeta = {
     _isNew?: boolean;
     _editMode?: boolean;
     _hasRemoteChange?: boolean;
 };
-declare type WithoutFormMeta<T extends FormMeta> = Omit<T, keyof FormMeta>;
+type WithoutFormMeta<T extends FormMeta> = Omit<T, keyof FormMeta>;
 
 /**
  * Subscribes to the `_editMode` field in a `react-hook-form` context.
@@ -303,4 +310,4 @@ declare function EditableTextFieldCell<T extends FormMeta>({ error: errorFromPro
 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, leftCellShadow, prependSelectColumn, removeFormMeta, stopPropagation, stringToHslColor, useEditMode, useGetIsNew, useHasRemoteChange, useSetFormMeta };
+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

@@ -2398,6 +2398,9 @@ __export(src_exports, {
   addFormMeta: () => addFormMeta,
   capitalizeHeader: () => capitalizeHeader,
   getHelperTextProps: () => getHelperTextProps,
+  getIsFirstRightPinnedColumn: () => getIsFirstRightPinnedColumn,
+  getIsLastLeftPinnedColumn: () => getIsLastLeftPinnedColumn,
+  getTotalRight: () => getTotalRight,
   leftCellShadow: () => leftCellShadow,
   prependSelectColumn: () => prependSelectColumn,
   removeFormMeta: () => removeFormMeta,
@@ -2524,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");
@@ -2553,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"));
 
@@ -2591,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 });
@@ -2602,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");
@@ -2621,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;
   }
 
@@ -2647,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);
   }
@@ -2665,9 +2724,9 @@ function HeaderContent({ header, table }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderDiv, { children: [
     (0, import_react_table2.flexRender)(header.column.columnDef.header, header.getContext()),
     (_a = {
-      asc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_up }),
-      desc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_down }),
-      none: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_down })
+      asc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_up, style: { flexShrink: 0 } }),
+      desc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_down, style: { flexShrink: 0 } }),
+      none: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, { data: import_eds_icons3.arrow_drop_down, style: { flexShrink: 0 } })
     }[header.column.getIsSorted()]) != null ? _a : null,
     table.options.enableColumnResizing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
@@ -2697,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 = {
@@ -2729,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;
@@ -2764,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;
       }
@@ -2895,6 +2954,7 @@ var import_react3 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
 
 // src/DataTable/utils.tsx
+var import_react_table3 = require("@tanstack/react-table");
 function capitalizeHeader(context) {
   const header = context.header.id;
   return header.charAt(0).toUpperCase() + header.slice(1);
@@ -3013,7 +3073,7 @@ function TableHeader({ table, sticky }) {
 }
 
 // src/DataTable/DataTable.tsx
-var import_react_table3 = require("@tanstack/react-table");
+var import_react_table4 = require("@tanstack/react-table");
 var import_react7 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
 
@@ -3398,7 +3458,12 @@ 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 table = (0, import_react_table3.useReactTable)({
+  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_table4.useReactTable)({
     columns: prependSelectColumn(columns, props.rowSelection),
     data,
     globalFilterFn: enableGlobalFilter(fuzzyFilter),
@@ -3407,7 +3472,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 }) => {
@@ -3423,12 +3489,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,
-    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)(),
+    enablePinning: props.columnPinning !== void 0 && (typeof props.columnPinning === "boolean" ? props.columnPinning : props.columnPinning.enable),
+    getFilteredRowModel: enableGlobalFilter((0, import_react_table4.getFilteredRowModel)()),
+    getCoreRowModel: (0, import_react_table4.getCoreRowModel)(),
+    getExpandedRowModel: (0, import_react_table4.getExpandedRowModel)(),
+    getSortedRowModel: (0, import_react_table4.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),
@@ -3715,12 +3783,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)(
@@ -4077,6 +4145,9 @@ var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_r
   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);
   }
@@ -2618,9 +2674,9 @@ function HeaderContent({ header, table }) {
   return /* @__PURE__ */ jsxs3(HeaderDiv, { children: [
     flexRender2(header.column.columnDef.header, header.getContext()),
     (_a = {
-      asc: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_up }),
-      desc: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_down }),
-      none: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_down })
+      asc: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_up, style: { flexShrink: 0 } }),
+      desc: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_down, style: { flexShrink: 0 } }),
+      none: /* @__PURE__ */ jsx6(Icon3, { data: arrow_drop_down, style: { flexShrink: 0 } })
     }[header.column.getIsSorted()]) != null ? _a : null,
     table.options.enableColumnResizing && /* @__PURE__ */ jsx6(
       "div",
@@ -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;
       }
@@ -2850,6 +2906,7 @@ import { useRef as useRef2, useState as useState3 } from "react";
 import styled10 from "styled-components";
 
 // src/DataTable/utils.tsx
+import { createColumnHelper } from "@tanstack/react-table";
 function capitalizeHeader(context) {
   const header = context.header.id;
   return header.charAt(0).toUpperCase() + header.slice(1);
@@ -2961,10 +3018,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 +3036,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 +3047,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 +3104,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 +3127,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 +3246,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 +3284,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 +3416,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 +3430,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 +3447,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),
@@ -3676,12 +3741,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(
@@ -4037,6 +4102,9 @@ export {
   addFormMeta,
   capitalizeHeader,
   getHelperTextProps,
+  getIsFirstRightPinnedColumn,
+  getIsLastLeftPinnedColumn,
+  getTotalRight,
   leftCellShadow,
   prependSelectColumn,
   removeFormMeta,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "3.4.0",
+  "version": "3.5.1-beta.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,7 +20,7 @@
     "@equinor/eds-icons": "^0.19.1",
     "@equinor/eds-tokens": "^0.9.1",
     "@tanstack/match-sorter-utils": "^8.8.4",
-    "@tanstack/react-table": "^8.9.1",
+    "@tanstack/react-table": "^8.9.8",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "tsup": "^6.7.0",
     "type-fest": "^3.11.0"
@@ -46,7 +46,7 @@
     "eslint-config-custom": "*",
     "storybook": "^7.0.0-alpha.38",
     "tsconfig": "*",
-    "typescript": "^4.5.2"
+    "typescript": "^5.2.2"
   },
   "publishConfig": {
     "access": "public"