@dbcdk/react-components 0.0.10 → 0.0.13

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);
 }
@@ -37,19 +40,31 @@
 
 .table .th {
   position: relative;
+
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-md);
-  text-align: start;
+  padding-right: var(--spacing-lg);
+
+  text-align: left;
   vertical-align: middle;
+
   background: inherit;
 
-  color: var(--color-fg-muted);
+  /* Typography */
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
 
+  color: var(--color-fg-subtle);
+
+  /* Truncation */
   white-space: nowrap;
-  min-width: unset;
-  max-width: unset;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  /* Width control */
+  min-width: 0;
 }
 
 /* Small variant: header padding */
@@ -57,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 {
@@ -90,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
    ========================= */
@@ -137,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,
@@ -176,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,
@@ -214,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),
@@ -259,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;
@@ -275,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,14 +1,18 @@
-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';
 type Filterable<T> = Array<keyof T>;
-export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerBelowRow' | 'headerExtras' | 'columnStyles'> & {
+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;
+    sorting?: SortingState;
+    manualSorting?: boolean;
+    onSortingChange?: (next: SortingState) => void;
+    optimisticSortingUi?: boolean;
     variant?: TableVariant;
     viewMode?: ViewMode;
+    visibleColumnIds?: string[];
 };
 export declare function TanstackTable<T extends Record<string, any>>(props: TanstackTableProps<T>): React.ReactNode;
 export {};

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;

package/dist/components/table/components/column-resizer/ColumnResizer.module.css

@@ -1,13 +1,23 @@
 .resizer {
-  display: inline-block;
-  width: 1px;
-  background-color: var(--opac-bg-default);
-  height: 60%;
   position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
+  right: -6px; /* extend hit area into both columns */
+  top: 0;
+  height: 100%;
+  width: 12px; /* big invisible hit area */
   cursor: col-resize;
   user-select: none;
   touch-action: none;
+  z-index: 20;
+}
+
+.resizer::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1px; /* visual thickness */
+  height: 60%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--opac-bg-default);
 }

package/dist/components/table/components/table-settings/TableSettings.d.ts

@@ -1,8 +1,18 @@
-import type { JSX } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import type { JSX, ReactNode } from 'react';
 import { ViewMode } from '../../../../hooks/useTableSettings';
-interface TableSettingsProps {
+import { ButtonSize } from '../../../button/Button';
+interface TableSettingsProps<T extends Record<string, any>> {
     handleChangeViewMode: (mode: ViewMode) => void;
     viewMode: ViewMode;
+    columns?: ColumnDef<T>[];
+    visibleColumnIds?: string[];
+    onVisibleColumnIdsChange?: (nextVisibleIds: string[]) => void;
+    columnsLabel?: string;
+    allPresetLabel?: string;
+    standardPresetLabel?: string;
+    buttonSize?: ButtonSize;
+    additionalSettings?: (close?: () => void) => ReactNode;
 }
-export declare function TableSettings({ viewMode, handleChangeViewMode }: TableSettingsProps): JSX.Element;
+export declare function TableSettings<T extends Record<string, any>>({ viewMode, handleChangeViewMode, columns, visibleColumnIds, onVisibleColumnIdsChange, columnsLabel, allPresetLabel, standardPresetLabel, buttonSize, additionalSettings, }: TableSettingsProps<T>): JSX.Element;
 export {};

package/dist/components/table/components/table-settings/TableSettings.js

@@ -1,12 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ListChevronsDownUp, Settings } from 'lucide-react';
+import { useMemo } from 'react';
 import { Button } from '../../../button/Button';
 import { Menu } from '../../../menu/Menu';
 import { Popover } from '../../../popover/Popover';
-export function TableSettings({ viewMode, handleChangeViewMode }) {
+export function TableSettings({ viewMode, handleChangeViewMode, columns = [], visibleColumnIds = [], onVisibleColumnIdsChange, columnsLabel = 'Kolonner', allPresetLabel = 'Alle', standardPresetLabel = 'Standard', buttonSize = 'sm', additionalSettings, }) {
     const handleViewModeChange = (mode, close) => {
-        handleChangeViewMode(mode === 'compact' ? 'compact' : 'comfortable');
+        handleChangeViewMode(mode === 'wrapped' ? 'compact' : 'wrapped');
         close === null || close === void 0 ? void 0 : close();
     };
-    return (_jsx(Popover, { trigger: (onClick, icon) => (_jsxs(Button, { onClick: onClick, children: [_jsx(Settings, {}), icon] })), children: close => (_jsx(Menu, { children: _jsx(Menu.Item, { active: viewMode === 'compact', children: _jsxs("button", { type: "button", onClick: () => handleViewModeChange('compact', close), children: [_jsx(ListChevronsDownUp, {}), "Kompakt"] }) }) })) }));
+    const hideableColumns = useMemo(() => columns.filter(c => c.enableHiding !== false), [columns]);
+    const allPresetIds = useMemo(() => hideableColumns.map(c => c.id), [hideableColumns]);
+    const standardPresetIds = useMemo(() => hideableColumns.filter(c => { var _a; return ((_a = c.meta) === null || _a === void 0 ? void 0 : _a.hidden) !== true; }).map(c => c.id), [hideableColumns]);
+    const visibleSet = useMemo(() => new Set(visibleColumnIds), [visibleColumnIds]);
+    const visibleCount = useMemo(() => {
+        return hideableColumns.reduce((acc, c) => { var _a; return acc + (visibleSet.has((_a = c.id) !== null && _a !== void 0 ? _a : '') ? 1 : 0); }, 0);
+    }, [hideableColumns, visibleSet]);
+    const setVisibleIds = (nextIds) => {
+        if (!onVisibleColumnIdsChange)
+            return;
+        const safe = nextIds.length > 0 ? nextIds : standardPresetIds.length > 0 ? standardPresetIds : allPresetIds;
+        onVisibleColumnIdsChange(safe.filter((id) => typeof id === 'string' && Boolean(id)));
+    };
+    const toggleColumn = (id, nextVisible) => {
+        const next = new Set(visibleColumnIds);
+        if (nextVisible)
+            next.add(id);
+        else
+            next.delete(id);
+        setVisibleIds(Array.from(next));
+    };
+    const isAllActive = useMemo(() => {
+        if (!hideableColumns.length)
+            return false;
+        return hideableColumns.every(c => c.id && visibleSet.has(c.id));
+    }, [hideableColumns, visibleSet]);
+    const isStandardActive = useMemo(() => {
+        if (!hideableColumns.length)
+            return false;
+        const std = new Set(standardPresetIds);
+        return hideableColumns.every(c => c.id && visibleSet.has(c.id) === std.has(c.id));
+    }, [hideableColumns, visibleSet, standardPresetIds]);
+    // Required by your RadioButton component
+    const presetRadioName = 'table-columns-preset';
+    return (_jsx(Popover, { trigger: (onClick, icon) => (_jsxs(Button, { size: buttonSize, onClick: onClick, type: "button", children: [_jsx(Settings, {}), icon] })), children: close => (_jsxs(Menu, { children: [additionalSettings === null || additionalSettings === void 0 ? void 0 : additionalSettings(close), _jsx(Menu.Item, { active: viewMode === 'wrapped', children: _jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [_jsx(ListChevronsDownUp, {}), "Ombryd tekst"] }) }), hideableColumns.length > 0 && onVisibleColumnIdsChange ? (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, {}), _jsx("div", { style: { padding: '6px 10px', fontSize: 12, opacity: 0.7 }, children: columnsLabel }), _jsx(Menu.RadioItem, { name: presetRadioName, value: "all", checked: isAllActive, label: allPresetLabel, onValueChange: () => {
+                                setVisibleIds(allPresetIds.filter((id) => typeof id === 'string' && Boolean(id)));
+                                close === null || close === void 0 ? void 0 : close();
+                            } }), _jsx(Menu.RadioItem, { name: presetRadioName, value: "standard", checked: isStandardActive, label: standardPresetLabel, onValueChange: () => {
+                                setVisibleIds(standardPresetIds.filter((id) => typeof id === 'string' && Boolean(id)));
+                                close === null || close === void 0 ? void 0 : close();
+                            } }), _jsx(Menu.Separator, {}), hideableColumns.map(col => {
+                            const isVisible = col.id ? visibleSet.has(col.id) : false;
+                            const disableUncheckingLast = isVisible && visibleCount <= 1;
+                            const label = col.header;
+                            return (_jsx(Menu.CheckItem, { checked: isVisible, disabled: disableUncheckingLast, label: label, onCheckedChange: nextChecked => {
+                                    if (disableUncheckingLast)
+                                        return;
+                                    toggleColumn(col.id, nextChecked);
+                                } }, col.id));
+                        })] })) : null] })) }));
 }

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

@@ -0,0 +1,17 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ColumnItem } from './Table';
+export type SortDirection = 'asc' | 'desc' | null;
+export declare function getVisibleColumns<T>(columns: Array<ColumnItem<T>>): Array<ColumnItem<T>>;
+export declare function getColumnStyle(columnId: string, columnStyles: Partial<Record<string, CSSProperties>> | undefined, alignment?: 'left' | 'right' | 'center', verticalAlignment?: 'top' | 'middle' | 'bottom'): CSSProperties;
+export declare function getHeaderLabel(header: string | (() => ReactNode)): ReactNode;
+export declare function isActiveSort(sortById: string | undefined, columnId: string): boolean;
+export declare function getAriaSort(sortable: boolean | undefined, active: boolean, direction: SortDirection): 'ascending' | 'descending' | 'none';
+export declare function getNextSortDirection(sortable: boolean | undefined, active: boolean, currentDirection: SortDirection): SortDirection;
+export declare function shouldToggleOnKey(key: string): boolean;
+export declare function isModifierClick(e: {
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+}): boolean;
+export declare function shouldAllowWrap(columnAllowWrap: boolean | undefined, isRowSelected: boolean, viewMode?: 'wrapped' | string): boolean;
+export declare function getCellDisplayValue<T extends Record<string, any>>(row: T, column: ColumnItem<T>): ReactNode;
+export declare function getRowKey(rowId: string | number): string;

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

@@ -0,0 +1,61 @@
+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) {
+    return typeof header === 'function' ? header() : header;
+}
+export function isActiveSort(sortById, columnId) {
+    return sortById === columnId;
+}
+export function getAriaSort(sortable, active, direction) {
+    if (!sortable)
+        return 'none';
+    if (!active)
+        return 'none';
+    return direction === 'asc' ? 'ascending' : 'descending';
+}
+export function getNextSortDirection(sortable, active, currentDirection) {
+    if (!sortable)
+        return null;
+    if (!active)
+        return 'asc';
+    if (currentDirection === 'asc')
+        return 'desc';
+    return null;
+}
+export function shouldToggleOnKey(key) {
+    return key === 'Enter' || key === ' ';
+}
+export function isModifierClick(e) {
+    return Boolean(e.metaKey || e.ctrlKey);
+}
+export function shouldAllowWrap(columnAllowWrap, isRowSelected, viewMode) {
+    return Boolean(columnAllowWrap || isRowSelected || viewMode === 'wrapped');
+}
+export function getCellDisplayValue(row, column) {
+    var _a;
+    const empty = (_a = column.emptyPlaceholder) !== null && _a !== void 0 ? _a : '';
+    if (column.render) {
+        const rendered = column.render(row);
+        return rendered || empty;
+    }
+    if (column.accessor) {
+        const value = row[column.accessor];
+        return value || empty;
+    }
+    return null;
+}
+export function getRowKey(rowId) {
+    return `tableRow-${String(rowId)}`;
+}

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

@@ -0,0 +1,22 @@
+import type { ColumnDef, SortingState, VisibilityState, Column } from '@tanstack/react-table';
+import type { CSSProperties } from 'react';
+import type { ColumnItem } from './Table';
+type AnyRecord = Record<string, any>;
+export declare function getColumnId<T>(def: ColumnDef<T, any>, index: number): string;
+export declare function buildColumnVisibilityFromVisibleIds<T>(defs: ReadonlyArray<ColumnDef<T, any>>, visibleColumnIds?: string[]): VisibilityState;
+export declare function mapDefsToColumnItems<T extends AnyRecord>(defs: ReadonlyArray<ColumnDef<T, any>>, columnVisibility: VisibilityState): ColumnItem<T>[];
+export declare function sortingEqual(a: SortingState, b: SortingState): boolean;
+export declare function getSortPropsFromSorting(sorting: SortingState): {
+    sortById?: string;
+    sortDirection: 'asc' | 'desc' | null;
+};
+/**
+ * Builds `columnStyles` where TanStack is source of truth.
+ * Keep this util pure by passing in the leaf columns and the set of allowed IDs.
+ */
+export declare function buildColumnStyles(leafColumns: Array<Pick<Column<any, any>, 'id' | 'getSize' | 'columnDef'>>, allowedIds: Set<string>, defaults?: {
+    minWidth: number;
+    maxWidth: number;
+}): Record<string, CSSProperties>;
+export declare function columnItemsToIdSet<T>(items: Array<ColumnItem<T>>): Set<string>;
+export {};

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

@@ -0,0 +1,104 @@
+export function getColumnId(def, index) {
+    const d = def;
+    if (d.id != null && String(d.id).length)
+        return String(d.id);
+    if (d.accessorKey != null && String(d.accessorKey).length)
+        return String(d.accessorKey);
+    return `col_${index}`;
+}
+export function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
+    if (!(visibleColumnIds === null || visibleColumnIds === void 0 ? void 0 : visibleColumnIds.length))
+        return {};
+    const visible = new Set(visibleColumnIds);
+    const next = {};
+    defs.forEach((def, index) => {
+        const id = getColumnId(def, index);
+        next[id] = visible.has(id);
+    });
+    return next;
+}
+export function mapDefsToColumnItems(defs, columnVisibility) {
+    return defs.map((def, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const id = getColumnId(def, index);
+        const accessorKey = def.accessorKey;
+        const accessorFn = def.accessorFn;
+        const cell = def.cell;
+        let render;
+        if (typeof cell === 'function') {
+            render = (row) => cell({
+                row: { original: row },
+                getValue: () => accessorKey != null
+                    ? row[accessorKey]
+                    : accessorFn
+                        ? accessorFn(row)
+                        : undefined,
+            });
+        }
+        else if (accessorFn) {
+            render = (row) => accessorFn(row);
+        }
+        else if (accessorKey != null) {
+            render = (row) => row[accessorKey];
+        }
+        else {
+            render = () => null;
+        }
+        const isVisible = (_a = columnVisibility[id]) !== null && _a !== void 0 ? _a : true;
+        return {
+            id,
+            header: def.header,
+            accessor: accessorKey,
+            sortable: (_b = def.enableSorting) !== null && _b !== void 0 ? _b : !!accessorKey,
+            render,
+            hidden: !isVisible,
+            align: (_d = (_c = def.meta) === null || _c === void 0 ? void 0 : _c.align) !== null && _d !== void 0 ? _d : undefined,
+            verticalAlign: (_f = (_e = def.meta) === null || _e === void 0 ? void 0 : _e.verticalAlign) !== null && _f !== void 0 ? _f : undefined,
+            emptyPlaceholder: (_h = (_g = def.meta) === null || _g === void 0 ? void 0 : _g.emptyPlaceholder) !== null && _h !== void 0 ? _h : '-',
+            allowWrap: (_k = (_j = def.meta) === null || _j === void 0 ? void 0 : _j.allowWrap) !== null && _k !== void 0 ? _k : false,
+            severity: (_m = (_l = def.meta) === null || _l === void 0 ? void 0 : _l.severity) !== null && _m !== void 0 ? _m : undefined,
+        };
+    });
+}
+export function sortingEqual(a, b) {
+    const A = a === null || a === void 0 ? void 0 : a[0];
+    const B = b === null || b === void 0 ? void 0 : b[0];
+    if (!A && !B)
+        return true;
+    if (!A || !B)
+        return false;
+    return A.id === B.id && A.desc === B.desc;
+}
+export function getSortPropsFromSorting(sorting) {
+    const s = sorting === null || sorting === void 0 ? void 0 : sorting[0];
+    return {
+        sortById: s === null || s === void 0 ? void 0 : s.id,
+        sortDirection: s ? (s.desc ? 'desc' : 'asc') : null,
+    };
+}
+/**
+ * Builds `columnStyles` where TanStack is source of truth.
+ * Keep this util pure by passing in the leaf columns and the set of allowed IDs.
+ */
+export function buildColumnStyles(leafColumns, allowedIds, defaults = { minWidth: 80, maxWidth: 800 }) {
+    var _a, _b;
+    const styles = {};
+    for (const c of leafColumns) {
+        const id = c.id;
+        if (!allowedIds.has(id))
+            continue;
+        const anyDef = c.columnDef;
+        styles[id] = {
+            width: c.getSize(),
+            minWidth: (_a = anyDef.minSize) !== null && _a !== void 0 ? _a : defaults.minWidth,
+            maxWidth: (_b = anyDef.maxSize) !== null && _b !== void 0 ? _b : defaults.maxWidth,
+        };
+    }
+    return styles;
+}
+export function columnItemsToIdSet(items) {
+    const s = new Set();
+    for (const c of items)
+        s.add(c.id);
+    return s;
+}