@equinor/apollo-components 1.0.1 → 1.1.1

package/dist/index.d.ts

@@ -16,20 +16,30 @@ declare const ChipsCell: (props: {
     values?: string[];
 }) => JSX.Element;
 
-interface DataTableProps<T> {
-    className?: string;
-    columns: ColumnDef<T, any>[];
-    data: T[];
-    tableCaption?: string;
+interface HeaderConfig {
     captionPadding?: string;
+    stickyHeader?: boolean;
+    tableCaption?: string;
+}
+interface FilterConfig {
     globalFilter?: boolean;
     globalFilterPlaceholder?: string;
-    stickyHeader?: boolean;
-    tableWidth?: string;
+}
+interface DataTableConfig {
+    height?: string;
     sortable?: boolean;
     virtual?: boolean;
-    height?: string;
+    width?: string;
+}
+
+interface DataTableProps<T> {
+    className?: string;
+    columns: ColumnDef<T, any>[];
+    config?: DataTableConfig;
+    data: T[];
+    filters?: FilterConfig;
+    header?: HeaderConfig;
 }
-declare function DataTable<T>({ columns, data, ...props }: DataTableProps<T>): JSX.Element;
+declare function DataTable<T>({ columns, data, header, filters, config }: DataTableProps<T>): JSX.Element;
 
-export { AppShell, AppSidebar, ChipsCell, DataTable };
+export { AppShell, AppSidebar, ChipsCell, DataTable, DataTableConfig, FilterConfig, HeaderConfig };

package/dist/index.js

@@ -412,10 +412,10 @@ var DataTableWrapper = import_styled_components7.default.div`
     }
   }
 `;
-function DataTable({ columns, data, ...props }) {
+function DataTable({ columns, data, header, filters, config }) {
   const [globalFilter, setGlobalFilter] = (0, import_react3.useState)("");
   function enableGlobalFilter(value) {
-    return enableOrUndefined(props.globalFilter, value);
+    return enableOrUndefined(filters == null ? void 0 : filters.globalFilter, value);
   }
   const [sorting, setSorting] = (0, import_react3.useState)([]);
   const table = (0, import_react_table4.useReactTable)({
@@ -428,35 +428,35 @@ function DataTable({ columns, data, ...props }) {
       globalFilter: enableGlobalFilter(globalFilter),
       sorting
     },
-    enableSorting: props.sortable,
+    enableSorting: config == null ? void 0 : config.sortable,
     onSortingChange: setSorting,
     getSortedRowModel: (0, import_react_table4.getSortedRowModel)(),
     onGlobalFilterChange: enableGlobalFilter(setGlobalFilter)
   });
   const tableContainerRef = (0, import_react3.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DataTableWrapper, {
-    captionPadding: props.captionPadding,
-    height: props.height,
-    width: props.tableWidth,
+    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_runtime11.jsx)(DataTableHeader, {
-        tableCaption: props.tableCaption,
-        enableGlobalFilter: props.globalFilter,
+        tableCaption: header == null ? void 0 : header.tableCaption,
+        enableGlobalFilter: filters == null ? void 0 : filters.globalFilter,
         globalFilter,
         setGlobalFilter,
-        globalFilterPlaceholder: props.globalFilterPlaceholder,
-        captionPadding: props.captionPadding
+        globalFilterPlaceholder: filters == null ? void 0 : filters.globalFilterPlaceholder,
+        captionPadding: header == null ? void 0 : header.captionPadding
       }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {
         ref: tableContainerRef,
         className: "--table-container",
-        children: props.virtual ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VirtualTable, {
+        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VirtualTable, {
           containerRef: tableContainerRef,
           table,
-          stickyHeader: props.stickyHeader
+          stickyHeader: header == null ? void 0 : header.stickyHeader
         }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BasicTable, {
           table,
-          stickyHeader: props.stickyHeader
+          stickyHeader: header == null ? void 0 : header.stickyHeader
         })
       })
     ]

package/dist/index.mjs

@@ -382,10 +382,10 @@ var DataTableWrapper = styled7.div`
     }
   }
 `;
-function DataTable({ columns, data, ...props }) {
+function DataTable({ columns, data, header, filters, config }) {
   const [globalFilter, setGlobalFilter] = useState3("");
   function enableGlobalFilter(value) {
-    return enableOrUndefined(props.globalFilter, value);
+    return enableOrUndefined(filters == null ? void 0 : filters.globalFilter, value);
   }
   const [sorting, setSorting] = useState3([]);
   const table = useReactTable({
@@ -398,35 +398,35 @@ function DataTable({ columns, data, ...props }) {
       globalFilter: enableGlobalFilter(globalFilter),
       sorting
     },
-    enableSorting: props.sortable,
+    enableSorting: config == null ? void 0 : config.sortable,
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
     onGlobalFilterChange: enableGlobalFilter(setGlobalFilter)
   });
   const tableContainerRef = useRef(null);
   return /* @__PURE__ */ jsxs7(DataTableWrapper, {
-    captionPadding: props.captionPadding,
-    height: props.height,
-    width: props.tableWidth,
+    captionPadding: header == null ? void 0 : header.captionPadding,
+    height: config == null ? void 0 : config.height,
+    width: config == null ? void 0 : config.width,
     children: [
       /* @__PURE__ */ jsx11(DataTableHeader, {
-        tableCaption: props.tableCaption,
-        enableGlobalFilter: props.globalFilter,
+        tableCaption: header == null ? void 0 : header.tableCaption,
+        enableGlobalFilter: filters == null ? void 0 : filters.globalFilter,
         globalFilter,
         setGlobalFilter,
-        globalFilterPlaceholder: props.globalFilterPlaceholder,
-        captionPadding: props.captionPadding
+        globalFilterPlaceholder: filters == null ? void 0 : filters.globalFilterPlaceholder,
+        captionPadding: header == null ? void 0 : header.captionPadding
       }),
       /* @__PURE__ */ jsx11("div", {
         ref: tableContainerRef,
         className: "--table-container",
-        children: props.virtual ? /* @__PURE__ */ jsx11(VirtualTable, {
+        children: (config == null ? void 0 : config.virtual) ? /* @__PURE__ */ jsx11(VirtualTable, {
           containerRef: tableContainerRef,
           table,
-          stickyHeader: props.stickyHeader
+          stickyHeader: header == null ? void 0 : header.stickyHeader
         }) : /* @__PURE__ */ jsx11(BasicTable, {
           table,
-          stickyHeader: props.stickyHeader
+          stickyHeader: header == null ? void 0 : header.stickyHeader
         })
       })
     ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -22,7 +22,7 @@
     "@equinor/eds-tokens": "^0.9.0",
     "@tanstack/match-sorter-utils": "^8.5.14",
     "@tanstack/react-table": "^8.5.15",
-    "@tanstack/react-virtual": "^3.0.0-alpha.0",
+    "@tanstack/react-virtual": "^3.0.0-beta.23",
     "styled-components": "^5.3.6",
     "tsup": "^6.3.0"
   },