@equinor/apollo-components 1.11.2 → 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

@@ -981,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);
@@ -997,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
     },
@@ -1010,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",
@@ -1021,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

@@ -941,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);
@@ -957,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
     },
@@ -970,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",
@@ -981,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.2",
+  "version": "1.12.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",