@equinor/apollo-components 1.2.2 → 1.3.1

package/dist/index.d.ts

@@ -31,19 +31,20 @@ interface DataTableConfig {
     height?: string;
     sortable?: boolean;
     virtual?: boolean;
-    enableRowSelection?: boolean;
+    rowSelection?: 'multiple' | 'single';
     width?: string;
 }
 
 interface DataTableProps<T> {
-    className?: string;
+    data: T[];
     columns: ColumnDef<T, any>[];
+    isLoading?: boolean;
+    className?: string;
     config?: DataTableConfig;
-    data: T[];
     filters?: FilterConfig;
     header?: HeaderConfig;
 }
-declare function DataTable$1<T>({ columns, data, header, filters, config }: DataTableProps<T>): JSX.Element;
+declare function DataTable$1<T>({ columns, data, isLoading, header, filters, config, }: DataTableProps<T>): JSX.Element;
 
 declare type DataTableProviderProps = ComponentProps<typeof Provider>;
 declare function DataTableProvider({ children, ...props }: DataTableProviderProps): JSX.Element;

package/dist/index.js

@@ -181,7 +181,7 @@ var ChipsCell = (props) => {
 var import_react_table4 = require("@tanstack/react-table");
 var import_jotai3 = require("jotai");
 var import_react4 = require("react");
-var import_styled_components8 = __toESM(require("styled-components"));
+var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/DataTable/atoms.ts
 var import_jotai = require("jotai");
@@ -191,35 +191,58 @@ var rowSelectionAtom = (0, import_jotai.atom)({});
 var tableSortingAtom = (0, import_jotai.atom)([]);
 
 // src/DataTable/components/BasicTable.tsx
-var import_eds_core_react5 = require("@equinor/eds-core-react");
+var import_eds_core_react6 = require("@equinor/eds-core-react");
 var import_react_table2 = require("@tanstack/react-table");
 
+// src/DataTable/components/PlaceholderRow.tsx
+var import_eds_core_react3 = require("@equinor/eds-core-react");
+var import_styled_components4 = __toESM(require("styled-components"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PlaceholderTextWrapper = import_styled_components4.default.div`
+  display: flex;
+  justify-content: center;
+`;
+function PlaceholderRow({ isLoading }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.Table.Row, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.Table.Cell, {
+      colSpan: 100,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PlaceholderTextWrapper, {
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.DotProgress, {
+          color: "primary"
+        }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.Typography, {
+          children: "No data available"
+        })
+      })
+    })
+  });
+}
+
 // src/DataTable/components/TableHeader.tsx
-var import_eds_core_react4 = require("@equinor/eds-core-react");
+var import_eds_core_react5 = require("@equinor/eds-core-react");
 
 // src/DataTable/components/HeaderCell.tsx
-var import_eds_core_react3 = require("@equinor/eds-core-react");
+var import_eds_core_react4 = require("@equinor/eds-core-react");
 var import_eds_icons3 = require("@equinor/eds-icons");
 var import_react_table = require("@tanstack/react-table");
-var import_styled_components4 = __toESM(require("styled-components"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var HeaderDiv = import_styled_components4.default.div`
+var import_styled_components5 = __toESM(require("styled-components"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var HeaderDiv = import_styled_components5.default.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
 `;
 var HeaderCell = ({ header }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.Table.Cell, {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Table.Cell, {
     colSpan: header.colSpan,
-    children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(HeaderDiv, {
+    children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(HeaderDiv, {
       onClick: header.column.getToggleSortingHandler(),
       children: [
         (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
         {
-          asc: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.Icon, {
+          asc: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Icon, {
             data: import_eds_icons3.arrow_down
           }),
-          desc: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.Icon, {
+          desc: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Icon, {
             data: import_eds_icons3.arrow_up
           })
         }[header.column.getIsSorted()] ?? null
@@ -229,45 +252,48 @@ var HeaderCell = ({ header }) => {
 };
 
 // src/DataTable/components/TableHeader.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var TableHeader = ({ table, sticky }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Table.Head, {
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var TableHeader = ({ table, sticky }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react5.Table.Head, {
   sticky,
-  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Table.Row, {
-    children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HeaderCell, {
+  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react5.Table.Row, {
+    children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HeaderCell, {
       header
     }, header.id))
   }, headerGroup.id))
 });
 
 // src/DataTable/components/BasicTable.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function BasicTable({ table, stickyHeader }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_eds_core_react5.Table, {
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function BasicTable({ table, stickyHeader, isLoading }) {
+  const tableRows = table.getRowModel().rows;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_eds_core_react6.Table, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableHeader, {
         sticky: stickyHeader,
         table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react5.Table.Body, {
-        children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react5.Table.Row, {
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_eds_core_react5.Table.Cell, {
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Table.Body, {
+        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Table.Row, {
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Table.Cell, {
             children: (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext())
           }, cell.id))
-        }, row.id))
+        }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlaceholderRow, {
+          isLoading
+        })
       })
     ]
   });
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_eds_core_react7 = require("@equinor/eds-core-react");
+var import_eds_core_react8 = 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"));
+var import_styled_components6 = __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");
+var import_eds_core_react7 = require("@equinor/eds-core-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function enableOrUndefined(enabled, value) {
   return Boolean(enabled) ? value : void 0;
 }
@@ -278,22 +304,22 @@ function getColumnHeader(column) {
   return typeof columnHeader === "string" ? columnHeader : column.id;
 }
 function prependSelectColumnIfEnabled(columns, config) {
-  if (!(config == null ? void 0 : config.enableRowSelection))
+  if (!Boolean(config == null ? void 0 : config.rowSelection))
     return columns;
   const selectColumn = {
     id: "select",
-    header: ({ table }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {
+    header: ({ table }) => (config == null ? void 0 : config.rowSelection) === "multiple" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {
       style: { width: "48px" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Checkbox, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.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_runtime7.jsx)("div", {
+    }) : null,
+    cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", {
       style: { width: "48px" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Checkbox, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Checkbox, {
         checked: row.getIsSelected(),
         indeterminate: row.getIsSomeSelected(),
         "aria-label": `Select row ${row.id}`,
@@ -305,13 +331,13 @@ function prependSelectColumnIfEnabled(columns, config) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ColumnSelectContent = import_styled_components5.default.div`
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ColumnSelectContent = import_styled_components6.default.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.5rem;
 `;
-var ActionsWrapper = import_styled_components5.default.div`
+var ActionsWrapper = import_styled_components6.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -321,9 +347,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_runtime8.jsxs)(import_jsx_runtime8.Fragment, {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Button, {
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Button, {
         "aria-haspopup": true,
         id: "column-select-anchor",
         "aria-controls": "column-select-popover",
@@ -331,28 +357,28 @@ function ColumnSelect({ table }) {
         ref: referenceElement,
         variant: "ghost_icon",
         onClick: () => setIsOpen(true),
-        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: "view_column",
           data: import_eds_icons4.view_column
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover, {
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_eds_core_react8.Popover, {
         open: isOpen,
         id: "column-select-popover",
         anchorEl: referenceElement.current,
         placement: "bottom-end",
         onClose: () => setIsOpen(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover.Header, {
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_eds_core_react8.Popover.Header, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Popover.Title, {
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Popover.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Button, {
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Button, {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                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: "close",
                   data: import_eds_icons4.close,
                   size: 24
@@ -360,22 +386,22 @@ function ColumnSelect({ table }) {
               })
             ]
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover.Content, {
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_eds_core_react8.Popover.Content, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ColumnSelectContent, {
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Checkbox, {
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Checkbox, {
                     checked: column.getIsVisible(),
                     label: getColumnHeader(column),
                     onChange: column.getToggleVisibilityHandler()
                   }, column.id);
                 })
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Divider, {
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Divider, {
                 variant: "small"
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ActionsWrapper, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Button, {
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ActionsWrapper, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Button, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -392,21 +418,21 @@ function ColumnSelect({ table }) {
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_eds_core_react9 = require("@equinor/eds-core-react");
+var import_eds_core_react10 = 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"));
+var import_styled_components8 = __toESM(require("styled-components"));
 
 // src/DataTable/filters/DebouncedInput.tsx
-var import_eds_core_react8 = require("@equinor/eds-core-react");
+var import_eds_core_react9 = 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_runtime9 = require("react/jsx-runtime");
-var Wrapper3 = import_styled_components6.default.div`
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Wrapper3 = import_styled_components7.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components6.default)(import_eds_core_react8.Button)`
+var CloseButton = (0, import_styled_components7.default)(import_eds_core_react9.Button)`
   width: 24px;
   height: 24px;
 `;
@@ -427,21 +453,21 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Wrapper3, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Input, {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Wrapper3, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
+      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Icon, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Tooltip, {
+      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Tooltip, {
         title: "Clear input",
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseButton, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Icon, {
             name: import_eds_icons5.close.name,
             data: import_eds_icons5.close,
             size: 18
@@ -464,15 +490,15 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var DataTableHeaderWrapper = import_styled_components7.default.div`
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DataTableHeaderWrapper = import_styled_components8.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.captionPadding ?? "1rem"};
 `;
-var FilterContainer = import_styled_components7.default.div`
+var FilterContainer = import_styled_components8.default.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -480,18 +506,18 @@ var FilterContainer = import_styled_components7.default.div`
 `;
 var DataTableHeader = (props) => {
   const [globalFilter, setGlobalFilter] = (0, import_jotai2.useAtom)(globalFilterAtom);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DataTableHeaderWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DataTableHeaderWrapper, {
     className: "--table-caption",
     captionPadding: props.captionPadding,
     children: [
-      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Typography, {
+      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Typography, {
         variant: "h3",
         children: props == null ? void 0 : props.tableCaption
       }),
-      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(FilterContainer, {
+      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(FilterContainer, {
         className: "--filter-container",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DebouncedInput, {
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DebouncedInput, {
             value: globalFilter,
             icon: import_eds_icons6.search,
             placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
@@ -505,25 +531,25 @@ var DataTableHeader = (props) => {
 };
 
 // src/DataTable/components/VirtualTable.tsx
-var import_eds_core_react11 = require("@equinor/eds-core-react");
+var import_eds_core_react12 = 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_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");
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  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, {
+  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, {
       style: { height: `${props.height}px` }
     })
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function VirtualTable({ table, containerRef, ...props }) {
   var _a, _b;
   const { rows } = table.getRowModel();
@@ -535,27 +561,29 @@ 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_runtime12.jsxs)(import_eds_core_react11.Table, {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_eds_core_react12.Table, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react11.Table.Body, {
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_eds_core_react12.Table.Body, {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaddingRow, {
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PaddingRow, {
             height: paddingTop
           }),
-          virtualRows.map((virtualRow) => {
+          rows.length ? virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Row, {
+            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Row, {
               active: row.getIsSelected(),
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Cell, {
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Cell, {
                 children: (0, import_react_table3.flexRender)(cell.column.columnDef.cell, cell.getContext())
               }, cell.id))
             }, row.id);
+          }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlaceholderRow, {
+            isLoading: props.isLoading
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaddingRow, {
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -565,8 +593,8 @@ function VirtualTable({ table, containerRef, ...props }) {
 }
 
 // src/DataTable/DataTable.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var DataTableWrapper = import_styled_components8.default.div`
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DataTableWrapper = import_styled_components9.default.div`
   width: ${(props) => props.width ?? "100%"};
 
   .--table-container {
@@ -579,7 +607,14 @@ var DataTableWrapper = import_styled_components8.default.div`
     }
   }
 `;
-function DataTable({ columns, data, header, filters, config }) {
+function DataTable({
+  columns,
+  data,
+  isLoading,
+  header,
+  filters,
+  config
+}) {
   const [columnVisibility, setColumnVisibility] = (0, import_jotai3.useAtom)(columnVisibilityAtom);
   const [globalFilter, setGlobalFilter] = (0, import_jotai3.useAtom)(globalFilterAtom);
   const [sorting, setSorting] = (0, import_jotai3.useAtom)(tableSortingAtom);
@@ -600,6 +635,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)(),
@@ -607,29 +643,31 @@ function DataTable({ columns, data, header, filters, config }) {
     onGlobalFilterChange: enableGlobalFilter(setGlobalFilter)
   });
   const tableContainerRef = (0, import_react4.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DataTableWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DataTableWrapper, {
     captionPadding: header == null ? void 0 : header.captionPadding,
     height: config == null ? void 0 : config.height,
     width: config == null ? void 0 : config.width,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DataTableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DataTableHeader, {
         tableCaption: header == null ? void 0 : header.tableCaption,
         enableGlobalFilter: filters == null ? void 0 : filters.globalFilter,
         globalFilterPlaceholder: filters == null ? void 0 : filters.globalFilterPlaceholder,
         captionPadding: header == null ? void 0 : header.captionPadding,
-        filterActions: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ColumnSelect, {
+        filterActions: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ColumnSelect, {
           table
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", {
         ref: tableContainerRef,
         className: "--table-container",
-        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VirtualTable, {
+        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VirtualTable, {
           containerRef: tableContainerRef,
           table,
+          isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
-        }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BasicTable, {
+        }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BasicTable, {
           table,
+          isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })
       })
@@ -639,9 +677,9 @@ function DataTable({ columns, data, header, filters, config }) {
 
 // src/DataTable/Provider.tsx
 var import_jotai4 = require("jotai");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function DataTableProvider({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jotai4.Provider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jotai4.Provider, {
     ...props,
     children
   });

package/dist/index.mjs

@@ -148,7 +148,7 @@ import {
 } from "@tanstack/react-table";
 import { useAtom as useAtom2 } from "jotai";
 import { useRef as useRef2 } from "react";
-import styled8 from "styled-components";
+import styled9 from "styled-components";
 
 // src/DataTable/atoms.ts
 import { atom } from "jotai";
@@ -161,32 +161,55 @@ var tableSortingAtom = atom([]);
 import { Table as EdsTable } from "@equinor/eds-core-react";
 import { flexRender as flexRender2 } from "@tanstack/react-table";
 
+// src/DataTable/components/PlaceholderRow.tsx
+import { DotProgress, Table, Typography } from "@equinor/eds-core-react";
+import styled4 from "styled-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var PlaceholderTextWrapper = styled4.div`
+  display: flex;
+  justify-content: center;
+`;
+function PlaceholderRow({ isLoading }) {
+  return /* @__PURE__ */ jsx4(Table.Row, {
+    children: /* @__PURE__ */ jsx4(Table.Cell, {
+      colSpan: 100,
+      children: /* @__PURE__ */ jsx4(PlaceholderTextWrapper, {
+        children: isLoading ? /* @__PURE__ */ jsx4(DotProgress, {
+          color: "primary"
+        }) : /* @__PURE__ */ jsx4(Typography, {
+          children: "No data available"
+        })
+      })
+    })
+  });
+}
+
 // src/DataTable/components/TableHeader.tsx
-import { Table as Table2 } from "@equinor/eds-core-react";
+import { Table as Table3 } from "@equinor/eds-core-react";
 
 // src/DataTable/components/HeaderCell.tsx
-import { Icon as Icon3, Table } from "@equinor/eds-core-react";
+import { Icon as Icon3, Table as Table2 } from "@equinor/eds-core-react";
 import { arrow_down, arrow_up } from "@equinor/eds-icons";
 import { flexRender } from "@tanstack/react-table";
-import styled4 from "styled-components";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var HeaderDiv = styled4.div`
+import styled5 from "styled-components";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var HeaderDiv = styled5.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
 `;
 var HeaderCell = ({ header }) => {
-  return /* @__PURE__ */ jsx4(Table.Cell, {
+  return /* @__PURE__ */ jsx5(Table2.Cell, {
     colSpan: header.colSpan,
     children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs3(HeaderDiv, {
       onClick: header.column.getToggleSortingHandler(),
       children: [
         flexRender(header.column.columnDef.header, header.getContext()),
         {
-          asc: /* @__PURE__ */ jsx4(Icon3, {
+          asc: /* @__PURE__ */ jsx5(Icon3, {
             data: arrow_down
           }),
-          desc: /* @__PURE__ */ jsx4(Icon3, {
+          desc: /* @__PURE__ */ jsx5(Icon3, {
             data: arrow_up
           })
         }[header.column.getIsSorted()] ?? null
@@ -196,31 +219,34 @@ var HeaderCell = ({ header }) => {
 };
 
 // src/DataTable/components/TableHeader.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var TableHeader = ({ table, sticky }) => /* @__PURE__ */ jsx5(Table2.Head, {
+import { jsx as jsx6 } from "react/jsx-runtime";
+var TableHeader = ({ table, sticky }) => /* @__PURE__ */ jsx6(Table3.Head, {
   sticky,
-  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx5(Table2.Row, {
-    children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx5(HeaderCell, {
+  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx6(Table3.Row, {
+    children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx6(HeaderCell, {
       header
     }, header.id))
   }, headerGroup.id))
 });
 
 // src/DataTable/components/BasicTable.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function BasicTable({ table, stickyHeader }) {
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function BasicTable({ table, stickyHeader, isLoading }) {
+  const tableRows = table.getRowModel().rows;
   return /* @__PURE__ */ jsxs4(EdsTable, {
     children: [
-      /* @__PURE__ */ jsx6(TableHeader, {
+      /* @__PURE__ */ jsx7(TableHeader, {
         sticky: stickyHeader,
         table
       }),
-      /* @__PURE__ */ jsx6(EdsTable.Body, {
-        children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx6(EdsTable.Row, {
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx6(EdsTable.Cell, {
+      /* @__PURE__ */ jsx7(EdsTable.Body, {
+        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx7(EdsTable.Row, {
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx7(EdsTable.Cell, {
             children: flexRender2(cell.column.columnDef.cell, cell.getContext())
           }, cell.id))
-        }, row.id))
+        }, row.id)) : /* @__PURE__ */ jsx7(PlaceholderRow, {
+          isLoading
+        })
       })
     ]
   });
@@ -230,11 +256,11 @@ function BasicTable({ table, stickyHeader }) {
 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 styled6 from "styled-components";
 
 // src/DataTable/utils.tsx
 import { Checkbox } from "@equinor/eds-core-react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function enableOrUndefined(enabled, value) {
   return Boolean(enabled) ? value : void 0;
 }
@@ -245,22 +271,22 @@ function getColumnHeader(column) {
   return typeof columnHeader === "string" ? columnHeader : column.id;
 }
 function prependSelectColumnIfEnabled(columns, config) {
-  if (!(config == null ? void 0 : config.enableRowSelection))
+  if (!Boolean(config == null ? void 0 : config.rowSelection))
     return columns;
   const selectColumn = {
     id: "select",
-    header: ({ table }) => /* @__PURE__ */ jsx7("div", {
+    header: ({ table }) => (config == null ? void 0 : config.rowSelection) === "multiple" ? /* @__PURE__ */ jsx8("div", {
       style: { width: "48px" },
-      children: /* @__PURE__ */ jsx7(Checkbox, {
+      children: /* @__PURE__ */ jsx8(Checkbox, {
         checked: table.getIsAllRowsSelected(),
         indeterminate: table.getIsSomeRowsSelected(),
         "aria-label": table.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
         onChange: table.getToggleAllRowsSelectedHandler()
       })
-    }),
-    cell: ({ row }) => /* @__PURE__ */ jsx7("div", {
+    }) : null,
+    cell: ({ row }) => /* @__PURE__ */ jsx8("div", {
       style: { width: "48px" },
-      children: /* @__PURE__ */ jsx7(Checkbox, {
+      children: /* @__PURE__ */ jsx8(Checkbox, {
         checked: row.getIsSelected(),
         indeterminate: row.getIsSomeSelected(),
         "aria-label": `Select row ${row.id}`,
@@ -272,13 +298,13 @@ function prependSelectColumnIfEnabled(columns, config) {
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var ColumnSelectContent = styled5.div`
+import { Fragment, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var ColumnSelectContent = styled6.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.5rem;
 `;
-var ActionsWrapper = styled5.div`
+var ActionsWrapper = styled6.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -290,7 +316,7 @@ function ColumnSelect({ table }) {
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
   return /* @__PURE__ */ jsxs5(Fragment, {
     children: [
-      /* @__PURE__ */ jsx8(Button2, {
+      /* @__PURE__ */ jsx9(Button2, {
         "aria-haspopup": true,
         id: "column-select-anchor",
         "aria-controls": "column-select-popover",
@@ -298,7 +324,7 @@ function ColumnSelect({ table }) {
         ref: referenceElement,
         variant: "ghost_icon",
         onClick: () => setIsOpen(true),
-        children: /* @__PURE__ */ jsx8(Icon4, {
+        children: /* @__PURE__ */ jsx9(Icon4, {
           name: "view_column",
           data: view_column
         })
@@ -312,14 +338,14 @@ function ColumnSelect({ table }) {
         children: [
           /* @__PURE__ */ jsxs5(Popover.Header, {
             children: [
-              /* @__PURE__ */ jsx8(Popover.Title, {
+              /* @__PURE__ */ jsx9(Popover.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ jsx8(Button2, {
+              /* @__PURE__ */ jsx9(Button2, {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ jsx8(Icon4, {
+                children: /* @__PURE__ */ jsx9(Icon4, {
                   name: "close",
                   data: close,
                   size: 24
@@ -329,20 +355,20 @@ function ColumnSelect({ table }) {
           }),
           /* @__PURE__ */ jsxs5(Popover.Content, {
             children: [
-              /* @__PURE__ */ jsx8(ColumnSelectContent, {
+              /* @__PURE__ */ jsx9(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ jsx8(Checkbox2, {
+                  return /* @__PURE__ */ jsx9(Checkbox2, {
                     checked: column.getIsVisible(),
                     label: getColumnHeader(column),
                     onChange: column.getToggleVisibilityHandler()
                   }, column.id);
                 })
               }),
-              /* @__PURE__ */ jsx8(Divider, {
+              /* @__PURE__ */ jsx9(Divider, {
                 variant: "small"
               }),
-              /* @__PURE__ */ jsx8(ActionsWrapper, {
-                children: /* @__PURE__ */ jsx8(Button2, {
+              /* @__PURE__ */ jsx9(ActionsWrapper, {
+                children: /* @__PURE__ */ jsx9(Button2, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -359,21 +385,21 @@ function ColumnSelect({ table }) {
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-import { Typography } from "@equinor/eds-core-react";
+import { Typography as Typography2 } from "@equinor/eds-core-react";
 import { search } from "@equinor/eds-icons";
 import { useAtom } from "jotai";
-import styled7 from "styled-components";
+import styled8 from "styled-components";
 
 // src/DataTable/filters/DebouncedInput.tsx
 import { Button as Button3, Icon as Icon5, Input, Tooltip } from "@equinor/eds-core-react";
 import { close as close2 } from "@equinor/eds-icons";
 import { useEffect, useState as useState3 } from "react";
-import styled6 from "styled-components";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Wrapper3 = styled6.div`
+import styled7 from "styled-components";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Wrapper3 = styled7.div`
   width: 200px;
 `;
-var CloseButton = styled6(Button3)`
+var CloseButton = styled7(Button3)`
   width: 24px;
   height: 24px;
 `;
@@ -394,21 +420,21 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ jsx9(Wrapper3, {
-    children: /* @__PURE__ */ jsx9(Input, {
+  return /* @__PURE__ */ jsx10(Wrapper3, {
+    children: /* @__PURE__ */ jsx10(Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ jsx9(Icon5, {
+      leftAdornments: icon && /* @__PURE__ */ jsx10(Icon5, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ jsx9(Tooltip, {
+      rightAdornments: !!value && /* @__PURE__ */ jsx10(Tooltip, {
         title: "Clear input",
-        children: /* @__PURE__ */ jsx9(CloseButton, {
+        children: /* @__PURE__ */ jsx10(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ jsx9(Icon5, {
+          children: /* @__PURE__ */ jsx10(Icon5, {
             name: close2.name,
             data: close2,
             size: 18
@@ -431,15 +457,15 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/DataTableHeader.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var DataTableHeaderWrapper = styled7.div`
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var DataTableHeaderWrapper = styled8.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.captionPadding ?? "1rem"};
 `;
-var FilterContainer = styled7.div`
+var FilterContainer = styled8.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -451,14 +477,14 @@ var DataTableHeader = (props) => {
     className: "--table-caption",
     captionPadding: props.captionPadding,
     children: [
-      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ jsx10(Typography, {
+      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ jsx11(Typography2, {
         variant: "h3",
         children: props == null ? void 0 : props.tableCaption
       }),
       (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ jsxs6(FilterContainer, {
         className: "--filter-container",
         children: [
-          /* @__PURE__ */ jsx10(DebouncedInput, {
+          /* @__PURE__ */ jsx11(DebouncedInput, {
             value: globalFilter,
             icon: search,
             placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
@@ -472,25 +498,25 @@ var DataTableHeader = (props) => {
 };
 
 // src/DataTable/components/VirtualTable.tsx
-import { Table as Table5 } from "@equinor/eds-core-react";
+import { Table as Table6 } from "@equinor/eds-core-react";
 import { flexRender as flexRender3 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/DataTable/components/PaddingRow.tsx
-import { Table as Table4 } from "@equinor/eds-core-react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { Table as Table5 } from "@equinor/eds-core-react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ jsx11(Table4.Row, {
-    children: /* @__PURE__ */ jsx11(Table4.Cell, {
+  return /* @__PURE__ */ jsx12(Table5.Row, {
+    children: /* @__PURE__ */ jsx12(Table5.Cell, {
       style: { height: `${props.height}px` }
     })
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function VirtualTable({ table, containerRef, ...props }) {
   var _a, _b;
   const { rows } = table.getRowModel();
@@ -502,27 +528,29 @@ 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__ */ jsxs7(Table5, {
+  return /* @__PURE__ */ jsxs7(Table6, {
     children: [
-      /* @__PURE__ */ jsx12(TableHeader, {
+      /* @__PURE__ */ jsx13(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ jsxs7(Table5.Body, {
+      /* @__PURE__ */ jsxs7(Table6.Body, {
         children: [
-          /* @__PURE__ */ jsx12(PaddingRow, {
+          /* @__PURE__ */ jsx13(PaddingRow, {
             height: paddingTop
           }),
-          virtualRows.map((virtualRow) => {
+          rows.length ? virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
-            return /* @__PURE__ */ jsx12(Table5.Row, {
+            return /* @__PURE__ */ jsx13(Table6.Row, {
               active: row.getIsSelected(),
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx12(Table5.Cell, {
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx13(Table6.Cell, {
                 children: flexRender3(cell.column.columnDef.cell, cell.getContext())
               }, cell.id))
             }, row.id);
+          }) : /* @__PURE__ */ jsx13(PlaceholderRow, {
+            isLoading: props.isLoading
           }),
-          /* @__PURE__ */ jsx12(PaddingRow, {
+          /* @__PURE__ */ jsx13(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -532,8 +560,8 @@ function VirtualTable({ table, containerRef, ...props }) {
 }
 
 // src/DataTable/DataTable.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var DataTableWrapper = styled8.div`
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var DataTableWrapper = styled9.div`
   width: ${(props) => props.width ?? "100%"};
 
   .--table-container {
@@ -546,7 +574,14 @@ var DataTableWrapper = styled8.div`
     }
   }
 `;
-function DataTable({ columns, data, header, filters, config }) {
+function DataTable({
+  columns,
+  data,
+  isLoading,
+  header,
+  filters,
+  config
+}) {
   const [columnVisibility, setColumnVisibility] = useAtom2(columnVisibilityAtom);
   const [globalFilter, setGlobalFilter] = useAtom2(globalFilterAtom);
   const [sorting, setSorting] = useAtom2(tableSortingAtom);
@@ -567,6 +602,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(),
@@ -579,24 +615,26 @@ function DataTable({ columns, data, header, filters, config }) {
     height: config == null ? void 0 : config.height,
     width: config == null ? void 0 : config.width,
     children: [
-      /* @__PURE__ */ jsx13(DataTableHeader, {
+      /* @__PURE__ */ jsx14(DataTableHeader, {
         tableCaption: header == null ? void 0 : header.tableCaption,
         enableGlobalFilter: filters == null ? void 0 : filters.globalFilter,
         globalFilterPlaceholder: filters == null ? void 0 : filters.globalFilterPlaceholder,
         captionPadding: header == null ? void 0 : header.captionPadding,
-        filterActions: /* @__PURE__ */ jsx13(ColumnSelect, {
+        filterActions: /* @__PURE__ */ jsx14(ColumnSelect, {
           table
         })
       }),
-      /* @__PURE__ */ jsx13("div", {
+      /* @__PURE__ */ jsx14("div", {
         ref: tableContainerRef,
         className: "--table-container",
-        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ jsx13(VirtualTable, {
+        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ jsx14(VirtualTable, {
           containerRef: tableContainerRef,
           table,
+          isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
-        }) : /* @__PURE__ */ jsx13(BasicTable, {
+        }) : /* @__PURE__ */ jsx14(BasicTable, {
           table,
+          isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })
       })
@@ -606,9 +644,9 @@ function DataTable({ columns, data, header, filters, config }) {
 
 // src/DataTable/Provider.tsx
 import { Provider } from "jotai";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function DataTableProvider({ children, ...props }) {
-  return /* @__PURE__ */ jsx14(Provider, {
+  return /* @__PURE__ */ jsx15(Provider, {
     ...props,
     children
   });

package/package.json

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