@equinor/apollo-components 1.2.1 → 1.3.0

package/dist/index.d.ts

@@ -31,7 +31,7 @@ interface DataTableConfig {
     height?: string;
     sortable?: boolean;
     virtual?: boolean;
-    enableRowSelection?: boolean;
+    rowSelection?: 'multiple' | 'single';
     width?: string;
 }
 

package/dist/index.js

@@ -260,11 +260,52 @@ function BasicTable({ table, stickyHeader }) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_eds_core_react6 = require("@equinor/eds-core-react");
+var import_eds_core_react7 = require("@equinor/eds-core-react");
 var import_eds_icons4 = require("@equinor/eds-icons");
 var import_react2 = require("react");
 var import_styled_components5 = __toESM(require("styled-components"));
+
+// src/DataTable/utils.tsx
+var import_eds_core_react6 = require("@equinor/eds-core-react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function enableOrUndefined(enabled, value) {
+  return Boolean(enabled) ? value : void 0;
+}
+function getColumnHeader(column) {
+  const columnHeader = column.columnDef.header;
+  if (!columnHeader)
+    return column.id;
+  return typeof columnHeader === "string" ? columnHeader : column.id;
+}
+function prependSelectColumnIfEnabled(columns, config) {
+  if (!Boolean(config == null ? void 0 : config.rowSelection))
+    return columns;
+  const selectColumn = {
+    id: "select",
+    header: ({ table }) => (config == null ? void 0 : config.rowSelection) === "multiple" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+      style: { width: "48px" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Checkbox, {
+        checked: table.getIsAllRowsSelected(),
+        indeterminate: table.getIsSomeRowsSelected(),
+        "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
+        onChange: table.getToggleAllRowsSelectedHandler()
+      })
+    }) : null,
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+      style: { width: "48px" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Checkbox, {
+        checked: row.getIsSelected(),
+        indeterminate: row.getIsSomeSelected(),
+        "aria-label": `Select row ${row.id}`,
+        onChange: row.getToggleSelectedHandler()
+      })
+    })
+  };
+  return [selectColumn, ...columns];
+}
+
+// src/DataTable/components/ColumnSelect.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ColumnSelectContent = import_styled_components5.default.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -280,9 +321,9 @@ function ColumnSelect({ table }) {
   const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
   const referenceElement = (0, import_react2.useRef)(null);
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Button, {
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Button, {
         "aria-haspopup": true,
         id: "column-select-anchor",
         "aria-controls": "column-select-popover",
@@ -290,28 +331,28 @@ function ColumnSelect({ table }) {
         ref: referenceElement,
         variant: "ghost_icon",
         onClick: () => setIsOpen(true),
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Icon, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Icon, {
           name: "view_column",
           data: import_eds_icons4.view_column
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_eds_core_react6.Popover, {
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover, {
         open: isOpen,
         id: "column-select-popover",
         anchorEl: referenceElement.current,
         placement: "bottom-end",
         onClose: () => setIsOpen(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_eds_core_react6.Popover.Header, {
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover.Header, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Popover.Title, {
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Popover.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Button, {
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Button, {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Icon, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Icon, {
                   name: "close",
                   data: import_eds_icons4.close,
                   size: 24
@@ -319,22 +360,22 @@ function ColumnSelect({ table }) {
               })
             ]
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_eds_core_react6.Popover.Content, {
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover.Content, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ColumnSelectContent, {
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Checkbox, {
+                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Checkbox, {
                     checked: column.getIsVisible(),
-                    label: column.id,
+                    label: getColumnHeader(column),
                     onChange: column.getToggleVisibilityHandler()
                   }, column.id);
                 })
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Divider, {
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Divider, {
                 variant: "small"
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActionsWrapper, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Button, {
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ActionsWrapper, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Button, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -351,21 +392,21 @@ function ColumnSelect({ table }) {
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_eds_core_react8 = require("@equinor/eds-core-react");
+var import_eds_core_react9 = require("@equinor/eds-core-react");
 var import_eds_icons6 = require("@equinor/eds-icons");
 var import_jotai2 = require("jotai");
 var import_styled_components7 = __toESM(require("styled-components"));
 
 // src/DataTable/filters/DebouncedInput.tsx
-var import_eds_core_react7 = require("@equinor/eds-core-react");
+var import_eds_core_react8 = require("@equinor/eds-core-react");
 var import_eds_icons5 = require("@equinor/eds-icons");
 var import_react3 = require("react");
 var import_styled_components6 = __toESM(require("styled-components"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var Wrapper3 = import_styled_components6.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components6.default)(import_eds_core_react7.Button)`
+var CloseButton = (0, import_styled_components6.default)(import_eds_core_react8.Button)`
   width: 24px;
   height: 24px;
 `;
@@ -386,21 +427,21 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Wrapper3, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Input, {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Wrapper3, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Icon, {
+      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Tooltip, {
+      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Tooltip, {
         title: "Clear input",
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseButton, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Icon, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
             name: import_eds_icons5.close.name,
             data: import_eds_icons5.close,
             size: 18
@@ -423,7 +464,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var DataTableHeaderWrapper = import_styled_components7.default.div`
   display: flex;
   align-items: center;
@@ -439,18 +480,18 @@ var FilterContainer = import_styled_components7.default.div`
 `;
 var DataTableHeader = (props) => {
   const [globalFilter, setGlobalFilter] = (0, import_jotai2.useAtom)(globalFilterAtom);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DataTableHeaderWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DataTableHeaderWrapper, {
     className: "--table-caption",
     captionPadding: props.captionPadding,
     children: [
-      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Typography, {
+      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Typography, {
         variant: "h3",
         children: props == null ? void 0 : props.tableCaption
       }),
-      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FilterContainer, {
+      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(FilterContainer, {
         className: "--filter-container",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DebouncedInput, {
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DebouncedInput, {
             value: globalFilter,
             icon: import_eds_icons6.search,
             placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
@@ -464,25 +505,25 @@ var DataTableHeader = (props) => {
 };
 
 // src/DataTable/components/VirtualTable.tsx
-var import_eds_core_react10 = require("@equinor/eds-core-react");
+var import_eds_core_react11 = require("@equinor/eds-core-react");
 var import_react_table3 = require("@tanstack/react-table");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/DataTable/components/PaddingRow.tsx
-var import_eds_core_react9 = require("@equinor/eds-core-react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_eds_core_react10 = require("@equinor/eds-core-react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Row, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Cell, {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Row, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Cell, {
       style: { height: `${props.height}px` }
     })
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function VirtualTable({ table, containerRef, ...props }) {
   var _a, _b;
   const { rows } = table.getRowModel();
@@ -494,27 +535,27 @@ function VirtualTable({ table, containerRef, ...props }) {
   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_runtime11.jsxs)(import_eds_core_react10.Table, {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react11.Table, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Table.Body, {
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react11.Table.Body, {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PaddingRow, {
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaddingRow, {
             height: paddingTop
           }),
           virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
-            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Row, {
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Row, {
               active: row.getIsSelected(),
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Cell, {
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Cell, {
                 children: (0, import_react_table3.flexRender)(cell.column.columnDef.cell, cell.getContext())
               }, cell.id))
             }, row.id);
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PaddingRow, {
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -523,39 +564,6 @@ function VirtualTable({ table, containerRef, ...props }) {
   });
 }
 
-// src/DataTable/utils.tsx
-var import_eds_core_react11 = require("@equinor/eds-core-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function enableOrUndefined(enabled, value) {
-  return Boolean(enabled) ? value : void 0;
-}
-function prependSelectColumnIfEnabled(columns, config) {
-  if (!(config == null ? void 0 : config.enableRowSelection))
-    return columns;
-  const selectColumn = {
-    id: "select",
-    header: ({ table }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", {
-      style: { width: "48px" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Checkbox, {
-        checked: table.getIsAllRowsSelected(),
-        indeterminate: table.getIsSomeRowsSelected(),
-        "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
-        onChange: table.getToggleAllRowsSelectedHandler()
-      })
-    }),
-    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", {
-      style: { width: "48px" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Checkbox, {
-        checked: row.getIsSelected(),
-        indeterminate: row.getIsSomeSelected(),
-        "aria-label": `Select row ${row.id}`,
-        onChange: row.getToggleSelectedHandler()
-      })
-    })
-  };
-  return [selectColumn, ...columns];
-}
-
 // src/DataTable/DataTable.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var DataTableWrapper = import_styled_components8.default.div`
@@ -592,6 +600,7 @@ function DataTable({ columns, data, header, filters, config }) {
       columnVisibility
     },
     onRowSelectionChange: setRowSelectionState,
+    enableMultiRowSelection: (config == null ? void 0 : config.rowSelection) === "multiple",
     enableSorting: config == null ? void 0 : config.sortable,
     onSortingChange: enableOrUndefined(config == null ? void 0 : config.sortable, setSorting),
     getSortedRowModel: (0, import_react_table4.getSortedRowModel)(),

package/dist/index.mjs

@@ -227,11 +227,52 @@ function BasicTable({ table, stickyHeader }) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-import { Button as Button2, Checkbox, Divider, Icon as Icon4, Popover } from "@equinor/eds-core-react";
+import { Button as Button2, Checkbox as Checkbox2, Divider, Icon as Icon4, Popover } from "@equinor/eds-core-react";
 import { close, view_column } from "@equinor/eds-icons";
 import { useRef, useState as useState2 } from "react";
 import styled5 from "styled-components";
-import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// src/DataTable/utils.tsx
+import { Checkbox } from "@equinor/eds-core-react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function enableOrUndefined(enabled, value) {
+  return Boolean(enabled) ? value : void 0;
+}
+function getColumnHeader(column) {
+  const columnHeader = column.columnDef.header;
+  if (!columnHeader)
+    return column.id;
+  return typeof columnHeader === "string" ? columnHeader : column.id;
+}
+function prependSelectColumnIfEnabled(columns, config) {
+  if (!Boolean(config == null ? void 0 : config.rowSelection))
+    return columns;
+  const selectColumn = {
+    id: "select",
+    header: ({ table }) => (config == null ? void 0 : config.rowSelection) === "multiple" ? /* @__PURE__ */ jsx7("div", {
+      style: { width: "48px" },
+      children: /* @__PURE__ */ jsx7(Checkbox, {
+        checked: table.getIsAllRowsSelected(),
+        indeterminate: table.getIsSomeRowsSelected(),
+        "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
+        onChange: table.getToggleAllRowsSelectedHandler()
+      })
+    }) : null,
+    cell: ({ row }) => /* @__PURE__ */ jsx7("div", {
+      style: { width: "48px" },
+      children: /* @__PURE__ */ jsx7(Checkbox, {
+        checked: row.getIsSelected(),
+        indeterminate: row.getIsSomeSelected(),
+        "aria-label": `Select row ${row.id}`,
+        onChange: row.getToggleSelectedHandler()
+      })
+    })
+  };
+  return [selectColumn, ...columns];
+}
+
+// src/DataTable/components/ColumnSelect.tsx
+import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var ColumnSelectContent = styled5.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -249,7 +290,7 @@ function ColumnSelect({ table }) {
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
   return /* @__PURE__ */ jsxs5(Fragment, {
     children: [
-      /* @__PURE__ */ jsx7(Button2, {
+      /* @__PURE__ */ jsx8(Button2, {
         "aria-haspopup": true,
         id: "column-select-anchor",
         "aria-controls": "column-select-popover",
@@ -257,7 +298,7 @@ function ColumnSelect({ table }) {
         ref: referenceElement,
         variant: "ghost_icon",
         onClick: () => setIsOpen(true),
-        children: /* @__PURE__ */ jsx7(Icon4, {
+        children: /* @__PURE__ */ jsx8(Icon4, {
           name: "view_column",
           data: view_column
         })
@@ -271,14 +312,14 @@ function ColumnSelect({ table }) {
         children: [
           /* @__PURE__ */ jsxs5(Popover.Header, {
             children: [
-              /* @__PURE__ */ jsx7(Popover.Title, {
+              /* @__PURE__ */ jsx8(Popover.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ jsx7(Button2, {
+              /* @__PURE__ */ jsx8(Button2, {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ jsx7(Icon4, {
+                children: /* @__PURE__ */ jsx8(Icon4, {
                   name: "close",
                   data: close,
                   size: 24
@@ -288,20 +329,20 @@ function ColumnSelect({ table }) {
           }),
           /* @__PURE__ */ jsxs5(Popover.Content, {
             children: [
-              /* @__PURE__ */ jsx7(ColumnSelectContent, {
+              /* @__PURE__ */ jsx8(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ jsx7(Checkbox, {
+                  return /* @__PURE__ */ jsx8(Checkbox2, {
                     checked: column.getIsVisible(),
-                    label: column.id,
+                    label: getColumnHeader(column),
                     onChange: column.getToggleVisibilityHandler()
                   }, column.id);
                 })
               }),
-              /* @__PURE__ */ jsx7(Divider, {
+              /* @__PURE__ */ jsx8(Divider, {
                 variant: "small"
               }),
-              /* @__PURE__ */ jsx7(ActionsWrapper, {
-                children: /* @__PURE__ */ jsx7(Button2, {
+              /* @__PURE__ */ jsx8(ActionsWrapper, {
+                children: /* @__PURE__ */ jsx8(Button2, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -328,7 +369,7 @@ import { Button as Button3, Icon as Icon5, Input, Tooltip } from "@equinor/eds-c
 import { close as close2 } from "@equinor/eds-icons";
 import { useEffect, useState as useState3 } from "react";
 import styled6 from "styled-components";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Wrapper3 = styled6.div`
   width: 200px;
 `;
@@ -353,21 +394,21 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ jsx8(Wrapper3, {
-    children: /* @__PURE__ */ jsx8(Input, {
+  return /* @__PURE__ */ jsx9(Wrapper3, {
+    children: /* @__PURE__ */ jsx9(Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ jsx8(Icon5, {
+      leftAdornments: icon && /* @__PURE__ */ jsx9(Icon5, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ jsx8(Tooltip, {
+      rightAdornments: !!value && /* @__PURE__ */ jsx9(Tooltip, {
         title: "Clear input",
-        children: /* @__PURE__ */ jsx8(CloseButton, {
+        children: /* @__PURE__ */ jsx9(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ jsx8(Icon5, {
+          children: /* @__PURE__ */ jsx9(Icon5, {
             name: close2.name,
             data: close2,
             size: 18
@@ -390,7 +431,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/DataTableHeader.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var DataTableHeaderWrapper = styled7.div`
   display: flex;
   align-items: center;
@@ -410,14 +451,14 @@ var DataTableHeader = (props) => {
     className: "--table-caption",
     captionPadding: props.captionPadding,
     children: [
-      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ jsx9(Typography, {
+      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ jsx10(Typography, {
         variant: "h3",
         children: props == null ? void 0 : props.tableCaption
       }),
       (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ jsxs6(FilterContainer, {
         className: "--filter-container",
         children: [
-          /* @__PURE__ */ jsx9(DebouncedInput, {
+          /* @__PURE__ */ jsx10(DebouncedInput, {
             value: globalFilter,
             icon: search,
             placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
@@ -437,19 +478,19 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/DataTable/components/PaddingRow.tsx
 import { Table as Table4 } from "@equinor/eds-core-react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ jsx10(Table4.Row, {
-    children: /* @__PURE__ */ jsx10(Table4.Cell, {
+  return /* @__PURE__ */ jsx11(Table4.Row, {
+    children: /* @__PURE__ */ jsx11(Table4.Cell, {
       style: { height: `${props.height}px` }
     })
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function VirtualTable({ table, containerRef, ...props }) {
   var _a, _b;
   const { rows } = table.getRowModel();
@@ -463,25 +504,25 @@ function VirtualTable({ table, containerRef, ...props }) {
   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__ */ jsxs7(Table5, {
     children: [
-      /* @__PURE__ */ jsx11(TableHeader, {
+      /* @__PURE__ */ jsx12(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
       /* @__PURE__ */ jsxs7(Table5.Body, {
         children: [
-          /* @__PURE__ */ jsx11(PaddingRow, {
+          /* @__PURE__ */ jsx12(PaddingRow, {
             height: paddingTop
           }),
           virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
-            return /* @__PURE__ */ jsx11(Table5.Row, {
+            return /* @__PURE__ */ jsx12(Table5.Row, {
               active: row.getIsSelected(),
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx11(Table5.Cell, {
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx12(Table5.Cell, {
                 children: flexRender3(cell.column.columnDef.cell, cell.getContext())
               }, cell.id))
             }, row.id);
           }),
-          /* @__PURE__ */ jsx11(PaddingRow, {
+          /* @__PURE__ */ jsx12(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -490,39 +531,6 @@ function VirtualTable({ table, containerRef, ...props }) {
   });
 }
 
-// src/DataTable/utils.tsx
-import { Checkbox as Checkbox2 } from "@equinor/eds-core-react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-function enableOrUndefined(enabled, value) {
-  return Boolean(enabled) ? value : void 0;
-}
-function prependSelectColumnIfEnabled(columns, config) {
-  if (!(config == null ? void 0 : config.enableRowSelection))
-    return columns;
-  const selectColumn = {
-    id: "select",
-    header: ({ table }) => /* @__PURE__ */ jsx12("div", {
-      style: { width: "48px" },
-      children: /* @__PURE__ */ jsx12(Checkbox2, {
-        checked: table.getIsAllRowsSelected(),
-        indeterminate: table.getIsSomeRowsSelected(),
-        "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
-        onChange: table.getToggleAllRowsSelectedHandler()
-      })
-    }),
-    cell: ({ row }) => /* @__PURE__ */ jsx12("div", {
-      style: { width: "48px" },
-      children: /* @__PURE__ */ jsx12(Checkbox2, {
-        checked: row.getIsSelected(),
-        indeterminate: row.getIsSomeSelected(),
-        "aria-label": `Select row ${row.id}`,
-        onChange: row.getToggleSelectedHandler()
-      })
-    })
-  };
-  return [selectColumn, ...columns];
-}
-
 // src/DataTable/DataTable.tsx
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var DataTableWrapper = styled8.div`
@@ -559,6 +567,7 @@ function DataTable({ columns, data, header, filters, config }) {
       columnVisibility
     },
     onRowSelectionChange: setRowSelectionState,
+    enableMultiRowSelection: (config == null ? void 0 : config.rowSelection) === "multiple",
     enableSorting: config == null ? void 0 : config.sortable,
     onSortingChange: enableOrUndefined(config == null ? void 0 : config.sortable, setSorting),
     getSortedRowModel: getSortedRowModel(),

package/package.json

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