@equinor/apollo-components 1.8.1 → 1.9.0

package/dist/index.d.ts

@@ -84,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>;
@@ -96,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;
@@ -153,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

@@ -403,20 +403,10 @@ 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)({});
-
 // src/DataTable/components/BasicTable.tsx
 var import_eds_core_react11 = require("@equinor/eds-core-react");
 
@@ -469,13 +459,14 @@ 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, {
     ...cellProps,
     children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HeaderContent, {
@@ -601,6 +592,14 @@ var import_eds_icons7 = require("@equinor/eds-icons");
 var import_jotai2 = require("jotai");
 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");
@@ -895,7 +894,7 @@ 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`
   width: ${(props) => props.width ?? "100%"};
@@ -906,23 +905,52 @@ 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%;
+      table-layout: 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,
+    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 +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",
@@ -965,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, {
-    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

@@ -358,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";
 
@@ -430,13 +414,14 @@ 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, {
     ...cellProps,
     children: /* @__PURE__ */ jsx9(HeaderContent, {
@@ -562,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";
@@ -856,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%"};
@@ -867,23 +860,58 @@ 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%;
+      table-layout: 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,
+    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 +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",
@@ -931,45 +960,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.9.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",