@equinor/apollo-components 3.1.8 → 3.2.0

package/dist/index.js

@@ -2337,6 +2337,7 @@ var src_exports = {};
 __export(src_exports, {
   AppShell: () => AppShell,
   AppSidebar: () => AppSidebar,
+  CheckboxCell: () => CheckboxCell,
   ChipsCell: () => ChipsCell,
   ColumnSelect: () => ColumnSelect,
   DataTable: () => DataTable,
@@ -2473,6 +2474,19 @@ function AppSidebar() {
   });
 }
 
+// src/cells/CheckboxCell.tsx
+var import_eds_core_react3 = require("@equinor/eds-core-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function CheckboxCell(context) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_eds_core_react3.Checkbox, {
+    enterKeyHint: "next",
+    "aria-label": "readonly",
+    readOnly: true,
+    checked: context.getValue(),
+    disabled: true
+  });
+}
+
 // src/cells/ChipsCell.tsx
 var import_eds_tokens2 = require("@equinor/eds-tokens");
 var import_styled_components3 = __toESM(require("styled-components"));
@@ -2494,7 +2508,7 @@ function stopPropagation(handler) {
 }
 
 // src/cells/ChipsCell.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var ChipsWrapper = import_styled_components3.default.div`
   display: flex;
   align-items: center;
@@ -2513,8 +2527,8 @@ var Chip = import_styled_components3.default.div`
 `;
 var ChipsCell = (props) => {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChipsWrapper, {
-    children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chip, {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChipsWrapper, {
+    children: (_a = props.values) == null ? void 0 : _a.map((value) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Chip, {
       backgroundColor: stringToHslColor(value),
       children: value
     }, value))
@@ -2522,12 +2536,12 @@ var ChipsCell = (props) => {
 };
 
 // src/cells/DynamicCell.tsx
-var import_eds_core_react4 = require("@equinor/eds-core-react");
+var import_eds_core_react5 = require("@equinor/eds-core-react");
 var import_react_table = require("@tanstack/react-table");
 var import_styled_components5 = __toESM(require("styled-components"));
 
 // src/cells/StickyCell.tsx
-var import_eds_core_react3 = require("@equinor/eds-core-react");
+var import_eds_core_react4 = require("@equinor/eds-core-react");
 var import_styled_components4 = __toESM(require("styled-components"));
 var leftCellShadow = import_styled_components4.css`
   &:before {
@@ -2540,7 +2554,7 @@ var leftCellShadow = import_styled_components4.css`
     width: 1px;
   }
 `;
-var StickyCell = (0, import_styled_components4.default)(import_eds_core_react3.Table.Cell)`
+var StickyCell = (0, import_styled_components4.default)(import_eds_core_react4.Table.Cell)`
   position: sticky;
   right: 0;
   top: 0;
@@ -2553,24 +2567,24 @@ var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
 `;
 
 // src/cells/DynamicCell.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var StyledStickyCell = (0, import_styled_components5.default)(StickyCell)`
   background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
-var StyledCell = (0, import_styled_components5.default)(import_eds_core_react4.Table.Cell)`
+var StyledCell = (0, import_styled_components5.default)(import_eds_core_react5.Table.Cell)`
   background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
 function DynamicCell({ cell, highlight, getStickyCellColor }) {
   var _a;
   const cellContent = (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
   if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledStickyCell, {
+    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_runtime4.jsx)(StyledCell, {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCell, {
     "data-column": cell.column.id,
     backgroundColor: highlight ? "#d5eaf4" : void 0,
     children: cellContent
@@ -2578,18 +2592,42 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
 }
 
 // src/cells/HeaderCell.tsx
-var import_eds_core_react5 = require("@equinor/eds-core-react");
+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_react_table2 = require("@tanstack/react-table");
 var import_styled_components6 = __toESM(require("styled-components"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var HeaderDiv = import_styled_components6.default.div`
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  z-index: 5;
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var resizeCellStyle = import_styled_components6.css`
+  .resizer {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 4px;
+    opacity: 0;
+    background: #aaa;
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+  }
+
+  .resizer.isResizing {
+    background: ${import_eds_tokens3.tokens.colors.interactive.focus.hex};
+    opacity: 1;
+  }
+
+  &:hover .resizer {
+    opacity: 1;
+  }
+`;
+var StickyCell2 = (0, import_styled_components6.default)(StickyHeaderCell)`
+  ${resizeCellStyle}
+`;
+var Cell2 = (0, import_styled_components6.default)(import_eds_core_react6.Table.Cell)`
+  ${resizeCellStyle}
 `;
-var HeaderCell = ({ header }) => {
+var HeaderCell = ({ header, table }) => {
   var _a;
   const style = {
     width: header.column.getSize(),
@@ -2602,37 +2640,54 @@ var HeaderCell = ({ header }) => {
     colSpan: header.colSpan
   };
   if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StickyHeaderCell, {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StickyCell2, {
       ...cellProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeaderContent, {
-        header
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, {
+        header,
+        table
       })
     }, header.id);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Table.Cell, {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Cell2, {
     ...cellProps,
-    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeaderContent, {
-      header
+    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderContent, {
+      header,
+      table
     })
   }, header.id);
 };
-function HeaderContent({ header }) {
+var HeaderDiv = import_styled_components6.default.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  z-index: 5;
+`;
+function HeaderContent({ header, table }) {
   if (header.isPlaceholder)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(HeaderDiv, {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(HeaderDiv, {
     children: [
       (0, import_react_table2.flexRender)(header.column.columnDef.header, header.getContext()),
       {
-        asc: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Icon, {
+        asc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, {
           data: import_eds_icons3.arrow_drop_up
         }),
-        desc: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Icon, {
+        desc: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, {
           data: import_eds_icons3.arrow_drop_down
         }),
-        none: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Icon, {
+        none: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Icon, {
           data: import_eds_icons3.arrow_drop_down
         })
-      }[header.column.getIsSorted()] ?? null
+      }[header.column.getIsSorted()] ?? null,
+      table.options.enableColumnResizing && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+        onClick: (e) => e.stopPropagation(),
+        className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
+        style: {
+          transform: table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)` : ""
+        }
+      })
     ]
   });
 }
@@ -2650,14 +2705,14 @@ function getSort({ column }) {
 }
 
 // src/cells/HierarchyCell.tsx
-var import_eds_tokens4 = require("@equinor/eds-tokens");
+var import_eds_tokens5 = require("@equinor/eds-tokens");
 var import_styled_components8 = __toESM(require("styled-components"));
 
 // src/cells/TypographyCustom.tsx
-var import_eds_core_react6 = require("@equinor/eds-core-react");
-var import_eds_tokens3 = require("@equinor/eds-tokens");
+var import_eds_core_react7 = require("@equinor/eds-core-react");
+var import_eds_tokens4 = require("@equinor/eds-tokens");
 var import_styled_components7 = __toESM(require("styled-components"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var truncateStyle = {
   overflow: "hidden",
   whiteSpace: "nowrap",
@@ -2666,8 +2721,8 @@ var truncateStyle = {
 var TypographyCustom = (props) => {
   const { truncate, enableShowAllOnHover, style: styleFromProps, ...edsTypographyProps } = props;
   if (enableShowAllOnHover)
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HoverCapture, {
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Typography, {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HoverCapture, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react7.Typography, {
         ...edsTypographyProps,
         style: {
           ...styleFromProps,
@@ -2676,20 +2731,20 @@ var TypographyCustom = (props) => {
       })
     });
   if (truncate)
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Typography, {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react7.Typography, {
       ...edsTypographyProps,
       style: {
         ...styleFromProps,
         ...truncateStyle
       }
     });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react6.Typography, {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react7.Typography, {
     ...edsTypographyProps,
     style: styleFromProps
   });
 };
 var HoverCapture = import_styled_components7.default.div`
-  height: ${import_eds_tokens3.tokens.typography.table.cell_text.lineHeight};
+  height: ${import_eds_tokens4.tokens.typography.table.cell_text.lineHeight};
   background-color: inherit;
 
   position: relative;
@@ -2715,7 +2770,7 @@ var HoverCapture = import_styled_components7.default.div`
 `;
 
 // src/cells/HierarchyCell.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
   height: 100%;
   display: flex;
@@ -2724,11 +2779,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_tokens4.tokens.colors.infographic.primary__moss_green_34.hex};
+      border-left: 3px solid ${import_eds_tokens5.tokens.colors.infographic.primary__moss_green_34.hex};
       gap: 0.5rem;
       .--divider {
         width: ${depth * 32}px;
-        background-color: ${import_eds_tokens4.tokens.colors.infographic.primary__moss_green_34.hex};
+        background-color: ${import_eds_tokens5.tokens.colors.infographic.primary__moss_green_34.hex};
         height: 3px;
         border-radius: 0 5px 5px 0;
       }
@@ -2736,11 +2791,11 @@ var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
 `;
 function HierarchyCell(cell, options = {}) {
   var _a, _b;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CellWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CellWrapper, {
     depth: ((_a = options.getRowDepth) == null ? void 0 : _a.call(options)) ?? cell.row.depth,
     expanded: cell.row.getIsExpanded(),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", {
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {
         className: "--divider"
       }),
       ((_b = options.getDisplayName) == null ? void 0 : _b.call(options)) ?? cell.getValue()
@@ -2749,25 +2804,25 @@ function HierarchyCell(cell, options = {}) {
 }
 
 // src/cells/PopoverCell.tsx
-var import_eds_core_react7 = require("@equinor/eds-core-react");
+var import_eds_core_react8 = require("@equinor/eds-core-react");
 var import_react2 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function PopoverCell(props) {
   const [open, setOpen] = (0, import_react2.useState)(false);
   const anchorRef = (0, import_react2.useRef)(null);
   const handleClick = () => setOpen(!open);
   const handleClose = () => setOpen(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", {
     style: { position: "relative" },
     ref: anchorRef,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TypographyCustom, {
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TypographyCustom, {
         onClick: stopPropagation(handleClick),
         style: { cursor: "pointer" },
         truncate: true,
         children: String(props.value)
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover, {
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_eds_core_react8.Popover, {
         id: props.id,
         open,
         "aria-controls": "expand cell",
@@ -2775,13 +2830,13 @@ function PopoverCell(props) {
         onClose: handleClose,
         placement: "bottom",
         children: [
-          props.title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Popover.Title, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Popover.Header, {
+          props.title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Title, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Header, {
               children: props.title
             })
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Popover.Content, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Typography, {
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Content, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Typography, {
               children: String(props.value)
             })
           })
@@ -2792,10 +2847,10 @@ function PopoverCell(props) {
 }
 
 // src/cells/SelectColumnDef.tsx
-var import_eds_core_react8 = require("@equinor/eds-core-react");
+var import_eds_core_react9 = require("@equinor/eds-core-react");
 var import_eds_icons4 = require("@equinor/eds-icons");
 var import_styled_components9 = __toESM(require("styled-components"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var CellWrapper2 = import_styled_components9.default.div`
   display: flex;
   align-items: center;
@@ -2808,8 +2863,8 @@ function SelectColumnDef(props) {
   return {
     id: "select",
     size: props.includeExpansionButton ? 96 : 48,
-    header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CellWrapper2, {
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Checkbox, {
+    header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CellWrapper2, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Checkbox, {
         checked: table.getIsAllRowsSelected(),
         indeterminate: table.getIsSomeRowsSelected(),
         "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
@@ -2818,28 +2873,28 @@ function SelectColumnDef(props) {
     }) : null,
     cell: ({ table, row }) => {
       const paddingLeft = "0px";
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CellWrapper2, {
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CellWrapper2, {
         paddingLeft,
         rowDepth: row.depth,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, {
           children: [
-            selectionMode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Radio, {
+            selectionMode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Radio, {
               checked: row.getIsSelected(),
               "aria-label": `Select row ${row.id}`,
               onChange: stopPropagation(row.getToggleSelectedHandler())
-            }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Checkbox, {
+            }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Checkbox, {
               checked: row.getIsSelected(),
               indeterminate: row.getIsSomeSelected(),
               "aria-label": `Select row ${row.id}`,
               onChange: stopPropagation(row.getToggleSelectedHandler())
             }),
-            row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Button, {
+            row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Button, {
               variant: "ghost_icon",
               color: "secondary",
               "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
               onClick: stopPropagation(row.getToggleExpandedHandler()),
               style: { cursor: "pointer" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Icon, {
                 data: row.getIsExpanded() ? import_eds_icons4.chevron_up : import_eds_icons4.chevron_down
               })
             })
@@ -2851,7 +2906,7 @@ function SelectColumnDef(props) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_eds_core_react9 = require("@equinor/eds-core-react");
+var import_eds_core_react10 = require("@equinor/eds-core-react");
 var import_eds_icons5 = require("@equinor/eds-icons");
 var import_react3 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
@@ -2886,7 +2941,7 @@ function getFunctionValueOrDefault(valueOrFn, fnProps, defaultValue) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ColumnSelectContent = import_styled_components10.default.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -2902,12 +2957,12 @@ function ColumnSelect({ table }) {
   const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
   const referenceElement = (0, import_react3.useRef)(null);
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Tooltip, {
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Tooltip, {
         title: "Select columns",
         placement: "left",
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Button, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Button, {
           "aria-haspopup": true,
           id: "column-select-anchor",
           "aria-controls": "column-select-popover",
@@ -2915,29 +2970,29 @@ function ColumnSelect({ table }) {
           ref: referenceElement,
           variant: "ghost_icon",
           onClick: () => setIsOpen(true),
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Icon, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, {
             name: "view_column",
             data: import_eds_icons5.view_column
           })
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_eds_core_react9.Popover, {
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover, {
         open: isOpen,
         id: "column-select-popover",
         anchorEl: referenceElement.current,
         placement: "bottom-end",
         onClose: () => setIsOpen(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_eds_core_react9.Popover.Header, {
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover.Header, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Popover.Title, {
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Popover.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Button, {
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Button, {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Icon, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Icon, {
                   name: "close",
                   data: import_eds_icons5.close,
                   size: 24
@@ -2945,22 +3000,22 @@ function ColumnSelect({ table }) {
               })
             ]
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_eds_core_react9.Popover.Content, {
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Popover.Content, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColumnSelectContent, {
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Checkbox, {
+                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Checkbox, {
                     checked: column.getIsVisible(),
                     label: getColumnHeader(column),
                     onChange: column.getToggleVisibilityHandler()
                   }, column.id);
                 })
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Divider, {
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Divider, {
                 variant: "small"
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionsWrapper, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Button, {
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ActionsWrapper, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Button, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -2977,14 +3032,15 @@ function ColumnSelect({ table }) {
 }
 
 // src/DataTable/components/TableHeader.tsx
-var import_eds_core_react10 = require("@equinor/eds-core-react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_eds_core_react11 = require("@equinor/eds-core-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function TableHeader({ table, sticky }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Head, {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Head, {
     sticky,
-    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Row, {
-      children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HeaderCell, {
-        header
+    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Row, {
+      children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HeaderCell, {
+        header,
+        table
       }, header.id))
     }, headerGroup.id))
   });
@@ -2996,24 +3052,24 @@ var import_react7 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/DataTable/components/BasicTable.tsx
-var import_eds_core_react14 = require("@equinor/eds-core-react");
+var import_eds_core_react15 = require("@equinor/eds-core-react");
 
 // src/DataTable/components/PlaceholderRow.tsx
-var import_eds_core_react11 = require("@equinor/eds-core-react");
+var import_eds_core_react12 = require("@equinor/eds-core-react");
 var import_styled_components11 = __toESM(require("styled-components"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var PlaceholderTextWrapper = import_styled_components11.default.div`
   display: flex;
   justify-content: center;
 `;
 function PlaceholderRow({ isLoading }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Row, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Cell, {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Row, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Cell, {
       colSpan: 100,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlaceholderTextWrapper, {
-        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.DotProgress, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlaceholderTextWrapper, {
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.DotProgress, {
           color: "primary"
-        }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Typography, {
+        }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Typography, {
           children: "No data available"
         })
       })
@@ -3022,18 +3078,18 @@ function PlaceholderRow({ isLoading }) {
 }
 
 // src/DataTable/components/TableBody.tsx
-var import_eds_core_react12 = require("@equinor/eds-core-react");
+var import_eds_core_react13 = require("@equinor/eds-core-react");
 var import_styled_components12 = __toESM(require("styled-components"));
-var TableBody = (0, import_styled_components12.default)(import_eds_core_react12.Table.Body)`
+var TableBody = (0, import_styled_components12.default)(import_eds_core_react13.Table.Body)`
   // The following attribute are important for fixed column width
   // CHANGE THES WITH CAUTION
   background: inherit;
 `;
 
 // src/DataTable/components/TableRow.tsx
-var import_eds_core_react13 = require("@equinor/eds-core-react");
+var import_eds_core_react14 = require("@equinor/eds-core-react");
 var import_styled_components13 = __toESM(require("styled-components"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function TableRow({
   row,
   rowConfig,
@@ -3043,7 +3099,7 @@ function TableRow({
 }) {
   var _a;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
-  const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledTableRow, {
+  const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StyledTableRow, {
     active: row.getIsSelected(),
     "data-index": index,
     ref: measureElement,
@@ -3059,7 +3115,7 @@ function TableRow({
     onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
     children: row.getVisibleCells().map((cell) => {
       var _a2;
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DynamicCell, {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DynamicCell, {
         cell,
         getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
         highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
@@ -3068,7 +3124,7 @@ function TableRow({
   });
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
-var StyledTableRow = (0, import_styled_components13.default)(import_eds_core_react13.Table.Row)`
+var StyledTableRow = (0, import_styled_components13.default)(import_eds_core_react14.Table.Row)`
   /* Background color must be inherited here. Does not work with inline styling */
   ${({ active }) => active ? "" : "background-color: inherit;"}
 `;
@@ -3081,7 +3137,7 @@ function handleRowEvent(row, handler) {
 }
 
 // src/DataTable/components/BasicTable.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function BasicTable({
   table,
   rowConfig,
@@ -3091,22 +3147,22 @@ function BasicTable({
   tableCaption
 }) {
   const tableRows = table.getRowModel().rows;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_eds_core_react14.Table, {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_eds_core_react15.Table, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Table.Caption, {
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Table.Caption, {
         hidden: true,
         children: tableCaption
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableHeader, {
         sticky: stickyHeader,
         table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TableBody, {
-        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TableRow, {
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableBody, {
+        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TableRow, {
           row,
           rowConfig,
           cellConfig
-        }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PlaceholderRow, {
+        }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PlaceholderRow, {
           isLoading
         })
       })
@@ -3115,20 +3171,20 @@ function BasicTable({
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_eds_core_react16 = require("@equinor/eds-core-react");
+var import_eds_core_react17 = require("@equinor/eds-core-react");
 var import_eds_icons7 = require("@equinor/eds-icons");
 var import_styled_components15 = __toESM(require("styled-components"));
 
 // src/DataTable/filters/DebouncedInput.tsx
-var import_eds_core_react15 = require("@equinor/eds-core-react");
+var import_eds_core_react16 = require("@equinor/eds-core-react");
 var import_eds_icons6 = require("@equinor/eds-icons");
 var import_react4 = require("react");
 var import_styled_components14 = __toESM(require("styled-components"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Wrapper3 = import_styled_components14.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components14.default)(import_eds_core_react15.Button)`
+var CloseButton = (0, import_styled_components14.default)(import_eds_core_react16.Button)`
   width: 24px;
   height: 24px;
 `;
@@ -3149,21 +3205,21 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Wrapper3, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Input, {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Wrapper3, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Icon, {
+      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Icon, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Tooltip, {
+      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Tooltip, {
         title: "Clear input",
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CloseButton, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Icon, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Icon, {
             name: import_eds_icons6.close.name,
             data: import_eds_icons6.close,
             size: 18
@@ -3186,7 +3242,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TableBannerWrapper = import_styled_components15.default.div`
   display: flex;
   align-items: center;
@@ -3207,14 +3263,14 @@ function TableBanner({
   globalFilter
 }) {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(TableBannerWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TableBannerWrapper, {
     className: "--table-caption",
     padding: bannerConfig == null ? void 0 : bannerConfig.padding,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(FilterContainer, {
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(FilterContainer, {
         className: "--filter-container-left",
         children: [
-          (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Typography, {
+          (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_eds_core_react17.Typography, {
             variant: "h3",
             as: "h2",
             children: tableCaption
@@ -3222,20 +3278,20 @@ function TableBanner({
           (_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
         ]
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FilterContainer, {
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FilterContainer, {
         className: "--filter-container-right",
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, {
           children: [
-            (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DebouncedInput, {
+            (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DebouncedInput, {
               value: globalFilter.state,
               icon: import_eds_icons7.search,
               placeholder: bannerConfig.globalFilterPlaceholder ?? "Search all columns",
               onChange: (value) => globalFilter.onChange(String(value))
             }),
-            (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ColumnSelect, {
+            (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColumnSelect, {
               table
             }),
-            (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", {
+            (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", {
               children: [
                 table.options.data.length.toLocaleString(),
                 " /",
@@ -3252,25 +3308,25 @@ function TableBanner({
 }
 
 // src/DataTable/components/VirtualTable.tsx
-var import_eds_core_react18 = require("@equinor/eds-core-react");
+var import_eds_core_react19 = require("@equinor/eds-core-react");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/DataTable/components/PaddingRow.tsx
-var import_eds_core_react17 = require("@equinor/eds-core-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_eds_core_react18 = require("@equinor/eds-core-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_eds_core_react17.Table.Row, {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Row, {
     style: { pointerEvents: "none" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_eds_core_react17.Table.Cell, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Cell, {
       style: { height: `${props.height}px` }
     })
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function VirtualTable({
   table,
   rowConfig,
@@ -3290,34 +3346,34 @@ function VirtualTable({
   const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_eds_core_react18.Table, {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_eds_core_react19.Table, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_eds_core_react18.Table.Caption, {
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Caption, {
         hidden: true,
         children: props.tableCaption
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TableBody, {
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TableBody, {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaddingRow, {
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, {
             height: paddingTop
           }),
           rows.length ? virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
-            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableRow, {
+            return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableRow, {
               row,
               rowConfig,
               cellConfig,
               index: virtualRow.index,
               measureElement: rowVirtualizer.measureElement
             }, row.id);
-          }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlaceholderRow, {
+          }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlaceholderRow, {
             isLoading: props.isLoading
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PaddingRow, {
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -3363,7 +3419,7 @@ function useForceRerender() {
 }
 
 // src/DataTable/DataTable.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function canUseContainStrict(height) {
   if (!height)
     return false;
@@ -3439,13 +3495,15 @@ function DataTable(props) {
     defaultColumn: {
       cell: ({ cell }) => {
         const truncateMode = getFunctionValueOrDefault(cellConfig == null ? void 0 : cellConfig.truncateMode, cell, "hover");
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TypographyCustom, {
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TypographyCustom, {
           truncate: truncateMode === "hover",
           enableShowAllOnHover: true,
           children: cell.getValue()
         });
       }
     },
+    enableColumnResizing: Boolean(props.columnResizing),
+    columnResizeMode: typeof props.columnResizing === "boolean" ? "onChange" : props.columnResizing,
     enableSorting: sorting == null ? void 0 : sorting.enableSorting,
     manualSorting: sorting == null ? void 0 : sorting.manualSorting,
     enableExpanding: Boolean(props.expansion),
@@ -3481,18 +3539,18 @@ function DataTable(props) {
     if (Boolean(tableContainerRef.current))
       forceRerender();
   }, [tableContainerRef.current === null]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DataTableWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DataTableWrapper, {
     height: props == null ? void 0 : props.height,
     width: props == null ? void 0 : props.width,
     tableLayout: props == null ? void 0 : props.tableLayout,
     children: [
-      props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableBanner, {
+      props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TableBanner, {
         table,
         bannerConfig: props.bannerConfig,
         globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
         tableCaption: props.tableCaption
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", {
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
         ...props.tableContainerProps,
         className: "--table-container " + (((_q = props.tableContainerProps) == null ? void 0 : _q.className) ?? ""),
         onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
@@ -3505,7 +3563,7 @@ function DataTable(props) {
             }
           }
         },
-        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VirtualTable, {
+        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(VirtualTable, {
           containerRef: tableContainerRef,
           tableCaption: props.tableCaption,
           table,
@@ -3513,7 +3571,7 @@ function DataTable(props) {
           cellConfig,
           isLoading,
           stickyHeader: props.stickyHeader
-        }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BasicTable, {
+        }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BasicTable, {
           tableCaption: props.tableCaption,
           table,
           rowConfig,
@@ -3527,7 +3585,7 @@ function DataTable(props) {
 }
 
 // src/form-cells/EditableCheckboxCell.tsx
-var import_eds_core_react19 = require("@equinor/eds-core-react");
+var import_eds_core_react20 = require("@equinor/eds-core-react");
 var import_react_hook_form2 = require("react-hook-form");
 
 // src/form-meta/utils.tsx
@@ -3565,20 +3623,20 @@ function addFormMeta(withoutFormMeta) {
 }
 
 // src/form-cells/EditableCheckboxCell.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function EditableCheckboxCell(context) {
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_eds_core_react19.Checkbox, {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_eds_core_react20.Checkbox, {
       enterKeyHint: "next",
       "aria-label": "readonly",
       readOnly: true,
       checked: context.getValue(),
       disabled: true
     });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_hook_form2.Controller, {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_hook_form2.Controller, {
     name: context.column.id,
-    render: ({ field: { value, ...field } }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_eds_core_react19.Checkbox, {
+    render: ({ field: { value, ...field } }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_eds_core_react20.Checkbox, {
       enterKeyHint: "send",
       "aria-label": "editable",
       checked: value,
@@ -3588,15 +3646,15 @@ function EditableCheckboxCell(context) {
 }
 
 // src/form-cells/EditableDateCell.tsx
-var import_eds_core_react21 = require("@equinor/eds-core-react");
+var import_eds_core_react22 = require("@equinor/eds-core-react");
 var import_react8 = require("react");
 var import_react_hook_form3 = require("react-hook-form");
 var import_styled_components17 = __toESM(require("styled-components"));
 
 // src/form-cells/utils.tsx
-var import_eds_core_react20 = require("@equinor/eds-core-react");
+var import_eds_core_react21 = require("@equinor/eds-core-react");
 var import_eds_icons8 = require("@equinor/eds-icons");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function getHelperTextProps({
   error,
   warning,
@@ -3606,7 +3664,7 @@ function getHelperTextProps({
     return {
       variant: "error",
       helperText: error.message,
-      helperIcon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_eds_core_react20.Icon, {
+      helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, {
         data: import_eds_icons8.error_filled,
         size: 16
       })
@@ -3615,7 +3673,7 @@ function getHelperTextProps({
     return {
       variant: "warning",
       helperText: warning.message,
-      helperIcon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_eds_core_react20.Icon, {
+      helperIcon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_eds_core_react21.Icon, {
         data: import_eds_icons8.warning_filled,
         size: 16
       })
@@ -3633,7 +3691,7 @@ function stopPropagation2(handler) {
 }
 
 // src/form-cells/EditableDateCell.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function EditableDateCell(props) {
   const { dateStringFormatter, ...context } = props;
   const rawValue = context.getValue();
@@ -3643,13 +3701,13 @@ function EditableDateCell(props) {
     [rawValue, dateStringFormatter]
   );
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TypographyCustom, {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TypographyCustom, {
       truncate: true,
       children: formattedValue
     });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_hook_form3.Controller, {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_hook_form3.Controller, {
     name: context.column.id,
-    render: ({ field: { value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(InlineTextField, {
+    render: ({ field: { value, onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InlineTextField, {
       id: context.column.id,
       type: "date",
       autoComplete: "none",
@@ -3666,7 +3724,7 @@ function parseISODate(dateString) {
   const dateWithoutOffset = new Date(date.getTime() - offset * 60 * 1e3);
   return dateWithoutOffset.toISOString().split("T")[0];
 }
-var InlineTextField = (0, import_styled_components17.default)(import_eds_core_react21.TextField)`
+var InlineTextField = (0, import_styled_components17.default)(import_eds_core_react22.TextField)`
   /* 
   TODO: Improve input based on feedback from UX
   & > div {
@@ -3690,9 +3748,9 @@ var InlineTextField = (0, import_styled_components17.default)(import_eds_core_re
 `;
 
 // src/form-cells/EditableDropdownSingleCell.tsx
-var import_eds_core_react22 = require("@equinor/eds-core-react");
+var import_eds_core_react23 = require("@equinor/eds-core-react");
 var import_react_hook_form4 = require("react-hook-form");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function buildEmptyOption() {
   return { label: "", value: "" };
 }
@@ -3700,15 +3758,15 @@ function EditableDropdownSingleCell(props) {
   const { options, ...context } = props;
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TypographyCustom, {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TypographyCustom, {
       truncate: true,
       children: context.getValue()
     });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_hook_form4.Controller, {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_hook_form4.Controller, {
     name: context.column.id,
     render: ({ field: { value, onChange, ...field } }) => {
       const selectedOption = options.find((option) => option.value === value) ?? buildEmptyOption();
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_eds_core_react22.Autocomplete, {
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_eds_core_react23.Autocomplete, {
         label: "",
         selectedOptions: selectedOption && [selectedOption],
         options,
@@ -3727,21 +3785,21 @@ function EditableDropdownSingleCell(props) {
 }
 
 // src/form-cells/EditableNumberCell.tsx
-var import_eds_core_react23 = require("@equinor/eds-core-react");
+var import_eds_core_react24 = require("@equinor/eds-core-react");
 var import_react_hook_form5 = require("react-hook-form");
 var import_styled_components18 = __toESM(require("styled-components"));
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function EditableNumberCell(context) {
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TypographyCustom, {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TypographyCustom, {
       truncate: true,
       children: context.getValue()
     });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_hook_form5.Controller, {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_hook_form5.Controller, {
     name: context.column.id,
-    render: ({ field: { onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InlineTextField2, {
+    render: ({ field: { onChange, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InlineTextField2, {
         id: context.column.id,
         type: "number",
         autoComplete: "none",
@@ -3752,7 +3810,7 @@ function EditableNumberCell(context) {
     })
   });
 }
-var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_react23.TextField)`
+var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_react24.TextField)`
   /* 
   TODO: Improve input based on feedback from UX
   & > div {
@@ -3776,12 +3834,12 @@ var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_r
 `;
 
 // src/form-cells/EditableTextAreaCell.tsx
-var import_eds_core_react24 = require("@equinor/eds-core-react");
+var import_eds_core_react25 = require("@equinor/eds-core-react");
 var import_eds_icons9 = require("@equinor/eds-icons");
 var import_react9 = require("react");
 var import_react_hook_form6 = require("react-hook-form");
 var import_styled_components19 = __toESM(require("styled-components"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function EditableTextAreaCell(props) {
   const { title, ...context } = props;
   const [textareaValue, setTextareaValue] = (0, import_react9.useState)(context.getValue());
@@ -3789,35 +3847,35 @@ function EditableTextAreaCell(props) {
   const editMode = useEditMode();
   const name = context.column.id;
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PopoverCell, {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PopoverCell, {
       id: name + "popover",
       value: context.getValue(),
       title
     });
   const openDialog = () => setOpen(true);
   const closeDialog = () => setOpen(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_hook_form6.Controller, {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_hook_form6.Controller, {
     name,
-    render: ({ field: { onChange, ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, {
+    render: ({ field: { onChange, ref, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", {
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", {
           style: {
             display: "flex",
             alignItems: "center",
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledTextField, {
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledTextField, {
               id: field.name,
               onChange,
               ref,
               ...field,
               ...getHelperTextProps({ error })
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, {
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, {
               variant: "ghost_icon",
               onClick: stopPropagation2(openDialog),
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Icon, {
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Icon, {
                 data: import_eds_icons9.arrow_up,
                 size: 24,
                 style: { transform: "rotateZ(45deg)" }
@@ -3825,7 +3883,7 @@ function EditableTextAreaCell(props) {
             })
           ]
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_eds_core_react24.Dialog, {
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_eds_core_react25.Dialog, {
           open,
           onClose: () => {
             closeDialog();
@@ -3834,13 +3892,13 @@ function EditableTextAreaCell(props) {
           isDismissable: true,
           style: { width: "min(50rem, calc(100vw - 4rem))" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Dialog.Header, {
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Dialog.Title, {
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Header, {
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Title, {
                 children: title
               })
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Dialog.Content, {
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.TextField, {
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Dialog.Content, {
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.TextField, {
                 style: {
                   maxWidth: "100%",
                   marginTop: "1rem"
@@ -3855,17 +3913,17 @@ function EditableTextAreaCell(props) {
                 }
               })
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_eds_core_react24.Dialog.Actions, {
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_eds_core_react25.Dialog.Actions, {
               style: { display: "flex", gap: "1rem" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Button, {
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Button, {
                   onClick: () => {
                     closeDialog();
                     onChange(textareaValue);
                   },
                   children: "Submit"
                 }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_eds_core_react24.Button, {
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_eds_core_react25.Button, {
                   variant: "ghost",
                   onClick: () => {
                     closeDialog();
@@ -3881,7 +3939,7 @@ function EditableTextAreaCell(props) {
     })
   });
 }
-var StyledTextField = (0, import_styled_components19.default)(import_eds_core_react24.TextField)`
+var StyledTextField = (0, import_styled_components19.default)(import_eds_core_react25.TextField)`
   & input {
     padding-right: 40px;
     letter-spacing: 0;
@@ -3890,7 +3948,7 @@ var StyledTextField = (0, import_styled_components19.default)(import_eds_core_re
     text-overflow: ellipsis;
   }
 `;
-var IconButton = (0, import_styled_components19.default)(import_eds_core_react24.Button)`
+var IconButton = (0, import_styled_components19.default)(import_eds_core_react25.Button)`
   position: absolute;
   height: 32px;
   width: 32px;
@@ -3898,20 +3956,20 @@ var IconButton = (0, import_styled_components19.default)(import_eds_core_react24
 `;
 
 // src/form-cells/EditableTextFieldCell.tsx
-var import_eds_core_react25 = require("@equinor/eds-core-react");
+var import_eds_core_react26 = require("@equinor/eds-core-react");
 var import_react_hook_form7 = require("react-hook-form");
 var import_styled_components20 = __toESM(require("styled-components"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function EditableTextFieldCell(context) {
   const editMode = useEditMode();
   if (!editMode)
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TypographyCustom, {
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TypographyCustom, {
       truncate: true,
       children: context.getValue()
     });
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_hook_form7.Controller, {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_hook_form7.Controller, {
     name: context.column.id,
-    render: ({ field: { value, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InlineTextField3, {
+    render: ({ field: { value, ...field }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InlineTextField3, {
       id: context.column.id,
       autoComplete: "none",
       value: String(value ?? ""),
@@ -3920,7 +3978,7 @@ function EditableTextFieldCell(context) {
     })
   });
 }
-var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_react25.TextField)`
+var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_react26.TextField)`
   /* 
   TODO: Improve input based on feedback from UX
   & > div {
@@ -3946,6 +4004,7 @@ var InlineTextField3 = (0, import_styled_components20.default)(import_eds_core_r
 0 && (module.exports = {
   AppShell,
   AppSidebar,
+  CheckboxCell,
   ChipsCell,
   ColumnSelect,
   DataTable,