@dbcdk/react-components 0.0.19 → 0.0.20

package/dist/components/button/Button.module.css

@@ -1,7 +1,3 @@
-/* ==========================================================================
- * BASE BUTTON
- * ======================================================================= */
-
 .button {
   display: inline-flex;
   align-items: center;
@@ -226,6 +222,14 @@
   border-color: var(--color-border-selected);
 }
 
+.inline.active {
+  color: var(--button-bg-primary);
+}
+
 .active:hover {
   background-color: var(--button-bg-primary-hover);
 }
+
+.inline.active:hover {
+  color: var(--button-bg-primary-hover);
+}

package/dist/components/code-block/CodeBlock.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextWrap } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import styles from './CodeBlock.module.css';
+import { Button } from '../button/Button';
 import { CopyButton } from '../copy-button/CopyButton';
 const looksLikeStackFrame = (line) => {
     const t = line.trim();
@@ -16,24 +19,30 @@ export function CodeBlock({ code, children, copyButton, copyText, size = 'md', s
     var _a;
     const text = typeof code === 'string' ? code : undefined;
     const copy = (_a = copyText !== null && copyText !== void 0 ? copyText : text) !== null && _a !== void 0 ? _a : '';
-    // If children are provided, render them as-is (no line processing).
     const hasChildren = children !== undefined && children !== null;
-    // Smart rendering only when we have plain text + no children.
-    const lines = smart && !hasChildren && typeof text === 'string' ? text.split('\n') : null;
-    return (_jsxs("pre", { className: [styles.container, styles[size], wrap ? styles.wrap : styles.noWrap].join(' '), tabIndex: 0, children: [copyButton && (_jsx("span", { className: styles.copyButton, children: _jsx(CopyButton, { shape: "round", variant: "inline", text: copy }) })), _jsx("code", { className: styles.code, children: hasChildren
-                    ? children
-                    : lines
-                        ? lines.map((line, i) => {
-                            const isFirst = i === 0;
-                            const isFrame = looksLikeStackFrame(line);
-                            const cls = [
-                                styles.line,
-                                isFirst ? styles.lineFirst : '',
-                                isFrame ? styles.lineFrame : '',
-                            ]
-                                .filter(Boolean)
-                                .join(' ');
-                            return (_jsxs("span", { className: cls, children: [line, '\n'] }, i));
-                        })
-                        : text })] }));
+    const [isWrapped, setIsWrapped] = useState(wrap);
+    const lines = useMemo(() => (smart && !hasChildren && typeof text === 'string' ? text.split('\n') : null), [smart, hasChildren, text]);
+    return (_jsxs("div", { className: [
+            styles.wrapper,
+            styles[size],
+            isWrapped ? styles.wrap : styles.noWrap,
+            copyButton ? styles.hasActions : '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [copyButton && (_jsxs("span", { className: styles.actions, "aria-hidden": false, children: [_jsx(Button, { type: "button", variant: "inline", size: "sm", shape: "round", onClick: () => setIsWrapped(v => !v), "aria-pressed": isWrapped, active: isWrapped, title: isWrapped ? 'Ombryd ikke tekst' : 'Ombryd tekst', children: _jsx(TextWrap, { size: 16 }) }), _jsx(CopyButton, { size: "sm", shape: "round", variant: "inline", text: copy })] })), _jsx("pre", { className: styles.container, tabIndex: 0, children: _jsx("code", { className: styles.code, children: hasChildren
+                        ? children
+                        : lines
+                            ? lines.map((line, i) => {
+                                const isFirst = i === 0;
+                                const isFrame = looksLikeStackFrame(line);
+                                const cls = [
+                                    styles.line,
+                                    isFirst ? styles.lineFirst : '',
+                                    isFrame ? styles.lineFrame : '',
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ');
+                                return (_jsxs("span", { className: cls, children: [line, '\n'] }, i));
+                            })
+                            : text }) })] }));
 }

package/dist/components/code-block/CodeBlock.module.css

@@ -1,79 +1,80 @@
+.wrapper {
+  position: relative;
+  --code-actions-h: var(--component-size-sm);
+  --code-actions-inset: var(--spacing-xs);
+}
+
+/* <pre> */
 .container {
   position: relative;
   margin-block: 0;
-
-  background: var(--color-bg-contextual-subtle);
-  border: var(--border-width-thin) solid var(--color-border-default);
+  background: var(--color-bg-surface-strong);
+  border: var(--border-width-thin) solid var(--color-border-subtle);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-xs);
-
   padding: var(--spacing-sm);
-  padding-inline-end: calc(var(--spacing-sm) + 40px);
-
   font-family: var(--font-family-mono);
-  line-height: var(--line-height-relaxed);
-
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  /* Nice: avoids layout shift if/when scrollbars appear (supported in modern browsers) */
+  line-height: 1.35;
+  overflow: auto;
   scrollbar-gutter: stable;
-}
 
-.container:focus-within {
-  border-color: var(--color-border-selected);
-  box-shadow: var(--shadow-xs), var(--focus-ring);
+  display: flex;
+  align-items: center;
 }
 
-.container.sm {
+/* Sizes */
+.sm .container {
   padding: var(--spacing-xs);
-  padding-inline-end: calc(var(--spacing-xs) + 40px);
 }
 
-.container.sm .code {
+.sm .code {
   font-size: var(--font-size-xs);
 }
 
-.container.md .code {
+.md .code {
   font-size: var(--font-size-sm);
 }
 
-.container.lg .code {
+.lg .code {
   font-size: var(--font-size-base);
 }
 
-.code {
-  display: block;
-  margin: 0;
-  font-family: var(--font-family-mono);
-  color: var(--color-fg-default);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  word-break: normal; /* <- not break-all */
+.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
 }
 
-/* Copy button stays overlayed; does not affect layout */
-.copyButton {
-  position: absolute;
-  top: var(--spacing-xs);
-  right: var(--spacing-xs);
-  z-index: 2;
+.sm.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-xs) + var(--spacing-xs));
+}
 
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--transition-fast) var(--ease-standard);
+.md.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
 }
 
-.container:hover .copyButton,
-.container:focus-within .copyButton {
-  opacity: 1;
-  pointer-events: auto;
+.lg.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
 }
 
-/* --- New: wrap control --- */
+/* Focus ring */
+.wrapper:focus-within .container {
+  border-color: var(--color-border-selected);
+  box-shadow: var(--shadow-xs), var(--focus-ring);
+}
+
+/* <code> */
+.code {
+  display: block;
+  margin: 0;
+  font-family: var(--font-family-mono);
+  color: var(--color-fg-default);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Wrapping modes */
 .wrap .code {
   white-space: pre-wrap;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
   word-break: normal;
 }
 
@@ -83,9 +84,31 @@
   word-break: normal;
 }
 
-/* --- New: per-line styling (for smart mode) --- */
+.actions {
+  position: absolute;
+  top: var(--code-actions-inset);
+  right: var(--code-actions-inset);
+  z-index: 3;
+  display: inline-flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+  padding: var(--spacing-2xs);
+  border-radius: var(--border-radius-lg);
+  background: color-mix(in oklab, var(--color-bg-surface) 70%, transparent);
+  backdrop-filter: blur(6px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast) var(--ease-standard);
+}
+
+.wrapper:hover .actions,
+.wrapper:focus-within .actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .line {
-  display: inline; /* keep selection/copy behavior natural */
+  display: inline;
 }
 
 .lineFirst {
@@ -94,27 +117,6 @@
   color: var(--color-fg-default);
 }
 
-/* Common stack frames are “noise”; deemphasize without hiding */
 .lineFrame {
   color: var(--color-fg-subtle);
 }
-
-/* Optional: make the container a bit denser for logs */
-.container {
-  /* keep your existing properties ... */
-
-  /* Easy win: stacktraces feel less tall */
-  line-height: 1.35; /* instead of relaxed */
-}
-
-/* Optional: differentiate the code area slightly from surrounding UI */
-.container {
-  background: var(--color-bg-surface-strong); /* a touch more neutral than contextual */
-  border-color: var(--color-border-subtle);
-}
-
-/* Keep focus ring behavior */
-.container:focus-within {
-  border-color: var(--color-border-selected);
-  box-shadow: var(--shadow-xs), var(--focus-ring);
-}

package/dist/components/overlay/modal/Modal.d.ts

@@ -19,5 +19,6 @@ export type ModalProps = {
     severity?: Severity;
     disableContentSpacing?: boolean;
     dataCy?: string;
+    width?: number | string;
 };
-export declare function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, }: ModalProps): React.ReactNode;
+export declare function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, width, }: ModalProps): React.ReactNode;

package/dist/components/overlay/modal/Modal.js

@@ -5,7 +5,7 @@ import { useEffect, useId, useRef } from 'react';
 import { Button } from '../../../components/button/Button';
 import { Headline } from '../../../components/headline/Headline';
 import styles from './Modal.module.css';
-export function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick = true, severity, disableContentSpacing = false, isLoading, dataCy, }) {
+export function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick = true, severity, disableContentSpacing = false, isLoading, dataCy, width, }) {
     const titleId = useId();
     const dialogRef = useRef(null);
     const lastActiveElementRef = useRef(null);
@@ -30,7 +30,6 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
                 const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
                 const focusable = dialog.querySelectorAll(focusableSelectors);
                 if (focusable.length > 0) {
-                    // Prefer focusing the first input/select/textarea if present
                     const preferred = (_a = dialog.querySelector('input, select, textarea')) !== null && _a !== void 0 ? _a : focusable[0];
                     preferred.focus();
                 }
@@ -68,13 +67,11 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
         document.addEventListener('keydown', handleKeyDown);
         return () => {
             document.removeEventListener('keydown', handleKeyDown);
-            // Restore focus only when closing (true -> false) happens elsewhere
-            // so we do it when modal unmounts while open.
             if (lastActiveElementRef.current) {
                 lastActiveElementRef.current.focus();
             }
         };
-    }, [isOpen]); // <-- IMPORTANT: only depend on isOpen
+    }, [isOpen]);
     if (!isOpen)
         return null;
     const handleOverlayClick = () => {
@@ -88,5 +85,8 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
     const resolvedSecondaryAction = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : (primaryAction ? { label: 'Luk', onClick: onRequestCloseRef.current } : undefined);
     const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
     const body = children !== null && children !== void 0 ? children : content;
-    return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", shape: "round", icon: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", variant: "outlined", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: "primary", onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
+    const resolvedWidth = typeof width === 'number' ? `${width}px` : typeof width === 'string' ? width : undefined;
+    return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, style: resolvedWidth
+                ? { ['--modal-width']: resolvedWidth }
+                : undefined, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", shape: "round", icon: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", variant: "outlined", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: "primary", onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
 }

package/dist/components/overlay/modal/Modal.module.css

@@ -2,62 +2,87 @@
   position: fixed;
   inset: 0;
   background: var(--overlay-scrim);
+
   display: flex;
-  align-items: flex-start;
   justify-content: center;
-  padding-top: clamp(var(--spacing-md), 12vh, 24vh);
-  padding-bottom: var(--spacing-md);
+
+  padding: clamp(var(--spacing-sm), 10vh, var(--spacing-xl));
   z-index: var(--z-backdrop-modal);
+
+  /* Overlay can scroll if modal is taller than viewport */
   overflow-y: auto;
 }
 
+/* Default width can be overridden by --modal-width from props */
 .modal {
+  --modal-width: 700px;
+
   background: var(--color-bg-surface);
   border-radius: var(--border-radius-lg);
-  min-width: 320px;
-  max-width: 700px;
-  max-height: calc(100vh - (2 * var(--spacing-md)));
-  display: flex;
-  flex-direction: column;
   box-shadow: var(--shadow-lg);
   font-family: var(--font-family);
-  min-width: 500px;
-  z-index: var(--z-modal);
   color: var(--color-fg-default);
-}
+  z-index: var(--z-modal);
+
+  /* Responsive width: never exceed viewport */
+  width: min(
+    var(--modal-width),
+    calc(100vw - 2 * clamp(var(--spacing-sm), 4vw, var(--spacing-lg)))
+  );
+  min-width: 320px;
+
+  /* Critical: prevent “below bottom of screen”
+     Prefer svh on mobile; fallback to vh. */
+  max-height: calc(100svh - 2 * clamp(var(--spacing-sm), 10vh, var(--spacing-xl)));
+  max-height: calc(100vh - 2 * clamp(var(--spacing-sm), 10vh, var(--spacing-xl)));
+
+  display: flex;
+  flex-direction: column;
 
-/* Slightly more relaxed on small screens */
-@media (max-width: var(--bp-sm)) {
-  .modal {
-    width: calc(100% - 2 * var(--spacing-md));
-    max-width: 100%;
-  }
+  /* If you want it slightly lower than top padding, keep it aligned start */
+  align-self: flex-start;
+
+  /* Helps on iOS when address bar changes */
+  overscroll-behavior: contain;
 }
 
+/* Header/footer pinned; body scrolls */
 .header {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
+
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   padding: var(--spacing-md);
   padding-bottom: 0;
+
+  /* Keeps header readable if body scrolls underneath */
+  flex: 0 0 auto;
 }
 
 .body {
-  overflow-y: auto;
+  flex: 1 1 auto;
+  overflow: auto;
+
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
   color: var(--color-fg-muted);
+
   padding: var(--spacing-md);
+  min-height: 0; /* IMPORTANT: allows flex child to actually scroll */
 }
 
 .footer {
+  flex: 0 0 auto;
+
   display: flex;
   justify-content: flex-end;
   gap: var(--spacing-xs);
-  padding-top: 0;
+
   padding: var(--spacing-md);
+  padding-top: 0;
 }
 
 .icon {
@@ -65,3 +90,11 @@
   align-items: center;
   justify-content: center;
 }
+
+.contentSpacing .body > :first-child {
+  margin-top: 0;
+}
+
+.contentSpacing .body > :last-child {
+  margin-bottom: 0;
+}

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { HTMLAttributes, JSX, ReactNode } from 'react';
 import { Severity } from '../../constants/severity.types';
 import { PageChangeEvent } from '../../components/pagination/Pagination';
@@ -25,7 +24,7 @@ type HeaderExtrasArgs<T> = {
     index: number;
 };
 export type TableVariant = 'primary' | 'embedded';
-export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTMLTableElement>, 'onClick'> & {
+export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> & {
     data: T[];
     dataKey: keyof T;
     columns: ColumnItem<T>[];
@@ -40,7 +39,13 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     sortDirection?: SortDirection;
     loading?: boolean;
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
-    columnStyles?: Partial<Record<string, React.CSSProperties>>;
+    /**
+     * Grid layout control
+     *
+     * Example:
+     *  "34px minmax(160px, 2fr) minmax(120px, 1fr) minmax(120px, 1fr)"
+     */
+    gridTemplateColumns?: string;
     toolbar?: ReactNode;
     striped?: boolean;
     fillViewport?: boolean;
@@ -58,6 +63,6 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     showFirstLast?: boolean;
     viewMode?: ViewMode;
     emptyConfig?: TableEmptyConfig;
-} & Omit<HTMLAttributes<HTMLTableElement>, 'onClick'>;
-export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, toolbar, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement, totalItemsCount, onPageChange, loading, variant, size, getRowSeverity, showFirstLast, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }: TableProps<T>): JSX.Element;
+};
+export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, gridTemplateColumns, toolbar, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement, totalItemsCount, onPageChange, loading, variant, size, getRowSeverity, showFirstLast, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }: TableProps<T>): JSX.Element;
 export {};

package/dist/components/table/Table.js

@@ -9,8 +9,17 @@ import { Pagination } from '../../components/pagination/Pagination';
 import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 import { TableEmptyState } from './components/empty-state/EmptyState';
 import styles from './Table.module.css';
-import { getAriaSort, getCellDisplayValue, getColumnStyle, getHeaderLabel, getNextSortDirection, getRowKey, getVisibleColumns, isModifierClick, shouldAllowWrap, shouldToggleOnKey, isActiveSort, } from './table.utils';
-export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, toolbar, striped, fillViewport = false, viewportBottomOffset = 0, viewportMin = 120, viewportIncludeMarginTop = false, take, skip, paginationPlacement = 'bottom', totalItemsCount, onPageChange, loading, variant = 'primary', size = 'md', getRowSeverity, showFirstLast = false, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }) {
+import { getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isModifierClick, shouldAllowWrap, shouldToggleOnKey, isActiveSort, } from './table.utils';
+function buildDefaultGridTemplate(args) {
+    const { hasSelection, colCount } = args;
+    const parts = [];
+    if (hasSelection)
+        parts.push('34px');
+    for (let i = 0; i < colCount; i++)
+        parts.push('minmax(120px, 1fr)');
+    return parts.join(' ');
+}
+export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, gridTemplateColumns, toolbar, striped, fillViewport = false, viewportBottomOffset = 0, viewportMin = 120, viewportIncludeMarginTop = false, take, skip, paginationPlacement = 'bottom', totalItemsCount, onPageChange, loading, variant = 'primary', size = 'md', getRowSeverity, showFirstLast = false, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }) {
     const filteredColumns = useMemo(() => getVisibleColumns(columns), [columns]);
     const handlePageChange = useCallback((e) => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e), [onPageChange]);
     const scrollRef = useRef(null);
@@ -19,64 +28,87 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
         min: viewportMin,
         includeMarginTop: viewportIncludeMarginTop,
     });
-    const tableEl = (_jsxs(_Fragment, { children: [toolbar ? _jsx("div", { style: { marginBottom: 12 }, children: toolbar }) : null, _jsxs("table", { ...rest, className: `${styles.table} ${styles[variant]} ${styles[size]} ${getRowSeverity ? styles.severityTable : ''}`, children: [_jsx("thead", { children: _jsxs("tr", { children: [selectedRows && onRowSelect && dataKey && (_jsx("th", { className: `${styles.th} ${styles.selectionCell}`, children: selectionMode === 'multiple' ? (_jsx(Checkbox, { size: "sm", variant: "primary", checked: allRowsSelected, onChange: checked => onSelectAllRows === null || onSelectAllRows === void 0 ? void 0 : onSelectAllRows(checked) })) : null })), filteredColumns.map((column, index) => {
-                                    const active = isActiveSort(sortById, column.id);
-                                    const ariaSort = getAriaSort(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
-                                    const toggleSort = () => {
-                                        if (!onSortChange || !column.sortable)
-                                            return;
-                                        const nextDir = getNextSortDirection(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
-                                        onSortChange(column, nextDir);
-                                    };
-                                    return (_jsx("th", { style: getColumnStyle(column.id, columnStyles, column.align, 'middle'), "aria-sort": ariaSort, className: `${styles.th}`, children: _jsxs("div", { className: styles.thInner, children: [column.sortable ? (_jsxs("button", { type: "button", className: [
-                                                        styles.thButton,
-                                                        column.align === 'right' ? styles.thButtonRight : '',
-                                                        column.align === 'center' ? styles.thButtonCenter : '',
-                                                    ].join(' '), onClick: toggleSort, onKeyDown: e => {
-                                                        if (shouldToggleOnKey(e.key)) {
-                                                            e.preventDefault();
-                                                            toggleSort();
-                                                        }
-                                                    }, children: [_jsx("span", { className: [
-                                                                styles.thLabel,
-                                                                column.align === 'right' ? styles.thLabelRight : '',
-                                                                column.align === 'center' ? styles.thLabelCenter : '',
-                                                            ].join(' '), children: getHeaderLabel(column.header) }), _jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [active && sortDirection === 'asc' && _jsx(ArrowUp, {}), active && sortDirection === 'desc' && (_jsx(ArrowDown, { className: styles.descending })), !active && (_jsx(ArrowDown, { className: `${styles.descending} ${styles.inActiveSort}` }))] })] })) : (_jsx("span", { className: [
-                                                        styles.thLabel,
-                                                        column.align === 'right' ? styles.thLabelRight : '',
-                                                        column.align === 'center' ? styles.thLabelCenter : '',
-                                                    ].join(' '), children: getHeaderLabel(column.header) })), headerExtras ? (_jsx("div", { className: styles.thExtras, children: headerExtras({ column, index }) })) : null] }) }, column.id));
-                                })] }) }), loading && !data.length ? (_jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ''}`, children: Array.from({ length: take !== null && take !== void 0 ? take : 5 }).map((_, rowIndex) => (_jsx("tr", { children: filteredColumns.map((column, colIndex) => (_jsx("td", { style: getColumnStyle(column.id, columnStyles, column.align, 'middle'), className: `${styles.tableCell}`, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, `${column.id}-${colIndex}`))) }, `loading-row-${rowIndex}`))) })) : (_jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ''}`, children: data === null || data === void 0 ? void 0 : data.map(row => {
-                            const rowSeverity = getRowSeverity === null || getRowSeverity === void 0 ? void 0 : getRowSeverity(row);
-                            const rowId = row[dataKey];
-                            const isSelected = Boolean(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(rowId));
-                            return (_jsxs("tr", { tabIndex: onRowClick ? 0 : -1, onKeyDown: e => {
-                                    if (!onRowClick)
-                                        return;
+    const hasSelection = Boolean(selectedRows && onRowSelect && dataKey);
+    const template = useMemo(() => {
+        return (gridTemplateColumns !== null && gridTemplateColumns !== void 0 ? gridTemplateColumns : buildDefaultGridTemplate({ hasSelection, colCount: filteredColumns.length }));
+    }, [gridTemplateColumns, hasSelection, filteredColumns.length]);
+    const gridStyle = useMemo(() => ({ ['--grid-template']: template }), [template]);
+    const headerEl = (_jsxs("div", { className: `${styles.headerRow}`, style: gridStyle, role: "row", children: [hasSelection && (_jsx("div", { className: `${styles.headerCell} ${styles.selectionCell}`, role: "columnheader", children: selectionMode === 'multiple' ? (_jsx(Checkbox, { size: "sm", variant: "primary", checked: allRowsSelected, onChange: checked => onSelectAllRows === null || onSelectAllRows === void 0 ? void 0 : onSelectAllRows(checked) })) : null })), filteredColumns.map((column, index) => {
+                var _a;
+                const active = isActiveSort(sortById, column.id);
+                const ariaSort = getAriaSort(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
+                const toggleSort = () => {
+                    if (!onSortChange || !column.sortable)
+                        return;
+                    const nextDir = getNextSortDirection(column.sortable, active, sortDirection !== null && sortDirection !== void 0 ? sortDirection : null);
+                    onSortChange(column, nextDir);
+                };
+                return (_jsx("div", { className: styles.headerCell, role: "columnheader", "aria-sort": ariaSort, "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', children: _jsxs("div", { className: styles.thInner, children: [column.sortable ? (_jsxs("button", { type: "button", className: [
+                                    styles.thButton,
+                                    column.align === 'right' ? styles.thButtonRight : '',
+                                    column.align === 'center' ? styles.thButtonCenter : '',
+                                ].join(' '), onClick: toggleSort, onKeyDown: e => {
                                     if (shouldToggleOnKey(e.key)) {
                                         e.preventDefault();
-                                        onRowClick(row);
-                                    }
-                                }, onClick: e => {
-                                    const canSelect = Boolean(selectedRows && onRowSelect && dataKey);
-                                    if (isModifierClick(e) && canSelect) {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        onRowSelect(rowId, !selectedRows.has(rowId));
-                                        return;
+                                        toggleSort();
                                     }
-                                    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
-                                }, style: {
-                                    ['--row-severity-color']: rowSeverity
-                                        ? SeverityBgColor[rowSeverity]
-                                        : undefined,
-                                }, className: `${onRowClick ? styles.clickableRow : ''} ${isSelected ? styles.selectedRow : ''} ${rowSeverity ? styles.severity : ''}`, children: [selectedRows && onRowSelect && dataKey && (_jsx("td", { className: `${styles.selectionCell}`, children: _jsx(Checkbox, { variant: "primary", checked: selectedRows.has(rowId), size: "sm", onChange: (checked, e) => {
-                                                e.stopPropagation();
-                                                onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, checked);
-                                            } }) })), filteredColumns.map(column => (_jsx("td", { style: getColumnStyle(column.id, columnStyles, column.align, column.verticalAlign), className: `${styles.tableCell} ${shouldAllowWrap(column.allowWrap, isSelected, viewMode)
-                                            ? styles.allowWrap
-                                            : styles.nowrap}`, children: getCellDisplayValue(row, column) }, column.id)))] }, getRowKey(rowId)));
-                        }) }))] }), !data.length && !loading && _jsx(TableEmptyState, { config: emptyConfig })] }));
+                                }, children: [_jsx("span", { className: [
+                                            styles.thLabel,
+                                            column.align === 'right' ? styles.thLabelRight : '',
+                                            column.align === 'center' ? styles.thLabelCenter : '',
+                                        ].join(' '), children: getHeaderLabel(column.header) }), _jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [active && sortDirection === 'asc' && _jsx(ArrowUp, {}), active && sortDirection === 'desc' && (_jsx(ArrowDown, { className: styles.descending })), !active && (_jsx(ArrowDown, { className: `${styles.descending} ${styles.inActiveSort}` }))] })] })) : (_jsx("span", { className: [
+                                    styles.thLabel,
+                                    column.align === 'right' ? styles.thLabelRight : '',
+                                    column.align === 'center' ? styles.thLabelCenter : '',
+                                ].join(' '), children: getHeaderLabel(column.header) })), headerExtras ? (_jsx("div", { className: styles.thExtras, children: headerExtras({ column, index }) })) : null] }) }, column.id));
+            })] }));
+    const bodyEl = loading && !data.length ? (_jsx("div", { className: styles.body, role: "rowgroup", children: Array.from({ length: take !== null && take !== void 0 ? take : 5 }).map((_, rowIndex) => (_jsxs("div", { className: styles.row, style: gridStyle, role: "row", children: [hasSelection ? (_jsx("div", { className: `${styles.cell} ${styles.selectionCell}`, role: "cell" })) : null, filteredColumns.map(column => {
+                    var _a;
+                    return (_jsx("div", { className: styles.cell, role: "cell", "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, column.id));
+                })] }, `loading-row-${rowIndex}`))) })) : (_jsx("div", { className: `${styles.body} ${striped ? styles.striped : ''}`, role: "rowgroup", children: data === null || data === void 0 ? void 0 : data.map(row => {
+            const rowSeverity = getRowSeverity === null || getRowSeverity === void 0 ? void 0 : getRowSeverity(row);
+            const rowId = row[dataKey];
+            const isSelected = Boolean(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(rowId));
+            return (_jsxs("div", { className: [
+                    styles.row,
+                    onRowClick ? styles.clickableRow : '',
+                    isSelected ? styles.selectedRow : '',
+                    rowSeverity ? styles.severity : '',
+                ].join(' '), style: {
+                    ...gridStyle,
+                    ['--row-severity-color']: rowSeverity
+                        ? SeverityBgColor[rowSeverity]
+                        : undefined,
+                }, role: "row", tabIndex: onRowClick ? 0 : -1, onKeyDown: e => {
+                    if (!onRowClick)
+                        return;
+                    if (shouldToggleOnKey(e.key)) {
+                        e.preventDefault();
+                        onRowClick(row);
+                    }
+                }, onClick: e => {
+                    const canSelect = Boolean(selectedRows && onRowSelect && dataKey);
+                    if (isModifierClick(e) && canSelect) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onRowSelect(rowId, !selectedRows.has(rowId));
+                        return;
+                    }
+                    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
+                }, children: [hasSelection && (_jsx("div", { className: `${styles.cell} ${styles.selectionCell}`, role: "cell", children: _jsx(Checkbox, { variant: "primary", checked: selectedRows.has(rowId), size: "sm", onChange: (checked, e) => {
+                                e.stopPropagation();
+                                onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, checked);
+                            } }) })), filteredColumns.map(column => {
+                        var _a;
+                        return (_jsx("div", { className: [
+                                styles.cell,
+                                shouldAllowWrap(column.allowWrap, isSelected, viewMode)
+                                    ? styles.allowWrap
+                                    : styles.nowrap,
+                            ].join(' '), role: "cell", "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', children: getCellDisplayValue(row, column) }, column.id));
+                    })] }, `gridRow-${String(rowId)}`));
+        }) }));
+    const gridEl = (_jsxs(_Fragment, { children: [toolbar ? _jsx("div", { style: { marginBottom: 12 }, children: toolbar }) : null, _jsxs("div", { ...rest, className: `${styles.grid} ${styles[variant]} ${styles[size]} ${getRowSeverity ? styles.severityTable : ''}`, role: "table", "aria-rowcount": data.length, children: [_jsx("div", { className: styles.header, role: "rowgroup", children: headerEl }), bodyEl] }), !data.length && !loading && _jsx(TableEmptyState, { config: emptyConfig })] }));
     if (fillViewport) {
         return (_jsxs("div", { style: {
                 display: 'flex',
@@ -84,10 +116,10 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                 gap: '20px',
                 flexFlow: paginationPlacement === 'top' ? 'column-reverse' : 'column',
                 position: 'relative',
-            }, children: [_jsx("div", { ref: scrollRef, style: viewportStyle, className: styles.tableScroll, children: tableEl }), onPageChange && data.length > 0 && (_jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast }))] }));
+            }, children: [_jsx("div", { ref: scrollRef, style: viewportStyle, className: styles.tableScroll, children: gridEl }), onPageChange && data.length > 0 && (_jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast }))] }));
     }
     return (_jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md", style: {
             flexFlow: paginationPlacement === 'top' ? 'column-reverse' : 'column',
             position: 'relative',
-        }, children: [tableEl, onPageChange && data.length > 0 && (_jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange }))] }));
+        }, children: [gridEl, onPageChange && data.length > 0 && (_jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange }))] }));
 }

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

@@ -1,19 +1,10 @@
-/* Table.module.css (updated) */
-
-/* =========================
-   Base table
-   ========================= */
-
-.table {
+.grid {
   inline-size: 100%;
   max-inline-size: 100%;
-  overflow: visible;
-  border-collapse: collapse;
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   color: var(--color-fg-default);
   background: var(--color-bg-surface);
-  table-layout: fixed;
 }
 
 .tableScroll {
@@ -23,38 +14,39 @@
   -webkit-overflow-scrolling: touch;
 }
 
-/* =========================
-   Header
-   ========================= */
-
-.table thead {
+/* Header wrapper sticky */
+.header {
   position: sticky;
   top: 0;
   z-index: 10;
   background-color: var(--color-bg-surface);
 }
 
-.table.primary thead {
+.primary .header {
   box-shadow: var(--shadow-md);
 }
 
-.table .th {
+/* Shared row grid template */
+.headerRow,
+.row {
   position: relative;
+  display: grid;
+  grid-template-columns: var(--grid-template);
+  align-items: stretch;
+  inline-size: 100%;
+}
 
+/* Header cells */
+.headerCell {
+  position: relative;
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-sm);
 
-  text-align: left;
-  vertical-align: middle;
-
-  background: inherit;
-
   /* Typography */
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-normal);
   letter-spacing: var(--letter-spacing-wide);
   text-transform: uppercase;
-
   color: var(--color-fg-subtle);
 
   /* Truncation */
@@ -62,159 +54,65 @@
   overflow: hidden;
   text-overflow: ellipsis;
 
-  /* Width control */
   min-width: 0;
 }
 
-/* Small variant: header padding */
-.table.sm .th {
+.sm .headerCell {
   padding-inline: var(--spacing-md);
 }
 
-/* Header layout */
-.th > .thInner {
-  display: flex;
-  align-items: center;
-  inline-size: 100%;
-}
-
-/* Sort button (full width click target, but content aligns via modifiers) */
-.thButton {
-  all: unset;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-  inline-size: 100%;
-  cursor: pointer;
-  user-select: none;
-  border-radius: var(--border-radius-default);
-  padding-block: 2px;
-  padding-inline: 2px;
-
-  /* default */
-  justify-content: flex-start;
-}
-
-/* IMPORTANT: use consistent PascalCase suffixes */
-.thButtonRight {
-  justify-content: flex-end;
-}
-
-.thButtonCenter {
-  justify-content: center;
-}
-
-/* Label should NOT grow to fill space (it breaks alignment) */
-.thLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 0 1 auto;
-  min-width: 0;
-}
-
-/* Match label text alignment to column alignment */
-.thLabelRight {
-  text-align: right;
-}
-
-.thLabelCenter {
-  text-align: center;
-}
-
-.thExtras {
-  display: inline-flex;
-  align-items: center;
-}
-
-.sortIndicator {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-}
-
-.sortIndicator svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-}
-
-/* =========================
-   Body + cells
-   ========================= */
-
-.tBody::before {
+/* Body */
+.body::before {
   content: '';
   height: var(--spacing-xs);
   display: block;
 }
 
-.tBody tr td {
+/* Data cells */
+.cell {
   position: relative;
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-sm);
-
   border-block-end: var(--border-width-thin) solid var(--color-border-default);
-
   text-align: start;
   vertical-align: top;
-
-  overflow-wrap: break-word;
-  word-break: normal;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-/* Small variant applies to all cells by default */
-.table.sm .tBody tr td {
+.sm .cell {
   padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-md);
   font-size: var(--font-size-xs);
   line-height: var(--line-height-normal);
 }
 
-/* =========================
-   Selection column
-   ========================= */
-
-.tBody tr td.selectionCell,
-.table .tBody tr td.selectionCell,
-.table td.selectionCell {
-  padding-inline: var(--spacing-xxs);
-}
-
-.table .th.selectionCell,
-.table th.selectionCell,
-th.selectionCell {
-  width: 34px !important;
+.headerCell[data-align='right'],
+.cell[data-align='right'] {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
 }
 
-/* Override the .table.sm .tBody tr td padding-inline */
-.table.sm .tBody tr td.selectionCell,
-.table.table.sm .tBody tr td.selectionCell {
-  padding-inline: var(--spacing-xxs);
+.headerCell[data-align='center'],
+.cell[data-align='center'] {
+  text-align: center;
 }
 
-.table.severityTable .tBody tr td:first-child {
-  padding-inline-start: var(--spacing-md);
-}
-.table.severityTable .tBody tr td.selectionCell,
-.table.severityTable td.selectionCell,
-.table.severityTable .th.selectionCell,
-.table.severityTable th.selectionCell {
-  padding-inline: var(--spacing-xxs);
+/* Selection column */
+.selectionCell {
+  padding: inherit 0 !important;
+  overflow: visible !important;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
 }
 
-.table.sm.severityTable .tBody tr td.selectionCell,
-.table.table.sm.severityTable .tBody tr td.selectionCell,
-.table.sm.severityTable .th.selectionCell,
-.table.table.sm.severityTable .th.selectionCell,
-.table.sm.severityTable th.selectionCell {
-  padding-inline: var(--spacing-xxs);
-  padding-inline-start: 14px;
+/* Rows (interaction + states) */
+.row {
+  background: transparent;
 }
 
-/* =========================
-   Rows (interaction + states)
-   ========================= */
-
 .clickableRow {
   cursor: pointer;
 }
@@ -231,16 +129,12 @@ th.selectionCell {
   background-color: var(--color-bg-selected-hover);
 }
 
-.tr--hover:hover {
-  background-color: var(--color-bg-contextual);
-}
-
-.striped tr:nth-child(even):not(.selectedRow):not(:hover) {
+.striped .row:nth-child(even):not(.selectedRow):not(:hover) {
   background-color: var(--color-bg-surface-subtle);
 }
 
-/* Focus ring (fix selector: .tBody, not .tbody) */
-.table .tBody tr:focus-within {
+/* Focus ring: apply when something inside row is focused */
+.row:focus-within {
   outline: none;
   box-shadow:
     inset 2px 0 0 var(--color-brand),
@@ -249,10 +143,7 @@ th.selectionCell {
     inset 0 -2px 0 var(--color-brand);
 }
 
-/* =========================
-   Content utilities
-   ========================= */
-
+/* Content utilities */
 .nowrap {
   white-space: nowrap;
   overflow: hidden;
@@ -260,31 +151,74 @@ th.selectionCell {
 }
 
 .allowWrap {
-  word-break: break-all !important;
-  overflow-wrap: anywhere !important;
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
 }
 
-.td--numeric {
-  text-align: end;
+/* Header inner layout (same as before) */
+.thInner {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
 }
 
-.td--muted {
-  color: var(--color-fg-muted);
+/* Sort button */
+.thButton {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  inline-size: 100%;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--border-radius-default);
+  padding-block: 2px;
+  padding-inline: 2px;
+  justify-content: flex-start;
 }
 
-.td .error {
-  color: var(--color-danger);
+.thButtonRight {
+  justify-content: flex-end;
 }
 
-/* =========================
-   Severity rail
-   ========================= */
+.thButtonCenter {
+  justify-content: center;
+}
 
-.tBody tr.severity td:first-child {
-  position: relative;
+.thLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.thLabelRight {
+  text-align: right;
+}
+
+.thLabelCenter {
+  text-align: center;
+}
+
+.thExtras {
+  display: inline-flex;
+  align-items: center;
+}
+
+.sortIndicator {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
 }
 
-.table.severityTable .tBody tr.severity td:first-child::before {
+.sortIndicator svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
+.severityTable .row.severity::before {
   content: '';
   position: absolute;
   left: 2px;
@@ -293,11 +227,12 @@ th.selectionCell {
   width: 3px;
   background-color: var(--row-severity-color);
   border-radius: 1px;
-
-  z-index: 0;
+  z-index: 2;
+  pointer-events: none;
 }
 
-.table.severityTable .tBody tr.severity td:first-child > * {
+/* Ensure content is above the rail */
+.severityTable .row.severity > * {
   position: relative;
-  z-index: 1;
+  z-index: 3;
 }

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { type TableProps, type TableVariant } from './Table';
 import { ViewMode } from '../../hooks/useTableSettings';
 type Filterable<T> = Array<keyof T>;
-export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerBelowRow' | 'headerExtras' | 'columnStyles' | 'toolbar'> & {
+export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerExtras' | 'gridTemplateColumns' | 'toolbar'> & {
     columns: ReadonlyArray<ColumnDef<T, any>>;
     filterable?: Filterable<T>;
     sorting?: SortingState;

package/dist/components/table/TanstackTable.js

@@ -4,9 +4,33 @@ import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel,
 import * as React from 'react';
 import ColumnResizer from './components/column-resizer/ColumnResizer';
 import { Table } from './Table';
-import { buildColumnVisibilityFromVisibleIds, mapDefsToColumnItems, sortingEqual, getSortPropsFromSorting, buildColumnStyles, columnItemsToIdSet, } from './tanstackTable.utils';
+import { buildColumnVisibilityFromVisibleIds, mapDefsToColumnItems, sortingEqual, getSortPropsFromSorting, columnItemsToIdSet, } from './tanstackTable.utils';
+function buildGridTemplateColumns(args) {
+    var _a, _b, _c, _d;
+    const { table, allowedIds, hasSelection, selectionPx, defaultMinPx } = args;
+    const parts = [];
+    if (hasSelection)
+        parts.push(`${selectionPx}px`);
+    const leaf = table.getVisibleLeafColumns().filter(c => allowedIds.has(c.id));
+    for (const c of leaf) {
+        const def = c.columnDef;
+        const min = Number((_a = def.minSize) !== null && _a !== void 0 ? _a : defaultMinPx);
+        const maxRaw = def.maxSize;
+        const max = maxRaw == null ? Number.POSITIVE_INFINITY : Number(maxRaw);
+        const size = Number((_d = (_c = (_b = c.getSize) === null || _b === void 0 ? void 0 : _b.call(c)) !== null && _c !== void 0 ? _c : def.size) !== null && _d !== void 0 ? _d : min);
+        if (Number.isFinite(min) && Number.isFinite(max) && min > 0 && max === min) {
+            parts.push(`${Math.round(min)}px`);
+            continue;
+        }
+        // Weight based on size so wide columns keep more room
+        const weight = Math.max(1, Math.min(6, Math.round(size / 100)));
+        // Respect minSize; scroll if mins don't fit
+        parts.push(`minmax(${Math.round(min)}px, ${weight}fr)`);
+    }
+    return parts.join(' ');
+}
 export function TanstackTable(props) {
-    const { data, dataKey, columns, filterable = [], sorting: controlledSorting, onSortingChange, optimisticSortingUi = true, visibleColumnIds, manualSorting, ...tableProps } = props;
+    const { data, dataKey, columns, sorting: controlledSorting, onSortingChange, optimisticSortingUi = true, visibleColumnIds, manualSorting, selectedRows, onRowSelect, ...tableProps } = props;
     const isControlledSorting = controlledSorting != null;
     const [uiSorting, setUiSorting] = React.useState(controlledSorting !== null && controlledSorting !== void 0 ? controlledSorting : []);
     React.useEffect(() => {
@@ -53,19 +77,11 @@ export function TanstackTable(props) {
     const allowedIds = React.useMemo(() => columnItemsToIdSet(columnItems), [columnItems]);
     const visibleData = table.getRowModel().rows.map(r => r.original);
     const { sortById, sortDirection } = getSortPropsFromSorting(uiSorting);
-    const columnStyles = React.useMemo(() => {
-        const leafCols = table.getAllLeafColumns();
-        return buildColumnStyles(leafCols, allowedIds, { minWidth: 80, maxWidth: 800 });
-    }, [table, columnSizing, allowedIds]);
     const handleSortChange = React.useCallback((column, direction) => {
-        // Translate Table's direction -> TanStack SortingState
         const next = direction == null ? [] : [{ id: column.id, desc: direction === 'desc' }];
-        // Mirror TanStack's onSortingChange behavior
         if (optimisticSortingUi)
             setUiSorting(next);
         onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
-        // If you are doing server-side sorting, you likely also want:
-        // table.resetPageIndex?.() or external pagination reset (depends on your setup)
     }, [optimisticSortingUi, onSortingChange]);
     const headerExtras = React.useCallback(({ index }) => {
         var _a, _b, _c, _d;
@@ -80,5 +96,15 @@ export function TanstackTable(props) {
             return null;
         return _jsx(ColumnResizer, { id: header.column.id, handler: handler });
     }, [table]);
-    return (_jsx(Table, { ...tableProps, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, columnStyles: columnStyles, headerExtras: headerExtras }));
+    const hasSelection = Boolean(selectedRows && onRowSelect && dataKey);
+    const gridTemplateColumns = React.useMemo(() => {
+        return buildGridTemplateColumns({
+            table,
+            allowedIds,
+            hasSelection,
+            selectionPx: 36,
+            defaultMinPx: 80,
+        });
+    }, [table, allowedIds, hasSelection, columnSizing]);
+    return (_jsx(Table, { ...tableProps, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, gridTemplateColumns: gridTemplateColumns, headerExtras: headerExtras, selectedRows: selectedRows, onRowSelect: onRowSelect }));
 }

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

@@ -2,14 +2,12 @@ export function getVisibleColumns(columns) {
     return columns.filter(c => !c.hidden);
 }
 export function getColumnStyle(columnId, columnStyles, alignment, verticalAlignment) {
-    var _a;
     const baseStyle = columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[columnId];
     return {
         ...(baseStyle !== null && baseStyle !== void 0 ? baseStyle : {}),
         ...(alignment === 'right' ? { fontVariantNumeric: 'tabular-nums' } : null),
         verticalAlign: verticalAlignment !== null && verticalAlignment !== void 0 ? verticalAlignment : 'top',
         textAlign: alignment !== null && alignment !== void 0 ? alignment : 'left',
-        minWidth: (_a = baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.minWidth) !== null && _a !== void 0 ? _a : 0,
     };
 }
 export function getHeaderLabel(header) {

package/dist/src/styles/styles.css

@@ -60,12 +60,15 @@ body.dbc-app {
 
 .dbc-table {
   --card-label-width: 260px;
-
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
 }
 
+.dbc-table--hover tr:hover {
+  background-color: var(--color-bg-contextual);
+}
+
 .dbc-table tr + tr th,
 .dbc-table tr + tr td {
   padding-block: var(--spacing-xxs);

package/dist/styles/styles.css

@@ -60,12 +60,15 @@ body.dbc-app {
 
 .dbc-table {
   --card-label-width: 260px;
-
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
 }
 
+.dbc-table--hover tr:hover {
+  background-color: var(--color-bg-contextual);
+}
+
 .dbc-table tr + tr th,
 .dbc-table tr + tr td {
   padding-block: var(--spacing-xxs);

package/package.json

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