@dbcdk/react-components 0.0.136 → 0.0.137

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs

@@ -106,7 +106,7 @@ function ExpandableSidebarItem({
     );
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.itemRow, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.itemRow} ${expanded ? styles__default.default.itemRowExpanded : ""}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsxRuntime.jsx(
         SidebarItemContent.SidebarItemContent,
         {
@@ -116,23 +116,25 @@ function ExpandableSidebarItem({
           label,
           href,
           disableActiveStyles: expanded,
+          suffixIcon: !isSidebarCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
+            }
+          ) : void 0,
           truncateLabel
         }
       ) }),
       !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toggleButton, children: /* @__PURE__ */ jsxRuntime.jsx(
         Button.Button,
         {
-          variant: "outlined",
+          variant: "inline",
+          shape: "round",
+          className: styles__default.default.toggleButtonControl,
           "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
           "aria-expanded": expanded,
           "aria-controls": `${href}-children`,
-          onClick: toggleAccordion,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.ChevronDown,
-            {
-              className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
-            }
-          )
+          onClick: toggleAccordion
         }
       ) })
     ] }),

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -100,7 +100,7 @@ function ExpandableSidebarItem({
     );
   };
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.itemRow, children: [
+    /* @__PURE__ */ jsxs("div", { className: `${styles.itemRow} ${expanded ? styles.itemRowExpanded : ""}`, children: [
       /* @__PURE__ */ jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsx(
         SidebarItemContent,
         {
@@ -110,23 +110,25 @@ function ExpandableSidebarItem({
           label,
           href,
           disableActiveStyles: expanded,
+          suffixIcon: !isSidebarCollapsed ? /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
+            }
+          ) : void 0,
           truncateLabel
         }
       ) }),
       !isSidebarCollapsed && /* @__PURE__ */ jsx("div", { className: styles.toggleButton, children: /* @__PURE__ */ jsx(
         Button,
         {
-          variant: "outlined",
+          variant: "inline",
+          shape: "round",
+          className: styles.toggleButtonControl,
           "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
           "aria-expanded": expanded,
           "aria-controls": `${href}-children`,
-          onClick: toggleAccordion,
-          children: /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
-            }
-          )
+          onClick: toggleAccordion
         }
       ) })
     ] }),

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css

@@ -6,28 +6,32 @@
 }
 
 .itemRow {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  column-gap: var(--spacing-xs);
+  position: relative;
+  display: block;
+  border-radius: var(--border-radius-md);
 }
 
 .toggleButton {
-  display: flex;
+  position: absolute;
+  inset-inline-end: var(--spacing-xs);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex: 0 0 auto;
 }
 
 .container button {
-  color: var(--color-text);
-  min-block-size: 20px !important;
-  min-inline-size: 20px !important;
-  max-block-size: 20px !important;
-  max-inline-size: 20px !important;
-  &:hover {
-    background-color: var(--color-bg-contextual-subtle) !important;
-  }
+  min-block-size: 28px !important;
+  min-inline-size: 28px !important;
+  max-block-size: 28px !important;
+  max-inline-size: 28px !important;
+  border-color: transparent !important;
+  background-color: transparent !important;
+}
+
+.toggleButtonControl {
+  opacity: 0;
 }
 
 .childrenContainer {

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -53,6 +53,18 @@
   color: var(--color-fg-default);
 }
 
+.container:not(.active):hover .icon,
+.container:not(.active):hover .suffixIcon,
+.container:focus-visible .icon,
+.container:focus-visible .suffixIcon {
+  color: var(--color-fg-default);
+}
+
+.active .icon,
+.active .suffixIcon {
+  color: var(--color-fg-default);
+}
+
 .icon,
 .suffixIcon {
   inline-size: var(--sidebar-item-icon-width, auto);

package/dist/components/table/Table.cjs

@@ -52,6 +52,7 @@ function Table({
   showHeader = true,
   getRowSeverity,
   getContextMenuItems,
+  showContextMenuOnHover = true,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -65,7 +66,6 @@ function Table({
   const internalTableRootRef = react.useRef(null);
   const tableRootRefWrapper = react.useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
-  const hasContextMenu = Boolean(getContextMenuItems);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationOffset = hasPagination ? 72 : 0;
   const { style: viewportFillStyle, maxHeight } = useViewportFill.useViewportFill(internalTableRootRef, {
@@ -102,6 +102,7 @@ function Table({
       viewMode,
       getRowSeverity,
       getContextMenuItems,
+      showContextMenuOnHover,
       onRowClick,
       onRowMouseEnter,
       onRowSelect
@@ -158,15 +159,13 @@ function Table({
                   style: column.width != null ? { width: column.width } : void 0
                 },
                 column.id
-              )),
-              hasContextMenu ? /* @__PURE__ */ jsxRuntime.jsx("col", { style: { width: table_utils.CONTEXT_MENU_COLUMN_PX } }) : null
+              ))
             ] }),
             showHeader && /* @__PURE__ */ jsxRuntime.jsx(
               TableHeader.TableHeader,
               {
                 columns: visibleColumns,
                 hasSelection,
-                hasContextMenu,
                 selectionMode,
                 allRowsSelected,
                 onSelectAllRows,

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

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { TableProps } from './Table.types';
-export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, getContextMenuItems, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, getContextMenuItems, showContextMenuOnHover, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -9,7 +9,7 @@ import { TableBody } from './components/TableBody';
 import { TableHeader } from './components/TableHeader';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
-import { getVisibleColumns, SELECTION_COLUMN_PX, CONTEXT_MENU_COLUMN_PX } from './table.utils';
+import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
 
 function Table({
   data,
@@ -46,6 +46,7 @@ function Table({
   showHeader = true,
   getRowSeverity,
   getContextMenuItems,
+  showContextMenuOnHover = true,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -59,7 +60,6 @@ function Table({
   const internalTableRootRef = useRef(null);
   const tableRootRefWrapper = useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
-  const hasContextMenu = Boolean(getContextMenuItems);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationOffset = hasPagination ? 72 : 0;
   const { style: viewportFillStyle, maxHeight } = useViewportFill(internalTableRootRef, {
@@ -96,6 +96,7 @@ function Table({
       viewMode,
       getRowSeverity,
       getContextMenuItems,
+      showContextMenuOnHover,
       onRowClick,
       onRowMouseEnter,
       onRowSelect
@@ -152,15 +153,13 @@ function Table({
                   style: column.width != null ? { width: column.width } : void 0
                 },
                 column.id
-              )),
-              hasContextMenu ? /* @__PURE__ */ jsx("col", { style: { width: CONTEXT_MENU_COLUMN_PX } }) : null
+              ))
             ] }),
             showHeader && /* @__PURE__ */ jsx(
               TableHeader,
               {
                 columns: visibleColumns,
                 hasSelection,
-                hasContextMenu,
                 selectionMode,
                 allRowsSelected,
                 onSelectAllRows,

package/dist/components/table/Table.module.css

@@ -241,14 +241,6 @@
   line-height: 0;
 }
 
-.headerCell.contextMenuCell,
-.cell.contextMenuCell {
-  inline-size: 1%;
-  white-space: nowrap;
-  padding-inline: var(--spacing-2xs);
-  overflow: visible;
-}
-
 .headerCell.selectionCell {
   padding-block: var(--spacing-xxs);
   vertical-align: middle;
@@ -259,19 +251,10 @@
   padding-block: var(--spacing-xxs);
 }
 
-.headerCell.contextMenuHeaderCell {
-  padding-block: var(--spacing-xxs);
-}
-
 .headerCell:hover [data-resizer='true']::after {
   opacity: 1;
 }
 
-.cell.contextMenuCell {
-  vertical-align: top;
-  padding-block: var(--spacing-2xs);
-}
-
 .selectionHitArea {
   display: inline-flex;
   align-items: flex-start;
@@ -496,10 +479,6 @@
   text-align: right;
 }
 
-.contextMenuCellContent {
-  justify-content: flex-end;
-}
-
 /* vertical alignment inside content wrapper */
 .cellContent[data-vertical-align='top'] {
   align-items: flex-start;
@@ -562,6 +541,58 @@
 
 .contextMenuTrigger {
   color: var(--color-fg-subtle);
+  min-inline-size: 36px;
+  min-block-size: 36px;
+  border-radius: var(--border-radius-rounded);
+}
+
+.contextMenuAnchorCell {
+  overflow: visible;
+}
+
+.contextMenuAnchorCell .cellValueEllipsis,
+.contextMenuAnchorCell .cellValueNoEllipsis {
+  padding-inline-end: calc(36px + var(--spacing-sm));
+}
+
+.contextMenuOverlay {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 0;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 40px;
+  min-block-size: 40px;
+  z-index: 3;
+}
+
+.contextMenuOverlay:hover .contextMenuTrigger,
+.contextMenuOverlay:focus-within .contextMenuTrigger {
+  background-color: var(--opac-bg-light);
+}
+
+.contextMenuItemLabel {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  min-width: 0;
+}
+
+.contextMenuItemText {
+  min-width: 0;
+}
+
+.contextMenuHoverOnly .contextMenuTrigger {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.contextMenuHoverOnly:hover .contextMenuTrigger,
+.contextMenuHoverOnly:focus-within .contextMenuTrigger {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .severityTable {

package/dist/components/table/Table.types.d.ts

@@ -24,14 +24,21 @@ export type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
 };
-export type TableContextMenuItem = {
+export type TableContextMenuActionItem = {
+    type?: 'item';
     label: ReactNode;
+    icon?: ReactNode;
     onClick: () => void;
     active?: boolean;
     selected?: boolean;
     disabled?: boolean;
     variant?: 'default' | 'danger';
 };
+export type TableContextMenuHeaderItem = {
+    type: 'header';
+    label: ReactNode;
+};
+export type TableContextMenuItem = TableContextMenuActionItem | TableContextMenuHeaderItem;
 export type StickyHeader = false | 'app-header' | number;
 export type TableVariant = 'primary' | 'embedded';
 export type SortDirection = 'asc' | 'desc' | null;
@@ -74,6 +81,7 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
         rowId: string | number;
         open: () => void;
     }) => TableContextMenuItem[];
+    showContextMenuOnHover?: boolean;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;

package/dist/components/table/components/TableBody.cjs

@@ -21,6 +21,7 @@ function TableBody({
   viewMode,
   getRowSeverity,
   getContextMenuItems,
+  showContextMenuOnHover,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -40,6 +41,7 @@ function TableBody({
         viewMode,
         getRowSeverity,
         getContextMenuItems,
+        showContextMenuOnHover,
         onRowClick,
         onRowMouseEnter,
         onRowSelect

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

@@ -17,9 +17,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 TableBody<T extends Record<string, any>>({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
+export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, showContextMenuOnHover, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
 export {};

package/dist/components/table/components/TableBody.js

@@ -15,6 +15,7 @@ function TableBody({
   viewMode,
   getRowSeverity,
   getContextMenuItems,
+  showContextMenuOnHover,
   onRowClick,
   onRowMouseEnter,
   onRowSelect
@@ -34,6 +35,7 @@ function TableBody({
         viewMode,
         getRowSeverity,
         getContextMenuItems,
+        showContextMenuOnHover,
         onRowClick,
         onRowMouseEnter,
         onRowSelect

package/dist/components/table/components/TableHeader.cjs

@@ -12,7 +12,6 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function TableHeader({
   columns,
   hasSelection,
-  hasContextMenu,
   selectionMode,
   allRowsSelected,
   onSelectAllRows,
@@ -48,15 +47,7 @@ function TableHeader({
             extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
           },
           column.id
-        )),
-        hasContextMenu ? /* @__PURE__ */ jsxRuntime.jsx(
-          "th",
-          {
-            className: [styles__default.default.headerCell, styles__default.default.contextMenuCell, styles__default.default.contextMenuHeaderCell].filter(Boolean).join(" "),
-            scope: "col",
-            "aria-label": "R\xE6kkehandlinger"
-          }
-        ) : null
+        ))
       ] })
     }
   );

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

@@ -3,7 +3,6 @@ import type { ColumnItem, HeaderExtrasArgs, SortDirection } from '../Table.types
 type Props<T> = {
     columns: ColumnItem<T>[];
     hasSelection: boolean;
-    hasContextMenu: boolean;
     selectionMode: 'single' | 'multiple';
     allRowsSelected?: boolean;
     onSelectAllRows?: (isSelected: boolean) => void;
@@ -13,5 +12,5 @@ type Props<T> = {
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     stickyTop?: string;
 };
-export declare function TableHeader<T>({ columns, hasSelection, hasContextMenu, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
+export declare function TableHeader<T>({ columns, hasSelection, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
 export {};

package/dist/components/table/components/TableHeader.js

@@ -6,7 +6,6 @@ import styles from '../Table.module.css';
 function TableHeader({
   columns,
   hasSelection,
-  hasContextMenu,
   selectionMode,
   allRowsSelected,
   onSelectAllRows,
@@ -42,15 +41,7 @@ function TableHeader({
             extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
           },
           column.id
-        )),
-        hasContextMenu ? /* @__PURE__ */ jsx(
-          "th",
-          {
-            className: [styles.headerCell, styles.contextMenuCell, styles.contextMenuHeaderCell].filter(Boolean).join(" "),
-            scope: "col",
-            "aria-label": "R\xE6kkehandlinger"
-          }
-        ) : null
+        ))
       ] })
     }
   );

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,

package/dist/hooks/useTableData.d.ts

@@ -1,3 +1,4 @@
+import type { ColumnDef } from '@tanstack/react-table';
 import type { PageChangeEvent } from '../components/pagination/Pagination';
 import { type PaginationState } from './usePagination';
 import { type SortDirection, type SortState, type ColumnComparators } from './useSorting';
@@ -10,13 +11,14 @@ export interface UseTableDataProps<T> {
         onStateChange?: (next: PaginationState) => void;
     };
     sorting?: {
-        sortBy?: keyof T | null;
+        sortBy?: string | null;
         direction?: SortDirection;
         state?: SortState<T>;
         onStateChange?: (next: SortState<T>) => void;
         columnComparators?: ColumnComparators<T>;
         nulls?: 'first' | 'last';
         allowUnsort?: boolean;
+        columns?: ReadonlyArray<ColumnDef<T, any>>;
     };
     /**
      * Resets to page 1 whenever sorting changes (typical UX).

package/dist/hooks/useTableData.js

@@ -1,7 +1,7 @@
 'use client';
-import { useEffect, useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import { usePagination } from './usePagination';
-import { useSorting } from './useSorting';
+import { useSorting, defaultCompare } from './useSorting';
 
 function useTableData({
   data = [],
@@ -10,28 +10,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 = 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) => defaultCompare(accessorFn(a, 0), accessorFn(b, 0), dir, nullsMode);
+      } else if (accessorKey) {
+        derived[colId] = (a, b, dir) => 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({
     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({
     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
   });
   useEffect(() => {
+    if (!hasPagination) return;
     if (!resetPageOnSortChange) return;
     p.resetPage();
-  }, [resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
-  const rows = useMemo(() => p.paginatedData, [p.paginatedData]);
+  }, [hasPagination, resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
+  const rows = useMemo(
+    () => hasPagination ? p.paginatedData : s.sortedData,
+    [hasPagination, p.paginatedData, s.sortedData]
+  );
   return {
     rows,
     totalCount: s.sortedData.length,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.136",
+  "version": "0.0.137",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",