@equinor/apollo-components 1.8.0 → 1.9.0

package/dist/index.d.ts

@@ -71,6 +71,7 @@ interface CellConfig<T> {
 declare type RowSelectionMode = 'single' | 'multiple';
 declare type DataTableConfig<T> = {
     height?: string;
+    tableLayout?: 'auto' | 'fixed';
     sortable?: boolean;
     virtual?: boolean;
     rowSelectionMode?: RowSelectionMode;
@@ -83,10 +84,7 @@ interface ExpansionConfig {
     expandAllByDefault?: boolean;
     hideExpandControls?: boolean;
 }
-
-interface DataTableProps<T> {
-    data: T[];
-    columns: ColumnDef<T, any>[];
+interface DataTableCommonProps<T> {
     isLoading?: boolean;
     className?: string;
     config?: DataTableConfig<T>;
@@ -95,7 +93,15 @@ interface DataTableProps<T> {
     filters?: FilterConfig;
     header?: HeaderConfig;
 }
-declare function DataTable$1<T>({ columns, data, isLoading, header, filters, config, cellConfig, rowConfig, }: DataTableProps<T>): JSX.Element;
+interface DataTableProps<T> extends DataTableCommonProps<T> {
+    data: T[];
+    columns: ColumnDef<T, any>[];
+}
+interface DataTableRawProps<T> extends DataTableCommonProps<T> {
+    table: Table<T>;
+}
+
+declare function DataTable$1<T>(props: DataTableProps<T>): JSX.Element;
 
 declare type DataTableProviderProps = ComponentProps<typeof Provider>;
 declare function DataTableProvider({ children, ...props }: DataTableProviderProps): JSX.Element;
@@ -152,4 +158,4 @@ declare type TypographyProps = {
  */
 declare const TypographyCustom: (props: TypographyProps) => JSX.Element;
 
-export { AppShell, AppSidebar, CellConfig, ChipsCell, ColumnSelect, DataTable, DataTableConfig, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowConfig, RowSelectionMode, SelectColumnDef, StickyCell, TableHeader, TableRowWrapper, TableRowWrapperProps, TypographyCustom, capitalizeHeader, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };
+export { AppShell, AppSidebar, CellConfig, ChipsCell, ColumnSelect, DataTable, DataTableCommonProps, DataTableConfig, DataTableProps, DataTableRawProps, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowConfig, RowSelectionMode, SelectColumnDef, StickyCell, TableHeader, TableRowWrapper, TableRowWrapperProps, TypographyCustom, capitalizeHeader, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };

package/dist/index.js

@@ -195,24 +195,12 @@ var ChipsCell = (props) => {
 // src/cells/DynamicCell.tsx
 var import_eds_core_react4 = require("@equinor/eds-core-react");
 var import_react_table = require("@tanstack/react-table");
-var import_styled_components6 = __toESM(require("styled-components"));
+var import_styled_components5 = __toESM(require("styled-components"));
 
 // src/cells/StickyCell.tsx
 var import_eds_core_react3 = require("@equinor/eds-core-react");
 var import_styled_components4 = __toESM(require("styled-components"));
-var StickyCell = (0, import_styled_components4.default)(import_eds_core_react3.Table.Cell)`
-  position: sticky;
-  right: 0;
-  top: 0;
-  z-index: 4;
-`;
-var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
-  z-index: 5;
-`;
-
-// src/cells/styles.ts
-var import_styled_components5 = require("styled-components");
-var leftCellShadow = import_styled_components5.css`
+var leftCellShadow = import_styled_components4.css`
   &:before {
     box-shadow: -1px 0 1px -1px inset;
     content: ' ';
@@ -223,15 +211,24 @@ var leftCellShadow = import_styled_components5.css`
     width: 1px;
   }
 `;
+var StickyCell = (0, import_styled_components4.default)(import_eds_core_react3.Table.Cell)`
+  position: sticky;
+  right: 0;
+  top: 0;
+  z-index: 4;
+  background-clip: padding-box;
+  ${leftCellShadow}
+`;
+var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
+  z-index: 5;
+`;
 
 // src/cells/DynamicCell.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var StyledStickyCell = (0, import_styled_components6.default)(StickyCell)`
-  background-clip: padding-box;
-  ${leftCellShadow}
+var StyledStickyCell = (0, import_styled_components5.default)(StickyCell)`
   ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
 `;
-var StyledCell = (0, import_styled_components6.default)(import_eds_core_react4.Table.Cell)`
+var StyledCell = (0, import_styled_components5.default)(import_eds_core_react4.Table.Cell)`
   ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
 `;
 function DynamicCell({ cell, highlight, getStickyCellColor }) {
@@ -253,12 +250,12 @@ function DynamicCell({ cell, highlight, getStickyCellColor }) {
 
 // src/cells/HierarchyCell.tsx
 var import_eds_tokens4 = require("@equinor/eds-tokens");
-var import_styled_components8 = __toESM(require("styled-components"));
+var import_styled_components7 = __toESM(require("styled-components"));
 
 // src/cells/TypographyCustom.tsx
 var import_eds_core_react5 = require("@equinor/eds-core-react");
 var import_eds_tokens3 = require("@equinor/eds-tokens");
-var import_styled_components7 = __toESM(require("styled-components"));
+var import_styled_components6 = __toESM(require("styled-components"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var truncateStyle = {
   overflow: "hidden",
@@ -294,7 +291,7 @@ var TypographyCustom = (props) => {
     style: { ...styleFromProps, ...noWrap ? truncateStyle : {} }
   });
 };
-var HoverCapture = import_styled_components7.default.div`
+var HoverCapture = import_styled_components6.default.div`
   position: relative;
   z-index: 0;
 
@@ -305,7 +302,7 @@ var HoverCapture = import_styled_components7.default.div`
     opacity: 1;
   }
 `;
-var ShowAllWrapperWrapper = import_styled_components7.default.div`
+var ShowAllWrapperWrapper = import_styled_components6.default.div`
   position: absolute;
   z-index: 1;
   pointer-events: none;
@@ -317,14 +314,14 @@ var ShowAllWrapperWrapper = import_styled_components7.default.div`
 
 // src/cells/HierarchyCell.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var CellWrapper = (0, import_styled_components8.default)(TypographyCustom)`
+var CellWrapper = (0, import_styled_components7.default)(TypographyCustom)`
   height: 100%;
   display: flex;
   align-items: center;
 
   ${({ depth, expanded }) => expanded && depth === 0 && "font-weight: bold;"}
 
-  ${({ depth }) => depth > 0 && import_styled_components8.css`
+  ${({ depth }) => depth > 0 && import_styled_components7.css`
       border-left: 3px solid ${import_eds_tokens4.tokens.colors.infographic.primary__moss_green_34.hex};
       gap: 0.5rem;
       .--divider {
@@ -352,9 +349,9 @@ function HierarchyCell(cell, options = {}) {
 // src/cells/SelectColumnDef.tsx
 var import_eds_core_react6 = require("@equinor/eds-core-react");
 var import_eds_icons3 = require("@equinor/eds-icons");
-var import_styled_components9 = __toESM(require("styled-components"));
+var import_styled_components8 = __toESM(require("styled-components"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var CellWrapper2 = import_styled_components9.default.div`
+var CellWrapper2 = import_styled_components8.default.div`
   display: flex;
   align-items: center;
   width: 48px;
@@ -406,28 +403,18 @@ function SelectColumnDef(selectionMode) {
   };
 }
 
-// src/DataTable/DataTable.tsx
-var import_react_table3 = require("@tanstack/react-table");
-var import_jotai3 = require("jotai");
+// src/DataTable/DataTableRaw.tsx
 var import_react4 = require("react");
-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)({});
+var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/DataTable/components/BasicTable.tsx
 var import_eds_core_react11 = require("@equinor/eds-core-react");
 
 // src/DataTable/components/PlaceholderRow.tsx
 var import_eds_core_react7 = require("@equinor/eds-core-react");
-var import_styled_components10 = __toESM(require("styled-components"));
+var import_styled_components9 = __toESM(require("styled-components"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var PlaceholderTextWrapper = import_styled_components10.default.div`
+var PlaceholderTextWrapper = import_styled_components9.default.div`
   display: flex;
   justify-content: center;
 `;
@@ -453,17 +440,14 @@ var import_eds_core_react9 = require("@equinor/eds-core-react");
 var import_eds_core_react8 = require("@equinor/eds-core-react");
 var import_eds_icons4 = require("@equinor/eds-icons");
 var import_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;
   z-index: 5;
 `;
-var StyledStickyCell2 = (0, import_styled_components11.default)(StickyCell)`
-  ${leftCellShadow}
-`;
 var HeaderCell = ({ header }) => {
   var _a;
   const style = {
@@ -475,13 +459,14 @@ var HeaderCell = ({ header }) => {
     onClick: header.column.getToggleSortingHandler(),
     colSpan: header.colSpan
   };
-  if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky)
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledStickyCell2, {
+  if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StickyHeaderCell, {
       ...cellProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderContent, {
         header
       })
     }, header.id);
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Table.Cell, {
     ...cellProps,
     children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderContent, {
@@ -605,18 +590,26 @@ function BasicTable({
 var import_eds_core_react14 = require("@equinor/eds-core-react");
 var import_eds_icons7 = require("@equinor/eds-icons");
 var import_jotai2 = require("jotai");
-var import_styled_components14 = __toESM(require("styled-components"));
+var import_styled_components13 = __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_react12 = require("@equinor/eds-core-react");
 var import_eds_icons5 = require("@equinor/eds-icons");
 var import_react2 = require("react");
-var import_styled_components12 = __toESM(require("styled-components"));
+var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Wrapper3 = import_styled_components12.default.div`
+var Wrapper3 = import_styled_components11.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components12.default)(import_eds_core_react12.Button)`
+var CloseButton = (0, import_styled_components11.default)(import_eds_core_react12.Button)`
   width: 24px;
   height: 24px;
 `;
@@ -677,7 +670,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 var import_eds_core_react13 = require("@equinor/eds-core-react");
 var import_eds_icons6 = require("@equinor/eds-icons");
 var import_react3 = require("react");
-var import_styled_components13 = __toESM(require("styled-components"));
+var import_styled_components12 = __toESM(require("styled-components"));
 
 // src/DataTable/utils.tsx
 function capitalizeHeader(context) {
@@ -703,12 +696,12 @@ function prependSelectColumn(columns, config) {
 
 // src/DataTable/components/ColumnSelect.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var ColumnSelectContent = import_styled_components13.default.div`
+var ColumnSelectContent = import_styled_components12.default.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.5rem;
 `;
-var ActionsWrapper = import_styled_components13.default.div`
+var ActionsWrapper = import_styled_components12.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -790,14 +783,14 @@ function ColumnSelect({ table }) {
 
 // src/DataTable/components/DataTableHeader.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var DataTableHeaderWrapper = import_styled_components14.default.div`
+var DataTableHeaderWrapper = import_styled_components13.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.captionPadding ?? "1rem"};
 `;
-var FilterContainer = import_styled_components14.default.div`
+var FilterContainer = import_styled_components13.default.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -901,9 +894,9 @@ function VirtualTable({
   });
 }
 
-// src/DataTable/DataTable.tsx
+// src/DataTable/DataTableRaw.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var DataTableWrapper = import_styled_components15.default.div`
+var DataTableWrapper = import_styled_components14.default.div`
   width: ${(props) => props.width ?? "100%"};
 
   .--table-container {
@@ -917,16 +910,47 @@ var DataTableWrapper = import_styled_components15.default.div`
     }
   }
 `;
-function DataTable({
-  columns,
-  data,
-  isLoading,
-  header,
-  filters,
-  config,
-  cellConfig,
-  rowConfig
-}) {
+function DataTableRaw(props) {
+  const { isLoading, header, filters, config, rowConfig, table } = props;
+  const tableContainerRef = (0, import_react4.useRef)(null);
+  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,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DataTableHeader, {
+        tableCaption: header == null ? void 0 : header.tableCaption,
+        captionPadding: header == null ? void 0 : header.captionPadding,
+        table,
+        config: filters
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", {
+        ref: tableContainerRef,
+        className: "--table-container",
+        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VirtualTable, {
+          containerRef: tableContainerRef,
+          table,
+          rowConfig,
+          isLoading,
+          stickyHeader: header == null ? void 0 : header.stickyHeader
+        }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BasicTable, {
+          table,
+          rowConfig,
+          isLoading,
+          stickyHeader: header == null ? void 0 : header.stickyHeader
+        })
+      })
+    ]
+  });
+}
+
+// src/DataTable/useDataTable.tsx
+var import_react_table3 = require("@tanstack/react-table");
+var import_jotai3 = require("jotai");
+var import_react5 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function useDataTable(props) {
+  const { columns, data, filters, config, meta } = 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);
@@ -947,11 +971,12 @@ function DataTable({
       columnVisibility
     },
     defaultColumn: {
-      cell: (cell) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TypographyCustom, {
+      cell: (cell) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TypographyCustom, {
         noWrap: true,
         children: cell.getValue()
       })
     },
+    meta,
     enableSorting: config == null ? void 0 : config.sortable,
     enableExpanding: !(config == null ? void 0 : config.hideExpandControls),
     enableMultiRowSelection: (config == null ? void 0 : config.rowSelectionMode) === "multiple",
@@ -969,50 +994,29 @@ function DataTable({
     getSubRows: config == null ? void 0 : config.getSubRows,
     getRowId: config == null ? void 0 : config.getRowId
   });
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (config && config.expandAllByDefault) {
       table.toggleAllRowsExpanded();
     }
   }, [table, config == null ? void 0 : config.expandAllByDefault]);
-  const tableContainerRef = (0, import_react4.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DataTableWrapper, {
-    captionPadding: header == null ? void 0 : header.captionPadding,
-    height: config == null ? void 0 : config.height,
-    width: config == null ? void 0 : config.width,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DataTableHeader, {
-        tableCaption: header == null ? void 0 : header.tableCaption,
-        captionPadding: header == null ? void 0 : header.captionPadding,
-        table,
-        config: filters
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", {
-        ref: tableContainerRef,
-        className: "--table-container",
-        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(VirtualTable, {
-          containerRef: tableContainerRef,
-          table,
-          rowConfig,
-          cellConfig,
-          isLoading,
-          stickyHeader: header == null ? void 0 : header.stickyHeader
-        }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BasicTable, {
-          table,
-          rowConfig,
-          cellConfig,
-          isLoading,
-          stickyHeader: header == null ? void 0 : header.stickyHeader
-        })
-      })
-    ]
+  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_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function DataTableProvider({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jotai4.Provider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jotai4.Provider, {
     ...props,
     children
   });

package/dist/index.mjs

@@ -152,19 +152,7 @@ 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";
+import styled4, { css as css2 } from "styled-components";
 var leftCellShadow = css2`
   &:before {
     box-shadow: -1px 0 1px -1px inset;
@@ -176,12 +164,21 @@ var leftCellShadow = css2`
     width: 1px;
   }
 `;
+var StickyCell = styled4(Table.Cell)`
+  position: sticky;
+  right: 0;
+  top: 0;
+  z-index: 4;
+  background-clip: padding-box;
+  ${leftCellShadow}
+`;
+var StickyHeaderCell = styled4(StickyCell)`
+  z-index: 5;
+`;
 
 // src/cells/DynamicCell.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var StyledStickyCell = styled5(StickyCell)`
-  background-clip: padding-box;
-  ${leftCellShadow}
   ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
 `;
 var StyledCell = styled5(Table2.Cell)`
@@ -361,26 +358,10 @@ function SelectColumnDef(selectionMode) {
   };
 }
 
-// src/DataTable/DataTable.tsx
-import {
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
-  useReactTable
-} from "@tanstack/react-table";
-import { useAtom as useAtom2 } from "jotai";
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+// src/DataTable/DataTableRaw.tsx
+import { useRef as useRef2 } from "react";
 import styled14 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/components/BasicTable.tsx
 import { Table as EdsTable } from "@equinor/eds-core-react";
 
@@ -422,9 +403,6 @@ var HeaderDiv = styled10.div`
   gap: 0.25rem;
   z-index: 5;
 `;
-var StyledStickyCell2 = styled10(StickyCell)`
-  ${leftCellShadow}
-`;
 var HeaderCell = ({ header }) => {
   var _a;
   const style = {
@@ -436,13 +414,14 @@ var HeaderCell = ({ header }) => {
     onClick: header.column.getToggleSortingHandler(),
     colSpan: header.colSpan
   };
-  if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky)
-    return /* @__PURE__ */ jsx9(StyledStickyCell2, {
+  if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky) {
+    return /* @__PURE__ */ jsx9(StickyHeaderCell, {
       ...cellProps,
       children: /* @__PURE__ */ jsx9(HeaderContent, {
         header
       })
     }, header.id);
+  }
   return /* @__PURE__ */ jsx9(Table4.Cell, {
     ...cellProps,
     children: /* @__PURE__ */ jsx9(HeaderContent, {
@@ -568,6 +547,14 @@ import { search } from "@equinor/eds-icons";
 import { useAtom } from "jotai";
 import styled13 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";
@@ -862,7 +849,7 @@ function VirtualTable({
   });
 }
 
-// src/DataTable/DataTable.tsx
+// src/DataTable/DataTableRaw.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var DataTableWrapper = styled14.div`
   width: ${(props) => props.width ?? "100%"};
@@ -878,16 +865,53 @@ var DataTableWrapper = styled14.div`
     }
   }
 `;
-function DataTable({
-  columns,
-  data,
-  isLoading,
-  header,
-  filters,
-  config,
-  cellConfig,
-  rowConfig
-}) {
+function DataTableRaw(props) {
+  const { isLoading, header, filters, config, rowConfig, table } = props;
+  const tableContainerRef = useRef2(null);
+  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__ */ 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,
+          isLoading,
+          stickyHeader: header == null ? void 0 : header.stickyHeader
+        }) : /* @__PURE__ */ jsx18(BasicTable, {
+          table,
+          rowConfig,
+          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, meta } = props;
   const [columnVisibility, setColumnVisibility] = useAtom2(columnVisibilityAtom);
   const [globalFilter, setGlobalFilter] = useAtom2(globalFilterAtom);
   const [sorting, setSorting] = useAtom2(tableSortingAtom);
@@ -908,11 +932,12 @@ function DataTable({
       columnVisibility
     },
     defaultColumn: {
-      cell: (cell) => /* @__PURE__ */ jsx18(TypographyCustom, {
+      cell: (cell) => /* @__PURE__ */ jsx19(TypographyCustom, {
         noWrap: true,
         children: cell.getValue()
       })
     },
+    meta,
     enableSorting: config == null ? void 0 : config.sortable,
     enableExpanding: !(config == null ? void 0 : config.hideExpandControls),
     enableMultiRowSelection: (config == null ? void 0 : config.rowSelectionMode) === "multiple",
@@ -935,45 +960,24 @@ function DataTable({
       table.toggleAllRowsExpanded();
     }
   }, [table, config == null ? void 0 : config.expandAllByDefault]);
-  const tableContainerRef = useRef2(null);
-  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__ */ 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
-        })
-      })
-    ]
+  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 jsx19 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function DataTableProvider({ children, ...props }) {
-  return /* @__PURE__ */ jsx19(Provider, {
+  return /* @__PURE__ */ jsx21(Provider, {
     ...props,
     children
   });

package/package.json

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