@dbcdk/react-components 0.0.135 → 0.0.137

package/dist/components/table/components/TableRow.cjs

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
+var react = require('react');
 var Checkbox = require('../../../components/forms/checkbox/Checkbox');
 var RadioButton = require('../../../components/forms/radio-buttons/RadioButton');
 var Popover = require('../../../components/popover/Popover');
@@ -28,6 +29,7 @@ function TableRow({
   viewMode,
   getRowSeverity,
   getContextMenuItems,
+  showContextMenuOnHover,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -41,6 +43,7 @@ function TableRow({
     rowId,
     open: () => onRowClick == null ? void 0 : onRowClick(row)
   });
+  const hasContextMenu = Boolean(contextMenuItems == null ? void 0 : contextMenuItems.length);
   const { handleRowClick, handleRowKeyDown } = useTableRowInteractions.useTableRowInteractions({
     row,
     rowId,
@@ -56,8 +59,10 @@ function TableRow({
         styles__default.default.row,
         onRowClick && styles__default.default.clickableRow,
         isSelected && styles__default.default.selectedRow,
-        rowSeverity && styles__default.default.severity
+        rowSeverity && styles__default.default.severity,
+        hasContextMenu && showContextMenuOnHover && styles__default.default.contextMenuHoverOnly
       ),
+      "data-context-menu-visibility": hasContextMenu ? showContextMenuOnHover ? "hover" : "always" : void 0,
       style: {
         ["--row-severity-color"]: rowSeverity ? `color-mix(in srgb, ${severity.SeverityBgColor[rowSeverity]} 65%, var(--table-component-row-bg))` : void 0
       },
@@ -124,10 +129,11 @@ function TableRow({
           }
         ) }) : null,
         columns.map((column) => {
-          var _a2, _b, _c, _d;
+          var _a2, _b, _c, _d, _e;
           const allowWrap = table_utils.shouldAllowWrap(column.allowWrap, isSelected, viewMode);
           const allowOverflow = column.allowOverflow;
           const cellValue = table_utils.getCellDisplayValue(row, column);
+          const isLastColumn = column.id === ((_a2 = columns[columns.length - 1]) == null ? void 0 : _a2.id);
           return /* @__PURE__ */ jsxRuntime.jsx(
             "td",
             {
@@ -135,96 +141,111 @@ function TableRow({
                 styles__default.default.cell,
                 allowOverflow && styles__default.default.allowOverflow,
                 allowWrap ? styles__default.default.allowWrap : styles__default.default.nowrap,
+                hasContextMenu && isLastColumn && styles__default.default.contextMenuAnchorCell,
                 column.divider === "left" && styles__default.default.dividerLeft,
                 column.divider === "right" && styles__default.default.dividerRight
               ),
-              "data-align": (_a2 = column.align) != null ? _a2 : "left",
-              "data-vertical-align": (_b = column.verticalAlign) != null ? _b : "top",
+              "data-align": (_b = column.align) != null ? _b : "left",
+              "data-vertical-align": (_c = column.verticalAlign) != null ? _c : "top",
               "data-divider": column.divider,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
                   className: styles__default.default.cellContent,
-                  "data-align": (_c = column.align) != null ? _c : "left",
-                  "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: allowOverflow ? styles__default.default.cellValueNoEllipsis : styles__default.default.cellValueEllipsis,
-                      children: cellValue
-                    }
-                  )
+                  "data-align": (_d = column.align) != null ? _d : "left",
+                  "data-vertical-align": (_e = column.verticalAlign) != null ? _e : "top",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: allowOverflow ? styles__default.default.cellValueNoEllipsis : styles__default.default.cellValueEllipsis,
+                        children: cellValue
+                      }
+                    ),
+                    hasContextMenu && isLastColumn ? /* @__PURE__ */ jsxRuntime.jsx(RowContextMenu, { rowId, items: contextMenuItems }) : null
+                  ]
                 }
               )
             },
             column.id
           );
-        }),
-        (contextMenuItems == null ? void 0 : contextMenuItems.length) ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: table_classes.cx(styles__default.default.cell, styles__default.default.contextMenuCell), "data-row-context-menu": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: table_classes.cx(styles__default.default.cellContent, styles__default.default.contextMenuCellContent),
-            "data-align": "right",
-            "data-row-context-menu": "true",
-            children: /* @__PURE__ */ jsxRuntime.jsx(RowContextMenu, { row, rowId, items: contextMenuItems })
-          }
-        ) }) : null
+        })
       ]
     }
   );
 }
 function RowContextMenu({
-  row,
   rowId,
   items
 }) {
+  const toggleRef = react.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Popover.Popover,
+    "div",
     {
-      matchTriggerWidth: false,
-      minWidth: "180px",
-      trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsxRuntime.jsx(
-        Button.Button,
-        {
-          type: "button",
-          size: "sm",
-          variant: "inline",
-          shape: "round",
-          className: styles__default.default.contextMenuTrigger,
-          "aria-label": `Flere handlinger for r\xE6kke ${String(rowId)}`,
-          "aria-haspopup": "menu",
-          "aria-expanded": isOpen ? true : false,
-          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { size: 16 }),
-          "data-row-context-menu": "true",
-          onClick: (e) => {
-            e.stopPropagation();
-            toggle(e);
-          }
-        }
-      ),
-      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        Menu.Menu.Item,
+      className: styles__default.default.contextMenuOverlay,
+      "data-row-context-menu": "true",
+      onClick: (e) => {
+        var _a;
+        e.stopPropagation();
+        (_a = toggleRef.current) == null ? void 0 : _a.call(toggleRef, e);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Popover.Popover,
         {
-          active: item.active,
-          selected: item.selected,
-          disabled: item.disabled,
-          variant: item.variant,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              "data-row-context-menu": "true",
-              onClick: (e) => {
-                e.stopPropagation();
-                item.onClick();
-                close();
+          matchTriggerWidth: false,
+          minWidth: "180px",
+          trigger: (toggle, _icon, isOpen) => {
+            toggleRef.current = toggle;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Button.Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: "inline",
+                shape: "round",
+                className: styles__default.default.contextMenuTrigger,
+                "aria-label": `Flere handlinger for r\xE6kke ${String(rowId)}`,
+                "aria-haspopup": "menu",
+                "aria-expanded": isOpen ? true : false,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { size: 16 }),
+                "data-row-context-menu": "true",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  toggle(e);
+                }
+              }
+            );
+          },
+          children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: items.map(
+            (item, index) => item.type === "header" ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsxRuntime.jsx(
+              Menu.Menu.Item,
+              {
+                active: item.active,
+                selected: item.selected,
+                disabled: item.disabled,
+                variant: item.variant,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-row-context-menu": "true",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      item.onClick();
+                      close();
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.contextMenuItemLabel, children: [
+                      item.icon,
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.contextMenuItemText, children: item.label })
+                    ] })
+                  }
+                )
               },
-              children: item.label
-            }
-          )
-        },
-        index
-      )) })
+              index
+            )
+          ) })
+        }
+      )
     }
   );
 }

package/dist/components/table/components/TableRow.d.ts

@@ -16,9 +16,10 @@ type Props<T extends Record<string, any>> = {
         rowId: string | number;
         open: () => void;
     }) => TableContextMenuItem[];
+    showContextMenuOnHover: boolean;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
 };
-export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): React.ReactNode;
+export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, showContextMenuOnHover, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): React.ReactNode;
 export {};

package/dist/components/table/components/TableRow.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { MoreVertical } from 'lucide-react';
+import { useRef } from 'react';
 import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
 import { RadioButton } from '../../../components/forms/radio-buttons/RadioButton';
 import { Popover } from '../../../components/popover/Popover';
@@ -22,6 +23,7 @@ function TableRow({
   viewMode,
   getRowSeverity,
   getContextMenuItems,
+  showContextMenuOnHover,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -35,6 +37,7 @@ function TableRow({
     rowId,
     open: () => onRowClick == null ? void 0 : onRowClick(row)
   });
+  const hasContextMenu = Boolean(contextMenuItems == null ? void 0 : contextMenuItems.length);
   const { handleRowClick, handleRowKeyDown } = useTableRowInteractions({
     row,
     rowId,
@@ -50,8 +53,10 @@ function TableRow({
         styles.row,
         onRowClick && styles.clickableRow,
         isSelected && styles.selectedRow,
-        rowSeverity && styles.severity
+        rowSeverity && styles.severity,
+        hasContextMenu && showContextMenuOnHover && styles.contextMenuHoverOnly
       ),
+      "data-context-menu-visibility": hasContextMenu ? showContextMenuOnHover ? "hover" : "always" : void 0,
       style: {
         ["--row-severity-color"]: rowSeverity ? `color-mix(in srgb, ${SeverityBgColor[rowSeverity]} 65%, var(--table-component-row-bg))` : void 0
       },
@@ -118,10 +123,11 @@ function TableRow({
           }
         ) }) : null,
         columns.map((column) => {
-          var _a2, _b, _c, _d;
+          var _a2, _b, _c, _d, _e;
           const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
           const allowOverflow = column.allowOverflow;
           const cellValue = getCellDisplayValue(row, column);
+          const isLastColumn = column.id === ((_a2 = columns[columns.length - 1]) == null ? void 0 : _a2.id);
           return /* @__PURE__ */ jsx(
             "td",
             {
@@ -129,96 +135,111 @@ function TableRow({
                 styles.cell,
                 allowOverflow && styles.allowOverflow,
                 allowWrap ? styles.allowWrap : styles.nowrap,
+                hasContextMenu && isLastColumn && styles.contextMenuAnchorCell,
                 column.divider === "left" && styles.dividerLeft,
                 column.divider === "right" && styles.dividerRight
               ),
-              "data-align": (_a2 = column.align) != null ? _a2 : "left",
-              "data-vertical-align": (_b = column.verticalAlign) != null ? _b : "top",
+              "data-align": (_b = column.align) != null ? _b : "left",
+              "data-vertical-align": (_c = column.verticalAlign) != null ? _c : "top",
               "data-divider": column.divider,
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsxs(
                 "div",
                 {
                   className: styles.cellContent,
-                  "data-align": (_c = column.align) != null ? _c : "left",
-                  "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
-                  children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: allowOverflow ? styles.cellValueNoEllipsis : styles.cellValueEllipsis,
-                      children: cellValue
-                    }
-                  )
+                  "data-align": (_d = column.align) != null ? _d : "left",
+                  "data-vertical-align": (_e = column.verticalAlign) != null ? _e : "top",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: allowOverflow ? styles.cellValueNoEllipsis : styles.cellValueEllipsis,
+                        children: cellValue
+                      }
+                    ),
+                    hasContextMenu && isLastColumn ? /* @__PURE__ */ jsx(RowContextMenu, { rowId, items: contextMenuItems }) : null
+                  ]
                 }
               )
             },
             column.id
           );
-        }),
-        (contextMenuItems == null ? void 0 : contextMenuItems.length) ? /* @__PURE__ */ jsx("td", { className: cx(styles.cell, styles.contextMenuCell), "data-row-context-menu": "true", children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cx(styles.cellContent, styles.contextMenuCellContent),
-            "data-align": "right",
-            "data-row-context-menu": "true",
-            children: /* @__PURE__ */ jsx(RowContextMenu, { row, rowId, items: contextMenuItems })
-          }
-        ) }) : null
+        })
       ]
     }
   );
 }
 function RowContextMenu({
-  row,
   rowId,
   items
 }) {
+  const toggleRef = useRef(null);
   return /* @__PURE__ */ jsx(
-    Popover,
+    "div",
     {
-      matchTriggerWidth: false,
-      minWidth: "180px",
-      trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          size: "sm",
-          variant: "inline",
-          shape: "round",
-          className: styles.contextMenuTrigger,
-          "aria-label": `Flere handlinger for r\xE6kke ${String(rowId)}`,
-          "aria-haspopup": "menu",
-          "aria-expanded": isOpen ? true : false,
-          icon: /* @__PURE__ */ jsx(MoreVertical, { size: 16 }),
-          "data-row-context-menu": "true",
-          onClick: (e) => {
-            e.stopPropagation();
-            toggle(e);
-          }
-        }
-      ),
-      children: (close) => /* @__PURE__ */ jsx(Menu, { children: items.map((item, index) => /* @__PURE__ */ jsx(
-        Menu.Item,
+      className: styles.contextMenuOverlay,
+      "data-row-context-menu": "true",
+      onClick: (e) => {
+        var _a;
+        e.stopPropagation();
+        (_a = toggleRef.current) == null ? void 0 : _a.call(toggleRef, e);
+      },
+      children: /* @__PURE__ */ jsx(
+        Popover,
         {
-          active: item.active,
-          selected: item.selected,
-          disabled: item.disabled,
-          variant: item.variant,
-          children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "data-row-context-menu": "true",
-              onClick: (e) => {
-                e.stopPropagation();
-                item.onClick();
-                close();
+          matchTriggerWidth: false,
+          minWidth: "180px",
+          trigger: (toggle, _icon, isOpen) => {
+            toggleRef.current = toggle;
+            return /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: "inline",
+                shape: "round",
+                className: styles.contextMenuTrigger,
+                "aria-label": `Flere handlinger for r\xE6kke ${String(rowId)}`,
+                "aria-haspopup": "menu",
+                "aria-expanded": isOpen ? true : false,
+                icon: /* @__PURE__ */ jsx(MoreVertical, { size: 16 }),
+                "data-row-context-menu": "true",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  toggle(e);
+                }
+              }
+            );
+          },
+          children: (close) => /* @__PURE__ */ jsx(Menu, { children: items.map(
+            (item, index) => item.type === "header" ? /* @__PURE__ */ jsx(Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsx(
+              Menu.Item,
+              {
+                active: item.active,
+                selected: item.selected,
+                disabled: item.disabled,
+                variant: item.variant,
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-row-context-menu": "true",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      item.onClick();
+                      close();
+                    },
+                    children: /* @__PURE__ */ jsxs("span", { className: styles.contextMenuItemLabel, children: [
+                      item.icon,
+                      /* @__PURE__ */ jsx("span", { className: styles.contextMenuItemText, children: item.label })
+                    ] })
+                  }
+                )
               },
-              children: item.label
-            }
-          )
-        },
-        index
-      )) })
+              index
+            )
+          ) })
+        }
+      )
     }
   );
 }

package/dist/components/table/table.utils.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const SELECTION_COLUMN_PX = 40;
-const CONTEXT_MENU_COLUMN_PX = 44;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
@@ -45,7 +44,6 @@ function getCellDisplayValue(row, column) {
   return empty;
 }
 
-exports.CONTEXT_MENU_COLUMN_PX = CONTEXT_MENU_COLUMN_PX;
 exports.DEFAULT_COLUMN_PX = DEFAULT_COLUMN_PX;
 exports.SELECTION_COLUMN_PX = SELECTION_COLUMN_PX;
 exports.getAriaSort = getAriaSort;

package/dist/components/table/table.utils.d.ts

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ColumnItem } from './Table.types';
 export declare const SELECTION_COLUMN_PX: 40;
-export declare const CONTEXT_MENU_COLUMN_PX: 44;
 export declare const DEFAULT_COLUMN_PX: 150;
 export type SortDirection = 'asc' | 'desc' | null;
 export declare function getVisibleColumns<T>(columns: Array<ColumnItem<T>>): Array<ColumnItem<T>>;

package/dist/components/table/table.utils.js

@@ -1,5 +1,4 @@
 const SELECTION_COLUMN_PX = 40;
-const CONTEXT_MENU_COLUMN_PX = 44;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
@@ -43,4 +42,4 @@ function getCellDisplayValue(row, column) {
   return empty;
 }
 
-export { CONTEXT_MENU_COLUMN_PX, DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, shouldAllowWrap, shouldToggleOnKey };
+export { DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, shouldAllowWrap, shouldToggleOnKey };

package/dist/components/table/tanstackTable.utils.cjs

@@ -103,7 +103,7 @@ function buildDistributedColumnWidths(args) {
   } = args;
   const leaf = table.getVisibleLeafColumns();
   const selectionWidth = hasSelection ? table_utils.SELECTION_COLUMN_PX : 0;
-  const contextMenuWidth = hasContextMenu ? table_utils.CONTEXT_MENU_COLUMN_PX : 0;
+  const contextMenuWidth = hasContextMenu ? 0 : 0;
   const tracks = leaf.map((c) => {
     var _a, _b, _c, _d;
     const def = c.columnDef;
@@ -165,7 +165,7 @@ function buildDistributedColumnWidths(args) {
   const totalWidth = selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
   return {
     selectionWidth: hasSelection ? table_utils.SELECTION_COLUMN_PX : void 0,
-    contextMenuWidth: hasContextMenu ? table_utils.CONTEXT_MENU_COLUMN_PX : void 0,
+    contextMenuWidth: hasContextMenu ? 0 : void 0,
     widths,
     totalWidth,
     availableWidth,

package/dist/components/table/tanstackTable.utils.js

@@ -1,4 +1,4 @@
-import { DEFAULT_COLUMN_PX, CONTEXT_MENU_COLUMN_PX, SELECTION_COLUMN_PX } from './table.utils';
+import { DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX } from './table.utils';
 
 function getColumnId(def, index) {
   const d = def;
@@ -101,7 +101,7 @@ function buildDistributedColumnWidths(args) {
   } = args;
   const leaf = table.getVisibleLeafColumns();
   const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
-  const contextMenuWidth = hasContextMenu ? CONTEXT_MENU_COLUMN_PX : 0;
+  const contextMenuWidth = hasContextMenu ? 0 : 0;
   const tracks = leaf.map((c) => {
     var _a, _b, _c, _d;
     const def = c.columnDef;
@@ -163,7 +163,7 @@ function buildDistributedColumnWidths(args) {
   const totalWidth = selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
   return {
     selectionWidth: hasSelection ? SELECTION_COLUMN_PX : void 0,
-    contextMenuWidth: hasContextMenu ? CONTEXT_MENU_COLUMN_PX : void 0,
+    contextMenuWidth: hasContextMenu ? 0 : void 0,
     widths,
     totalWidth,
     availableWidth,

package/dist/hooks/useSorting.cjs

@@ -116,4 +116,5 @@ function useSorting({
   };
 }
 
+exports.defaultCompare = defaultCompare;
 exports.useSorting = useSorting;

package/dist/hooks/useSorting.d.ts

@@ -1,16 +1,16 @@
 export type SortDirection = 'asc' | 'desc' | null;
-export type SortState<T> = {
-    sortBy: keyof T | null;
+export type SortState<T = unknown> = {
+    sortBy: string | null;
     sortDirection: SortDirection;
 };
-export type SortEvent<T> = Partial<SortState<T>>;
-export type ColumnComparators<T> = Partial<Record<keyof T, (a: T, b: T, direction: Exclude<SortDirection, null>) => number>>;
+export type SortEvent<T = unknown> = Partial<SortState<T>>;
+export type ColumnComparators<T> = Partial<Record<string, (a: T, b: T, direction: Exclude<SortDirection, null>) => number>>;
 export interface UseSortingProps<T> {
     data?: readonly T[];
     /**
      * Default/initial state. If you pass `state`, these are ignored.
      */
-    sortBy?: keyof T | null;
+    sortBy?: string | null;
     sortDirection?: SortDirection;
     /**
      * Controlled mode: if provided, hook will not keep its own state.
@@ -46,4 +46,5 @@ export interface UseSortingResult<T> {
     setSort: (next: SortState<T>) => void;
     clearSort: () => void;
 }
+export declare function defaultCompare(a: unknown, b: unknown, dir: 'asc' | 'desc', nulls: 'first' | 'last'): number;
 export declare function useSorting<T extends Record<string, any>>({ data, sortBy, sortDirection, state, onStateChange, columnComparators, nulls, allowUnsort, resetOnDataChange, }: UseSortingProps<T>): UseSortingResult<T>;

package/dist/hooks/useSorting.js

@@ -114,4 +114,4 @@ function useSorting({
   };
 }
 
-export { useSorting };
+export { defaultCompare, useSorting };

package/dist/hooks/useTableData.cjs

@@ -12,28 +12,50 @@ function useTableData({
   resetPageOnSortChange = true
 }) {
   var _a, _b, _c, _d, _e, _f;
+  const hasPagination = pagination != null;
+  const nullsMode = (_a = sorting == null ? void 0 : sorting.nulls) != null ? _a : "last";
+  const mergedComparators = react.useMemo(() => {
+    var _a2, _b2;
+    const derived = {};
+    for (const col of (_a2 = sorting == null ? void 0 : sorting.columns) != null ? _a2 : []) {
+      const colId = (_b2 = col.id) != null ? _b2 : col.accessorKey;
+      if (!colId) continue;
+      const accessorFn = col.accessorFn;
+      const accessorKey = col.accessorKey;
+      if (accessorFn) {
+        derived[colId] = (a, b, dir) => useSorting.defaultCompare(accessorFn(a, 0), accessorFn(b, 0), dir, nullsMode);
+      } else if (accessorKey) {
+        derived[colId] = (a, b, dir) => useSorting.defaultCompare(a[accessorKey], b[accessorKey], dir, nullsMode);
+      }
+    }
+    return { ...derived, ...sorting == null ? void 0 : sorting.columnComparators };
+  }, [sorting == null ? void 0 : sorting.columns, sorting == null ? void 0 : sorting.columnComparators, nullsMode]);
   const s = useSorting.useSorting({
     data,
-    sortBy: (_a = sorting == null ? void 0 : sorting.sortBy) != null ? _a : null,
-    sortDirection: (_b = sorting == null ? void 0 : sorting.direction) != null ? _b : null,
+    sortBy: (_b = sorting == null ? void 0 : sorting.sortBy) != null ? _b : null,
+    sortDirection: (_c = sorting == null ? void 0 : sorting.direction) != null ? _c : null,
     state: sorting == null ? void 0 : sorting.state,
     onStateChange: sorting == null ? void 0 : sorting.onStateChange,
-    columnComparators: sorting == null ? void 0 : sorting.columnComparators,
-    nulls: (_c = sorting == null ? void 0 : sorting.nulls) != null ? _c : "last",
+    columnComparators: mergedComparators,
+    nulls: nullsMode,
     allowUnsort: (_d = sorting == null ? void 0 : sorting.allowUnsort) != null ? _d : true
   });
   const p = usePagination.usePagination({
     data: s.sortedData,
     skip: (_e = pagination == null ? void 0 : pagination.skip) != null ? _e : 0,
-    take: (_f = pagination == null ? void 0 : pagination.take) != null ? _f : 10,
+    take: (_f = pagination == null ? void 0 : pagination.take) != null ? _f : Math.max(s.sortedData.length, 1),
     state: pagination == null ? void 0 : pagination.state,
     onStateChange: pagination == null ? void 0 : pagination.onStateChange
   });
   react.useEffect(() => {
+    if (!hasPagination) return;
     if (!resetPageOnSortChange) return;
     p.resetPage();
-  }, [resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
-  const rows = react.useMemo(() => p.paginatedData, [p.paginatedData]);
+  }, [hasPagination, resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
+  const rows = react.useMemo(
+    () => hasPagination ? p.paginatedData : s.sortedData,
+    [hasPagination, p.paginatedData, s.sortedData]
+  );
   return {
     rows,
     totalCount: s.sortedData.length,