@equinor/apollo-components 1.11.1 → 1.12.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { IconData } from '@equinor/eds-icons';
 import * as react from 'react';
 import { ReactNode, ReactElement, ComponentProps } from 'react';
-import { Cell, CellContext, Table, Row, ColumnDef, VisibilityState, RowSelectionState, SortingState, HeaderContext } from '@tanstack/react-table';
+import { Cell, CellContext, Table, Row, SortingState, OnChangeFn, ColumnDef, VisibilityState, RowSelectionState, HeaderContext } from '@tanstack/react-table';
 import { ColumnDef as ColumnDef$1 } from '@tanstack/table-core';
 import * as styled_components from 'styled-components';
 import { CellProps, TypographyProps as TypographyProps$1 } from '@equinor/eds-core-react';
@@ -65,6 +65,12 @@ interface RowConfig<T> {
     onMouseLeave?: (row: Row<T>) => void;
 }
 declare type TruncateMode = 'wrap' | 'hover';
+declare type SortConfig = {
+    enableSorting?: boolean;
+    manualSorting?: boolean;
+    sorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+};
 interface CellConfig<T> {
     getStickyCellColor?: (cell: Cell<T, unknown>) => string;
     getShouldHighlight?: (cell: Cell<T, unknown>) => boolean;
@@ -89,6 +95,7 @@ declare type DataTableConfig<T> = {
      * Default size is 150px.
      */
     tableLayout?: TableLayout;
+    /** @deprecated use `cellConfig.enableSorting` instead. This is to align with \@tanstack/react-table types. */
     sortable?: boolean;
     virtual?: boolean;
     rowSelectionMode?: RowSelectionMode;
@@ -107,6 +114,7 @@ interface DataTableCommonProps<T> {
     config?: DataTableConfig<T>;
     cellConfig?: CellConfig<T>;
     rowConfig?: RowConfig<T>;
+    sortConfig?: SortConfig;
     filters?: FilterConfig;
     header?: HeaderConfig;
 }
@@ -172,4 +180,4 @@ declare type TypographyProps = {
 } & TypographyProps$1;
 declare const TypographyCustom: (props: TypographyProps) => JSX.Element;
 
-export { AppShell, AppSidebar, CellConfig, ChipsCell, ColumnSelect, DataTable, DataTableCommonProps, DataTableConfig, DataTableProps, DataTableRawProps, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowConfig, RowSelectionMode, SelectColumnDef, StickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TruncateMode, TypographyCustom, capitalizeHeader, columnVisibilityAtom, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };
+export { AppShell, AppSidebar, CellConfig, ChipsCell, ColumnSelect, DataTable, DataTableCommonProps, DataTableConfig, DataTableProps, DataTableRawProps, DynamicCell, FilterConfig, HeaderConfig, HierarchyCell, RowConfig, RowSelectionMode, SelectColumnDef, SortConfig, StickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TruncateMode, TypographyCustom, capitalizeHeader, columnVisibilityAtom, globalFilterAtom, prependSelectColumn, rowSelectionAtom, tableSortingAtom };

package/dist/index.js

@@ -461,7 +461,8 @@ var HeaderDiv = import_styled_components11.default.div`
 var HeaderCell = ({ header }) => {
   var _a;
   const style = {
-    width: header.column.getSize()
+    width: header.column.getSize(),
+    zIndex: 10
   };
   const cellProps = {
     style,
@@ -880,8 +881,9 @@ function VirtualTable({
   const { rows } = table.getRowModel();
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: rows.length,
-    estimateSize: () => 35,
-    getScrollElement: () => containerRef.current
+    estimateSize: () => 48,
+    getScrollElement: () => containerRef.current,
+    overscan: 5
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
@@ -979,7 +981,7 @@ 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, cellConfig } = props;
+  const { columns, data, filters, config, cellConfig, sortConfig } = 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);
@@ -995,7 +997,7 @@ function useDataTable(props) {
     state: {
       expanded,
       globalFilter: enableGlobalFilter(globalFilter),
-      sorting: enableOrUndefined(config == null ? void 0 : config.sortable, sorting),
+      sorting: (sortConfig == null ? void 0 : sortConfig.enableSorting) || (config == null ? void 0 : config.sortable) ? (sortConfig == null ? void 0 : sortConfig.sorting) ?? sorting : void 0,
       rowSelection: rowSelectionState,
       columnVisibility
     },
@@ -1008,7 +1010,8 @@ function useDataTable(props) {
         });
       }
     },
-    enableSorting: config == null ? void 0 : config.sortable,
+    enableSorting: (sortConfig == null ? void 0 : sortConfig.enableSorting) ?? (config == null ? void 0 : config.sortable),
+    manualSorting: sortConfig == null ? void 0 : sortConfig.manualSorting,
     enableExpanding: !(config == null ? void 0 : config.hideExpandControls),
     enableMultiRowSelection: (config == null ? void 0 : config.rowSelectionMode) === "multiple",
     enableSubRowSelection: (config == null ? void 0 : config.rowSelectionMode) !== "single",
@@ -1019,7 +1022,7 @@ function useDataTable(props) {
     getSortedRowModel: (0, import_react_table3.getSortedRowModel)(),
     onExpandedChange: setExpanded,
     onRowSelectionChange: setRowSelectionState,
-    onSortingChange: enableOrUndefined(config == null ? void 0 : config.sortable, setSorting),
+    onSortingChange: (sortConfig == null ? void 0 : sortConfig.enableSorting) || (config == null ? void 0 : config.sortable) ? (sortConfig == null ? void 0 : sortConfig.onSortingChange) ?? setSorting : void 0,
     onColumnVisibilityChange: setColumnVisibility,
     onGlobalFilterChange: enableGlobalFilter(setGlobalFilter),
     getSubRows: config == null ? void 0 : config.getSubRows,

package/dist/index.mjs

@@ -415,7 +415,8 @@ var HeaderDiv = styled11.div`
 var HeaderCell = ({ header }) => {
   var _a;
   const style = {
-    width: header.column.getSize()
+    width: header.column.getSize(),
+    zIndex: 10
   };
   const cellProps = {
     style,
@@ -834,8 +835,9 @@ function VirtualTable({
   const { rows } = table.getRowModel();
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
-    estimateSize: () => 35,
-    getScrollElement: () => containerRef.current
+    estimateSize: () => 48,
+    getScrollElement: () => containerRef.current,
+    overscan: 5
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
@@ -939,7 +941,7 @@ import { useAtom as useAtom2 } from "jotai";
 import { useEffect as useEffect2 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function useDataTable(props) {
-  const { columns, data, filters, config, cellConfig } = props;
+  const { columns, data, filters, config, cellConfig, sortConfig } = props;
   const [columnVisibility, setColumnVisibility] = useAtom2(columnVisibilityAtom);
   const [globalFilter, setGlobalFilter] = useAtom2(globalFilterAtom);
   const [sorting, setSorting] = useAtom2(tableSortingAtom);
@@ -955,7 +957,7 @@ function useDataTable(props) {
     state: {
       expanded,
       globalFilter: enableGlobalFilter(globalFilter),
-      sorting: enableOrUndefined(config == null ? void 0 : config.sortable, sorting),
+      sorting: (sortConfig == null ? void 0 : sortConfig.enableSorting) || (config == null ? void 0 : config.sortable) ? (sortConfig == null ? void 0 : sortConfig.sorting) ?? sorting : void 0,
       rowSelection: rowSelectionState,
       columnVisibility
     },
@@ -968,7 +970,8 @@ function useDataTable(props) {
         });
       }
     },
-    enableSorting: config == null ? void 0 : config.sortable,
+    enableSorting: (sortConfig == null ? void 0 : sortConfig.enableSorting) ?? (config == null ? void 0 : config.sortable),
+    manualSorting: sortConfig == null ? void 0 : sortConfig.manualSorting,
     enableExpanding: !(config == null ? void 0 : config.hideExpandControls),
     enableMultiRowSelection: (config == null ? void 0 : config.rowSelectionMode) === "multiple",
     enableSubRowSelection: (config == null ? void 0 : config.rowSelectionMode) !== "single",
@@ -979,7 +982,7 @@ function useDataTable(props) {
     getSortedRowModel: getSortedRowModel(),
     onExpandedChange: setExpanded,
     onRowSelectionChange: setRowSelectionState,
-    onSortingChange: enableOrUndefined(config == null ? void 0 : config.sortable, setSorting),
+    onSortingChange: (sortConfig == null ? void 0 : sortConfig.enableSorting) || (config == null ? void 0 : config.sortable) ? (sortConfig == null ? void 0 : sortConfig.onSortingChange) ?? setSorting : void 0,
     onColumnVisibilityChange: setColumnVisibility,
     onGlobalFilterChange: enableGlobalFilter(setGlobalFilter),
     getSubRows: config == null ? void 0 : config.getSubRows,

package/package.json

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