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

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { IconData } from '@equinor/eds-icons';
 import * as react from 'react';
-import { ReactNode, ReactElement, MouseEvent, 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 { ReactNode, ReactElement, HTMLProps, MutableRefObject, Dispatch, SetStateAction, SyntheticEvent } from 'react';
+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';
@@ -83,7 +83,7 @@ interface RowConfig<T> {
      */
     rowWrapper?: TableRowWrapper<T>;
     getRowBackground?: (row: Row<T>) => string | undefined;
-    onClick?: (row: Row<T>, e: MouseEvent) => void;
+    onClick?: (row: Row<T>) => void;
     onMouseEnter?: (row: Row<T>) => void;
     onMouseLeave?: (row: Row<T>) => void;
 }
@@ -151,6 +151,9 @@ interface DataTableProps<T> {
         enableSorting?: boolean;
         manualSorting?: boolean;
     };
+    columnPinning?: boolean | (ControlledState<ColumnPinningState> & {
+        enable?: boolean;
+    });
     globalFilter?: ControlledState<string>;
     columnVisibility?: ControlledState<VisibilityState>;
     /**
@@ -179,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>>;
 };
@@ -218,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;
@@ -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);
   }
@@ -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;
       }
@@ -3064,9 +3123,9 @@ function TableRow({
         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: (e) => {
+      onClick: () => {
         var _a2;
-        return (_a2 = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a2.call(rowConfig, row, e);
+        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),
@@ -3398,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,
@@ -3407,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 }) => {
@@ -3423,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),
@@ -3715,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)(
@@ -4077,6 +4144,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);
   }
@@ -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({
@@ -3025,9 +3081,9 @@ function TableRow({
         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: (e) => {
+      onClick: () => {
         var _a2;
-        return (_a2 = rowConfig == null ? void 0 : rowConfig.onClick) == null ? void 0 : _a2.call(rowConfig, row, e);
+        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),
@@ -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),
@@ -3676,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(
@@ -4037,6 +4101,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-beta.0",
+  "version": "3.4.0-beta.1",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",