@equinor/apollo-components 1.3.0 → 1.4.0

package/dist/index.js

@@ -30,7 +30,13 @@ __export(src_exports, {
   AppSidebar: () => AppSidebar,
   ChipsCell: () => ChipsCell,
   DataTable: () => DataTable2,
+  DynamicCell: () => DynamicCell,
+  HierarchyCell: () => HierarchyCell,
+  SelectColumnDef: () => SelectColumnDef,
+  StickyCell: () => StickyCell,
+  TypographyCustom: () => TypographyCustom,
   globalFilterAtom: () => globalFilterAtom,
+  prependSelectColumn: () => prependSelectColumn,
   rowSelectionAtom: () => rowSelectionAtom,
   tableSortingAtom: () => tableSortingAtom
 });
@@ -177,11 +183,221 @@ var ChipsCell = (props) => {
   });
 };
 
+// src/cells/DynamicCell.tsx
+var import_eds_core_react4 = require("@equinor/eds-core-react");
+var import_react_table = require("@tanstack/react-table");
+var import_styled_components6 = __toESM(require("styled-components"));
+
+// src/cells/StickyCell.tsx
+var import_eds_core_react3 = require("@equinor/eds-core-react");
+var import_styled_components4 = __toESM(require("styled-components"));
+var StickyCell = (0, import_styled_components4.default)(import_eds_core_react3.Table.Cell)`
+  position: sticky;
+  right: 0;
+  top: 0;
+  z-index: 4;
+`;
+var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
+  z-index: 5;
+`;
+
+// src/cells/styles.ts
+var import_styled_components5 = require("styled-components");
+var leftCellShadow = import_styled_components5.css`
+  &:before {
+    box-shadow: -1px 0 1px -1px inset;
+    content: ' ';
+    height: 100%;
+    top: 0;
+    left: -1px;
+    position: absolute;
+    width: 1px;
+  }
+`;
+
+// src/cells/DynamicCell.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var StyledStickyCell = (0, import_styled_components6.default)(StickyCell)`
+  background-clip: padding-box;
+  ${leftCellShadow}
+`;
+var StyledCell = (0, import_styled_components6.default)(import_eds_core_react4.Table.Cell)`
+  background-color: ${(props) => props.backgroundColor ? props.backgroundColor + " !important" : void 0};
+`;
+function DynamicCell({ cell, highlight }) {
+  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, {
+      "data-column": cell.column.id,
+      children: cellContent
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledCell, {
+    "data-column": cell.column.id,
+    backgroundColor: highlight ? "#d5eaf4" : void 0,
+    children: cellContent
+  });
+}
+
+// src/cells/HierarchyCell.tsx
+var import_eds_tokens4 = require("@equinor/eds-tokens");
+var import_styled_components8 = __toESM(require("styled-components"));
+
+// src/cells/TypographyCustom.tsx
+var import_eds_core_react5 = require("@equinor/eds-core-react");
+var import_eds_tokens3 = require("@equinor/eds-tokens");
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var truncateStyle = {
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis"
+};
+var TypographyCustom = (props) => {
+  const { noWrap, showAllOnHover, style: styleFromProps, ...edsTypographyProps } = props;
+  if (noWrap && showAllOnHover)
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(HoverCapture, {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShowAllWrapperWrapper, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Typography, {
+            ...edsTypographyProps,
+            ref: void 0,
+            style: {
+              ...styleFromProps,
+              whiteSpace: "nowrap"
+            }
+          })
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Typography, {
+          ...edsTypographyProps,
+          style: {
+            ...styleFromProps,
+            ...truncateStyle
+          }
+        })
+      ]
+    });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react5.Typography, {
+    ...edsTypographyProps,
+    style: { ...styleFromProps, ...noWrap ? truncateStyle : {} }
+  });
+};
+var HoverCapture = import_styled_components7.default.div`
+  position: relative;
+  z-index: 0;
+
+  padding: 0.5em;
+  margin: -0.5em;
+
+  &:hover > * {
+    opacity: 1;
+  }
+`;
+var ShowAllWrapperWrapper = import_styled_components7.default.div`
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+
+  opacity: 0;
+  padding-right: 1em;
+  background-color: ${import_eds_tokens3.tokens.colors.interactive.table__cell__fill_hover.hex};
+`;
+
+// src/cells/HierarchyCell.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  ${({ 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};
+      gap: 0.5rem;
+      .--divider {
+        width: ${depth * 32}px;
+        background-color: ${import_eds_tokens4.tokens.colors.infographic.primary__moss_green_34.hex};
+        height: 3px;
+        border-radius: 0 5px 5px 0;
+      }
+    `}
+`;
+function HierarchyCell(cell) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CellWrapper, {
+    depth: cell.row.depth,
+    expanded: cell.row.getIsExpanded(),
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", {
+        className: "--divider"
+      }),
+      cell.getValue()
+    ]
+  });
+}
+
+// src/cells/SelectColumnDef.tsx
+var import_eds_core_react6 = require("@equinor/eds-core-react");
+var import_eds_icons3 = require("@equinor/eds-icons");
+var import_styled_components9 = __toESM(require("styled-components"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CellWrapper2 = import_styled_components9.default.div`
+  display: flex;
+  align-items: center;
+  width: 48px;
+  margin-left: -16px;
+`;
+function SelectColumnDef(selectionMode) {
+  return {
+    id: "select",
+    header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CellWrapper2, {
+      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: ({ table, row }) => {
+      const paddingLeft = "0px";
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CellWrapper2, {
+        paddingLeft,
+        rowDepth: row.depth,
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, {
+          children: [
+            selectionMode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Radio, {
+              checked: row.getIsSelected(),
+              "aria-label": `Select row ${row.id}`,
+              onChange: row.getToggleSelectedHandler()
+            }) : /* @__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()
+            }),
+            row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Button, {
+              variant: "ghost_icon",
+              color: "secondary",
+              "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
+              onClick: row.getToggleExpandedHandler(),
+              style: { cursor: "pointer" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_eds_core_react6.Icon, {
+                data: row.getIsExpanded() ? import_eds_icons3.chevron_up : import_eds_icons3.chevron_down
+              })
+            })
+          ]
+        })
+      });
+    }
+  };
+}
+
 // src/DataTable/DataTable.tsx
-var import_react_table4 = require("@tanstack/react-table");
+var import_react_table5 = 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_components15 = __toESM(require("styled-components"));
 
 // src/DataTable/atoms.ts
 var import_jotai = require("jotai");
@@ -189,85 +405,129 @@ var columnVisibilityAtom = (0, import_jotai.atom)({});
 var globalFilterAtom = (0, import_jotai.atom)("");
 var rowSelectionAtom = (0, import_jotai.atom)({});
 var tableSortingAtom = (0, import_jotai.atom)([]);
+var expandedRowsAtom = (0, import_jotai.atom)({});
 
 // src/DataTable/components/BasicTable.tsx
-var import_eds_core_react5 = require("@equinor/eds-core-react");
-var import_react_table2 = require("@tanstack/react-table");
+var import_eds_core_react10 = require("@equinor/eds-core-react");
+var import_react_table3 = require("@tanstack/react-table");
+
+// src/DataTable/components/PlaceholderRow.tsx
+var import_eds_core_react7 = require("@equinor/eds-core-react");
+var import_styled_components10 = __toESM(require("styled-components"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var PlaceholderTextWrapper = import_styled_components10.default.div`
+  display: flex;
+  justify-content: center;
+`;
+function PlaceholderRow({ isLoading }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Table.Row, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Table.Cell, {
+      colSpan: 100,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlaceholderTextWrapper, {
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.DotProgress, {
+          color: "primary"
+        }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Typography, {
+          children: "No data available"
+        })
+      })
+    })
+  });
+}
 
 // src/DataTable/components/TableHeader.tsx
-var import_eds_core_react4 = require("@equinor/eds-core-react");
+var import_eds_core_react9 = require("@equinor/eds-core-react");
 
-// src/DataTable/components/HeaderCell.tsx
-var import_eds_core_react3 = 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`
+// src/cells/HeaderCell.tsx
+var import_eds_core_react8 = require("@equinor/eds-core-react");
+var import_eds_icons4 = require("@equinor/eds-icons");
+var import_react_table2 = require("@tanstack/react-table");
+var import_styled_components11 = __toESM(require("styled-components"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var HeaderDiv = import_styled_components11.default.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
 `;
+var StyledStickyCell2 = (0, import_styled_components11.default)(StickyCell)`
+  z-index: 5;
+  ${leftCellShadow}
+`;
 var HeaderCell = ({ header }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.Table.Cell, {
+  var _a;
+  if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky)
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledStickyCell2, {
+      colSpan: header.colSpan,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderContent, {
+        header
+      })
+    }, header.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Table.Cell, {
     colSpan: header.colSpan,
-    children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime4.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, {
-            data: import_eds_icons3.arrow_down
-          }),
-          desc: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_eds_core_react3.Icon, {
-            data: import_eds_icons3.arrow_up
-          })
-        }[header.column.getIsSorted()] ?? null
-      ]
+    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderContent, {
+      header
     })
   }, header.id);
 };
+function HeaderContent({ header }) {
+  if (header.isPlaceholder)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(HeaderDiv, {
+    onClick: header.column.getToggleSortingHandler(),
+    children: [
+      (0, import_react_table2.flexRender)(header.column.columnDef.header, header.getContext()),
+      {
+        asc: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
+          data: import_eds_icons4.arrow_drop_down
+        }),
+        desc: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
+          data: import_eds_icons4.arrow_drop_up
+        })
+      }[header.column.getIsSorted()] ?? null
+    ]
+  });
+}
 
 // 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_runtime10 = require("react/jsx-runtime");
+var TableHeader = ({ table, sticky }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.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_runtime10.jsx)(import_eds_core_react9.Table.Row, {
+    children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime11 = require("react/jsx-runtime");
+function BasicTable({ table, stickyHeader, isLoading }) {
+  const tableRows = table.getRowModel().rows;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_eds_core_react10.Table, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime11.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, {
-            children: (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext())
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Body, {
+        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Row, {
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Cell, {
+            children: (0, import_react_table3.flexRender)(cell.column.columnDef.cell, cell.getContext())
           }, cell.id))
-        }, row.id))
+        }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlaceholderRow, {
+          isLoading
+        })
       })
     ]
   });
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_eds_core_react7 = require("@equinor/eds-core-react");
-var import_eds_icons4 = require("@equinor/eds-icons");
+var import_eds_core_react11 = require("@equinor/eds-core-react");
+var import_eds_icons5 = require("@equinor/eds-icons");
 var import_react2 = require("react");
-var import_styled_components5 = __toESM(require("styled-components"));
+var import_styled_components12 = __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;
 }
@@ -277,41 +537,22 @@ function getColumnHeader(column) {
     return column.id;
   return typeof columnHeader === "string" ? columnHeader : column.id;
 }
-function prependSelectColumnIfEnabled(columns, config) {
-  if (!Boolean(config == null ? void 0 : config.rowSelection))
+function prependSelectColumn(columns, config) {
+  if (!(config == null ? void 0 : config.selectColumn))
     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];
+  if (config.selectColumn === "default")
+    return [SelectColumnDef(config == null ? void 0 : config.rowSelectionMode), ...columns];
+  return [config.selectColumn(), ...columns];
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ColumnSelectContent = import_styled_components5.default.div`
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ColumnSelectContent = import_styled_components12.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_components12.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -321,9 +562,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_runtime12.jsxs)(import_jsx_runtime12.Fragment, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Button, {
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Button, {
         "aria-haspopup": true,
         id: "column-select-anchor",
         "aria-controls": "column-select-popover",
@@ -331,51 +572,51 @@ 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_runtime12.jsx)(import_eds_core_react11.Icon, {
           name: "view_column",
-          data: import_eds_icons4.view_column
+          data: import_eds_icons5.view_column
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover, {
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react11.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_runtime12.jsxs)(import_eds_core_react11.Popover.Header, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Popover.Title, {
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Popover.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Button, {
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.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_runtime12.jsx)(import_eds_core_react11.Icon, {
                   name: "close",
-                  data: import_eds_icons4.close,
+                  data: import_eds_icons5.close,
                   size: 24
                 })
               })
             ]
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover.Content, {
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react11.Popover.Content, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ColumnSelectContent, {
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Checkbox, {
+                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.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_runtime12.jsx)(import_eds_core_react11.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_runtime12.jsx)(ActionsWrapper, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Button, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -392,21 +633,21 @@ function ColumnSelect({ table }) {
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_eds_core_react9 = require("@equinor/eds-core-react");
-var import_eds_icons6 = require("@equinor/eds-icons");
+var import_eds_core_react13 = require("@equinor/eds-core-react");
+var import_eds_icons7 = require("@equinor/eds-icons");
 var import_jotai2 = require("jotai");
-var import_styled_components7 = __toESM(require("styled-components"));
+var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/DataTable/filters/DebouncedInput.tsx
-var import_eds_core_react8 = require("@equinor/eds-core-react");
-var import_eds_icons5 = require("@equinor/eds-icons");
+var import_eds_core_react12 = require("@equinor/eds-core-react");
+var import_eds_icons6 = 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_components13 = __toESM(require("styled-components"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Wrapper3 = import_styled_components13.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components6.default)(import_eds_core_react8.Button)`
+var CloseButton = (0, import_styled_components13.default)(import_eds_core_react12.Button)`
   width: 24px;
   height: 24px;
 `;
@@ -427,23 +668,23 @@ 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_runtime13.jsx)(Wrapper3, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
+      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.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_runtime13.jsx)(import_eds_core_react12.Tooltip, {
         title: "Clear input",
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseButton, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
-            name: import_eds_icons5.close.name,
-            data: import_eds_icons5.close,
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Icon, {
+            name: import_eds_icons6.close.name,
+            data: import_eds_icons6.close,
             size: 18
           })
         })
@@ -464,15 +705,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_runtime14 = require("react/jsx-runtime");
+var DataTableHeaderWrapper = import_styled_components14.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_components14.default.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -480,20 +721,20 @@ 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_runtime14.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_runtime14.jsx)(import_eds_core_react13.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_runtime14.jsxs)(FilterContainer, {
         className: "--filter-container",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DebouncedInput, {
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DebouncedInput, {
             value: globalFilter,
-            icon: import_eds_icons6.search,
+            icon: import_eds_icons7.search,
             placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
             onChange: (value) => setGlobalFilter(String(value))
           }),
@@ -505,25 +746,25 @@ var DataTableHeader = (props) => {
 };
 
 // src/DataTable/components/VirtualTable.tsx
-var import_eds_core_react11 = require("@equinor/eds-core-react");
-var import_react_table3 = require("@tanstack/react-table");
+var import_eds_core_react15 = require("@equinor/eds-core-react");
+var import_react_table4 = 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_react14 = require("@equinor/eds-core-react");
+var import_jsx_runtime15 = 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_runtime15.jsx)(import_eds_core_react14.Table.Row, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react14.Table.Cell, {
       style: { height: `${props.height}px` }
     })
   });
 };
 
 // src/DataTable/components/VirtualTable.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function VirtualTable({ table, containerRef, ...props }) {
   var _a, _b;
   const { rows } = table.getRowModel();
@@ -535,27 +776,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_runtime16.jsxs)(import_eds_core_react15.Table, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react11.Table.Body, {
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_eds_core_react15.Table.Body, {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaddingRow, {
+          /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsx)(import_eds_core_react15.Table.Row, {
               active: row.getIsSelected(),
-              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())
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react15.Table.Cell, {
+                children: (0, import_react_table4.flexRender)(cell.column.columnDef.cell, cell.getContext())
               }, cell.id))
             }, row.id);
+          }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PlaceholderRow, {
+            isLoading: props.isLoading
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PaddingRow, {
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -565,8 +808,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_runtime17 = require("react/jsx-runtime");
+var DataTableWrapper = import_styled_components15.default.div`
   width: ${(props) => props.width ?? "100%"};
 
   .--table-container {
@@ -576,61 +819,89 @@ var DataTableWrapper = import_styled_components8.default.div`
 
     table {
       width: 100%;
+      table-layout: auto;
     }
   }
 `;
-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);
   const [rowSelectionState, setRowSelectionState] = (0, import_jotai3.useAtom)(rowSelectionAtom);
+  const [expanded, setExpanded] = (0, import_jotai3.useAtom)(expandedRowsAtom);
   function enableGlobalFilter(value) {
     return enableOrUndefined(filters == null ? void 0 : filters.globalFilter, value);
   }
-  const table = (0, import_react_table4.useReactTable)({
-    columns: prependSelectColumnIfEnabled(columns, config),
+  const table = (0, import_react_table5.useReactTable)({
+    columns: prependSelectColumn(columns, config),
     data,
-    getCoreRowModel: (0, import_react_table4.getCoreRowModel)(),
-    getFilteredRowModel: enableGlobalFilter((0, import_react_table4.getFilteredRowModel)()),
     globalFilterFn: enableGlobalFilter(fuzzyFilter),
     state: {
+      expanded,
       globalFilter: enableGlobalFilter(globalFilter),
       sorting: enableOrUndefined(config == null ? void 0 : config.sortable, sorting),
       rowSelection: rowSelectionState,
       columnVisibility
     },
-    onRowSelectionChange: setRowSelectionState,
-    enableMultiRowSelection: (config == null ? void 0 : config.rowSelection) === "multiple",
+    defaultColumn: {
+      cell: (cell) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TypographyCustom, {
+        noWrap: true,
+        children: cell.getValue()
+      })
+    },
     enableSorting: config == null ? void 0 : config.sortable,
+    enableExpanding: !(config == null ? void 0 : config.hideExpandControls),
+    enableMultiRowSelection: (config == null ? void 0 : config.rowSelectionMode) === "multiple",
+    enableSubRowSelection: (config == null ? void 0 : config.rowSelectionMode) !== "single",
+    getFilteredRowModel: enableGlobalFilter((0, import_react_table5.getFilteredRowModel)()),
+    getCoreRowModel: (0, import_react_table5.getCoreRowModel)(),
+    getExpandedRowModel: (0, import_react_table5.getExpandedRowModel)(),
+    getSortedRowModel: (0, import_react_table5.getSortedRowModel)(),
+    onExpandedChange: setExpanded,
+    onRowSelectionChange: setRowSelectionState,
     onSortingChange: enableOrUndefined(config == null ? void 0 : config.sortable, setSorting),
-    getSortedRowModel: (0, import_react_table4.getSortedRowModel)(),
     onColumnVisibilityChange: setColumnVisibility,
-    onGlobalFilterChange: enableGlobalFilter(setGlobalFilter)
+    onGlobalFilterChange: enableGlobalFilter(setGlobalFilter),
+    getSubRows: config == null ? void 0 : config.getSubRows
   });
+  (0, import_react4.useEffect)(() => {
+    if (config && config.expandAllByDefault) {
+      table.toggleAllRowsExpanded();
+    }
+  }, [table, config == null ? void 0 : config.expandAllByDefault]);
   const tableContainerRef = (0, import_react4.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DataTableWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.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_runtime17.jsx)(ColumnSelect, {
           table
         })
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {
+      /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsx)(VirtualTable, {
           containerRef: tableContainerRef,
           table,
+          isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
-        }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BasicTable, {
+        }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BasicTable, {
           table,
+          isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })
       })
@@ -640,9 +911,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_runtime18 = require("react/jsx-runtime");
 function DataTableProvider({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jotai4.Provider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jotai4.Provider, {
     ...props,
     children
   });
@@ -657,7 +928,13 @@ DataTable2.Provider = DataTableProvider;
   AppSidebar,
   ChipsCell,
   DataTable,
+  DynamicCell,
+  HierarchyCell,
+  SelectColumnDef,
+  StickyCell,
+  TypographyCustom,
   globalFilterAtom,
+  prependSelectColumn,
   rowSelectionAtom,
   tableSortingAtom
 });