@dbcdk/react-components 0.0.12 → 0.0.13

package/dist/components/sticky-footer-layout/StickyFooterLayout.d.ts

@@ -2,18 +2,13 @@ import React, { JSX } from 'react';
 type StickyFooterLayoutProps = {
     children: React.ReactNode;
     footer: React.ReactNode;
-    /** defaults to 550 */
-    width?: number | string;
-    /** match the app chrome padding token (defaults to --spacing-md) */
+    maxWidth?: number | string;
     chromePaddingVar?: string;
-    /** inner padding for content (defaults to "var(--spacing-md) 0") */
     contentPadding?: string;
-    /** background used to “paint over” what scrolls behind */
     background?: string;
-    /** extra space below content so last field doesn't sit under footer */
+    /** extra space below content so last field doesn't sit too close to footer */
     contentBottomSpacer?: string | number;
-    /** optional classnames */
     className?: string;
 };
-export declare function StickyFooterLayout({ children, footer, width, chromePaddingVar, contentPadding, background, contentBottomSpacer, className, }: StickyFooterLayoutProps): JSX.Element;
+export declare function StickyFooterLayout({ children, footer, maxWidth, chromePaddingVar, contentPadding, background, contentBottomSpacer, className, }: StickyFooterLayoutProps): JSX.Element;
 export {};

package/dist/components/sticky-footer-layout/StickyFooterLayout.js

@@ -1,27 +1,64 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function StickyFooterLayout({ children, footer, width = 550, chromePaddingVar = '--spacing-md', contentPadding = 'var(--spacing-md) 0', background = 'white', contentBottomSpacer, className, }) {
+import { useLayoutEffect, useRef, useState } from 'react';
+export function StickyFooterLayout({ children, footer, maxWidth = 550, chromePaddingVar = '--spacing-md', contentPadding = '0', background = 'var(--color-bg-surface)', contentBottomSpacer = '16px', className, }) {
     const pad = `var(${chromePaddingVar})`;
-    return (_jsxs("div", { className: className !== null && className !== void 0 ? className : 'dbc-flex dbc-flex-column dbc-flex-grow', style: {
-            width,
-            position: 'relative',
-            background,
-        }, children: [_jsx("div", { className: "dbc-flex-grow", style: {
+    const contentColRef = useRef(null);
+    const footerOverlayRef = useRef(null);
+    const [dock, setDock] = useState({
+        left: 0,
+        width: typeof maxWidth === 'number' ? maxWidth : 550,
+    });
+    const [overlayHeight, setOverlayHeight] = useState(0);
+    // Measure the LEFT + WIDTH of the content column (for aligning footer inner)
+    useLayoutEffect(() => {
+        const el = contentColRef.current;
+        if (!el)
+            return;
+        const measure = () => {
+            const rect = el.getBoundingClientRect();
+            setDock({ left: rect.left, width: rect.width });
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        window.addEventListener('resize', measure);
+        return () => {
+            ro.disconnect();
+            window.removeEventListener('resize', measure);
+        };
+    }, []);
+    // Measure the ACTUAL fixed footer overlay height (includes paddingBlock, borders, etc.)
+    useLayoutEffect(() => {
+        const el = footerOverlayRef.current;
+        if (!el)
+            return;
+        const measure = () => setOverlayHeight(el.getBoundingClientRect().height);
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    const bottomPad = `calc(${overlayHeight}px + ${String(contentBottomSpacer)})`;
+    return (_jsxs("div", { className: className, style: { background }, children: [_jsx("div", { ref: contentColRef, style: {
+                    maxWidth,
+                    boxSizing: 'border-box',
                     padding: contentPadding,
-                    paddingBottom: contentBottomSpacer
-                        ? `calc(${contentPadding.split(' ')[0] || pad} + ${String(contentBottomSpacer)})`
-                        : undefined,
-                }, children: children }), _jsx("div", { style: {
-                    position: 'sticky',
-                    // stick into chrome padding area
-                    bottom: `calc(-1 * ${pad})`,
+                    paddingBottom: bottomPad,
+                }, children: children }), _jsx("div", { ref: footerOverlayRef, style: {
+                    position: 'fixed',
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
                     zIndex: 10,
                     background,
-                    // bleed into the padded chrome so nothing peeks through
-                    marginLeft: `calc(-1 * ${pad})`,
-                    marginRight: `calc(-1 * ${pad})`,
-                    marginBottom: `calc(-1 * ${pad})`,
-                    // keep inner alignment
-                    padding: pad,
-                }, className: "dbc-flex dbc-justify-end", children: footer })] }));
+                    paddingBlock: pad,
+                    boxSizing: 'border-box',
+                }, children: _jsx("div", { style: {
+                        position: 'relative',
+                        left: dock.left,
+                        width: dock.width,
+                        boxSizing: 'border-box',
+                        /* you said you removed padding-inline to match form edge exactly */
+                    }, className: "dbc-flex dbc-justify-end", children: footer }) })] }));
 }

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

@@ -4,7 +4,7 @@ import { Severity } from '../../constants/severity.types';
 import { PageChangeEvent } from '../../components/pagination/Pagination';
 import { ViewMode } from '../../hooks/useTableSettings';
 import { TableEmptyConfig } from './components/empty-state/EmptyState';
-type SortDirection = 'asc' | 'desc' | null;
+import { SortDirection } from './table.utils';
 export interface ColumnItem<T> {
     id: string;
     header: string | (() => ReactNode);
@@ -15,11 +15,10 @@ export interface ColumnItem<T> {
     hidden?: boolean;
     align?: 'left' | 'right' | 'center';
     verticalAlign?: 'top' | 'middle' | 'bottom';
-    fitContent?: boolean;
     allowWrap?: boolean;
     emptyPlaceholder?: ReactNode;
-    width?: number | string;
     canHide?: boolean;
+    severity?: any;
 }
 type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
@@ -42,10 +41,6 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     loading?: boolean;
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     columnStyles?: Partial<Record<string, React.CSSProperties>>;
-    headerBelowRow?: ReactNode;
-    /**
-     * NEW: optional toolbar area above the table (right now used for column selector)
-     */
     toolbar?: ReactNode;
     striped?: boolean;
     fillViewport?: boolean;
@@ -64,5 +59,5 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     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, headerBelowRow, 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, 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 {};

package/dist/components/table/Table.js

@@ -9,75 +9,48 @@ 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';
-export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, 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(() => columns.filter(c => !c.hidden), [columns]);
-    const handlePageChange = useCallback((e) => {
-        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
-    }, [onPageChange]);
-    const getColStyle = (columnId, alignment, verticalAlignment, width) => {
-        const baseStyle = columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[columnId];
-        return {
-            ...(baseStyle !== null && baseStyle !== void 0 ? baseStyle : {}),
-            ...(alignment === 'right' && { fontVariantNumeric: 'tabular-nums' }),
-            verticalAlign: verticalAlignment !== null && verticalAlignment !== void 0 ? verticalAlignment : 'top',
-            textAlign: alignment !== null && alignment !== void 0 ? alignment : 'left',
-            width: width !== null && width !== void 0 ? width : baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.width,
-            minWidth: width !== null && width !== void 0 ? width : baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.minWidth,
-        };
-    };
+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 }) {
+    const filteredColumns = useMemo(() => getVisibleColumns(columns), [columns]);
+    const handlePageChange = useCallback((e) => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e), [onPageChange]);
     const scrollRef = useRef(null);
     const { style: viewportStyle } = useViewportFill(scrollRef, {
-        bottomOffset: viewportBottomOffset + 60,
+        bottomOffset: viewportBottomOffset + (onPageChange ? 60 : 0),
         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: [_jsxs("thead", { children: [_jsxs("tr", { children: [selectedRows && onRowSelect && dataKey && (_jsx("th", { className: `${styles.fitContent} ${styles.th} $`, 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 isActiveSort = sortById === column.id;
-                                        const ariaSort = column.sortable && isActiveSort
-                                            ? sortDirection === 'asc'
-                                                ? 'ascending'
-                                                : 'descending'
-                                            : 'none';
-                                        const toggleSort = () => {
-                                            if (!onSortChange || !column.sortable)
-                                                return;
-                                            const nextDir = !isActiveSort
-                                                ? 'asc'
-                                                : sortDirection === 'asc'
-                                                    ? 'desc'
-                                                    : null;
-                                            onSortChange(column, nextDir);
-                                        };
-                                        return (_jsx("th", { style: getColStyle(column.id, column.align, 'middle'), "aria-sort": ariaSort, className: `${styles.th} ${column.sortable ? styles.sortable : ''} `, onClick: e => {
-                                                if (!column.sortable)
-                                                    return;
-                                                if (e.target instanceof HTMLElement && e.target.closest('.resizer'))
-                                                    return;
-                                                toggleSort();
-                                            }, role: column.sortable ? 'button' : undefined, tabIndex: column.sortable ? 0 : undefined, onKeyDown: e => {
-                                                if (!column.sortable)
-                                                    return;
-                                                if (e.key === 'Enter' || e.key === ' ') {
-                                                    e.preventDefault();
-                                                    toggleSort();
-                                                }
-                                            }, children: _jsx("div", { className: styles.thInner, children: _jsxs("span", { children: [_jsx("span", { className: styles.thLabel, children: typeof column.header === 'function' ? column.header() : column.header }), column.sortable && (_jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [isActiveSort && sortDirection === 'asc' && _jsx(ArrowUp, {}), isActiveSort && sortDirection === 'desc' && (_jsx(ArrowDown, { className: styles.descending })), !isActiveSort && (_jsx(ArrowDown, { className: `${styles.descending} ${styles.inActiveSort}` }))] })), headerExtras === null || headerExtras === void 0 ? void 0 : headerExtras({ column, index })] }) }) }, column.id));
-                                    })] }), headerBelowRow ? (_jsx("tr", { className: styles.headerBelowRow, children: _jsx("th", { colSpan: filteredColumns.length, children: headerBelowRow }) })) : null] }), 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: getColStyle(column.id, column.align, 'middle', column.width), className: `${styles.tableCell} ${column.fitContent ? 'fitContent' : ''}`, 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, rowIndex) => {
+    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, onClick: toggleSort, onKeyDown: e => {
+                                                        if (shouldToggleOnKey(e.key)) {
+                                                            e.preventDefault();
+                                                            toggleSort();
+                                                        }
+                                                    }, children: [_jsx("span", { className: styles.thLabel, 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, 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);
-                            return (_jsxs("tr", { tabIndex: onRowClick ? 0 : -1, onClick: e => {
-                                    const rowId = row[dataKey];
-                                    const isModifierClick = e.metaKey || e.ctrlKey;
+                            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;
+                                    if (shouldToggleOnKey(e.key)) {
+                                        e.preventDefault();
+                                        onRowClick(row);
+                                    }
+                                }, onClick: e => {
                                     const canSelect = Boolean(selectedRows && onRowSelect && dataKey);
-                                    if (isModifierClick && canSelect) {
+                                    if (isModifierClick(e) && canSelect) {
                                         e.preventDefault();
                                         e.stopPropagation();
-                                        const isSelected = selectedRows.has(rowId);
-                                        if (selectionMode === 'single') {
-                                            onRowSelect(rowId, !isSelected);
-                                        }
-                                        else {
-                                            onRowSelect(rowId, !isSelected);
-                                        }
+                                        onRowSelect(rowId, !selectedRows.has(rowId));
                                         return;
                                     }
                                     onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
@@ -85,18 +58,9 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                                     ['--row-severity-color']: rowSeverity
                                         ? SeverityBgColor[rowSeverity]
                                         : undefined,
-                                }, className: `${onRowClick ? styles.clickableRow : ''} ${(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(row[dataKey])) ? styles.selectedRow : ''} ${rowSeverity ? styles.severity : ''}`, children: [selectedRows && onRowSelect && dataKey && (_jsx("td", { className: `fitContent ${styles.selectionCell}`, onClick: e => e.stopPropagation(), children: _jsx(Checkbox, { variant: "primary", checked: selectedRows.has(row[dataKey]), size: "sm", onChange: () => onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey])) }) })), filteredColumns.map(column => {
-                                        var _a, _b;
-                                        return (_jsx("td", { style: getColStyle(column.id, column.align, column.verticalAlign, column.width), className: `${styles.tableCell} ${column.fitContent ? 'fitContent' : ''} ${column.allowWrap ||
-                                                (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(row[dataKey])) ||
-                                                viewMode === 'wrapped'
-                                                ? styles.allowWrap
-                                                : styles.nowrap} `, children: column.render
-                                                ? column.render(row) || ((_a = column.emptyPlaceholder) !== null && _a !== void 0 ? _a : '')
-                                                : column.accessor
-                                                    ? row[column.accessor] || ((_b = column.emptyPlaceholder) !== null && _b !== void 0 ? _b : '')
-                                                    : null }, column.id));
-                                    })] }, `tableRow-${String(row[dataKey])}-${rowIndex}`));
+                                }, className: `${onRowClick ? styles.clickableRow : ''} ${isSelected ? styles.selectedRow : ''} ${rowSeverity ? styles.severity : ''}`, children: [selectedRows && onRowSelect && dataKey && (_jsx("td", { className: `${styles.selectionCell}`, onClick: e => e.stopPropagation(), children: _jsx(Checkbox, { variant: "primary", checked: selectedRows.has(rowId), size: "sm", onChange: () => onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(rowId, !selectedRows.has(rowId)) }) })), 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 })] }));
     if (fillViewport) {
         return (_jsxs("div", { style: {
@@ -107,10 +71,7 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                 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 }))] }));
     }
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '20px',
+    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 }))] }));

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

@@ -1,3 +1,5 @@
+/* Table.module.css (updated) */
+
 /* =========================
    Base table
    ========================= */
@@ -11,6 +13,7 @@
   font-size: var(--font-size-sm);
   color: var(--color-fg-default);
   background: var(--color-bg-surface);
+  table-layout: auto;
 }
 
 .tableScroll {
@@ -26,7 +29,7 @@
 
 .table thead {
   position: sticky;
-  inset-block-start: 0;
+  top: 0;
   z-index: 10;
   background-color: var(--color-bg-surface);
 }
@@ -62,7 +65,6 @@
 
   /* Width control */
   min-width: 0;
-  max-width: var(--card-label-width);
 }
 
 /* Small variant: header padding */
@@ -70,28 +72,56 @@
   padding-inline: var(--spacing-md);
 }
 
-/* Sortable header behavior */
-.th.sortable {
+/* Header layout */
+.th > .thInner {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  inline-size: 100%;
+}
+
+/* Actual interactive control for sorting */
+.thButton {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  inline-size: 100%;
+
   cursor: pointer;
   user-select: none;
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard);
+
+  /* make it feel like a button */
+  border-radius: var(--border-radius-default);
+  padding-block: 2px;
+  padding-inline: 2px;
 }
 
-.th.sortable:hover,
-th.sortable:hover {
+.thButton:hover {
   background-color: var(--color-bg-contextual);
 }
 
-.th.sortable:focus-visible,
-th.sortable:focus-visible {
+.thButton:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
+.thLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+}
+
+.thExtras {
+  margin-inline-start: auto;
+  display: inline-flex;
+  align-items: center;
+}
+
 .inActiveSort {
   color: var(--color-fg-subtle);
+  opacity: 0.4;
 }
 
 .sortIndicator {
@@ -103,17 +133,6 @@ th.sortable:focus-visible {
   block-size: var(--icon-size-sm);
 }
 
-.th > .thInner {
-  display: inline-block;
-}
-
-.th > .thInner > span {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-  inline-size: 100%;
-}
-
 /* =========================
    Body + cells
    ========================= */
@@ -150,37 +169,24 @@ th.sortable:focus-visible {
    Selection column
    ========================= */
 
-/*
-  Default (no severity rails):
-  Remove ALL inline padding for selection/checkbox cells in both header + body.
-
-  We deliberately use padding-inline (shorthand) so it reliably beats other
-  padding-inline shorthands (like .table.sm .tBody tr td).
-*/
-
-/* Body selection cells (covers td with .selectionCell even if markup differs) */
 .tBody tr td.selectionCell,
 .table .tBody tr td.selectionCell,
 .table td.selectionCell {
   padding-inline: var(--spacing-xxs);
 }
 
-/* Header selection cells:
-   - covers your .th class
-   - AND real <th> elements that might not have the .th class */
 .table .th.selectionCell,
 .table th.selectionCell,
 th.selectionCell {
-  padding-inline: var(--spacing-xxs);
+  width: 34px !important;
 }
 
-/* Override the .table.sm .tBody tr td padding-inline (must be as-specific or more) */
+/* 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);
 }
 
-/* If severity rails are enabled, reserve a left gutter (still no right padding) */
 .table.severityTable .tBody tr td.selectionCell,
 .table.severityTable td.selectionCell,
 .table.severityTable .th.selectionCell,
@@ -189,7 +195,6 @@ th.selectionCell {
   padding-inline-start: 14px;
 }
 
-/* Ensure severityTable also wins in sm */
 .table.sm.severityTable .tBody tr td.selectionCell,
 .table.table.sm.severityTable .tBody tr td.selectionCell,
 .table.sm.severityTable .th.selectionCell,
@@ -227,8 +232,8 @@ th.selectionCell {
   background-color: var(--color-bg-surface-subtle);
 }
 
-/* Focus ring */
-.table .tbody tr:focus-within {
+/* Focus ring (fix selector: .tBody, not .tbody) */
+.table .tBody tr:focus-within {
   outline: none;
   box-shadow:
     inset 2px 0 0 var(--color-brand),
@@ -272,7 +277,6 @@ th.selectionCell {
   position: relative;
 }
 
-/* Only render the rail when the table actually uses severity rails */
 .table.severityTable .tBody tr.severity td:first-child::before {
   content: '';
   position: absolute;
@@ -288,7 +292,6 @@ th.selectionCell {
   z-index: 0;
 }
 
-/* keep checkbox/content above the rail */
 .table.severityTable .tBody tr.severity td:first-child > * {
   position: relative;
   z-index: 1;

package/dist/components/table/{tanstack.d.ts → TanstackTable.d.ts}

@@ -1,4 +1,4 @@
-import { type ColumnDef } from '@tanstack/react-table';
+import { type ColumnDef, type SortingState } from '@tanstack/react-table';
 import * as React from 'react';
 import { type TableProps, type TableVariant } from './Table';
 import { ViewMode } from '../../hooks/useTableSettings';
@@ -6,19 +6,12 @@ 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'> & {
     columns: ReadonlyArray<ColumnDef<T, any>>;
     filterable?: Filterable<T>;
-    onSortingChange?: (sortBy: string | number | symbol | null, direction: 'asc' | 'desc' | null) => void;
-    initialSortBy?: string;
-    initialSortDirection?: 'asc' | 'desc';
+    sorting?: SortingState;
+    manualSorting?: boolean;
+    onSortingChange?: (next: SortingState) => void;
+    optimisticSortingUi?: boolean;
     variant?: TableVariant;
     viewMode?: ViewMode;
-    /**
-     * TanStack-agnostic column visibility input.
-     *
-     * If provided, this list is the single source of truth for which columns are visible.
-     * If not provided (or empty), defaults are derived from ColumnDef meta.hidden.
-     *
-     * NOTE: Passing [] is treated as "unset" and will fall back to defaults.
-     */
     visibleColumnIds?: string[];
 };
 export declare function TanstackTable<T extends Record<string, any>>(props: TanstackTableProps<T>): React.ReactNode;

package/dist/components/table/TanstackTable.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, } from '@tanstack/react-table';
+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';
+export function TanstackTable(props) {
+    const { data, dataKey, columns, filterable = [], sorting: controlledSorting, onSortingChange, optimisticSortingUi = true, visibleColumnIds, manualSorting, ...tableProps } = props;
+    const isControlledSorting = controlledSorting != null;
+    const [uiSorting, setUiSorting] = React.useState(controlledSorting !== null && controlledSorting !== void 0 ? controlledSorting : []);
+    React.useEffect(() => {
+        if (!isControlledSorting)
+            return;
+        if (sortingEqual(uiSorting, controlledSorting))
+            return;
+        setUiSorting(controlledSorting);
+    }, [isControlledSorting, controlledSorting, uiSorting]);
+    const columnVisibility = React.useMemo(() => buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds), [columns, visibleColumnIds]);
+    const [columnFilters, setColumnFilters] = React.useState([]);
+    const [columnSizing, setColumnSizing] = React.useState({});
+    const table = useReactTable({
+        data,
+        columns: columns,
+        state: {
+            sorting: uiSorting,
+            columnFilters,
+            columnSizing,
+            columnVisibility,
+        },
+        onSortingChange: updater => {
+            const next = typeof updater === 'function' ? updater(uiSorting) : updater;
+            if (optimisticSortingUi)
+                setUiSorting(next);
+            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
+        },
+        onColumnFiltersChange: setColumnFilters,
+        onColumnSizingChange: setColumnSizing,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        manualSorting: manualSorting !== null && manualSorting !== void 0 ? manualSorting : false,
+        enableColumnResizing: true,
+        columnResizeMode: 'onChange',
+        defaultColumn: {
+            enableResizing: true,
+            minSize: 80,
+            size: 180,
+            maxSize: 300,
+        },
+    });
+    const columnItems = React.useMemo(() => mapDefsToColumnItems(columns, columnVisibility), [columns, columnVisibility]);
+    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;
+        const headerGroups = table.getHeaderGroups();
+        const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
+        const header = leafHeaders[index];
+        if (!header)
+            return null;
+        const canResize = (_c = (_b = (_a = header.column).getCanResize) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : false;
+        const handler = (_d = header.getResizeHandler) === null || _d === void 0 ? void 0 : _d.call(header);
+        if (!canResize || !handler)
+            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 }));
+}

package/dist/components/table/components/column-resizer/ColumnResizer.js

@@ -1,5 +1,5 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './ColumnResizer.module.css';
-const ColumnResizer = ({ id, handler }) => (_jsx("span", { className: styles.resizer, onMouseDown: handler, onTouchStart: handler, role: "separator", "aria-label": `Resize ${id}` }));
+const ColumnResizer = ({ id, handler }) => (_jsx("span", { className: styles.resizer, "data-resizer": "true", onMouseDown: handler, onTouchStart: handler, role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${id}` }));
 export default ColumnResizer;