@equinor/apollo-components 1.3.0 → 1.4.0

package/dist/index.mjs

@@ -139,16 +139,229 @@ var ChipsCell = (props) => {
   });
 };
 
+// src/cells/DynamicCell.tsx
+import { Table as Table2 } from "@equinor/eds-core-react";
+import { flexRender } from "@tanstack/react-table";
+import styled5 from "styled-components";
+
+// src/cells/StickyCell.tsx
+import { Table } from "@equinor/eds-core-react";
+import styled4 from "styled-components";
+var StickyCell = styled4(Table.Cell)`
+  position: sticky;
+  right: 0;
+  top: 0;
+  z-index: 4;
+`;
+var StickyHeaderCell = styled4(StickyCell)`
+  z-index: 5;
+`;
+
+// src/cells/styles.ts
+import { css as css2 } from "styled-components";
+var leftCellShadow = css2`
+  &:before {
+    box-shadow: -1px 0 1px -1px inset;
+    content: ' ';
+    height: 100%;
+    top: 0;
+    left: -1px;
+    position: absolute;
+    width: 1px;
+  }
+`;
+
+// src/cells/DynamicCell.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StyledStickyCell = styled5(StickyCell)`
+  background-clip: padding-box;
+  ${leftCellShadow}
+`;
+var StyledCell = styled5(Table2.Cell)`
+  background-color: ${(props) => props.backgroundColor ? props.backgroundColor + " !important" : void 0};
+`;
+function DynamicCell({ cell, highlight }) {
+  var _a;
+  const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
+  if ((_a = cell.column.columnDef.meta) == null ? void 0 : _a.sticky) {
+    return /* @__PURE__ */ jsx4(StyledStickyCell, {
+      "data-column": cell.column.id,
+      children: cellContent
+    });
+  }
+  return /* @__PURE__ */ jsx4(StyledCell, {
+    "data-column": cell.column.id,
+    backgroundColor: highlight ? "#d5eaf4" : void 0,
+    children: cellContent
+  });
+}
+
+// src/cells/HierarchyCell.tsx
+import { tokens as tokens4 } from "@equinor/eds-tokens";
+import styled7, { css as css3 } from "styled-components";
+
+// src/cells/TypographyCustom.tsx
+import {
+  Typography as EdsTypography
+} from "@equinor/eds-core-react";
+import { tokens as tokens3 } from "@equinor/eds-tokens";
+import styled6 from "styled-components";
+import { jsx as jsx5, jsxs as jsxs3 } from "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__ */ jsxs3(HoverCapture, {
+      children: [
+        /* @__PURE__ */ jsx5(ShowAllWrapperWrapper, {
+          children: /* @__PURE__ */ jsx5(EdsTypography, {
+            ...edsTypographyProps,
+            ref: void 0,
+            style: {
+              ...styleFromProps,
+              whiteSpace: "nowrap"
+            }
+          })
+        }),
+        /* @__PURE__ */ jsx5(EdsTypography, {
+          ...edsTypographyProps,
+          style: {
+            ...styleFromProps,
+            ...truncateStyle
+          }
+        })
+      ]
+    });
+  return /* @__PURE__ */ jsx5(EdsTypography, {
+    ...edsTypographyProps,
+    style: { ...styleFromProps, ...noWrap ? truncateStyle : {} }
+  });
+};
+var HoverCapture = styled6.div`
+  position: relative;
+  z-index: 0;
+
+  padding: 0.5em;
+  margin: -0.5em;
+
+  &:hover > * {
+    opacity: 1;
+  }
+`;
+var ShowAllWrapperWrapper = styled6.div`
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+
+  opacity: 0;
+  padding-right: 1em;
+  background-color: ${tokens3.colors.interactive.table__cell__fill_hover.hex};
+`;
+
+// src/cells/HierarchyCell.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var CellWrapper = styled7(TypographyCustom)`
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  ${({ depth, expanded }) => expanded && depth === 0 && "font-weight: bold;"}
+
+  ${({ depth }) => depth > 0 && css3`
+      border-left: 3px solid ${tokens4.colors.infographic.primary__moss_green_34.hex};
+      gap: 0.5rem;
+      .--divider {
+        width: ${depth * 32}px;
+        background-color: ${tokens4.colors.infographic.primary__moss_green_34.hex};
+        height: 3px;
+        border-radius: 0 5px 5px 0;
+      }
+    `}
+`;
+function HierarchyCell(cell) {
+  return /* @__PURE__ */ jsxs4(CellWrapper, {
+    depth: cell.row.depth,
+    expanded: cell.row.getIsExpanded(),
+    children: [
+      /* @__PURE__ */ jsx6("span", {
+        className: "--divider"
+      }),
+      cell.getValue()
+    ]
+  });
+}
+
+// src/cells/SelectColumnDef.tsx
+import { Button as Button2, Checkbox, Icon as Icon3, Radio } from "@equinor/eds-core-react";
+import { chevron_down, chevron_up } from "@equinor/eds-icons";
+import styled8 from "styled-components";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var CellWrapper2 = styled8.div`
+  display: flex;
+  align-items: center;
+  width: 48px;
+  margin-left: -16px;
+`;
+function SelectColumnDef(selectionMode) {
+  return {
+    id: "select",
+    header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ jsx7(CellWrapper2, {
+      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: ({ table, row }) => {
+      const paddingLeft = "0px";
+      return /* @__PURE__ */ jsx7(CellWrapper2, {
+        paddingLeft,
+        rowDepth: row.depth,
+        children: /* @__PURE__ */ jsxs5(Fragment, {
+          children: [
+            selectionMode === "single" ? /* @__PURE__ */ jsx7(Radio, {
+              checked: row.getIsSelected(),
+              "aria-label": `Select row ${row.id}`,
+              onChange: row.getToggleSelectedHandler()
+            }) : /* @__PURE__ */ jsx7(Checkbox, {
+              checked: row.getIsSelected(),
+              indeterminate: row.getIsSomeSelected(),
+              "aria-label": `Select row ${row.id}`,
+              onChange: row.getToggleSelectedHandler()
+            }),
+            row.getCanExpand() && table.options.enableExpanding && /* @__PURE__ */ jsx7(Button2, {
+              variant: "ghost_icon",
+              color: "secondary",
+              "aria-label": row.getIsExpanded() ? "Close group" : "Expand group",
+              onClick: row.getToggleExpandedHandler(),
+              style: { cursor: "pointer" },
+              children: /* @__PURE__ */ jsx7(Icon3, {
+                data: row.getIsExpanded() ? chevron_up : chevron_down
+              })
+            })
+          ]
+        })
+      });
+    }
+  };
+}
+
 // src/DataTable/DataTable.tsx
 import {
   getCoreRowModel,
+  getExpandedRowModel,
   getFilteredRowModel,
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
 import { useAtom as useAtom2 } from "jotai";
-import { useRef as useRef2 } from "react";
-import styled8 from "styled-components";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import styled14 from "styled-components";
 
 // src/DataTable/atoms.ts
 import { atom } from "jotai";
@@ -156,85 +369,129 @@ var columnVisibilityAtom = atom({});
 var globalFilterAtom = atom("");
 var rowSelectionAtom = atom({});
 var tableSortingAtom = atom([]);
+var expandedRowsAtom = atom({});
 
 // src/DataTable/components/BasicTable.tsx
 import { Table as EdsTable } from "@equinor/eds-core-react";
-import { flexRender as flexRender2 } from "@tanstack/react-table";
+import { flexRender as flexRender3 } from "@tanstack/react-table";
+
+// src/DataTable/components/PlaceholderRow.tsx
+import { DotProgress, Table as Table3, Typography } from "@equinor/eds-core-react";
+import styled9 from "styled-components";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var PlaceholderTextWrapper = styled9.div`
+  display: flex;
+  justify-content: center;
+`;
+function PlaceholderRow({ isLoading }) {
+  return /* @__PURE__ */ jsx8(Table3.Row, {
+    children: /* @__PURE__ */ jsx8(Table3.Cell, {
+      colSpan: 100,
+      children: /* @__PURE__ */ jsx8(PlaceholderTextWrapper, {
+        children: isLoading ? /* @__PURE__ */ jsx8(DotProgress, {
+          color: "primary"
+        }) : /* @__PURE__ */ jsx8(Typography, {
+          children: "No data available"
+        })
+      })
+    })
+  });
+}
 
 // src/DataTable/components/TableHeader.tsx
-import { Table as Table2 } from "@equinor/eds-core-react";
+import { Table as Table5 } from "@equinor/eds-core-react";
 
-// src/DataTable/components/HeaderCell.tsx
-import { Icon as Icon3, Table } 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`
+// src/cells/HeaderCell.tsx
+import { Icon as Icon4, Table as Table4 } from "@equinor/eds-core-react";
+import { arrow_drop_down, arrow_drop_up } from "@equinor/eds-icons";
+import { flexRender as flexRender2 } from "@tanstack/react-table";
+import styled10 from "styled-components";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var HeaderDiv = styled10.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
 `;
+var StyledStickyCell2 = styled10(StickyCell)`
+  z-index: 5;
+  ${leftCellShadow}
+`;
 var HeaderCell = ({ header }) => {
-  return /* @__PURE__ */ jsx4(Table.Cell, {
+  var _a;
+  if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky)
+    return /* @__PURE__ */ jsx9(StyledStickyCell2, {
+      colSpan: header.colSpan,
+      children: /* @__PURE__ */ jsx9(HeaderContent, {
+        header
+      })
+    }, header.id);
+  return /* @__PURE__ */ jsx9(Table4.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, {
-            data: arrow_down
-          }),
-          desc: /* @__PURE__ */ jsx4(Icon3, {
-            data: arrow_up
-          })
-        }[header.column.getIsSorted()] ?? null
-      ]
+    children: /* @__PURE__ */ jsx9(HeaderContent, {
+      header
     })
   }, header.id);
 };
+function HeaderContent({ header }) {
+  if (header.isPlaceholder)
+    return null;
+  return /* @__PURE__ */ jsxs6(HeaderDiv, {
+    onClick: header.column.getToggleSortingHandler(),
+    children: [
+      flexRender2(header.column.columnDef.header, header.getContext()),
+      {
+        asc: /* @__PURE__ */ jsx9(Icon4, {
+          data: arrow_drop_down
+        }),
+        desc: /* @__PURE__ */ jsx9(Icon4, {
+          data: arrow_drop_up
+        })
+      }[header.column.getIsSorted()] ?? null
+    ]
+  });
+}
 
 // src/DataTable/components/TableHeader.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var TableHeader = ({ table, sticky }) => /* @__PURE__ */ jsx5(Table2.Head, {
+import { jsx as jsx10 } from "react/jsx-runtime";
+var TableHeader = ({ table, sticky }) => /* @__PURE__ */ jsx10(Table5.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__ */ jsx10(Table5.Row, {
+    children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx10(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 }) {
-  return /* @__PURE__ */ jsxs4(EdsTable, {
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function BasicTable({ table, stickyHeader, isLoading }) {
+  const tableRows = table.getRowModel().rows;
+  return /* @__PURE__ */ jsxs7(EdsTable, {
     children: [
-      /* @__PURE__ */ jsx6(TableHeader, {
+      /* @__PURE__ */ jsx11(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, {
-            children: flexRender2(cell.column.columnDef.cell, cell.getContext())
+      /* @__PURE__ */ jsx11(EdsTable.Body, {
+        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx11(EdsTable.Row, {
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx11(EdsTable.Cell, {
+            children: flexRender3(cell.column.columnDef.cell, cell.getContext())
           }, cell.id))
-        }, row.id))
+        }, row.id)) : /* @__PURE__ */ jsx11(PlaceholderRow, {
+          isLoading
+        })
       })
     ]
   });
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-import { Button as Button2, Checkbox as Checkbox2, Divider, Icon as Icon4, Popover } from "@equinor/eds-core-react";
+import { Button as Button3, Checkbox as Checkbox2, Divider, Icon as Icon5, 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 styled11 from "styled-components";
 
 // 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;
 }
@@ -244,41 +501,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__ */ 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];
+  if (config.selectColumn === "default")
+    return [SelectColumnDef(config == null ? void 0 : config.rowSelectionMode), ...columns];
+  return [config.selectColumn(), ...columns];
 }
 
 // src/DataTable/components/ColumnSelect.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var ColumnSelectContent = styled5.div`
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var ColumnSelectContent = styled11.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.5rem;
 `;
-var ActionsWrapper = styled5.div`
+var ActionsWrapper = styled11.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -288,9 +526,9 @@ function ColumnSelect({ table }) {
   const [isOpen, setIsOpen] = useState2(false);
   const referenceElement = useRef(null);
   const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
-  return /* @__PURE__ */ jsxs5(Fragment, {
+  return /* @__PURE__ */ jsxs8(Fragment2, {
     children: [
-      /* @__PURE__ */ jsx8(Button2, {
+      /* @__PURE__ */ jsx12(Button3, {
         "aria-haspopup": true,
         id: "column-select-anchor",
         "aria-controls": "column-select-popover",
@@ -298,28 +536,28 @@ function ColumnSelect({ table }) {
         ref: referenceElement,
         variant: "ghost_icon",
         onClick: () => setIsOpen(true),
-        children: /* @__PURE__ */ jsx8(Icon4, {
+        children: /* @__PURE__ */ jsx12(Icon5, {
           name: "view_column",
           data: view_column
         })
       }),
-      /* @__PURE__ */ jsxs5(Popover, {
+      /* @__PURE__ */ jsxs8(Popover, {
         open: isOpen,
         id: "column-select-popover",
         anchorEl: referenceElement.current,
         placement: "bottom-end",
         onClose: () => setIsOpen(false),
         children: [
-          /* @__PURE__ */ jsxs5(Popover.Header, {
+          /* @__PURE__ */ jsxs8(Popover.Header, {
             children: [
-              /* @__PURE__ */ jsx8(Popover.Title, {
+              /* @__PURE__ */ jsx12(Popover.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ jsx8(Button2, {
+              /* @__PURE__ */ jsx12(Button3, {
                 variant: "ghost_icon",
                 "aria-label": "Close column select",
                 onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ jsx8(Icon4, {
+                children: /* @__PURE__ */ jsx12(Icon5, {
                   name: "close",
                   data: close,
                   size: 24
@@ -327,22 +565,22 @@ function ColumnSelect({ table }) {
               })
             ]
           }),
-          /* @__PURE__ */ jsxs5(Popover.Content, {
+          /* @__PURE__ */ jsxs8(Popover.Content, {
             children: [
-              /* @__PURE__ */ jsx8(ColumnSelectContent, {
+              /* @__PURE__ */ jsx12(ColumnSelectContent, {
                 children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ jsx8(Checkbox2, {
+                  return /* @__PURE__ */ jsx12(Checkbox2, {
                     checked: column.getIsVisible(),
                     label: getColumnHeader(column),
                     onChange: column.getToggleVisibilityHandler()
                   }, column.id);
                 })
               }),
-              /* @__PURE__ */ jsx8(Divider, {
+              /* @__PURE__ */ jsx12(Divider, {
                 variant: "small"
               }),
-              /* @__PURE__ */ jsx8(ActionsWrapper, {
-                children: /* @__PURE__ */ jsx8(Button2, {
+              /* @__PURE__ */ jsx12(ActionsWrapper, {
+                children: /* @__PURE__ */ jsx12(Button3, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -359,21 +597,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 styled13 from "styled-components";
 
 // src/DataTable/filters/DebouncedInput.tsx
-import { Button as Button3, Icon as Icon5, Input, Tooltip } from "@equinor/eds-core-react";
+import { Button as Button4, Icon as Icon6, 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 styled12 from "styled-components";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Wrapper3 = styled12.div`
   width: 200px;
 `;
-var CloseButton = styled6(Button3)`
+var CloseButton = styled12(Button4)`
   width: 24px;
   height: 24px;
 `;
@@ -394,21 +632,21 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ jsx9(Wrapper3, {
-    children: /* @__PURE__ */ jsx9(Input, {
+  return /* @__PURE__ */ jsx13(Wrapper3, {
+    children: /* @__PURE__ */ jsx13(Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ jsx9(Icon5, {
+      leftAdornments: icon && /* @__PURE__ */ jsx13(Icon6, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ jsx9(Tooltip, {
+      rightAdornments: !!value && /* @__PURE__ */ jsx13(Tooltip, {
         title: "Clear input",
-        children: /* @__PURE__ */ jsx9(CloseButton, {
+        children: /* @__PURE__ */ jsx13(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ jsx9(Icon5, {
+          children: /* @__PURE__ */ jsx13(Icon6, {
             name: close2.name,
             data: close2,
             size: 18
@@ -431,15 +669,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 jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var DataTableHeaderWrapper = styled13.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.captionPadding ?? "1rem"};
 `;
-var FilterContainer = styled7.div`
+var FilterContainer = styled13.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -447,18 +685,18 @@ var FilterContainer = styled7.div`
 `;
 var DataTableHeader = (props) => {
   const [globalFilter, setGlobalFilter] = useAtom(globalFilterAtom);
-  return /* @__PURE__ */ jsxs6(DataTableHeaderWrapper, {
+  return /* @__PURE__ */ jsxs9(DataTableHeaderWrapper, {
     className: "--table-caption",
     captionPadding: props.captionPadding,
     children: [
-      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ jsx10(Typography, {
+      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ jsx14(Typography2, {
         variant: "h3",
         children: props == null ? void 0 : props.tableCaption
       }),
-      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ jsxs6(FilterContainer, {
+      (props == null ? void 0 : props.enableGlobalFilter) && /* @__PURE__ */ jsxs9(FilterContainer, {
         className: "--filter-container",
         children: [
-          /* @__PURE__ */ jsx10(DebouncedInput, {
+          /* @__PURE__ */ jsx14(DebouncedInput, {
             value: globalFilter,
             icon: search,
             placeholder: (props == null ? void 0 : props.globalFilterPlaceholder) ?? "Search all columns",
@@ -472,25 +710,25 @@ var DataTableHeader = (props) => {
 };
 
 // src/DataTable/components/VirtualTable.tsx
-import { Table as Table5 } from "@equinor/eds-core-react";
-import { flexRender as flexRender3 } from "@tanstack/react-table";
+import { Table as Table8 } from "@equinor/eds-core-react";
+import { flexRender as flexRender4 } 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 Table7 } from "@equinor/eds-core-react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ jsx11(Table4.Row, {
-    children: /* @__PURE__ */ jsx11(Table4.Cell, {
+  return /* @__PURE__ */ jsx15(Table7.Row, {
+    children: /* @__PURE__ */ jsx15(Table7.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 jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function VirtualTable({ table, containerRef, ...props }) {
   var _a, _b;
   const { rows } = table.getRowModel();
@@ -502,27 +740,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__ */ jsxs10(Table8, {
     children: [
-      /* @__PURE__ */ jsx12(TableHeader, {
+      /* @__PURE__ */ jsx16(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ jsxs7(Table5.Body, {
+      /* @__PURE__ */ jsxs10(Table8.Body, {
         children: [
-          /* @__PURE__ */ jsx12(PaddingRow, {
+          /* @__PURE__ */ jsx16(PaddingRow, {
             height: paddingTop
           }),
-          virtualRows.map((virtualRow) => {
+          rows.length ? virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
-            return /* @__PURE__ */ jsx12(Table5.Row, {
+            return /* @__PURE__ */ jsx16(Table8.Row, {
               active: row.getIsSelected(),
-              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx12(Table5.Cell, {
-                children: flexRender3(cell.column.columnDef.cell, cell.getContext())
+              children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx16(Table8.Cell, {
+                children: flexRender4(cell.column.columnDef.cell, cell.getContext())
               }, cell.id))
             }, row.id);
+          }) : /* @__PURE__ */ jsx16(PlaceholderRow, {
+            isLoading: props.isLoading
           }),
-          /* @__PURE__ */ jsx12(PaddingRow, {
+          /* @__PURE__ */ jsx16(PaddingRow, {
             height: paddingBottom
           })
         ]
@@ -532,8 +772,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 jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var DataTableWrapper = styled14.div`
   width: ${(props) => props.width ?? "100%"};
 
   .--table-container {
@@ -543,61 +783,89 @@ var DataTableWrapper = styled8.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] = useAtom2(columnVisibilityAtom);
   const [globalFilter, setGlobalFilter] = useAtom2(globalFilterAtom);
   const [sorting, setSorting] = useAtom2(tableSortingAtom);
   const [rowSelectionState, setRowSelectionState] = useAtom2(rowSelectionAtom);
+  const [expanded, setExpanded] = useAtom2(expandedRowsAtom);
   function enableGlobalFilter(value) {
     return enableOrUndefined(filters == null ? void 0 : filters.globalFilter, value);
   }
   const table = useReactTable({
-    columns: prependSelectColumnIfEnabled(columns, config),
+    columns: prependSelectColumn(columns, config),
     data,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: enableGlobalFilter(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__ */ jsx17(TypographyCustom, {
+        noWrap: true,
+        children: cell.getValue()
+      })
+    },
     enableSorting: config == null ? void 0 : config.sortable,
-    onSortingChange: enableOrUndefined(config == null ? void 0 : config.sortable, setSorting),
+    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(getFilteredRowModel()),
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    onExpandedChange: setExpanded,
+    onRowSelectionChange: setRowSelectionState,
+    onSortingChange: enableOrUndefined(config == null ? void 0 : config.sortable, setSorting),
     onColumnVisibilityChange: setColumnVisibility,
-    onGlobalFilterChange: enableGlobalFilter(setGlobalFilter)
+    onGlobalFilterChange: enableGlobalFilter(setGlobalFilter),
+    getSubRows: config == null ? void 0 : config.getSubRows
   });
+  useEffect2(() => {
+    if (config && config.expandAllByDefault) {
+      table.toggleAllRowsExpanded();
+    }
+  }, [table, config == null ? void 0 : config.expandAllByDefault]);
   const tableContainerRef = useRef2(null);
-  return /* @__PURE__ */ jsxs8(DataTableWrapper, {
+  return /* @__PURE__ */ jsxs11(DataTableWrapper, {
     captionPadding: header == null ? void 0 : header.captionPadding,
     height: config == null ? void 0 : config.height,
     width: config == null ? void 0 : config.width,
     children: [
-      /* @__PURE__ */ jsx13(DataTableHeader, {
+      /* @__PURE__ */ jsx17(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__ */ jsx17(ColumnSelect, {
           table
         })
       }),
-      /* @__PURE__ */ jsx13("div", {
+      /* @__PURE__ */ jsx17("div", {
         ref: tableContainerRef,
         className: "--table-container",
-        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ jsx13(VirtualTable, {
+        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ jsx17(VirtualTable, {
           containerRef: tableContainerRef,
           table,
+          isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
-        }) : /* @__PURE__ */ jsx13(BasicTable, {
+        }) : /* @__PURE__ */ jsx17(BasicTable, {
           table,
+          isLoading,
           stickyHeader: header == null ? void 0 : header.stickyHeader
         })
       })
@@ -607,9 +875,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 jsx18 } from "react/jsx-runtime";
 function DataTableProvider({ children, ...props }) {
-  return /* @__PURE__ */ jsx14(Provider, {
+  return /* @__PURE__ */ jsx18(Provider, {
     ...props,
     children
   });
@@ -623,7 +891,13 @@ export {
   AppSidebar,
   ChipsCell,
   DataTable2 as DataTable,
+  DynamicCell,
+  HierarchyCell,
+  SelectColumnDef,
+  StickyCell,
+  TypographyCustom,
   globalFilterAtom,
+  prependSelectColumn,
   rowSelectionAtom,
   tableSortingAtom
 };