@equinor/apollo-components 1.12.2 → 2.0.0

package/dist/index.mjs

@@ -310,12 +310,11 @@ var CellWrapper2 = styled8.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__ */ jsx7(CellWrapper2, {
       children: /* @__PURE__ */ jsx7(Checkbox, {
         checked: table.getIsAllRowsSelected(),
@@ -358,55 +357,142 @@ function SelectColumnDef(props = {}) {
   };
 }
 
-// src/DataTable/DataTableRaw.tsx
-import { useRef as useRef2 } from "react";
-import styled16 from "styled-components";
+// src/DataTable/components/ColumnSelect.tsx
+import { Button as Button3, Checkbox as Checkbox2, Divider, Icon as Icon4, Popover, Tooltip } from "@equinor/eds-core-react";
+import { close, view_column } from "@equinor/eds-icons";
+import { useRef, useState as useState2 } from "react";
+import styled9 from "styled-components";
 
-// src/DataTable/components/BasicTable.tsx
-import { Table as EdsTable } from "@equinor/eds-core-react";
+// 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/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`
+// src/DataTable/components/ColumnSelect.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var ColumnSelectContent = styled9.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.5rem;
+`;
+var ActionsWrapper = styled9.div`
   display: flex;
-  justify-content: center;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
 `;
-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"
+function ColumnSelect({ table }) {
+  const [isOpen, setIsOpen] = useState2(false);
+  const referenceElement = useRef(null);
+  const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
+  return /* @__PURE__ */ jsxs5(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsx8(Tooltip, {
+        title: "Select columns",
+        placement: "left",
+        children: /* @__PURE__ */ jsx8(Button3, {
+          "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__ */ jsx8(Icon4, {
+            name: "view_column",
+            data: view_column
+          })
         })
+      }),
+      /* @__PURE__ */ jsxs5(Popover, {
+        open: isOpen,
+        id: "column-select-popover",
+        anchorEl: referenceElement.current,
+        placement: "bottom-end",
+        onClose: () => setIsOpen(false),
+        children: [
+          /* @__PURE__ */ jsxs5(Popover.Header, {
+            children: [
+              /* @__PURE__ */ jsx8(Popover.Title, {
+                children: "Column settings"
+              }),
+              /* @__PURE__ */ jsx8(Button3, {
+                variant: "ghost_icon",
+                "aria-label": "Close column select",
+                onClick: () => setIsOpen(false),
+                children: /* @__PURE__ */ jsx8(Icon4, {
+                  name: "close",
+                  data: close,
+                  size: 24
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs5(Popover.Content, {
+            children: [
+              /* @__PURE__ */ jsx8(ColumnSelectContent, {
+                children: selectableColumns.map((column) => {
+                  return /* @__PURE__ */ jsx8(Checkbox2, {
+                    checked: column.getIsVisible(),
+                    label: getColumnHeader(column),
+                    onChange: column.getToggleVisibilityHandler()
+                  }, column.id);
+                })
+              }),
+              /* @__PURE__ */ jsx8(Divider, {
+                variant: "small"
+              }),
+              /* @__PURE__ */ jsx8(ActionsWrapper, {
+                children: /* @__PURE__ */ jsx8(Button3, {
+                  color: "secondary",
+                  variant: "ghost",
+                  disabled: table.getIsAllColumnsVisible(),
+                  onClick: () => table.toggleAllColumnsVisible(true),
+                  children: "Reset to default"
+                })
+              })
+            ]
+          })
+        ]
       })
-    })
+    ]
   });
 }
 
-// src/DataTable/components/TableBody.tsx
-import { Table as Table4 } from "@equinor/eds-core-react";
-import styled10 from "styled-components";
-var TableBody = styled10(Table4.Body)`
-  // The following attribute are important for fixed column width
-  // CHANGE THES WITH CAUTION
-  background: inherit;
-`;
-
 // src/DataTable/components/TableHeader.tsx
-import { Table as Table6 } from "@equinor/eds-core-react";
+import { Table as Table4 } from "@equinor/eds-core-react";
 
 // src/cells/HeaderCell.tsx
-import { Icon as Icon4, Table as Table5 } from "@equinor/eds-core-react";
+import { Icon as Icon5, Table as Table3 } 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 styled11 from "styled-components";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var HeaderDiv = styled11.div`
+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;
@@ -432,7 +518,7 @@ var HeaderCell = ({ header }) => {
       })
     }, header.id);
   }
-  return /* @__PURE__ */ jsx9(Table5.Cell, {
+  return /* @__PURE__ */ jsx9(Table3.Cell, {
     ...cellProps,
     children: /* @__PURE__ */ jsx9(HeaderContent, {
       header
@@ -442,17 +528,17 @@ var HeaderCell = ({ header }) => {
 function HeaderContent({ header }) {
   if (header.isPlaceholder)
     return null;
-  return /* @__PURE__ */ jsxs5(HeaderDiv, {
+  return /* @__PURE__ */ jsxs6(HeaderDiv, {
     children: [
       flexRender2(header.column.columnDef.header, header.getContext()),
       {
-        asc: /* @__PURE__ */ jsx9(Icon4, {
+        asc: /* @__PURE__ */ jsx9(Icon5, {
           data: arrow_drop_up
         }),
-        desc: /* @__PURE__ */ jsx9(Icon4, {
+        desc: /* @__PURE__ */ jsx9(Icon5, {
           data: arrow_drop_down
         }),
-        none: /* @__PURE__ */ jsx9(Icon4, {
+        none: /* @__PURE__ */ jsx9(Icon5, {
           data: arrow_drop_down
         })
       }[header.column.getIsSorted()] ?? null
@@ -475,9 +561,9 @@ function getSort({ column }) {
 // src/DataTable/components/TableHeader.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 function TableHeader({ table, sticky }) {
-  return /* @__PURE__ */ jsx10(Table6.Head, {
+  return /* @__PURE__ */ jsx10(Table4.Head, {
     sticky,
-    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx10(Table6.Row, {
+    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx10(Table4.Row, {
       children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx10(HeaderCell, {
         header
       }, header.id))
@@ -485,14 +571,60 @@ function TableHeader({ table, sticky }) {
   });
 }
 
+// src/DataTable/DataTable.tsx
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import styled16 from "styled-components";
+
+// src/DataTable/components/BasicTable.tsx
+import { Table as EdsTable } from "@equinor/eds-core-react";
+
+// src/DataTable/components/PlaceholderRow.tsx
+import { DotProgress, Table as Table5, Typography } from "@equinor/eds-core-react";
+import styled11 from "styled-components";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var PlaceholderTextWrapper = styled11.div`
+  display: flex;
+  justify-content: center;
+`;
+function PlaceholderRow({ isLoading }) {
+  return /* @__PURE__ */ jsx11(Table5.Row, {
+    children: /* @__PURE__ */ jsx11(Table5.Cell, {
+      colSpan: 100,
+      children: /* @__PURE__ */ jsx11(PlaceholderTextWrapper, {
+        children: isLoading ? /* @__PURE__ */ jsx11(DotProgress, {
+          color: "primary"
+        }) : /* @__PURE__ */ jsx11(Typography, {
+          children: "No data available"
+        })
+      })
+    })
+  });
+}
+
+// src/DataTable/components/TableBody.tsx
+import { Table as Table6 } from "@equinor/eds-core-react";
+import styled12 from "styled-components";
+var TableBody = styled12(Table6.Body)`
+  // The following attribute are important for fixed column width
+  // CHANGE THES WITH CAUTION
+  background: inherit;
+`;
+
 // src/DataTable/components/TableRow.tsx
 import { Table as Table7 } from "@equinor/eds-core-react";
-import styled12 from "styled-components";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import styled13 from "styled-components";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function TableRow({ row, rowConfig, cellConfig }) {
   var _a;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
-  const tableRowContent = /* @__PURE__ */ jsx11(StyledTableRow, {
+  const tableRowContent = /* @__PURE__ */ jsx12(StyledTableRow, {
     active: row.getIsSelected(),
     style: {
       cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
@@ -506,7 +638,7 @@ function TableRow({ row, rowConfig, cellConfig }) {
     onMouseLeave: handleRowEvent(row, rowConfig == null ? void 0 : rowConfig.onMouseLeave),
     children: row.getVisibleCells().map((cell) => {
       var _a2;
-      return /* @__PURE__ */ jsx11(DynamicCell, {
+      return /* @__PURE__ */ jsx12(DynamicCell, {
         cell,
         getStickyCellColor: cellConfig == null ? void 0 : cellConfig.getStickyCellColor,
         highlight: (_a2 = cellConfig == null ? void 0 : cellConfig.getShouldHighlight) == null ? void 0 : _a2.call(cellConfig, cell)
@@ -515,7 +647,7 @@ function TableRow({ row, rowConfig, cellConfig }) {
   });
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
-var StyledTableRow = styled12(Table7.Row)`
+var StyledTableRow = styled13(Table7.Row)`
   /* Background color must be inherited here. Does not work with inline styling */
   ${({ active }) => active ? "" : "background-color: inherit;"}
 `;
@@ -528,27 +660,32 @@ function handleRowEvent(row, handler) {
 }
 
 // src/DataTable/components/BasicTable.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function BasicTable({
   table,
   rowConfig,
   cellConfig,
   stickyHeader,
-  isLoading
+  isLoading,
+  tableCaption
 }) {
   const tableRows = table.getRowModel().rows;
-  return /* @__PURE__ */ jsxs6(EdsTable, {
+  return /* @__PURE__ */ jsxs7(EdsTable, {
     children: [
-      /* @__PURE__ */ jsx12(TableHeader, {
+      /* @__PURE__ */ jsx13(EdsTable.Caption, {
+        hidden: true,
+        children: tableCaption
+      }),
+      /* @__PURE__ */ jsx13(TableHeader, {
         sticky: stickyHeader,
         table
       }),
-      /* @__PURE__ */ jsx12(TableBody, {
-        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx12(TableRow, {
+      /* @__PURE__ */ jsx13(TableBody, {
+        children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx13(TableRow, {
           row,
           rowConfig,
           cellConfig
-        }, row.id)) : /* @__PURE__ */ jsx12(PlaceholderRow, {
+        }, row.id)) : /* @__PURE__ */ jsx13(PlaceholderRow, {
           isLoading
         })
       })
@@ -559,27 +696,18 @@ function BasicTable({
 // src/DataTable/components/DataTableHeader.tsx
 import { Typography as Typography2 } from "@equinor/eds-core-react";
 import { search } from "@equinor/eds-icons";
-import { useAtom } from "jotai";
 import styled15 from "styled-components";
 
-// src/DataTable/atoms.ts
-import { atom } from "jotai";
-var columnVisibilityAtom = atom({});
-var globalFilterAtom = atom("");
-var rowSelectionAtom = atom({});
-var tableSortingAtom = atom([]);
-var expandedRowsAtom = atom({});
-
 // src/DataTable/filters/DebouncedInput.tsx
-import { Button as Button3, Icon as Icon5, Input, Tooltip } from "@equinor/eds-core-react";
-import { close } from "@equinor/eds-icons";
-import { useEffect, useState as useState2 } from "react";
-import styled13 from "styled-components";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Wrapper3 = styled13.div`
+import { Button as Button4, Icon as Icon6, Input, Tooltip as Tooltip2 } from "@equinor/eds-core-react";
+import { close as close2 } from "@equinor/eds-icons";
+import { useEffect, useState as useState3 } from "react";
+import styled14 from "styled-components";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Wrapper3 = styled14.div`
   width: 200px;
 `;
-var CloseButton = styled13(Button3)`
+var CloseButton = styled14(Button4)`
   width: 24px;
   height: 24px;
 `;
@@ -590,7 +718,7 @@ function DebouncedInput({
   debounce = 500,
   ...props
 }) {
-  const [value, setValue] = useState2(initialValue);
+  const [value, setValue] = useState3(initialValue);
   useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
@@ -600,23 +728,23 @@ function DebouncedInput({
     }, debounce);
     return () => clearTimeout(timeout);
   }, [value]);
-  return /* @__PURE__ */ jsx13(Wrapper3, {
-    children: /* @__PURE__ */ jsx13(Input, {
+  return /* @__PURE__ */ jsx14(Wrapper3, {
+    children: /* @__PURE__ */ jsx14(Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ jsx13(Icon5, {
+      leftAdornments: icon && /* @__PURE__ */ jsx14(Icon6, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ jsx13(Tooltip, {
+      rightAdornments: !!value && /* @__PURE__ */ jsx14(Tooltip2, {
         title: "Clear input",
-        children: /* @__PURE__ */ jsx13(CloseButton, {
+        children: /* @__PURE__ */ jsx14(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ jsx13(Icon5, {
-            name: close.name,
-            data: close,
+          children: /* @__PURE__ */ jsx14(Icon6, {
+            name: close2.name,
+            data: close2,
             size: 18
           })
         })
@@ -636,128 +764,6 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
   return itemRank.passed;
 };
 
-// src/DataTable/components/ColumnSelect.tsx
-import { Button as Button4, Checkbox as Checkbox2, Divider, Icon as Icon6, Popover } from "@equinor/eds-core-react";
-import { close as close2, view_column } from "@equinor/eds-icons";
-import { useRef, useState as useState3 } from "react";
-import styled14 from "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
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
-var ColumnSelectContent = styled14.div`
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 0.5rem;
-`;
-var ActionsWrapper = styled14.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
-`;
-function ColumnSelect({ table }) {
-  const [isOpen, setIsOpen] = useState3(false);
-  const referenceElement = useRef(null);
-  const selectableColumns = table.getAllLeafColumns().filter((column) => column.id !== "select");
-  return /* @__PURE__ */ jsxs7(Fragment2, {
-    children: [
-      /* @__PURE__ */ jsx14(Button4, {
-        "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__ */ jsx14(Icon6, {
-          name: "view_column",
-          data: view_column
-        })
-      }),
-      /* @__PURE__ */ jsxs7(Popover, {
-        open: isOpen,
-        id: "column-select-popover",
-        anchorEl: referenceElement.current,
-        placement: "bottom-end",
-        onClose: () => setIsOpen(false),
-        children: [
-          /* @__PURE__ */ jsxs7(Popover.Header, {
-            children: [
-              /* @__PURE__ */ jsx14(Popover.Title, {
-                children: "Column settings"
-              }),
-              /* @__PURE__ */ jsx14(Button4, {
-                variant: "ghost_icon",
-                "aria-label": "Close column select",
-                onClick: () => setIsOpen(false),
-                children: /* @__PURE__ */ jsx14(Icon6, {
-                  name: "close",
-                  data: close2,
-                  size: 24
-                })
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsxs7(Popover.Content, {
-            children: [
-              /* @__PURE__ */ jsx14(ColumnSelectContent, {
-                children: selectableColumns.map((column) => {
-                  return /* @__PURE__ */ jsx14(Checkbox2, {
-                    checked: column.getIsVisible(),
-                    label: getColumnHeader(column),
-                    onChange: column.getToggleVisibilityHandler()
-                  }, column.id);
-                })
-              }),
-              /* @__PURE__ */ jsx14(Divider, {
-                variant: "small"
-              }),
-              /* @__PURE__ */ jsx14(ActionsWrapper, {
-                children: /* @__PURE__ */ jsx14(Button4, {
-                  color: "secondary",
-                  variant: "ghost",
-                  disabled: table.getIsAllColumnsVisible(),
-                  onClick: () => table.toggleAllColumnsVisible(true),
-                  children: "Reset to default"
-                })
-              })
-            ]
-          })
-        ]
-      })
-    ]
-  });
-}
-
 // src/DataTable/components/DataTableHeader.tsx
 import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var DataTableHeaderWrapper = styled15.div`
@@ -765,7 +771,7 @@ var DataTableHeaderWrapper = styled15.div`
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
-  padding: ${(props) => props.captionPadding ?? "1rem"};
+  padding: 1rem;
 `;
 var FilterContainer = styled15.div`
   display: flex;
@@ -773,30 +779,47 @@ var FilterContainer = styled15.div`
   gap: 1rem;
   justify-content: flex-end;
 `;
-function DataTableHeader({ config, table, ...props }) {
+function ActionsHeaderRow({
+  table,
+  actionsRow,
+  tableCaption,
+  globalFilter
+}) {
   var _a;
-  const [globalFilter, setGlobalFilter] = useAtom(globalFilterAtom);
   return /* @__PURE__ */ jsxs8(DataTableHeaderWrapper, {
     className: "--table-caption",
-    captionPadding: props.captionPadding,
     children: [
-      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ jsx15(Typography2, {
-        variant: "h3",
-        children: props == null ? void 0 : props.tableCaption
+      /* @__PURE__ */ jsxs8(FilterContainer, {
+        className: "--filter-container-left",
+        children: [
+          (actionsRow == null ? void 0 : actionsRow.enableTableCaption) && /* @__PURE__ */ jsx15(Typography2, {
+            variant: "h3",
+            children: tableCaption
+          }),
+          (_a = actionsRow == null ? void 0 : actionsRow.customActions) == null ? void 0 : _a.call(actionsRow, table)
+        ]
       }),
       /* @__PURE__ */ jsx15(FilterContainer, {
-        className: "--filter-container",
+        className: "--filter-container-right",
         children: /* @__PURE__ */ jsxs8(Fragment3, {
           children: [
-            (config == null ? void 0 : config.globalFilter) && /* @__PURE__ */ jsx15(DebouncedInput, {
-              value: globalFilter,
+            (actionsRow == null ? void 0 : actionsRow.enableGlobalFilterInput) && /* @__PURE__ */ jsx15(DebouncedInput, {
+              value: globalFilter.state,
               icon: search,
-              placeholder: (config == null ? void 0 : config.globalFilterPlaceholder) ?? "Search all columns",
-              onChange: (value) => setGlobalFilter(String(value))
+              placeholder: actionsRow.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__ */ jsx15(ColumnSelect, {
+            (actionsRow == null ? void 0 : actionsRow.enableColumnSelect) && /* @__PURE__ */ jsx15(ColumnSelect, {
               table
+            }),
+            (actionsRow == null ? void 0 : actionsRow.totalRowCount) && /* @__PURE__ */ jsxs8("span", {
+              children: [
+                table.options.data.length.toLocaleString(),
+                " /",
+                " ",
+                actionsRow.totalRowCount.toLocaleString(),
+                " rows"
+              ]
             })
           ]
         })
@@ -844,6 +867,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__ */ jsxs9(Table9, {
     children: [
+      /* @__PURE__ */ jsx17(Table9.Caption, {
+        hidden: true,
+        children: props.tableCaption
+      }),
       /* @__PURE__ */ jsx17(TableHeader, {
         sticky: props.stickyHeader,
         table
@@ -872,7 +899,36 @@ function VirtualTable({
   });
 }
 
-// src/DataTable/DataTableRaw.tsx
+// src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
+import { useCallback, useEffect as useEffect2 } from "react";
+function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
+  const fetchMoreOnBottomReached = useCallback(
+    (tableContainer) => {
+      if (!infiniteScrollConfig)
+        return;
+      if (!tableContainer)
+        return;
+      const { onBottomScroll, offset = 300 } = infiniteScrollConfig;
+      const { scrollHeight, scrollTop, clientHeight } = tableContainer;
+      if (scrollHeight - scrollTop - clientHeight < offset) {
+        onBottomScroll();
+      }
+    },
+    [infiniteScrollConfig]
+  );
+  const onTableContainerScroll = useCallback(
+    (event) => fetchMoreOnBottomReached(event.target),
+    [fetchMoreOnBottomReached]
+  );
+  useEffect2(() => {
+    if (!infiniteScrollConfig)
+      return;
+    fetchMoreOnBottomReached(tableContainerRef.current);
+  }, [fetchMoreOnBottomReached]);
+  return onTableContainerScroll;
+}
+
+// src/DataTable/DataTable.tsx
 import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var DataTableWrapper = styled16.div`
   width: ${(props) => props.width ?? "100%"};
@@ -885,146 +941,144 @@ var DataTableWrapper = styled16.div`
     table {
       width: 100%;
 
-      // The following attributes are important for fixed column width
+      // The following attribute is important for fixed column width
       // CHANGE THES WITH CAUTION
-      overflow: auto;
       table-layout: ${(props) => props.tableLayout ?? "auto"};
     }
   }
 `;
-function DataTableRaw(props) {
-  const { isLoading, header, filters, config, rowConfig, cellConfig, table } = props;
-  const tableContainerRef = useRef2(null);
-  return /* @__PURE__ */ jsxs10(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,
-    children: [
-      /* @__PURE__ */ jsx18(DataTableHeader, {
-        tableCaption: header == null ? void 0 : header.tableCaption,
-        captionPadding: header == null ? void 0 : header.captionPadding,
-        table,
-        config: filters
-      }),
-      /* @__PURE__ */ jsx18("div", {
-        ref: tableContainerRef,
-        className: "--table-container",
-        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ jsx18(VirtualTable, {
-          containerRef: tableContainerRef,
-          table,
-          rowConfig,
-          cellConfig,
-          isLoading,
-          stickyHeader: header == null ? void 0 : header.stickyHeader
-        }) : /* @__PURE__ */ jsx18(BasicTable, {
-          table,
-          rowConfig,
-          cellConfig,
-          isLoading,
-          stickyHeader: header == null ? void 0 : header.stickyHeader
-        })
-      })
-    ]
-  });
-}
-
-// src/DataTable/useDataTable.tsx
-import {
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
-  useReactTable
-} from "@tanstack/react-table";
-import { useAtom as useAtom2 } from "jotai";
-import { useEffect as useEffect2 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-function useDataTable(props) {
-  const { columns, data, filters, config, cellConfig, sortConfig } = props;
-  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 DataTable(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+  const { columns, data, actionsRow, cellConfig, sorting } = props;
+  const [internalColumnVisibility, setInternalColumnVisibility] = useState4({});
+  const [columnVisibility, setColumnVisibility] = [
+    ((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
+    ((_b = props.columnVisibility) == null ? void 0 : _b.onChange) ?? setInternalColumnVisibility
+  ];
+  const [internalGlobalFilterState, setInternalGlobalFilterState] = useState4("");
+  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.actionsRow) == null ? void 0 : _e.enableGlobalFilterInput) || Boolean(props.globalFilter);
   function enableGlobalFilter(value) {
-    return enableOrUndefined(filters == null ? void 0 : filters.globalFilter, value);
+    return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
+  const [internalSortingState, setInternalSortingState] = useState4([]);
+  const [sortingState, setSortingState] = [
+    ((_f = props.sorting) == null ? void 0 : _f.state) ?? internalSortingState,
+    ((_g = props.sorting) == null ? void 0 : _g.onChange) ?? setInternalSortingState
+  ];
+  const [internalRowSelectionState, setInternalRowSelectionState] = useState4({});
+  const [rowSelectionState, setRowSelectionState] = [
+    ((_h = props.rowSelection) == null ? void 0 : _h.state) ?? internalRowSelectionState,
+    ((_i = props.rowSelection) == null ? void 0 : _i.onChange) ?? setInternalRowSelectionState
+  ];
+  const [internalExpandedState, setInternalExpandedState] = useState4({});
+  const [expandedState, setExpandedState] = [
+    ((_j = props.expansion) == null ? void 0 : _j.state) ?? internalExpandedState,
+    ((_k = props.expansion) == null ? void 0 : _k.onChange) ?? setInternalExpandedState
+  ];
   const table = useReactTable({
-    columns: prependSelectColumn(columns, config),
+    columns: prependSelectColumn(columns, props.rowSelection),
     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,
+      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__ */ jsx19(TypographyCustom, {
+        return /* @__PURE__ */ jsx18(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,
+    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: actionsRow == null ? void 0 : actionsRow.filterFromLeafRows,
     getFilteredRowModel: enableGlobalFilter(getFilteredRowModel()),
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    onExpandedChange: setExpanded,
+    onExpandedChange: setExpandedState,
     onRowSelectionChange: setRowSelectionState,
-    onSortingChange: (sortConfig == null ? void 0 : sortConfig.enableSorting) || (config == null ? void 0 : config.sortable) ? (sortConfig == null ? void 0 : sortConfig.onSortingChange) ?? setSorting : void 0,
+    onSortingChange: (sorting == null ? void 0 : sorting.enableSorting) ? (sorting == null ? void 0 : sorting.onChange) ?? setSortingState : void 0,
     onColumnVisibilityChange: setColumnVisibility,
-    onGlobalFilterChange: enableGlobalFilter(setGlobalFilter),
-    getSubRows: config == null ? void 0 : config.getSubRows,
-    getRowId: config == null ? void 0 : config.getRowId
+    onGlobalFilterChange: enableGlobalFilter(setGlobalFilterState),
+    getSubRows: props == null ? void 0 : props.getSubRows,
+    getRowId: props == null ? void 0 : props.getRowId
   });
-  useEffect2(() => {
-    if (config && config.expandAllByDefault) {
+  useEffect3(() => {
+    var _a2;
+    if ((_a2 = props.expansion) == null ? void 0 : _a2.expandAllByDefault) {
       table.toggleAllRowsExpanded();
     }
-  }, [table, config == null ? void 0 : config.expandAllByDefault]);
-  return table;
-}
-
-// src/DataTable/DataTable.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-function DataTable(props) {
-  const table = useDataTable(props);
-  return /* @__PURE__ */ jsx20(DataTableRaw, {
-    table,
-    ...props
-  });
-}
-
-// src/DataTable/Provider.tsx
-import { Provider } from "jotai";
-import { jsx as jsx21 } from "react/jsx-runtime";
-function DataTableProvider({ children, ...props }) {
-  return /* @__PURE__ */ jsx21(Provider, {
-    ...props,
-    children
+  }, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
+  const { isLoading, rowConfig } = props;
+  const tableContainerRef = useRef2(null);
+  const onTableContainerScroll = useFetchMoreOnBottomReached(
+    tableContainerRef,
+    props.infiniteScroll
+  );
+  return /* @__PURE__ */ jsxs10(DataTableWrapper, {
+    height: props == null ? void 0 : props.height,
+    width: props == null ? void 0 : props.width,
+    tableLayout: props == null ? void 0 : props.tableLayout,
+    children: [
+      props.actionsRow && /* @__PURE__ */ jsx18(ActionsHeaderRow, {
+        table,
+        actionsRow: props.actionsRow,
+        globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
+        tableCaption: props.tableCaption
+      }),
+      /* @__PURE__ */ jsx18("div", {
+        ...props.tableContainerProps,
+        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) {
+            tableContainerRef.current = node;
+            if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
+              props.tableContainerProps.ref.current = node;
+            }
+          }
+        },
+        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx18(VirtualTable, {
+          containerRef: tableContainerRef,
+          tableCaption: props.tableCaption,
+          table,
+          rowConfig,
+          cellConfig,
+          isLoading,
+          stickyHeader: (_s = props.headerConfig) == null ? void 0 : _s.sticky
+        }) : /* @__PURE__ */ jsx18(BasicTable, {
+          tableCaption: props.tableCaption,
+          table,
+          rowConfig,
+          cellConfig,
+          isLoading,
+          stickyHeader: (_t = props.headerConfig) == null ? void 0 : _t.sticky
+        })
+      })
+    ]
   });
 }
-
-// src/DataTable/index.ts
-var DataTable2 = DataTable;
-DataTable2.Provider = DataTableProvider;
 export {
   AppShell,
   AppSidebar,
   ChipsCell,
   ColumnSelect,
-  DataTable2 as DataTable,
+  DataTable,
   DynamicCell,
   HierarchyCell,
   SelectColumnDef,
@@ -1032,9 +1086,5 @@ export {
   TableHeader,
   TypographyCustom,
   capitalizeHeader,
-  columnVisibilityAtom,
-  globalFilterAtom,
-  prependSelectColumn,
-  rowSelectionAtom,
-  tableSortingAtom
+  prependSelectColumn
 };