@equinor/apollo-components 1.12.3 → 3.0.0

package/dist/index.js

@@ -30,7 +30,7 @@ __export(src_exports, {
   AppSidebar: () => AppSidebar,
   ChipsCell: () => ChipsCell,
   ColumnSelect: () => ColumnSelect,
-  DataTable: () => DataTable2,
+  DataTable: () => DataTable,
   DynamicCell: () => DynamicCell,
   HierarchyCell: () => HierarchyCell,
   SelectColumnDef: () => SelectColumnDef,
@@ -38,11 +38,7 @@ __export(src_exports, {
   TableHeader: () => TableHeader,
   TypographyCustom: () => TypographyCustom,
   capitalizeHeader: () => capitalizeHeader,
-  columnVisibilityAtom: () => columnVisibilityAtom,
-  globalFilterAtom: () => globalFilterAtom,
-  prependSelectColumn: () => prependSelectColumn,
-  rowSelectionAtom: () => rowSelectionAtom,
-  tableSortingAtom: () => tableSortingAtom
+  prependSelectColumn: () => prependSelectColumn
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -356,12 +352,11 @@ var CellWrapper2 = import_styled_components8.default.div`
   margin-left: -16px;
   z-index: 2;
 `;
-function SelectColumnDef(props = {}) {
-  const selectionMode = props.rowSelectionMode;
-  const showBothSelectAndSubRowsToggle = props.hideExpandControls === false;
+function SelectColumnDef(props) {
+  const selectionMode = props.mode;
   return {
     id: "select",
-    size: showBothSelectAndSubRowsToggle ? 96 : 48,
+    size: props.includeExpansionButton ? 96 : 48,
     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(),
@@ -404,55 +399,142 @@ function SelectColumnDef(props = {}) {
   };
 }
 
-// src/DataTable/DataTableRaw.tsx
-var import_react5 = require("react");
-var import_styled_components16 = __toESM(require("styled-components"));
-
-// src/DataTable/components/BasicTable.tsx
-var import_eds_core_react12 = require("@equinor/eds-core-react");
-
-// src/DataTable/components/PlaceholderRow.tsx
+// 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_react2 = require("react");
 var import_styled_components9 = __toESM(require("styled-components"));
+
+// src/DataTable/utils.tsx
+function capitalizeHeader(context) {
+  const header = context.header.id;
+  return header.charAt(0).toUpperCase() + header.slice(1);
+}
+function enableOrUndefined(enabled, value) {
+  return Boolean(enabled) ? value : void 0;
+}
+function getColumnHeader(column) {
+  const columnHeader = column.columnDef.header;
+  if (!columnHeader)
+    return column.id;
+  return typeof columnHeader === "string" ? columnHeader : column.id;
+}
+function prependSelectColumn(columns, config) {
+  if (!(config == null ? void 0 : config.selectColumn))
+    return columns;
+  if (config.selectColumn === "default")
+    return [SelectColumnDef(config), ...columns];
+  return [config.selectColumn(), ...columns];
+}
+function getFunctionValueOrDefault(valueOrFn, fnProps, defaultValue) {
+  if (valueOrFn === void 0)
+    return defaultValue;
+  if (typeof valueOrFn === "function")
+    return valueOrFn(fnProps);
+  return valueOrFn;
+}
+
+// src/DataTable/components/ColumnSelect.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var PlaceholderTextWrapper = import_styled_components9.default.div`
+var ColumnSelectContent = import_styled_components9.default.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.5rem;
+`;
+var ActionsWrapper = import_styled_components9.default.div`
   display: flex;
-  justify-content: center;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
 `;
-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"
+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, {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Tooltip, {
+        title: "Select columns",
+        placement: "left",
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Button, {
+          "aria-haspopup": true,
+          id: "column-select-anchor",
+          "aria-controls": "column-select-popover",
+          "aria-expanded": isOpen,
+          ref: referenceElement,
+          variant: "ghost_icon",
+          onClick: () => setIsOpen(true),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Icon, {
+            name: "view_column",
+            data: import_eds_icons4.view_column
+          })
         })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover, {
+        open: isOpen,
+        id: "column-select-popover",
+        anchorEl: referenceElement.current,
+        placement: "bottom-end",
+        onClose: () => setIsOpen(false),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover.Header, {
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Popover.Title, {
+                children: "Column settings"
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Button, {
+                variant: "ghost_icon",
+                "aria-label": "Close column select",
+                onClick: () => setIsOpen(false),
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Icon, {
+                  name: "close",
+                  data: import_eds_icons4.close,
+                  size: 24
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_eds_core_react7.Popover.Content, {
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ColumnSelectContent, {
+                children: selectableColumns.map((column) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Checkbox, {
+                    checked: column.getIsVisible(),
+                    label: getColumnHeader(column),
+                    onChange: column.getToggleVisibilityHandler()
+                  }, column.id);
+                })
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Divider, {
+                variant: "small"
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ActionsWrapper, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_eds_core_react7.Button, {
+                  color: "secondary",
+                  variant: "ghost",
+                  disabled: table.getIsAllColumnsVisible(),
+                  onClick: () => table.toggleAllColumnsVisible(true),
+                  children: "Reset to default"
+                })
+              })
+            ]
+          })
+        ]
       })
-    })
+    ]
   });
 }
 
-// src/DataTable/components/TableBody.tsx
-var import_eds_core_react8 = require("@equinor/eds-core-react");
-var import_styled_components10 = __toESM(require("styled-components"));
-var TableBody = (0, import_styled_components10.default)(import_eds_core_react8.Table.Body)`
-  // The following attribute are important for fixed column width
-  // CHANGE THES WITH CAUTION
-  background: inherit;
-`;
-
 // src/DataTable/components/TableHeader.tsx
-var import_eds_core_react10 = require("@equinor/eds-core-react");
+var import_eds_core_react9 = require("@equinor/eds-core-react");
 
 // src/cells/HeaderCell.tsx
-var import_eds_core_react9 = require("@equinor/eds-core-react");
-var import_eds_icons4 = require("@equinor/eds-icons");
+var import_eds_core_react8 = require("@equinor/eds-core-react");
+var import_eds_icons5 = require("@equinor/eds-icons");
 var import_react_table2 = require("@tanstack/react-table");
-var import_styled_components11 = __toESM(require("styled-components"));
+var import_styled_components10 = __toESM(require("styled-components"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var HeaderDiv = import_styled_components11.default.div`
+var HeaderDiv = import_styled_components10.default.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -478,7 +560,7 @@ var HeaderCell = ({ header }) => {
       })
     }, header.id);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react9.Table.Cell, {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Table.Cell, {
     ...cellProps,
     children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderContent, {
       header
@@ -492,14 +574,14 @@ function HeaderContent({ header }) {
     children: [
       (0, import_react_table2.flexRender)(header.column.columnDef.header, header.getContext()),
       {
-        asc: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react9.Icon, {
-          data: import_eds_icons4.arrow_drop_up
+        asc: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
+          data: import_eds_icons5.arrow_drop_up
         }),
-        desc: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react9.Icon, {
-          data: import_eds_icons4.arrow_drop_down
+        desc: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
+          data: import_eds_icons5.arrow_drop_down
         }),
-        none: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react9.Icon, {
-          data: import_eds_icons4.arrow_drop_down
+        none: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
+          data: import_eds_icons5.arrow_drop_down
         })
       }[header.column.getIsSorted()] ?? null
     ]
@@ -521,9 +603,9 @@ function getSort({ column }) {
 // src/DataTable/components/TableHeader.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function TableHeader({ table, sticky }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react10.Table.Head, {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Head, {
     sticky,
-    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react10.Table.Row, {
+    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))
@@ -531,14 +613,54 @@ function TableHeader({ table, sticky }) {
   });
 }
 
-// src/DataTable/components/TableRow.tsx
+// src/DataTable/DataTable.tsx
+var import_react_table3 = require("@tanstack/react-table");
+var import_react5 = require("react");
+var import_styled_components16 = __toESM(require("styled-components"));
+
+// src/DataTable/components/BasicTable.tsx
+var import_eds_core_react13 = require("@equinor/eds-core-react");
+
+// src/DataTable/components/PlaceholderRow.tsx
+var import_eds_core_react10 = require("@equinor/eds-core-react");
+var import_styled_components11 = __toESM(require("styled-components"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var PlaceholderTextWrapper = import_styled_components11.default.div`
+  display: flex;
+  justify-content: center;
+`;
+function PlaceholderRow({ isLoading }) {
+  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, {
+      colSpan: 100,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlaceholderTextWrapper, {
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.DotProgress, {
+          color: "primary"
+        }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Typography, {
+          children: "No data available"
+        })
+      })
+    })
+  });
+}
+
+// src/DataTable/components/TableBody.tsx
 var import_eds_core_react11 = require("@equinor/eds-core-react");
 var import_styled_components12 = __toESM(require("styled-components"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var TableBody = (0, import_styled_components12.default)(import_eds_core_react11.Table.Body)`
+  // The following attribute are important for fixed column width
+  // CHANGE THES WITH CAUTION
+  background: inherit;
+`;
+
+// src/DataTable/components/TableRow.tsx
+var import_eds_core_react12 = require("@equinor/eds-core-react");
+var import_styled_components13 = __toESM(require("styled-components"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function TableRow({ row, rowConfig, cellConfig }) {
   var _a;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
-  const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledTableRow, {
+  const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledTableRow, {
     active: row.getIsSelected(),
     style: {
       cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
@@ -552,7 +674,7 @@ function TableRow({ row, rowConfig, cellConfig }) {
     onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
     children: row.getVisibleCells().map((cell) => {
       var _a2;
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DynamicCell, {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DynamicCell, {
         cell,
         getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
         highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
@@ -561,7 +683,7 @@ function TableRow({ row, rowConfig, cellConfig }) {
   });
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
-var StyledTableRow = (0, import_styled_components12.default)(import_eds_core_react11.Table.Row)`
+var StyledTableRow = (0, import_styled_components13.default)(import_eds_core_react12.Table.Row)`
   /* Background color must be inherited here. Does not work with inline styling */
   ${({ active }) => active ? "" : "background-color: inherit;"}
 `;
@@ -574,27 +696,32 @@ function handleRowEvent(row, handler) {
 }
 
 // src/DataTable/components/BasicTable.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function BasicTable({
   table,
   rowConfig,
   cellConfig,
   stickyHeader,
-  isLoading
+  isLoading,
+  tableCaption
 }) {
   const tableRows = table.getRowModel().rows;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react12.Table, {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_eds_core_react13.Table, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableHeader, {
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react13.Table.Caption, {
+        hidden: true,
+        children: tableCaption
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TableHeader, {
         sticky: stickyHeader,
         table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableBody, {
-        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableRow, {
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TableBody, {
+        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TableRow, {
           row,
           rowConfig,
           cellConfig
-        }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlaceholderRow, {
+        }, row.id)) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlaceholderRow, {
           isLoading
         })
       })
@@ -605,27 +732,18 @@ function BasicTable({
 // src/DataTable/components/DataTableHeader.tsx
 var import_eds_core_react15 = require("@equinor/eds-core-react");
 var import_eds_icons7 = require("@equinor/eds-icons");
-var import_jotai2 = require("jotai");
 var import_styled_components15 = __toESM(require("styled-components"));
 
-// src/DataTable/atoms.ts
-var import_jotai = require("jotai");
-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/filters/DebouncedInput.tsx
-var import_eds_core_react13 = require("@equinor/eds-core-react");
-var import_eds_icons5 = require("@equinor/eds-icons");
-var import_react2 = require("react");
-var import_styled_components13 = __toESM(require("styled-components"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Wrapper3 = import_styled_components13.default.div`
+var import_eds_core_react14 = require("@equinor/eds-core-react");
+var import_eds_icons6 = require("@equinor/eds-icons");
+var import_react3 = require("react");
+var import_styled_components14 = __toESM(require("styled-components"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Wrapper3 = import_styled_components14.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components13.default)(import_eds_core_react13.Button)`
+var CloseButton = (0, import_styled_components14.default)(import_eds_core_react14.Button)`
   width: 24px;
   height: 24px;
 `;
@@ -636,33 +754,33 @@ function DebouncedInput({
   debounce = 500,
   ...props
 }) {
-  const [value, setValue] = (0, import_react2.useState)(initialValue);
-  (0, import_react2.useEffect)(() => {
+  const [value, setValue] = (0, import_react3.useState)(initialValue);
+  (0, import_react3.useEffect)(() => {
     setValue(initialValue);
   }, [initialValue]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const timeout = setTimeout(() => {
       onChange(value);
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Wrapper3, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react13.Input, {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Wrapper3, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react13.Icon, {
+      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Icon, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react13.Tooltip, {
+      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Tooltip, {
         title: "Clear input",
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react13.Icon, {
-            name: import_eds_icons5.close.name,
-            data: import_eds_icons5.close,
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Icon, {
+            name: import_eds_icons6.close.name,
+            data: import_eds_icons6.close,
             size: 18
           })
         })
@@ -682,136 +800,14 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
   return itemRank.passed;
 };
 
-// src/DataTable/components/ColumnSelect.tsx
-var import_eds_core_react14 = require("@equinor/eds-core-react");
-var import_eds_icons6 = require("@equinor/eds-icons");
-var import_react3 = require("react");
-var import_styled_components14 = __toESM(require("styled-components"));
-
-// src/DataTable/utils.tsx
-function capitalizeHeader(context) {
-  const header = context.header.id;
-  return header.charAt(0).toUpperCase() + header.slice(1);
-}
-function enableOrUndefined(enabled, value) {
-  return Boolean(enabled) ? value : void 0;
-}
-function getColumnHeader(column) {
-  const columnHeader = column.columnDef.header;
-  if (!columnHeader)
-    return column.id;
-  return typeof columnHeader === "string" ? columnHeader : column.id;
-}
-function prependSelectColumn(columns, config) {
-  if (!(config == null ? void 0 : config.selectColumn))
-    return columns;
-  if (config.selectColumn === "default")
-    return [SelectColumnDef(config), ...columns];
-  return [config.selectColumn(), ...columns];
-}
-function getFunctionValueOrDefault(valueOrFn, fnProps, defaultValue) {
-  if (valueOrFn === void 0)
-    return defaultValue;
-  if (typeof valueOrFn === "function")
-    return valueOrFn(fnProps);
-  return valueOrFn;
-}
-
-// src/DataTable/components/ColumnSelect.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var ColumnSelectContent = import_styled_components14.default.div`
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 0.5rem;
-`;
-var ActionsWrapper = import_styled_components14.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
-`;
-function ColumnSelect({ table }) {
-  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
-  const referenceElement = (0, import_react3.useRef)(null);
-  const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, {
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Button, {
-        "aria-haspopup": true,
-        id: "column-select-anchor",
-        "aria-controls": "column-select-popover",
-        "aria-expanded": isOpen,
-        ref: referenceElement,
-        variant: "ghost_icon",
-        onClick: () => setIsOpen(true),
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Icon, {
-          name: "view_column",
-          data: import_eds_icons6.view_column
-        })
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_eds_core_react14.Popover, {
-        open: isOpen,
-        id: "column-select-popover",
-        anchorEl: referenceElement.current,
-        placement: "bottom-end",
-        onClose: () => setIsOpen(false),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_eds_core_react14.Popover.Header, {
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Popover.Title, {
-                children: "Column settings"
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Button, {
-                variant: "ghost_icon",
-                "aria-label": "Close column select",
-                onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Icon, {
-                  name: "close",
-                  data: import_eds_icons6.close,
-                  size: 24
-                })
-              })
-            ]
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_eds_core_react14.Popover.Content, {
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ColumnSelectContent, {
-                children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Checkbox, {
-                    checked: column.getIsVisible(),
-                    label: getColumnHeader(column),
-                    onChange: column.getToggleVisibilityHandler()
-                  }, column.id);
-                })
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Divider, {
-                variant: "small"
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActionsWrapper, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Button, {
-                  color: "secondary",
-                  variant: "ghost",
-                  disabled: table.getIsAllColumnsVisible(),
-                  onClick: () => table.toggleAllColumnsVisible(true),
-                  children: "Reset to default"
-                })
-              })
-            ]
-          })
-        ]
-      })
-    ]
-  });
-}
-
 // src/DataTable/components/DataTableHeader.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var DataTableHeaderWrapper = import_styled_components15.default.div`
+var TableBannerWrapper = import_styled_components15.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
-  padding: ${(props) => props.captionPadding ?? "1rem"};
+  padding: ${(props) => props.padding || "1rem"};
 `;
 var FilterContainer = import_styled_components15.default.div`
   display: flex;
@@ -819,30 +815,49 @@ var FilterContainer = import_styled_components15.default.div`
   gap: 1rem;
   justify-content: flex-end;
 `;
-function DataTableHeader({ config, table, ...props }) {
+function TableBanner({
+  table,
+  bannerConfig,
+  tableCaption,
+  globalFilter
+}) {
   var _a;
-  const [globalFilter, setGlobalFilter] = (0, import_jotai2.useAtom)(globalFilterAtom);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DataTableHeaderWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(TableBannerWrapper, {
     className: "--table-caption",
-    captionPadding: props.captionPadding,
+    padding: bannerConfig == null ? void 0 : bannerConfig.padding,
     children: [
-      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Typography, {
-        variant: "h3",
-        children: props == null ? void 0 : props.tableCaption
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(FilterContainer, {
+        className: "--filter-container-left",
+        children: [
+          (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Typography, {
+            variant: "h3",
+            as: "h2",
+            children: tableCaption
+          }),
+          (_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
+        ]
       }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FilterContainer, {
-        className: "--filter-container",
+        className: "--filter-container-right",
         children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, {
           children: [
-            (config == null ? void 0 : config.globalFilter) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DebouncedInput, {
-              value: globalFilter,
+            (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DebouncedInput, {
+              value: globalFilter.state,
               icon: import_eds_icons7.search,
-              placeholder: (config == null ? void 0 : config.globalFilterPlaceholder) ?? "Search all columns",
-              onChange: (value) => setGlobalFilter(String(value))
+              placeholder: bannerConfig.globalFilterPlaceholder ?? "Search all columns",
+              onChange: (value) => globalFilter.onChange(String(value))
             }),
-            (_a = config == null ? void 0 : config.filterActions) == null ? void 0 : _a.call(config, table),
-            (config == null ? void 0 : config.columnSelect) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColumnSelect, {
+            (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColumnSelect, {
               table
+            }),
+            (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", {
+              children: [
+                table.options.data.length.toLocaleString(),
+                " /",
+                " ",
+                bannerConfig.totalRowCount.toLocaleString(),
+                " rows"
+              ]
             })
           ]
         })
@@ -890,6 +905,10 @@ function VirtualTable({
   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_runtime17.jsxs)(import_eds_core_react17.Table, {
     children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_eds_core_react17.Table.Caption, {
+        hidden: true,
+        children: props.tableCaption
+      }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableHeader, {
         sticky: props.stickyHeader,
         table
@@ -947,7 +966,7 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
   return onTableContainerScroll;
 }
 
-// src/DataTable/DataTableRaw.tsx
+// src/DataTable/DataTable.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var DataTableWrapper = import_styled_components16.default.div`
   width: ${(props) => props.width ?? "100%"};
@@ -966,30 +985,103 @@ var DataTableWrapper = import_styled_components16.default.div`
     }
   }
 `;
-function DataTableRaw(props) {
-  var _a, _b;
-  const { isLoading, header, filters, config, rowConfig, cellConfig, table } = props;
+function DataTable(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  const { columns, data, bannerConfig, cellConfig, sorting } = props;
+  const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react5.useState)({});
+  const [columnVisibility, setColumnVisibility] = [
+    ((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
+    ((_b = props.columnVisibility) == null ? void 0 : _b.onChange) ?? setInternalColumnVisibility
+  ];
+  const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react5.useState)("");
+  const [globalFilterState, setGlobalFilterState] = [
+    ((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
+    ((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
+  ];
+  const shouldEnableGlobalFilter = ((_e = props.bannerConfig) == null ? void 0 : _e.enableGlobalFilterInput) || Boolean(props.globalFilter);
+  function enableGlobalFilter(value) {
+    return enableOrUndefined(shouldEnableGlobalFilter, value);
+  }
+  const [internalSortingState, setInternalSortingState] = (0, import_react5.useState)([]);
+  const [sortingState, setSortingState] = [
+    ((_f = props.sorting) == null ? void 0 : _f.state) ?? internalSortingState,
+    ((_g = props.sorting) == null ? void 0 : _g.onChange) ?? setInternalSortingState
+  ];
+  const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react5.useState)({});
+  const [rowSelectionState, setRowSelectionState] = [
+    ((_h = props.rowSelection) == null ? void 0 : _h.state) ?? internalRowSelectionState,
+    ((_i = props.rowSelection) == null ? void 0 : _i.onChange) ?? setInternalRowSelectionState
+  ];
+  const [internalExpandedState, setInternalExpandedState] = (0, import_react5.useState)({});
+  const [expandedState, setExpandedState] = [
+    ((_j = props.expansion) == null ? void 0 : _j.state) ?? internalExpandedState,
+    ((_k = props.expansion) == null ? void 0 : _k.onChange) ?? setInternalExpandedState
+  ];
+  const table = (0, import_react_table3.useReactTable)({
+    columns: prependSelectColumn(columns, props.rowSelection),
+    data,
+    globalFilterFn: enableGlobalFilter(fuzzyFilter),
+    state: {
+      expanded: expandedState,
+      globalFilter: enableGlobalFilter(globalFilterState),
+      sorting: ((_l = props.sorting) == null ? void 0 : _l.enableSorting) ? ((_m = props.sorting) == null ? void 0 : _m.state) ?? sortingState : void 0,
+      rowSelection: rowSelectionState,
+      columnVisibility
+    },
+    defaultColumn: {
+      cell: ({ cell }) => {
+        const truncateMode = getFunctionValueOrDefault(cellConfig == null ? void 0 : cellConfig.truncateMode, cell, "hover");
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TypographyCustom, {
+          truncate: truncateMode === "hover",
+          children: cell.getValue()
+        });
+      }
+    },
+    enableSorting: sorting == null ? void 0 : sorting.enableSorting,
+    manualSorting: sorting == null ? void 0 : sorting.manualSorting,
+    enableExpanding: Boolean(props.expansion),
+    enableMultiRowSelection: ((_n = props.rowSelection) == null ? void 0 : _n.mode) === "multiple",
+    enableSubRowSelection: ((_o = props.rowSelection) == null ? void 0 : _o.mode) !== "single",
+    filterFromLeafRows: bannerConfig == null ? void 0 : bannerConfig.filterFromLeafRows,
+    getFilteredRowModel: enableGlobalFilter((0, import_react_table3.getFilteredRowModel)()),
+    getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
+    getExpandedRowModel: (0, import_react_table3.getExpandedRowModel)(),
+    getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
+    onExpandedChange: setExpandedState,
+    onRowSelectionChange: setRowSelectionState,
+    onSortingChange: (sorting == null ? void 0 : sorting.enableSorting) ? (sorting == null ? void 0 : sorting.onChange) ?? setSortingState : void 0,
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: enableGlobalFilter(setGlobalFilterState),
+    getSubRows: props == null ? void 0 : props.getSubRows,
+    getRowId: props == null ? void 0 : props.getRowId
+  });
+  (0, import_react5.useEffect)(() => {
+    var _a2;
+    if ((_a2 = props.expansion) == null ? void 0 : _a2.expandAllByDefault) {
+      table.toggleAllRowsExpanded();
+    }
+  }, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
+  const { isLoading, rowConfig } = props;
   const tableContainerRef = (0, import_react5.useRef)(null);
   const onTableContainerScroll = useFetchMoreOnBottomReached(
     tableContainerRef,
     props.infiniteScroll
   );
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DataTableWrapper, {
-    captionPadding: header == null ? void 0 : header.captionPadding,
-    height: config == null ? void 0 : config.height,
-    width: config == null ? void 0 : config.width,
-    tableLayout: config == null ? void 0 : config.tableLayout,
+    height: props == null ? void 0 : props.height,
+    width: props == null ? void 0 : props.width,
+    tableLayout: props == null ? void 0 : props.tableLayout,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DataTableHeader, {
-        tableCaption: header == null ? void 0 : header.tableCaption,
-        captionPadding: header == null ? void 0 : header.captionPadding,
+      props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableBanner, {
         table,
-        config: filters
+        bannerConfig: props.bannerConfig,
+        globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
+        tableCaption: props.tableCaption
       }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", {
         ...props.tableContainerProps,
-        className: "--table-container " + ((_a = props.tableContainerProps) == null ? void 0 : _a.className),
-        onScroll: ((_b = props.tableContainerProps) == null ? void 0 : _b.onScroll) ?? onTableContainerScroll,
+        className: "--table-container " + ((_q = props.tableContainerProps) == null ? void 0 : _q.className),
+        onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
         ref: (node) => {
           var _a2;
           if (node) {
@@ -999,109 +1091,26 @@ function DataTableRaw(props) {
             }
           }
         },
-        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VirtualTable, {
+        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VirtualTable, {
           containerRef: tableContainerRef,
+          tableCaption: props.tableCaption,
           table,
           rowConfig,
           cellConfig,
           isLoading,
-          stickyHeader: header == null ? void 0 : header.stickyHeader
+          stickyHeader: props.stickyHeader
         }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BasicTable, {
+          tableCaption: props.tableCaption,
           table,
           rowConfig,
           cellConfig,
           isLoading,
-          stickyHeader: header == null ? void 0 : header.stickyHeader
+          stickyHeader: props.stickyHeader
         })
       })
     ]
   });
 }
-
-// src/DataTable/useDataTable.tsx
-var import_react_table3 = require("@tanstack/react-table");
-var import_jotai3 = require("jotai");
-var import_react6 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-function useDataTable(props) {
-  const { columns, data, filters, config, cellConfig, sortConfig } = props;
-  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_table3.useReactTable)({
-    columns: prependSelectColumn(columns, config),
-    data,
-    globalFilterFn: enableGlobalFilter(fuzzyFilter),
-    state: {
-      expanded,
-      globalFilter: enableGlobalFilter(globalFilter),
-      sorting: (sortConfig == null ? void 0 : sortConfig.enableSorting) || (config == null ? void 0 : config.sortable) ? (sortConfig == null ? void 0 : sortConfig.sorting) ?? sorting : void 0,
-      rowSelection: rowSelectionState,
-      columnVisibility
-    },
-    defaultColumn: {
-      cell: ({ cell }) => {
-        const truncateMode = getFunctionValueOrDefault(cellConfig == null ? void 0 : cellConfig.truncateMode, cell, "hover");
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TypographyCustom, {
-          truncate: truncateMode === "hover",
-          children: cell.getValue()
-        });
-      }
-    },
-    enableSorting: (sortConfig == null ? void 0 : sortConfig.enableSorting) ?? (config == null ? void 0 : config.sortable),
-    manualSorting: sortConfig == null ? void 0 : sortConfig.manualSorting,
-    enableExpanding: !(config == null ? void 0 : config.hideExpandControls),
-    enableMultiRowSelection: (config == null ? void 0 : config.rowSelectionMode) === "multiple",
-    enableSubRowSelection: (config == null ? void 0 : config.rowSelectionMode) !== "single",
-    filterFromLeafRows: filters == null ? void 0 : filters.filterFromLeafRows,
-    getFilteredRowModel: enableGlobalFilter((0, import_react_table3.getFilteredRowModel)()),
-    getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
-    getExpandedRowModel: (0, import_react_table3.getExpandedRowModel)(),
-    getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
-    onExpandedChange: setExpanded,
-    onRowSelectionChange: setRowSelectionState,
-    onSortingChange: (sortConfig == null ? void 0 : sortConfig.enableSorting) || (config == null ? void 0 : config.sortable) ? (sortConfig == null ? void 0 : sortConfig.onSortingChange) ?? setSorting : void 0,
-    onColumnVisibilityChange: setColumnVisibility,
-    onGlobalFilterChange: enableGlobalFilter(setGlobalFilter),
-    getSubRows: config == null ? void 0 : config.getSubRows,
-    getRowId: config == null ? void 0 : config.getRowId
-  });
-  (0, import_react6.useEffect)(() => {
-    if (config && config.expandAllByDefault) {
-      table.toggleAllRowsExpanded();
-    }
-  }, [table, config == null ? void 0 : config.expandAllByDefault]);
-  return table;
-}
-
-// src/DataTable/DataTable.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-function DataTable(props) {
-  const table = useDataTable(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DataTableRaw, {
-    table,
-    ...props
-  });
-}
-
-// src/DataTable/Provider.tsx
-var import_jotai4 = require("jotai");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-function DataTableProvider({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jotai4.Provider, {
-    ...props,
-    children
-  });
-}
-
-// src/DataTable/index.ts
-var DataTable2 = DataTable;
-DataTable2.Provider = DataTableProvider;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppShell,
@@ -1116,9 +1125,5 @@ DataTable2.Provider = DataTableProvider;
   TableHeader,
   TypographyCustom,
   capitalizeHeader,
-  columnVisibilityAtom,
-  globalFilterAtom,
-  prependSelectColumn,
-  rowSelectionAtom,
-  tableSortingAtom
+  prependSelectColumn
 });