@equinor/apollo-components 1.8.1 → 1.10.0

package/dist/index.d.ts

@@ -69,9 +69,18 @@ interface CellConfig<T> {
     getShouldHighlight?: (cell: Cell<T, unknown>) => boolean;
 }
 declare type RowSelectionMode = 'single' | 'multiple';
+declare type TableLayout = 'auto' | 'fixed';
 declare type DataTableConfig<T> = {
     height?: string;
-    tableLayout?: 'auto' | 'fixed';
+    /**
+     * Defaults to `'auto'`.
+     *
+     * `'auto'` determines column width based on cell content.
+     *
+     * `'fixed'` uses fixed column width. Specify width (`size` property) in ColumnDef.
+     * Default size is 150px.
+     */
+    tableLayout?: TableLayout;
     sortable?: boolean;
     virtual?: boolean;
     rowSelectionMode?: RowSelectionMode;
@@ -84,10 +93,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>;
@@ -96,7 +102,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;
@@ -138,7 +152,7 @@ declare type DataTableCompoundProps = typeof DataTable$1 & {
 };
 declare const DataTable: DataTableCompoundProps;
 
-declare function SelectColumnDef<T>(selectionMode?: RowSelectionMode): ColumnDef$1<T, any>;
+declare function SelectColumnDef<T>(props?: DataTableConfig<T>): ColumnDef$1<T, any>;
 
 declare const StickyCell: styled_components.StyledComponent<react.ForwardRefExoticComponent<CellProps & react.RefAttributes<HTMLTableCellElement>>, any, {} & CellProps, never>;
 
@@ -153,4 +167,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, TableLayout, TableRowWrapper, TableRowWrapperProps, TypographyCustom, capitalizeHeader, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };

package/dist/index.js

@@ -61,6 +61,7 @@ var Wrapper = import_styled_components.default.div`
   }
   .--content-outlet {
     flex: 1;
+    max-width: 100%;
   }
 `;
 var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, {
@@ -172,7 +173,10 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var ChipsWrapper = import_styled_components3.default.div`
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.25rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 `;
 var Chip = import_styled_components3.default.div`
   border-radius: 25px;
@@ -226,10 +230,10 @@ var StickyHeaderCell = (0, import_styled_components4.default)(StickyCell)`
 // src/cells/DynamicCell.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var StyledStickyCell = (0, import_styled_components5.default)(StickyCell)`
-  ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
+  background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
 var StyledCell = (0, import_styled_components5.default)(import_eds_core_react4.Table.Cell)`
-  ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
+  ${({ backgroundColor: bg }) => bg ? `background-color: ${bg} !important;` : ``};
 `;
 function DynamicCell({ cell, highlight, getStickyCellColor }) {
   var _a;
@@ -358,9 +362,12 @@ var CellWrapper2 = import_styled_components8.default.div`
   margin-left: -16px;
   z-index: 2;
 `;
-function SelectColumnDef(selectionMode) {
+function SelectColumnDef(props = {}) {
+  const selectionMode = props.rowSelectionMode;
+  const showBothSelectAndSubRowsToggle = props.hideExpandControls === false;
   return {
     id: "select",
+    size: showBothSelectAndSubRowsToggle ? 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(),
@@ -403,22 +410,12 @@ 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_components14 = __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_components16 = __toESM(require("styled-components"));
 
 // src/DataTable/components/BasicTable.tsx
-var import_eds_core_react11 = require("@equinor/eds-core-react");
+var import_eds_core_react12 = require("@equinor/eds-core-react");
 
 // src/DataTable/components/PlaceholderRow.tsx
 var import_eds_core_react7 = require("@equinor/eds-core-react");
@@ -443,16 +440,25 @@ function PlaceholderRow({ isLoading }) {
   });
 }
 
+// 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_react9 = require("@equinor/eds-core-react");
+var import_eds_core_react10 = require("@equinor/eds-core-react");
 
 // src/cells/HeaderCell.tsx
-var import_eds_core_react8 = require("@equinor/eds-core-react");
+var import_eds_core_react9 = require("@equinor/eds-core-react");
 var import_eds_icons4 = require("@equinor/eds-icons");
 var import_react_table2 = require("@tanstack/react-table");
-var import_styled_components10 = __toESM(require("styled-components"));
+var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var HeaderDiv = import_styled_components10.default.div`
+var HeaderDiv = import_styled_components11.default.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -461,7 +467,7 @@ var HeaderDiv = import_styled_components10.default.div`
 var HeaderCell = ({ header }) => {
   var _a;
   const style = {
-    width: header.column.getSize() === -1 ? "auto" : header.column.getSize()
+    width: header.column.getSize()
   };
   const cellProps = {
     style,
@@ -469,14 +475,15 @@ var HeaderCell = ({ header }) => {
     onClick: header.column.getToggleSortingHandler(),
     colSpan: header.colSpan
   };
-  if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky)
+  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, {
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react9.Table.Cell, {
     ...cellProps,
     children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderContent, {
       header
@@ -490,13 +497,13 @@ 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_react8.Icon, {
+        asc: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react9.Icon, {
           data: import_eds_icons4.arrow_drop_up
         }),
-        desc: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react8.Icon, {
+        desc: /* @__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, {
+        none: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_eds_core_react9.Icon, {
           data: import_eds_icons4.arrow_drop_down
         })
       }[header.column.getIsSorted()] ?? null
@@ -519,9 +526,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_react9.Table.Head, {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react10.Table.Head, {
     sticky,
-    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react9.Table.Row, {
+    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_eds_core_react10.Table.Row, {
       children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HeaderCell, {
         header
       }, header.id))
@@ -530,12 +537,13 @@ function TableHeader({ table, sticky }) {
 }
 
 // src/DataTable/components/TableRow.tsx
-var import_eds_core_react10 = require("@equinor/eds-core-react");
+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");
 function TableRow({ row, rowConfig, cellConfig }) {
   var _a;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
-  const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_eds_core_react10.Table.Row, {
+  const tableRowContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledTableRow, {
     active: row.getIsSelected(),
     style: {
       cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
@@ -558,6 +566,10 @@ 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)`
+  /* Background color must be inherited here. Does not work with inline styling */
+  background-color: inherit;
+`;
 function handleRowEvent(row, handler) {
   if (!handler)
     return void 0;
@@ -576,13 +588,13 @@ function BasicTable({
   isLoading
 }) {
   const tableRows = table.getRowModel().rows;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react11.Table, {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_eds_core_react12.Table, {
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableHeader, {
         sticky: stickyHeader,
         table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_eds_core_react11.Table.Body, {
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableBody, {
         children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableRow, {
           row,
           rowConfig,
@@ -596,21 +608,29 @@ function BasicTable({
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-var import_eds_core_react14 = require("@equinor/eds-core-react");
+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_components13 = __toESM(require("styled-components"));
+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_react12 = require("@equinor/eds-core-react");
+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_components11 = __toESM(require("styled-components"));
+var import_styled_components13 = __toESM(require("styled-components"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Wrapper3 = import_styled_components11.default.div`
+var Wrapper3 = import_styled_components13.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components11.default)(import_eds_core_react12.Button)`
+var CloseButton = (0, import_styled_components13.default)(import_eds_core_react13.Button)`
   width: 24px;
   height: 24px;
 `;
@@ -632,20 +652,20 @@ function DebouncedInput({
     return () => clearTimeout(timeout);
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Wrapper3, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Input, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react13.Input, {
       ...props,
       value,
-      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Icon, {
+      leftAdornments: icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react13.Icon, {
         name: icon.name,
         data: icon,
         size: 18
       }),
-      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Tooltip, {
+      rightAdornments: !!value && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react13.Tooltip, {
         title: "Clear input",
         children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseButton, {
           variant: "ghost_icon",
           onClick: () => setValue(""),
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Icon, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react13.Icon, {
             name: import_eds_icons5.close.name,
             data: import_eds_icons5.close,
             size: 18
@@ -668,10 +688,10 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 };
 
 // src/DataTable/components/ColumnSelect.tsx
-var import_eds_core_react13 = require("@equinor/eds-core-react");
+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_components12 = __toESM(require("styled-components"));
+var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/DataTable/utils.tsx
 function capitalizeHeader(context) {
@@ -691,18 +711,18 @@ function prependSelectColumn(columns, config) {
   if (!(config == null ? void 0 : config.selectColumn))
     return columns;
   if (config.selectColumn === "default")
-    return [SelectColumnDef(config == null ? void 0 : config.rowSelectionMode), ...columns];
+    return [SelectColumnDef(config), ...columns];
   return [config.selectColumn(), ...columns];
 }
 
 // src/DataTable/components/ColumnSelect.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var ColumnSelectContent = import_styled_components12.default.div`
+var ColumnSelectContent = import_styled_components14.default.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.5rem;
 `;
-var ActionsWrapper = import_styled_components12.default.div`
+var ActionsWrapper = import_styled_components14.default.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -714,7 +734,7 @@ function ColumnSelect({ table }) {
   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_react13.Button, {
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Button, {
         "aria-haspopup": true,
         id: "column-select-anchor",
         "aria-controls": "column-select-popover",
@@ -722,28 +742,28 @@ function ColumnSelect({ table }) {
         ref: referenceElement,
         variant: "ghost_icon",
         onClick: () => setIsOpen(true),
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Icon, {
+        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_react13.Popover, {
+      /* @__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_react13.Popover.Header, {
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_eds_core_react14.Popover.Header, {
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Popover.Title, {
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Popover.Title, {
                 children: "Column settings"
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react13.Button, {
+              /* @__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_react13.Icon, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Icon, {
                   name: "close",
                   data: import_eds_icons6.close,
                   size: 24
@@ -751,22 +771,22 @@ function ColumnSelect({ table }) {
               })
             ]
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_eds_core_react13.Popover.Content, {
+          /* @__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_react13.Checkbox, {
+                  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_react13.Divider, {
+              /* @__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_react13.Button, {
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_eds_core_react14.Button, {
                   color: "secondary",
                   variant: "ghost",
                   disabled: table.getIsAllColumnsVisible(),
@@ -784,14 +804,14 @@ function ColumnSelect({ table }) {
 
 // src/DataTable/components/DataTableHeader.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var DataTableHeaderWrapper = import_styled_components13.default.div`
+var DataTableHeaderWrapper = import_styled_components15.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.captionPadding ?? "1rem"};
 `;
-var FilterContainer = import_styled_components13.default.div`
+var FilterContainer = import_styled_components15.default.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -804,7 +824,7 @@ function DataTableHeader({ config, table, ...props }) {
     className: "--table-caption",
     captionPadding: props.captionPadding,
     children: [
-      (props == null ? void 0 : props.tableCaption) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react14.Typography, {
+      (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
       }),
@@ -830,17 +850,17 @@ function DataTableHeader({ config, table, ...props }) {
 }
 
 // src/DataTable/components/VirtualTable.tsx
-var import_eds_core_react16 = require("@equinor/eds-core-react");
+var import_eds_core_react17 = require("@equinor/eds-core-react");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/DataTable/components/PaddingRow.tsx
-var import_eds_core_react15 = require("@equinor/eds-core-react");
+var import_eds_core_react16 = require("@equinor/eds-core-react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react15.Table.Row, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react15.Table.Cell, {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Table.Row, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_eds_core_react16.Table.Cell, {
       style: { height: `${props.height}px` }
     })
   });
@@ -865,13 +885,13 @@ function VirtualTable({
   const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_eds_core_react16.Table, {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_eds_core_react17.Table, {
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_eds_core_react16.Table.Body, {
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(TableBody, {
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PaddingRow, {
             height: paddingTop
@@ -895,9 +915,9 @@ function VirtualTable({
   });
 }
 
-// src/DataTable/DataTable.tsx
+// src/DataTable/DataTableRaw.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var DataTableWrapper = import_styled_components14.default.div`
+var DataTableWrapper = import_styled_components16.default.div`
   width: ${(props) => props.width ?? "100%"};
 
   .--table-container {
@@ -906,23 +926,57 @@ var DataTableWrapper = import_styled_components14.default.div`
     overflow: auto;
 
     table {
-      width: ${(props) => props.width ?? "100%"};
-      height: ${(props) => props.height ?? "100%"};
-      table-layout: ${(props) => props.tableLayout ?? "fixed"};
-      border-collapse: collapse;
+      width: 100%;
+
+      // The following attributes are important for fixed column width
+      // CHANGE THES WITH CAUTION
+      overflow: auto;
+      table-layout: ${(props) => props.tableLayout ?? "auto"};
     }
   }
 `;
-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,
+    tableLayout: config == null ? void 0 : config.tableLayout,
+    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);
@@ -943,11 +997,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",
@@ -965,50 +1020,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, {
-    height: config == null ? void 0 : config.height,
-    width: config == null ? void 0 : config.width,
-    tableLayout: config == null ? void 0 : config.tableLayout,
-    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

@@ -14,6 +14,7 @@ var Wrapper = styled.div`
   }
   .--content-outlet {
     flex: 1;
+    max-width: 100%;
   }
 `;
 var AppShell = ({ children, icon, title, sidebar }) => /* @__PURE__ */ jsxs(Wrapper, {
@@ -125,7 +126,10 @@ import { jsx as jsx3 } from "react/jsx-runtime";
 var ChipsWrapper = styled3.div`
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.25rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 `;
 var Chip = styled3.div`
   border-radius: 25px;
@@ -179,10 +183,10 @@ var StickyHeaderCell = styled4(StickyCell)`
 // src/cells/DynamicCell.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var StyledStickyCell = styled5(StickyCell)`
-  ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
+  background-color: ${({ backgroundColor: bg }) => bg ? `${bg} !important` : `inherit`};
 `;
 var StyledCell = styled5(Table2.Cell)`
-  ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor} !important;` : ``}
+  ${({ backgroundColor: bg }) => bg ? `background-color: ${bg} !important;` : ``};
 `;
 function DynamicCell({ cell, highlight, getStickyCellColor }) {
   var _a;
@@ -313,9 +317,12 @@ var CellWrapper2 = styled8.div`
   margin-left: -16px;
   z-index: 2;
 `;
-function SelectColumnDef(selectionMode) {
+function SelectColumnDef(props = {}) {
+  const selectionMode = props.rowSelectionMode;
+  const showBothSelectAndSubRowsToggle = props.hideExpandControls === false;
   return {
     id: "select",
+    size: showBothSelectAndSubRowsToggle ? 96 : 48,
     header: ({ table }) => selectionMode !== "single" ? /* @__PURE__ */ jsx7(CellWrapper2, {
       children: /* @__PURE__ */ jsx7(Checkbox, {
         checked: table.getIsAllRowsSelected(),
@@ -358,25 +365,9 @@ 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";
-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/DataTableRaw.tsx
+import { useRef as useRef2 } from "react";
+import styled16 from "styled-components";
 
 // src/DataTable/components/BasicTable.tsx
 import { Table as EdsTable } from "@equinor/eds-core-react";
@@ -404,16 +395,25 @@ function PlaceholderRow({ isLoading }) {
   });
 }
 
+// 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 Table5 } from "@equinor/eds-core-react";
+import { Table as Table6 } from "@equinor/eds-core-react";
 
 // src/cells/HeaderCell.tsx
-import { Icon as Icon4, Table as Table4 } from "@equinor/eds-core-react";
+import { Icon as Icon4, Table as Table5 } from "@equinor/eds-core-react";
 import { arrow_drop_down, arrow_drop_up } from "@equinor/eds-icons";
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import styled10 from "styled-components";
+import styled11 from "styled-components";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var HeaderDiv = styled10.div`
+var HeaderDiv = styled11.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -422,7 +422,7 @@ var HeaderDiv = styled10.div`
 var HeaderCell = ({ header }) => {
   var _a;
   const style = {
-    width: header.column.getSize() === -1 ? "auto" : header.column.getSize()
+    width: header.column.getSize()
   };
   const cellProps = {
     style,
@@ -430,14 +430,15 @@ var HeaderCell = ({ header }) => {
     onClick: header.column.getToggleSortingHandler(),
     colSpan: header.colSpan
   };
-  if ((_a = header.column.columnDef.meta) == null ? void 0 : _a.sticky)
+  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, {
+  }
+  return /* @__PURE__ */ jsx9(Table5.Cell, {
     ...cellProps,
     children: /* @__PURE__ */ jsx9(HeaderContent, {
       header
@@ -480,9 +481,9 @@ function getSort({ column }) {
 // src/DataTable/components/TableHeader.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 function TableHeader({ table, sticky }) {
-  return /* @__PURE__ */ jsx10(Table5.Head, {
+  return /* @__PURE__ */ jsx10(Table6.Head, {
     sticky,
-    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx10(Table5.Row, {
+    children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx10(Table6.Row, {
       children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx10(HeaderCell, {
         header
       }, header.id))
@@ -491,12 +492,13 @@ function TableHeader({ table, sticky }) {
 }
 
 // src/DataTable/components/TableRow.tsx
-import { Table as Table6 } from "@equinor/eds-core-react";
+import { Table as Table7 } from "@equinor/eds-core-react";
+import styled12 from "styled-components";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function TableRow({ row, rowConfig, cellConfig }) {
   var _a;
   const rowWrapper = rowConfig == null ? void 0 : rowConfig.rowWrapper;
-  const tableRowContent = /* @__PURE__ */ jsx11(Table6.Row, {
+  const tableRowContent = /* @__PURE__ */ jsx11(StyledTableRow, {
     active: row.getIsSelected(),
     style: {
       cursor: (rowConfig == null ? void 0 : rowConfig.onClick) ? "pointer" : "initial",
@@ -519,6 +521,10 @@ function TableRow({ row, rowConfig, cellConfig }) {
   });
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
+var StyledTableRow = styled12(Table7.Row)`
+  /* Background color must be inherited here. Does not work with inline styling */
+  background-color: inherit;
+`;
 function handleRowEvent(row, handler) {
   if (!handler)
     return void 0;
@@ -543,7 +549,7 @@ function BasicTable({
         sticky: stickyHeader,
         table
       }),
-      /* @__PURE__ */ jsx12(EdsTable.Body, {
+      /* @__PURE__ */ jsx12(TableBody, {
         children: tableRows.length ? tableRows.map((row) => /* @__PURE__ */ jsx12(TableRow, {
           row,
           rowConfig,
@@ -560,18 +566,26 @@ function BasicTable({
 import { Typography as Typography2 } from "@equinor/eds-core-react";
 import { search } from "@equinor/eds-icons";
 import { useAtom } from "jotai";
-import styled13 from "styled-components";
+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 styled11 from "styled-components";
+import styled13 from "styled-components";
 import { jsx as jsx13 } from "react/jsx-runtime";
-var Wrapper3 = styled11.div`
+var Wrapper3 = styled13.div`
   width: 200px;
 `;
-var CloseButton = styled11(Button3)`
+var CloseButton = styled13(Button3)`
   width: 24px;
   height: 24px;
 `;
@@ -632,7 +646,7 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 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 styled12 from "styled-components";
+import styled14 from "styled-components";
 
 // src/DataTable/utils.tsx
 function capitalizeHeader(context) {
@@ -652,18 +666,18 @@ function prependSelectColumn(columns, config) {
   if (!(config == null ? void 0 : config.selectColumn))
     return columns;
   if (config.selectColumn === "default")
-    return [SelectColumnDef(config == null ? void 0 : config.rowSelectionMode), ...columns];
+    return [SelectColumnDef(config), ...columns];
   return [config.selectColumn(), ...columns];
 }
 
 // src/DataTable/components/ColumnSelect.tsx
 import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var ColumnSelectContent = styled12.div`
+var ColumnSelectContent = styled14.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.5rem;
 `;
-var ActionsWrapper = styled12.div`
+var ActionsWrapper = styled14.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -745,14 +759,14 @@ function ColumnSelect({ table }) {
 
 // src/DataTable/components/DataTableHeader.tsx
 import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-var DataTableHeaderWrapper = styled13.div`
+var DataTableHeaderWrapper = styled15.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.captionPadding ?? "1rem"};
 `;
-var FilterContainer = styled13.div`
+var FilterContainer = styled15.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -791,17 +805,17 @@ function DataTableHeader({ config, table, ...props }) {
 }
 
 // src/DataTable/components/VirtualTable.tsx
-import { Table as Table8 } from "@equinor/eds-core-react";
+import { Table as Table9 } from "@equinor/eds-core-react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/DataTable/components/PaddingRow.tsx
-import { Table as Table7 } from "@equinor/eds-core-react";
+import { Table as Table8 } from "@equinor/eds-core-react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var PaddingRow = (props) => {
   if (!props.height)
     return null;
-  return /* @__PURE__ */ jsx16(Table7.Row, {
-    children: /* @__PURE__ */ jsx16(Table7.Cell, {
+  return /* @__PURE__ */ jsx16(Table8.Row, {
+    children: /* @__PURE__ */ jsx16(Table8.Cell, {
       style: { height: `${props.height}px` }
     })
   });
@@ -826,13 +840,13 @@ function VirtualTable({
   const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
-  return /* @__PURE__ */ jsxs10(Table8, {
+  return /* @__PURE__ */ jsxs10(Table9, {
     children: [
       /* @__PURE__ */ jsx17(TableHeader, {
         sticky: props.stickyHeader,
         table
       }),
-      /* @__PURE__ */ jsxs10(Table8.Body, {
+      /* @__PURE__ */ jsxs10(TableBody, {
         children: [
           /* @__PURE__ */ jsx17(PaddingRow, {
             height: paddingTop
@@ -856,9 +870,9 @@ 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`
+var DataTableWrapper = styled16.div`
   width: ${(props) => props.width ?? "100%"};
 
   .--table-container {
@@ -867,23 +881,63 @@ var DataTableWrapper = styled14.div`
     overflow: auto;
 
     table {
-      width: ${(props) => props.width ?? "100%"};
-      height: ${(props) => props.height ?? "100%"};
-      table-layout: ${(props) => props.tableLayout ?? "fixed"};
-      border-collapse: collapse;
+      width: 100%;
+
+      // The following attributes are important for fixed column width
+      // CHANGE THES WITH CAUTION
+      overflow: auto;
+      table-layout: ${(props) => props.tableLayout ?? "auto"};
     }
   }
 `;
-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,
+    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,
+          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);
@@ -904,11 +958,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",
@@ -931,45 +986,24 @@ function DataTable({
       table.toggleAllRowsExpanded();
     }
   }, [table, config == null ? void 0 : config.expandAllByDefault]);
-  const tableContainerRef = useRef2(null);
-  return /* @__PURE__ */ jsxs11(DataTableWrapper, {
-    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
-        })
-      })
-    ]
+  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.1",
+  "version": "1.10.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",