@dbcdk/react-components 0.0.194 → 0.0.196

package/dist/components/table/Table.cjs

@@ -4,19 +4,23 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Pagination = require('../../components/pagination/Pagination');
-var SkeletonLoader = require('../../components/skeleton-loader/SkeletonLoader');
 var useViewportFill = require('../../hooks/useViewportFill');
 var EmptyState = require('./components/empty-state/EmptyState');
+var TableHeaderSettings = require('./components/table-settings/TableHeaderSettings');
 var TableBody = require('./components/TableBody');
 var TableHeader = require('./components/TableHeader');
+var TableSkeletonBody = require('./components/TableSkeletonBody');
 var table_classes = require('./table.classes');
 var styles = require('./Table.module.css');
 var table_utils = require('./table.utils');
+var tableSettings_utils = require('./tableSettings.utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+const DEFAULT_SKELETON_ROWS = 10;
+const MAX_SKELETON_ROWS = 20;
 function Table({
   data,
   dataKey,
@@ -30,7 +34,8 @@ function Table({
   emptyConfig,
   variant = "primary",
   size = "md",
-  viewMode,
+  viewMode: viewModeProp,
+  striped: stripedProp,
   fillViewport = false,
   fillViewportBottomOffset = 0,
   containScrolling = true,
@@ -40,6 +45,9 @@ function Table({
   measuringLayout = false,
   toolbar,
   headerExtras,
+  headerActions: headerActionsProp,
+  settings,
+  settingsOptions,
   take,
   skip,
   totalItemsCount,
@@ -61,7 +69,22 @@ function Table({
   onPageChange,
   ...rest
 }) {
-  const visibleColumns = react.useMemo(() => table_utils.getVisibleColumns(columns), [columns]);
+  var _a;
+  const viewMode = viewModeProp != null ? viewModeProp : settings == null ? void 0 : settings.viewMode;
+  const striped = (_a = stripedProp != null ? stripedProp : settings == null ? void 0 : settings.striped) != null ? _a : false;
+  const settingsVisibleIds = settings == null ? void 0 : settings.visibleColumnIds;
+  const visibleColumns = react.useMemo(
+    () => (settingsVisibleIds == null ? void 0 : settingsVisibleIds.length) ? tableSettings_utils.filterColumnsBySettings(columns, settingsVisibleIds) : table_utils.getVisibleColumns(columns),
+    [columns, settingsVisibleIds]
+  );
+  const headerActions = headerActionsProp != null || settings ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerActions, children: [
+    headerActionsProp,
+    settings ? /* @__PURE__ */ jsxRuntime.jsx(TableHeaderSettings.TableHeaderSettings, { settings, options: settingsOptions, columns }) : null
+  ] }) : null;
+  const toolbarContent = !showHeader && headerActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarWithHeaderActions, children: [
+    toolbar,
+    headerActions
+  ] }) : toolbar;
   const selectionInputName = react.useId();
   const internalTableRootRef = react.useRef(null);
   const tableRootRefWrapper = react.useRef(tableRootRef);
@@ -69,17 +92,14 @@ function Table({
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationRef = react.useRef(null);
   const [paginationHeight, setPaginationHeight] = react.useState(0);
-  react.useEffect(() => {
+  react.useLayoutEffect(() => {
     const element = paginationRef.current;
     if (!element) return;
     const measure = () => setPaginationHeight(element.getBoundingClientRect().height);
-    const frame = requestAnimationFrame(measure);
+    measure();
     const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(measure) : null;
     observer == null ? void 0 : observer.observe(element);
-    return () => {
-      cancelAnimationFrame(frame);
-      observer == null ? void 0 : observer.disconnect();
-    };
+    return () => observer == null ? void 0 : observer.disconnect();
   }, [hasPagination]);
   const [expandedRows, setExpandedRows] = react.useState(() => /* @__PURE__ */ new Set());
   const handleToggleRowExpand = react.useCallback((rowId) => {
@@ -99,7 +119,7 @@ function Table({
     min: 0
   });
   const fillViewportActive = fillViewport && containScrolling;
-  const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : void 0;
+  const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : stickyHeader === void 0 && containScrolling ? "0px" : void 0;
   const setTableRootRef = react.useCallback((node) => {
     internalTableRootRef.current = node;
     if (typeof tableRootRefWrapper.current === "function") {
@@ -167,16 +187,17 @@ function Table({
     measuringLayout && styles__default.default.measuringLayout,
     getRowSeverity && styles__default.default.severityTable
   );
+  const tableElementClassName = table_classes.cx(styles__default.default.tableElement, striped && "dbc-table--striped");
   const tableShell = /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: tableClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: setTableRootRef,
       className: styles__default.default.tableScroll,
       style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
-      children: loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "table", rows: 5, columns: 3 }) }) : !data.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState.TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      children: !loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.emptyStateSlot, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState.TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxRuntime.jsxs(
         "table",
         {
-          className: styles__default.default.tableElement,
+          className: tableElementClassName,
           "aria-rowcount": data.length,
           "data-show-header": showHeader,
           style: tableWidth != null ? { width: tableWidth } : void 0,
@@ -197,17 +218,25 @@ function Table({
                 columns: visibleColumns,
                 hasSelection,
                 selectionMode,
-                hasRowContextMenu: Boolean(getContextMenuItems),
+                hasRowContextMenu: Boolean(getContextMenuItems) || expandableRows,
                 allRowsSelected,
                 onSelectAllRows,
                 sortById,
                 sortDirection,
                 onSortChange,
                 headerExtras,
+                headerActions,
                 stickyTop
               }
             ),
-            bodyContent
+            loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx(
+              TableSkeletonBody.TableSkeletonBody,
+              {
+                columns: visibleColumns,
+                rows: Math.min(take != null ? take : DEFAULT_SKELETON_ROWS, MAX_SKELETON_ROWS),
+                hasSelection
+              }
+            ) : bodyContent
           ]
         }
       )
@@ -223,7 +252,7 @@ function Table({
           ...!fillViewportActive && { blockSize: "auto", overflow: "visible" }
         },
         children: [
-          toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toolbarSlot, children: toolbar }) : null,
+          toolbarContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toolbarSlot, children: toolbarContent }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -246,7 +275,7 @@ function Table({
         position: "relative"
       },
       children: [
-        toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toolbarSlot, children: toolbar }) : null,
+        toolbarContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toolbarSlot, children: toolbarContent }) : null,
         tableShell,
         paginationEl
       ]

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, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, getContextMenuItems, showContextMenuOnHover, expandableRows, 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: viewModeProp, striped: stripedProp, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, headerActions: headerActionsProp, settings, settingsOptions, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, getContextMenuItems, showContextMenuOnHover, expandableRows, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -1,16 +1,20 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo, useId, useRef, useState, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useId, useRef, useState, useLayoutEffect, useCallback } from 'react';
 import { Pagination } from '../../components/pagination/Pagination';
-import { SkeletonLoader } from '../../components/skeleton-loader/SkeletonLoader';
 import { useViewportFill } from '../../hooks/useViewportFill';
 import { TableEmptyState } from './components/empty-state/EmptyState';
+import { TableHeaderSettings } from './components/table-settings/TableHeaderSettings';
 import { TableBody } from './components/TableBody';
 import { TableHeader } from './components/TableHeader';
+import { TableSkeletonBody } from './components/TableSkeletonBody';
 import { cx } from './table.classes';
 import styles from './Table.module.css';
 import { getVisibleColumns, SELECTION_COLUMN_PX } from './table.utils';
+import { filterColumnsBySettings } from './tableSettings.utils';
 
+const DEFAULT_SKELETON_ROWS = 10;
+const MAX_SKELETON_ROWS = 20;
 function Table({
   data,
   dataKey,
@@ -24,7 +28,8 @@ function Table({
   emptyConfig,
   variant = "primary",
   size = "md",
-  viewMode,
+  viewMode: viewModeProp,
+  striped: stripedProp,
   fillViewport = false,
   fillViewportBottomOffset = 0,
   containScrolling = true,
@@ -34,6 +39,9 @@ function Table({
   measuringLayout = false,
   toolbar,
   headerExtras,
+  headerActions: headerActionsProp,
+  settings,
+  settingsOptions,
   take,
   skip,
   totalItemsCount,
@@ -55,7 +63,22 @@ function Table({
   onPageChange,
   ...rest
 }) {
-  const visibleColumns = useMemo(() => getVisibleColumns(columns), [columns]);
+  var _a;
+  const viewMode = viewModeProp != null ? viewModeProp : settings == null ? void 0 : settings.viewMode;
+  const striped = (_a = stripedProp != null ? stripedProp : settings == null ? void 0 : settings.striped) != null ? _a : false;
+  const settingsVisibleIds = settings == null ? void 0 : settings.visibleColumnIds;
+  const visibleColumns = useMemo(
+    () => (settingsVisibleIds == null ? void 0 : settingsVisibleIds.length) ? filterColumnsBySettings(columns, settingsVisibleIds) : getVisibleColumns(columns),
+    [columns, settingsVisibleIds]
+  );
+  const headerActions = headerActionsProp != null || settings ? /* @__PURE__ */ jsxs("div", { className: styles.headerActions, children: [
+    headerActionsProp,
+    settings ? /* @__PURE__ */ jsx(TableHeaderSettings, { settings, options: settingsOptions, columns }) : null
+  ] }) : null;
+  const toolbarContent = !showHeader && headerActions ? /* @__PURE__ */ jsxs("div", { className: styles.toolbarWithHeaderActions, children: [
+    toolbar,
+    headerActions
+  ] }) : toolbar;
   const selectionInputName = useId();
   const internalTableRootRef = useRef(null);
   const tableRootRefWrapper = useRef(tableRootRef);
@@ -63,17 +86,14 @@ function Table({
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
   const paginationRef = useRef(null);
   const [paginationHeight, setPaginationHeight] = useState(0);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const element = paginationRef.current;
     if (!element) return;
     const measure = () => setPaginationHeight(element.getBoundingClientRect().height);
-    const frame = requestAnimationFrame(measure);
+    measure();
     const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(measure) : null;
     observer == null ? void 0 : observer.observe(element);
-    return () => {
-      cancelAnimationFrame(frame);
-      observer == null ? void 0 : observer.disconnect();
-    };
+    return () => observer == null ? void 0 : observer.disconnect();
   }, [hasPagination]);
   const [expandedRows, setExpandedRows] = useState(() => /* @__PURE__ */ new Set());
   const handleToggleRowExpand = useCallback((rowId) => {
@@ -93,7 +113,7 @@ function Table({
     min: 0
   });
   const fillViewportActive = fillViewport && containScrolling;
-  const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : void 0;
+  const stickyTop = stickyHeader === "app-header" ? "var(--app-header-height, 60px)" : typeof stickyHeader === "number" ? `${stickyHeader}px` : stickyHeader === void 0 && containScrolling ? "0px" : void 0;
   const setTableRootRef = useCallback((node) => {
     internalTableRootRef.current = node;
     if (typeof tableRootRefWrapper.current === "function") {
@@ -161,16 +181,17 @@ function Table({
     measuringLayout && styles.measuringLayout,
     getRowSeverity && styles.severityTable
   );
+  const tableElementClassName = cx(styles.tableElement, striped && "dbc-table--striped");
   const tableShell = /* @__PURE__ */ jsx("div", { ...rest, className: tableClassName, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref: setTableRootRef,
       className: styles.tableScroll,
       style: fillViewportActive ? viewportFillStyle : !containScrolling ? { overflow: "visible" } : void 0,
-      children: loading && !data.length ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "table", rows: 5, columns: 3 }) }) : !data.length ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxs(
+      children: !loading && !data.length ? /* @__PURE__ */ jsx("div", { className: styles.emptyStateSlot, children: /* @__PURE__ */ jsx(TableEmptyState, { config: emptyConfig }) }) : /* @__PURE__ */ jsxs(
         "table",
         {
-          className: styles.tableElement,
+          className: tableElementClassName,
           "aria-rowcount": data.length,
           "data-show-header": showHeader,
           style: tableWidth != null ? { width: tableWidth } : void 0,
@@ -191,17 +212,25 @@ function Table({
                 columns: visibleColumns,
                 hasSelection,
                 selectionMode,
-                hasRowContextMenu: Boolean(getContextMenuItems),
+                hasRowContextMenu: Boolean(getContextMenuItems) || expandableRows,
                 allRowsSelected,
                 onSelectAllRows,
                 sortById,
                 sortDirection,
                 onSortChange,
                 headerExtras,
+                headerActions,
                 stickyTop
               }
             ),
-            bodyContent
+            loading && !data.length ? /* @__PURE__ */ jsx(
+              TableSkeletonBody,
+              {
+                columns: visibleColumns,
+                rows: Math.min(take != null ? take : DEFAULT_SKELETON_ROWS, MAX_SKELETON_ROWS),
+                hasSelection
+              }
+            ) : bodyContent
           ]
         }
       )
@@ -217,7 +246,7 @@ function Table({
           ...!fillViewportActive && { blockSize: "auto", overflow: "visible" }
         },
         children: [
-          toolbar ? /* @__PURE__ */ jsx("div", { className: styles.toolbarSlot, children: toolbar }) : null,
+          toolbarContent ? /* @__PURE__ */ jsx("div", { className: styles.toolbarSlot, children: toolbarContent }) : null,
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -240,7 +269,7 @@ function Table({
         position: "relative"
       },
       children: [
-        toolbar ? /* @__PURE__ */ jsx("div", { className: styles.toolbarSlot, children: toolbar }) : null,
+        toolbarContent ? /* @__PURE__ */ jsx("div", { className: styles.toolbarSlot, children: toolbarContent }) : null,
         tableShell,
         paginationEl
       ]

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

@@ -58,7 +58,9 @@
   --table-component-cell-fg: var(--table-cell-fg);
   --table-component-cell-border: var(--table-border-subtle);
   --table-component-divider: var(--table-divider);
-  --table-row-actions-reserve-inline: calc(var(--component-size-md) + 4px + var(--spacing-2xs));
+  /* Row actions button (component-size-sm) plus its inline-end offset. Keep in
+     sync with ROW_ACTIONS_RESERVE_PX in table.utils.ts. */
+  --table-row-actions-reserve-inline: calc(var(--component-size-sm) + var(--spacing-2xs));
 
   display: flex;
   flex-direction: column;
@@ -78,7 +80,7 @@
 
 .embedded {
   --table-component-header-bg: transparent;
-  --table-component-header-fg: var(--color-fg-subtle);
+  --table-component-header-fg: var(--color-fg-muted);
   --table-component-header-font-weight: var(--font-weight-default);
   --table-component-row-bg: transparent;
   --table-component-row-bg-hover: var(--color-bg-contextual-subtle);
@@ -101,6 +103,9 @@
   min-block-size: 0;
   min-inline-size: 0;
   overflow: auto;
+  /* Always reserve the scrollbar's space, so the column widths don't change
+     when the body starts or stops scrolling (e.g. skeleton rows vs. data). */
+  scrollbar-gutter: stable;
   background: var(--table-component-row-bg);
   -webkit-overflow-scrolling: touch;
 }
@@ -450,6 +455,75 @@
   pointer-events: auto;
 }
 
+/*
+ * Header actions (e.g. the settings trigger) sit at the inline end of the last
+ * header cell, lined up with the row-actions buttons below. Stacked above
+ * .thOverlayExtras so the column resizer doesn't swallow clicks on them.
+ */
+.thEndAction {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--spacing-2xs);
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  z-index: 8;
+}
+
+.headerActions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+}
+
+/*
+ * Keep header actions low-key: the settings trigger uses the same colour as
+ * the header's sort arrows and a compact square button, and header actions are
+ * only shown while the table is hovered - like the row-actions buttons. They
+ * stay visible while focused or while their menu is open, and always on
+ * devices without hover. They remain clickable while faded out.
+ * `button[data-…]` outranks Button's own `.button.inline` colour rule.
+ */
+.thEndAction button[data-table-settings-trigger] {
+  color: var(--color-disabled-fg);
+  inline-size: var(--component-size-sm);
+  min-inline-size: var(--component-size-sm);
+  padding: 0;
+}
+
+.thEndAction button[data-table-settings-trigger]:hover,
+.thEndAction button[data-table-settings-trigger][aria-expanded='true'] {
+  color: var(--color-fg-subtle);
+}
+
+.thEndAction {
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.tableElement:hover .thEndAction,
+.thEndAction:focus-within,
+.thEndAction:has([aria-expanded='true']) {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .thEndAction {
+    opacity: 1;
+  }
+}
+
+.toolbarWithHeaderActions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+}
+
+.toolbarWithHeaderActions > .headerActions {
+  margin-inline-start: auto;
+}
+
 .sortIndicator {
   display: inline-flex;
   flex: 0 0 auto;
@@ -475,6 +549,22 @@
   color: var(--color-disabled-fg);
 }
 
+/* Loading placeholder: a full text line (the cell's line-height) with the bar
+   centred in it, matching the height of a real single-line row. */
+.skeletonCellContent {
+  display: flex;
+  align-items: center;
+  block-size: 1lh;
+}
+
+/* Table rows (incl. striped ones) need stronger bars than the default
+   skeleton to be visible. [role='status'] outranks .skeletonLoader, which
+   sets these variables on the item itself. */
+.skeletonCellContent > [role='status'] {
+  --skeleton-base: var(--opac-bg-dark);
+  --skeleton-sheen: var(--opac-bg-default);
+}
+
 .cellContent {
   display: flex;
   inline-size: 100%;
@@ -558,8 +648,19 @@
   text-overflow: clip;
 }
 
-.row:focus-within > .cell:not(.selectionCell) .cellContent,
-.row:focus-within > .cell:not(.selectionCell) .cellValueEllipsis {
+/*
+ * Unwrap the row's content only for keyboard focus. Mouse clicks on the row
+ * don't match :focus-visible, so the row keeps its height.
+ * The row-actions button is excluded outright: its menu returns focus to it
+ * programmatically on close, and browsers (notably Safari/Firefox on macOS,
+ * where clicking a button doesn't focus it) may treat that as :focus-visible.
+ */
+.row:focus-visible > .cell:not(.selectionCell) .cellContent,
+.row:focus-visible > .cell:not(.selectionCell) .cellValueEllipsis,
+.row:has(:focus-visible:not([data-row-context-menu])) > .cell:not(.selectionCell) .cellContent,
+.row:has(:focus-visible:not([data-row-context-menu]))
+  > .cell:not(.selectionCell)
+  .cellValueEllipsis {
   white-space: normal;
   overflow-wrap: break-word;
   word-break: normal;
@@ -569,8 +670,8 @@
 
 .contextMenuTrigger {
   color: var(--color-fg-subtle);
-  min-inline-size: calc(var(--component-size-md) + 4px);
-  min-block-size: calc(var(--component-size-md) + 4px);
+  min-inline-size: var(--component-size-sm);
+  min-block-size: var(--component-size-sm);
   border-radius: 999px;
   background-color: transparent;
   position: relative;
@@ -578,9 +679,17 @@
   overflow: hidden;
 }
 
+/*
+ * The row-actions button is centred on the cell's first line of text (cell
+ * padding + half the 20px line height) rather than on the whole cell, so it
+ * stays put when the row grows (wrapping, selection, expansion). For a
+ * single-line row this is the same spot as centring on the cell.
+ */
 .contextMenuOverlay {
+  --table-row-actions-cell-padding-block: 6px;
+
   position: absolute;
-  inset-block-start: 50%;
+  inset-block-start: calc(var(--table-row-actions-cell-padding-block) + 10px);
   inset-inline-end: var(--spacing-2xs);
   transform: translateY(-50%);
   display: inline-flex;
@@ -595,6 +704,25 @@
   z-index: 2;
 }
 
+.md .contextMenuOverlay {
+  --table-row-actions-cell-padding-block: var(--spacing-xs);
+}
+
+.sm .contextMenuOverlay {
+  --table-row-actions-cell-padding-block: var(--spacing-xxs);
+}
+
+/* Follow the cell's own vertical alignment when it isn't top-aligned. */
+.cell[data-vertical-align='middle'] .contextMenuOverlay {
+  inset-block-start: 50%;
+}
+
+.cell[data-vertical-align='bottom'] .contextMenuOverlay {
+  inset-block-start: auto;
+  inset-block-end: calc(var(--table-row-actions-cell-padding-block) + 10px);
+  transform: translateY(50%);
+}
+
 .contextMenuHoverOnly .contextMenuOverlay {
   opacity: 0;
   pointer-events: none;

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

@@ -1,7 +1,7 @@
 import type { HTMLAttributes, ReactNode, Ref } from 'react';
 import type { PageChangeEvent } from '../../components/pagination/Pagination';
 import type { Severity } from '../../constants/severity.types';
-import type { ViewMode } from '../../hooks/useTableSettings';
+export type ViewMode = 'compact' | 'wrapped';
 export interface ColumnItem<T> {
     id: string;
     header: string | (() => ReactNode);
@@ -21,6 +21,35 @@ export interface ColumnItem<T> {
     severity?: any;
     allowOverflow?: boolean;
 }
+/** Visibility fields shared by Table columns and accessor-shaped adapters. */
+export interface TableSettingsColumn extends Partial<Pick<ColumnItem<unknown>, 'id' | 'hidden' | 'canHide'>> {
+    accessorKey?: PropertyKey;
+    header?: unknown;
+    enableHiding?: boolean;
+    meta?: unknown;
+}
+/**
+ * Settings state + setters that drive the table's built-in header settings
+ * menu. This is the shape `useTableSettings` returns, so its result can be
+ * passed straight through: `settings={useTableSettings(...)}`.
+ */
+export interface TableSettingsController {
+    viewMode: ViewMode;
+    setViewMode: (mode: ViewMode) => void;
+    visibleColumnIds?: string[];
+    setVisibleColumnIds?: (ids: string[]) => void;
+    striped?: boolean;
+    setStriped?: (nextStriped: boolean) => void;
+}
+/** Labels and extra items for the table's built-in header settings menu. */
+export interface TableSettingsMenuOptions {
+    /** Accessible name and tooltip for the trigger. Defaults to "Visningsindstillinger". */
+    triggerLabel?: string;
+    columnsLabel?: string;
+    allPresetLabel?: string;
+    standardPresetLabel?: string;
+    additionalSettings?: (close?: () => void) => ReactNode;
+}
 export type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
@@ -57,16 +86,33 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     variant?: TableVariant;
     size?: 'sm' | 'md';
     viewMode?: ViewMode;
+    striped?: boolean;
     fillViewport?: boolean;
     /** Extra space below the table, in addition to measured layout/pagination spacing. Defaults to 0. */
     fillViewportBottomOffset?: number;
     containScrolling?: boolean;
+    /**
+     * Pins the header while scrolling. Defaults to the top of the table's own
+     * scroll area when `containScrolling` is on; `false` turns it off.
+     */
     stickyHeader?: StickyHeader;
     tableWidth?: number;
     tableRootRef?: Ref<HTMLDivElement>;
     measuringLayout?: boolean;
     toolbar?: ReactNode;
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
+    /**
+     * Content rendered at the inline end of the header row, above the row
+     * actions column. Falls back to the toolbar when `showHeader` is false.
+     */
+    headerActions?: ReactNode;
+    /**
+     * Shows a settings menu (stripes, text wrapping, column visibility) in the
+     * header and applies its state to the table. Pass the result of
+     * `useTableSettings`. Explicit `viewMode`/`striped` props take precedence.
+     */
+    settings?: TableSettingsController;
+    settingsOptions?: TableSettingsMenuOptions;
     take?: number;
     skip?: number;
     totalItemsCount?: number;