@rovula/ui 0.1.28 → 0.1.30

package/dist/components/DataTable/DataTable.js

@@ -1,70 +1,1013 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { flexRender, getCoreRowModel, getFilteredRowModel, 
-// getPaginationRowModel,
-getSortedRowModel, useReactTable, } from "@tanstack/react-table";
-import { useEffect, useRef, useState } from "react";
-import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon, ClipboardDocumentListIcon, } from "@heroicons/react/16/solid";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../Table/Table";
-export function DataTable({ data, columns, manualSorting = false, onSorting, fetchMoreData, }) {
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+function columnMetaAlignClass(meta) {
+    switch (meta === null || meta === void 0 ? void 0 : meta.align) {
+        case "center":
+            return "text-center";
+        case "right":
+            return "text-right";
+        case "left":
+            return "text-left";
+        default:
+            return undefined;
+    }
+}
+/**
+ * Walk visible body cells left-to-right; when a column defines `meta.colSpan`,
+ * emit one `<td>` spanning that many columns and skip the covered cells.
+ */
+function getVisibleCellsForRender(cells) {
+    const out = [];
+    let i = 0;
+    while (i < cells.length) {
+        const cell = cells[i];
+        const meta = cell.column.columnDef.meta;
+        let want = 1;
+        if ((meta === null || meta === void 0 ? void 0 : meta.colSpan) != null) {
+            const raw = typeof meta.colSpan === "function"
+                ? meta.colSpan(cell.row)
+                : meta.colSpan;
+            const n = Math.floor(Number(raw));
+            if (Number.isFinite(n) && n >= 1)
+                want = n;
+        }
+        const maxSpan = cells.length - i;
+        const colSpan = Math.min(want, maxSpan);
+        out.push({ cell, colSpan: Math.max(1, colSpan) });
+        i += Math.max(1, colSpan);
+    }
+    return out;
+}
+function renderDataTableBodyCells(opts) {
+    const { row, getSubRows, firstDataCellId, fixedColStyles, flexWidth, lockPxExactWidth, resizable, tableLayout, resizableSlackGrowColId, cellClassName, onCellClick, } = opts;
+    return getVisibleCellsForRender(row.getVisibleCells()).map(({ cell, colSpan }) => {
+        var _a;
+        const isFirstDataCell = Boolean(getSubRows) && cell.id === firstDataCellId(row);
+        const usePixelResizeWidth = resizable &&
+            tableLayout !== "equal" &&
+            !(resizableSlackGrowColId != null &&
+                cell.column.id === resizableSlackGrowColId);
+        return (_jsx(TableCell, { colSpan: colSpan > 1 ? colSpan : undefined, style: resolveBodyCellWidthStyle(cell.column.columnDef, fixedColStyles === null || fixedColStyles === void 0 ? void 0 : fixedColStyles.get(cell.column.id), flexWidth, lockPxExactWidth, usePixelResizeWidth ? cell.column.getSize() : undefined), className: cn(columnMetaAlignClass(cell.column.columnDef.meta), (_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.cellClassName, typeof cellClassName === "function"
+                ? cellClassName(cell, row)
+                : cellClassName), onClick: onCellClick
+                ? (e) => onCellClick(cell, row, e)
+                : undefined, children: isFirstDataCell ? (_jsxs("div", { className: "flex items-center gap-1", style: { paddingLeft: `${row.depth * 20}px` }, children: [row.getCanExpand() ? (_jsx("button", { type: "button", onClick: row.getToggleExpandedHandler(), className: "flex items-center justify-center size-5 rounded hover:bg-table-c-hover shrink-0 transition-colors", "aria-label": row.getIsExpanded() ? "Collapse" : "Expand", children: row.getIsExpanded() ? (_jsx(ChevronDown, { className: "size-4" })) : (_jsx(ChevronRight, { className: "size-4" })) })) : (_jsx("span", { className: "size-5 shrink-0" })), flexRender(cell.column.columnDef.cell, cell.getContext())] })) : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id));
+    });
+}
+import * as Portal from "@radix-ui/react-portal";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
+import { restrictToVerticalAxis, restrictToParentElement, } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, ChevronRight, ClipboardList, Columns3, EllipsisVertical, Equal, EyeOff, Loader2, } from "lucide-react";
+import ActionButton from "@/components/ActionButton/ActionButton";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/DropdownMenu/DropdownMenu";
+import { Checkbox } from "../Checkbox/Checkbox";
+import { Switch } from "../Switch/Switch";
+import Button from "../Button/Button";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TablePagination, TableRow, } from "../Table/Table";
+import { cn } from "@/utils/cn";
+import { EditContext, useDataTableEditing, resolveEditableColumns, detectEditableColumnIds, } from "./DataTable.editing";
+// ---------------------------------------------------------------------------
+// Checkbox column builder
+// ---------------------------------------------------------------------------
+function buildCheckboxColumn() {
+    return {
+        id: "__select__",
+        header: ({ table }) => (_jsx(Checkbox, { checked: table.getIsSomeRowsSelected()
+                ? "indeterminate"
+                : table.getIsAllRowsSelected(), onCheckedChange: (v) => table.toggleAllRowsSelected(!!v), "aria-label": "Select all" })),
+        cell: ({ row }) => (_jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (v) => row.toggleSelected(!!v), "aria-label": "Select row", disabled: !row.getCanSelect() })),
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        size: 42,
+        maxSize: 42,
+        minSize: 42,
+        meta: { exactWidth: 42 },
+    };
+}
+// ---------------------------------------------------------------------------
+// Row-actions column builder
+// ---------------------------------------------------------------------------
+function buildActionsColumn(render) {
+    return {
+        id: "__actions__",
+        header: () => null,
+        cell: ({ row }) => (_jsx("div", { className: "flex items-center justify-center gap-1", children: render(row) })),
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        size: 80,
+        maxSize: 80,
+        minSize: 80,
+        meta: { exactWidth: 80 },
+    };
+}
+// ---------------------------------------------------------------------------
+// Row-reorder drag-handle column
+// ---------------------------------------------------------------------------
+function buildReorderColumn() {
+    return {
+        id: "__reorder__",
+        header: () => null,
+        cell: ({ row }) => _jsx(RowDragHandle, { rowId: row.id }),
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        size: 54,
+        maxSize: 54,
+        minSize: 54,
+        meta: { exactWidth: 54 },
+    };
+}
+function RowDragHandle({ rowId }) {
+    const { attributes, listeners, setNodeRef, isDragging } = useSortable({
+        id: rowId,
+    });
+    return (_jsx(ActionButton, Object.assign({ ref: setNodeRef }, attributes, listeners, { variant: "icon", size: "sm", active: isDragging, className: cn("touch-none", isDragging ? "cursor-grabbing" : "cursor-grab"), "aria-label": "Drag to reorder", children: _jsx(Equal, { className: "!size-4" }) })));
+}
+// ---------------------------------------------------------------------------
+// SortableTableRow — wraps a <TableRow> with dnd-kit sortable transform
+// ---------------------------------------------------------------------------
+function SortableTableRow(_a) {
+    var { id, children } = _a, props = __rest(_a, ["id", "children"]);
+    const { transform, transition, isDragging, setNodeRef } = useSortable({
+        id,
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform ? Object.assign(Object.assign({}, transform), { scaleX: 1, scaleY: 1 }) : null),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+        position: "relative",
+        zIndex: isDragging ? 50 : undefined,
+    };
+    return (_jsx(TableRow, Object.assign({ ref: setNodeRef, style: style }, props, { children: children })));
+}
+const PINNED_START = ["__reorder__", "__select__"];
+const PINNED_END = ["__actions__"];
+/** Label for column-management menu (“Hide {name} column”). */
+function manageColumnHeaderLabel(header) {
+    const h = header.column.columnDef.header;
+    return typeof h === "string" ? h : header.column.id;
+}
+/**
+ * If a column carries `meta.exactWidth`, return CSS that locks the cell to
+ * exactly that width.  Accepts a number (px) or any CSS value / calc().
+ *
+ * Works in every `tableLayout` mode — `minWidth` + `maxWidth` constrain the
+ * cell even in `table-layout: auto` without requiring `table-fixed` on the
+ * table element.  `overflow: hidden` prevents content from pushing wider.
+ */
+function getExactWidthStyle(colDef, lock) {
+    var _a;
+    const w = (_a = colDef.meta) === null || _a === void 0 ? void 0 : _a.exactWidth;
+    if (w == null)
+        return undefined;
+    // Only "lock" when the value is safely lockable (number or px string).
+    // For `calc()`, `%`, `rem`, etc. we apply only `width` even in fixed mode,
+    // otherwise the column becomes rigid in ways that surprise callers.
+    const lockable = exactWidthToPx(w) != null;
+    const shouldLock = lock && lockable;
+    // Lockable = number or "123px" — set all three to that fixed width.
+    // Do NOT use `calc(100% - ${w}px)` here: that means “fill minus w”, not “width = w”.
+    const locked = typeof w === "number" ? `${w}px` : w.trim();
+    return shouldLock
+        ? {
+            width: locked,
+            minWidth: locked,
+            maxWidth: locked,
+            overflow: "hidden",
+            boxSizing: "border-box",
+        }
+        : {
+            width: w,
+        };
+}
+/**
+ * Convert `meta.exactWidth` to a numeric px value (only when possible).
+ * - `number` => px
+ * - `"123px"` => 123
+ * - other string formats => null (can't be summed at build time)
+ */
+function exactWidthToPx(exactWidth) {
+    if (typeof exactWidth === "number") {
+        return Number.isFinite(exactWidth) ? exactWidth : null;
+    }
+    if (typeof exactWidth === "string") {
+        const m = exactWidth.trim().match(/^(-?\d*\.?\d+)\s*px$/i);
+        return m ? parseFloat(m[1]) : null;
+    }
+    return null;
+}
+/**
+ * Compute the auto-fill width for columns that do NOT have `exactWidth`.
+ * Formula: `calc((100% - <totalExactPx>px) / <flexCount>)`
+ *
+ * Only values convertible to numeric px participate in the subtraction.
+ */
+function useFlexColumnWidth(table) {
+    return React.useMemo(() => {
+        var _a;
+        const visible = table.getVisibleLeafColumns();
+        let totalExactPx = 0;
+        let flexCount = 0;
+        for (const col of visible) {
+            const ew = (_a = col.columnDef.meta) === null || _a === void 0 ? void 0 : _a.exactWidth;
+            const asPx = exactWidthToPx(ew);
+            if (asPx != null) {
+                totalExactPx += asPx;
+            }
+            else if (ew == null) {
+                flexCount += 1;
+            }
+        }
+        if (flexCount === 0)
+            return undefined;
+        if (totalExactPx === 0)
+            return undefined;
+        return `calc((100% - ${totalExactPx}px) / ${flexCount})`;
+    }, [table.getVisibleLeafColumns()]);
+}
+/**
+ * Resolve the inline style for a **header** cell (th).
+ *  - Has `exactWidth`  → locked width (min/max/overflow)
+ *  - `resizableWidth` (TanStack `getSize()`) → drag-resize width (`fixed`/`auto` only)
+ *  - flexWidth available → equal calc() (`equal` + `resizable` uses this, not getSize)
+ *  - Otherwise → fallback (e.g. fixed layout map or undefined)
+ */
+function resolveHeaderWidthStyle(colDef, flexWidth, fallback, lockExactWidth, resizableWidth) {
+    const exact = getExactWidthStyle(colDef, lockExactWidth);
+    if (exact)
+        return exact;
+    if (resizableWidth != null) {
+        const colMax = colDef.maxSize;
+        return Object.assign({ width: resizableWidth }, (colMax != null &&
+            colMax !== Number.MAX_SAFE_INTEGER && { maxWidth: colMax }));
+    }
+    if (flexWidth)
+        return { width: flexWidth };
+    return fallback;
+}
+/**
+ * Resolve the inline style for a **body** cell (td).
+ *  - Has `exactWidth`  → locked width via min/maxWidth + overflow:hidden
+ *  - `resizableWidth` (TanStack column `getSize()`) → matches header when resizable
+ *  - fixedCellStyle available → "fixed" layout map
+ *  - flexWidth available → equal calc()
+ *  - Otherwise → undefined
+ */
+function resolveBodyCellWidthStyle(colDef, fixedCellStyle, flexWidth, lockExactWidth, resizableWidth) {
+    const exact = getExactWidthStyle(colDef, lockExactWidth);
+    if (exact)
+        return exact;
+    if (resizableWidth != null) {
+        const colMax = colDef.maxSize;
+        return Object.assign({ width: resizableWidth }, (colMax != null &&
+            colMax !== Number.MAX_SAFE_INTEGER && { maxWidth: colMax }));
+    }
+    if (fixedCellStyle)
+        return fixedCellStyle;
+    if (flexWidth)
+        return { width: flexWidth };
+    return undefined;
+}
+function SortableColumnRow({ col, label, isLastVisible, showReorder, showVisibility, }) {
+    var _a;
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, } = useSortable({ id: col.id });
+    const style = {
+        transform: isDragging
+            ? `translateY(${(_a = transform === null || transform === void 0 ? void 0 : transform.y) !== null && _a !== void 0 ? _a : 0}px)`
+            : CSS.Transform.toString(transform),
+        transition: isDragging ? undefined : transition,
+    };
+    return (_jsxs("div", { ref: setNodeRef, style: style, className: cn("flex h-14 items-center gap-4 pl-6 pr-8 bg-modal-surface", "relative select-none", isDragging &&
+            "z-50 border border-primary-500/40 shadow-[0_8px_24px_-4px_rgba(0,0,0,0.24)] scale-[1.01]"), children: [showReorder && (_jsx(ActionButton, Object.assign({ ref: setActivatorNodeRef }, attributes, listeners, { variant: "icon", size: "sm", active: isDragging, "aria-label": `Drag to reorder ${label}`, className: cn("shrink-0 touch-none", isDragging ? "cursor-grabbing" : "cursor-grab"), children: _jsx(Equal, { className: "size-[14px]" }) }))), showVisibility && (_jsx(Switch, { checked: col.getIsVisible(), onCheckedChange: (v) => col.toggleVisibility(v), disabled: isLastVisible })), _jsx("span", { className: cn("flex-1 typography-subtitle4", isDragging ? "text-text-contrast-max" : "text-text-g-contrast-high"), children: label })] }));
+}
+function ManageColumnPanel({ table, onClose, maxListHeight = 400, options = {}, }) {
+    const { reorder = true, visibility = true, hideAll = true, showAll = true, } = options;
+    const hideable = table.getAllLeafColumns().filter((col) => col.getCanHide());
+    const visibleCount = hideable.filter((col) => col.getIsVisible()).length;
+    const headerLabel = (col) => {
+        const h = col.columnDef.header;
+        return typeof h === "string" ? h : col.id;
+    };
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        const allColIds = table.getAllLeafColumns().map((c) => c.id);
+        const movable = allColIds.filter((id) => !PINNED_START.includes(id) &&
+            !PINNED_END.includes(id));
+        const oldIndex = movable.indexOf(active.id);
+        const newIndex = movable.indexOf(over.id);
+        if (oldIndex === -1 || newIndex === -1)
+            return;
+        const fixedStart = allColIds.filter((id) => PINNED_START.includes(id));
+        const fixedEnd = allColIds.filter((id) => PINNED_END.includes(id));
+        table.setColumnOrder([
+            ...fixedStart,
+            ...arrayMove(movable, oldIndex, newIndex),
+            ...fixedEnd,
+        ]);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 px-6 pt-4 pb-3 border-b border-modal-line", children: [_jsx("span", { className: "flex-1 typography-subtitle3 text-text-contrast-max", children: "Manage column" }), hideAll && (_jsx(Button, { variant: "text", color: "secondary", size: "sm", disabled: visibleCount <= 1, onClick: () => {
+                            var _a;
+                            const firstVisible = (_a = hideable.find((col) => col.getIsVisible())) !== null && _a !== void 0 ? _a : hideable[0];
+                            hideable.forEach((col) => col.toggleVisibility(col.id === firstVisible.id));
+                        }, children: "Hide all" })), showAll && (_jsx(Button, { variant: "text", color: "primary", size: "sm", onClick: () => table.toggleAllColumnsVisible(true), children: "Show all" })), _jsx(Button, { variant: "outline", color: "primary", size: "sm", onClick: onClose, children: "Done" })] }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis, restrictToParentElement], onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: hideable.map((c) => c.id), strategy: verticalListSortingStrategy, children: _jsx("div", { className: "overflow-y-auto ui-scrollbar", style: { maxHeight: maxListHeight }, children: hideable.map((col) => (_jsx(SortableColumnRow, { col: col, label: headerLabel(col), isLastVisible: col.getIsVisible() && visibleCount === 1, showReorder: reorder, showVisibility: visibility }, col.id))) }) }) })] }));
+}
+// ---------------------------------------------------------------------------
+// DataTable
+// ---------------------------------------------------------------------------
+export function DataTable({ data, columns, manualSorting = false, onSorting, paginationMode = "infinite", totalCount, pageIndex: controlledPageIndex, pageSize: controlledPageSize, onPaginationChange, pageSizeOptions, fetchMoreData, fetchMoreOffset, fetchingMore = false, fetchingMoreLabel = "Loading more…", loading = false, loadingLabel = "Loading…", highlightRowId, scrollToHighlightOnMouseLeave = false, selectable = false, onRowSelectionChange, rowActions, reorderable = false, getRowId: getRowIdProp, onRowReorder, isRowReorderLocked, onRowClick, onCellClick, getSubRows, defaultExpanded, expanded: controlledExpanded, onExpandedChange, bordered = true, surface = "default", striped = false, divided = true, rowClassName, cellClassName, headerCellClassName, headerClassName, headerRowClassName, sortIndicatorVisibility = "hover", tableLayout = "auto", columnManagement: columnManagementProp = false, resizable = false, columnMinSize = 60, columnMaxSize = Number.MAX_SAFE_INTEGER, virtualized = false, virtualRowEstimate, className, enableEditing = false, editDisplayMode = "cell", editTrigger = "click", onCellCommit, alwaysEditing, enableCellTabTraversal, editableColumnIds: editableColumnIdsProp, testId, }) {
     var _a;
-    const tableBodyRef = useRef(null);
+    // scrollable container ref — lives on the wrapper div, not tbody
+    const scrollRef = useRef(null);
+    const tableHeaderRef = useRef(null);
+    const userInteractingRef = useRef(false);
+    /** Suppresses marking user scroll during highlight-driven `scrollTo` / `scrollIntoView`. */
+    const programmaticScrollLockRef = useRef(0);
+    const [stickyHeaderHeight, setStickyHeaderHeight] = useState(48);
+    const scheduleProgrammaticScrollEnd = useCallback(() => {
+        const el = scrollRef.current;
+        let settled = false;
+        const unlock = () => {
+            if (settled)
+                return;
+            settled = true;
+            programmaticScrollLockRef.current = Math.max(0, programmaticScrollLockRef.current - 1);
+        };
+        el === null || el === void 0 ? void 0 : el.addEventListener("scrollend", unlock, { once: true });
+        window.setTimeout(unlock, 550);
+    }, []);
+    const virtualMeasureRowElement = useCallback((element, entry, instance) => {
+        var _a, _b;
+        const direction = instance.scrollDirection;
+        if (direction === "forward" || direction === null) {
+            const box = (_a = entry === null || entry === void 0 ? void 0 : entry.borderBoxSize) === null || _a === void 0 ? void 0 : _a[0];
+            if (box) {
+                return Math.round(box.blockSize);
+            }
+            return Math.round(element.getBoundingClientRect().height);
+        }
+        const raw = element.getAttribute("data-index");
+        const indexKey = raw != null ? Number.parseInt(raw, 10) : NaN;
+        const cache = instance.measurementsCache;
+        const cached = Number.isFinite(indexKey) && (cache === null || cache === void 0 ? void 0 : cache[indexKey])
+            ? cache[indexKey].size
+            : undefined;
+        if (typeof cached === "number") {
+            return cached;
+        }
+        const box = (_b = entry === null || entry === void 0 ? void 0 : entry.borderBoxSize) === null || _b === void 0 ? void 0 : _b[0];
+        if (box) {
+            return Math.round(box.blockSize);
+        }
+        return Math.round(element.getBoundingClientRect().height);
+    }, []);
+    // Normalize columnManagement: boolean | options → boolean + options object
+    const columnManagement = !!columnManagementProp;
+    const columnManagementOptions = typeof columnManagementProp === "object" ? columnManagementProp : {};
+    // ---- state ----
     const [sorting, setSorting] = useState([]);
     const [columnFilters, setColumnFilters] = useState([]);
     const [columnVisibility, setColumnVisibility] = useState({});
+    const [columnOrder, setColumnOrder] = useState([]);
+    const [columnSizing, setColumnSizing] = useState({});
+    const [columnSizingInfo, setColumnSizingInfo] = useState({
+        startOffset: null,
+        startSize: null,
+        deltaOffset: null,
+        deltaPercentage: null,
+        isResizingColumn: false,
+        columnSizingStart: [],
+    });
     const [rowSelection, setRowSelection] = useState({});
-    const table = useReactTable({
-        data,
+    const [internalExpanded, setInternalExpanded] = useState((_a = defaultExpanded) !== null && _a !== void 0 ? _a : {});
+    // Controlled: use prop directly every render; uncontrolled: use internal state
+    const isExpandedControlled = controlledExpanded !== undefined;
+    const expanded = isExpandedControlled ? controlledExpanded : internalExpanded;
+    const [pagination, setPagination] = useState({
+        pageIndex: controlledPageIndex !== null && controlledPageIndex !== void 0 ? controlledPageIndex : 0,
+        pageSize: controlledPageSize !== null && controlledPageSize !== void 0 ? controlledPageSize : 10,
+    });
+    // ---- column-management panel state (lifted here so hiding a column doesn't unmount it) ----
+    const [manageOpen, setManageOpen] = useState(false);
+    const [manageAnchorId, setManageAnchorId] = useState(null);
+    const [columnManageMenuOpenId, setColumnManageMenuOpenId] = useState(null);
+    const [managePanelPos, setManagePanelPos] = useState({ top: 0, right: 0, maxListHeight: 400 });
+    const manageMenuTriggerRef = useRef(new Map());
+    const openManagePanelAt = useCallback((colId, anchorRect) => {
+        const PANEL_W = 460;
+        const MARGIN = 8;
+        setColumnManageMenuOpenId(null);
+        const idealRight = window.innerWidth - anchorRect.right;
+        const right = Math.min(Math.max(idealRight, MARGIN), window.innerWidth - PANEL_W - MARGIN);
+        const top = anchorRect.bottom + MARGIN;
+        const maxListHeight = Math.max(80, window.innerHeight - top - 80);
+        setManagePanelPos({ top, right, maxListHeight });
+        setManageAnchorId(colId);
+        setManageOpen(true);
+    }, []);
+    // Close manage panel on Escape
+    useEffect(() => {
+        if (!manageOpen)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                setManageOpen(false);
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [manageOpen]);
+    // Sync controlled pagination (server mode)
+    useEffect(() => {
+        if (paginationMode === "server") {
+            setPagination({
+                pageIndex: controlledPageIndex !== null && controlledPageIndex !== void 0 ? controlledPageIndex : 0,
+                pageSize: controlledPageSize !== null && controlledPageSize !== void 0 ? controlledPageSize : 10,
+            });
+        }
+    }, [paginationMode, controlledPageIndex, controlledPageSize]);
+    // ---- editing engine ----
+    const editableColIds = React.useMemo(() => editableColumnIdsProp !== null && editableColumnIdsProp !== void 0 ? editableColumnIdsProp : (enableEditing
+        ? detectEditableColumnIds(columns)
+        : []), [enableEditing, editableColumnIdsProp, columns]);
+    const editingState = useDataTableEditing({
+        enabled: enableEditing,
+        editDisplayMode,
+        editTrigger,
+        editableColumnIds: editableColIds,
+    });
+    // ---- build final columns ----
+    const finalColumns = React.useMemo(() => {
+        let cols;
+        if (enableEditing) {
+            cols = resolveEditableColumns(columns, {
+                editing: editingState,
+                onCellCommit: onCellCommit,
+                alwaysEditing: alwaysEditing,
+                enableCellTabTraversal: enableCellTabTraversal !== null && enableCellTabTraversal !== void 0 ? enableCellTabTraversal : true,
+                editableColumnIds: editableColIds,
+            });
+        }
+        else {
+            cols = [...columns];
+        }
+        if (reorderable)
+            cols.unshift(buildReorderColumn());
+        if (selectable)
+            cols.unshift(buildCheckboxColumn());
+        if (rowActions)
+            cols.push(buildActionsColumn(rowActions));
+        return cols;
+    }, [
         columns,
-        manualSorting,
-        onSortingChange: setSorting,
-        onColumnFiltersChange: setColumnFilters,
-        getCoreRowModel: getCoreRowModel(),
-        // getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onColumnVisibilityChange: setColumnVisibility,
-        onRowSelectionChange: setRowSelection,
-        state: {
-            sorting,
+        selectable,
+        reorderable,
+        rowActions,
+        enableEditing,
+        editingState,
+        onCellCommit,
+        alwaysEditing,
+        enableCellTabTraversal,
+    ]);
+    // ---- table instance ----
+    const isPaginated = paginationMode === "client" || paginationMode === "server";
+    const table = useReactTable(Object.assign(Object.assign(Object.assign(Object.assign({ data, columns: finalColumns, columnResizeMode: "onChange", defaultColumn: {
+            minSize: columnMinSize,
+            maxSize: columnMaxSize,
+        } }, (getRowIdProp
+        ? { getRowId: (row) => getRowIdProp(row) }
+        : { getRowId: (row) => row.id })), { manualSorting, manualPagination: paginationMode === "server", rowCount: paginationMode === "server" ? totalCount !== null && totalCount !== void 0 ? totalCount : data.length : undefined, getSubRows, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, onColumnVisibilityChange: setColumnVisibility, onColumnOrderChange: setColumnOrder, onColumnSizingChange: setColumnSizing, onColumnSizingInfoChange: setColumnSizingInfo, onRowSelectionChange: setRowSelection, onExpandedChange: (updater) => {
+            const next = typeof updater === "function" ? updater(expanded) : updater;
+            if (!isExpandedControlled)
+                setInternalExpanded(next);
+            onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
+        }, onPaginationChange: (updater) => {
+            const next = typeof updater === "function" ? updater(pagination) : updater;
+            setPagination(next);
+            onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(next);
+        }, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), getExpandedRowModel: getExpandedRowModel() }), (isPaginated ? { getPaginationRowModel: getPaginationRowModel() } : {})), { enableRowSelection: selectable, enableColumnResizing: resizable, state: Object.assign({ sorting,
             columnFilters,
             columnVisibility,
+            columnOrder,
+            columnSizing,
+            columnSizingInfo,
             rowSelection,
-            // pagination: {
-            //   pageSize: 100,
-            //   pageIndex: 0,
-            // },
-        },
-    });
+            expanded }, (isPaginated ? { pagination } : {})) }));
+    /** Body row order: sortable rows follow header sort; locked rows stay at the bottom. */
+    const tableRowsForView = React.useMemo(() => {
+        const rows = table.getRowModel().rows;
+        if (!isRowReorderLocked)
+            return rows;
+        const locked = rows.filter((r) => isRowReorderLocked(r));
+        const unlocked = rows.filter((r) => !isRowReorderLocked(r));
+        if (locked.length === 0)
+            return rows;
+        const order = new Map(data.map((row, index) => [
+            getRowIdProp
+                ? getRowIdProp(row)
+                : String(row.id),
+            index,
+        ]));
+        locked.sort((a, b) => { var _a, _b; return ((_a = order.get(a.id)) !== null && _a !== void 0 ? _a : 0) - ((_b = order.get(b.id)) !== null && _b !== void 0 ? _b : 0); });
+        return [...unlocked, ...locked];
+    }, [table.getRowModel().rows, isRowReorderLocked, data, getRowIdProp]);
+    // ---- side-effects ----
     useEffect(() => {
         onSorting === null || onSorting === void 0 ? void 0 : onSorting(sorting);
     }, [sorting, onSorting]);
     useEffect(() => {
+        onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(rowSelection);
+    }, [rowSelection, onRowSelectionChange]);
+    // Infinite scroll — listener on the wrapper div
+    useEffect(() => {
+        if (paginationMode !== "infinite")
+            return;
+        const el = scrollRef.current;
+        if (!el)
+            return;
         const handleScroll = () => {
-            if (tableBodyRef.current) {
-                const { scrollTop, scrollHeight, clientHeight } = tableBodyRef.current;
-                if (scrollTop + clientHeight >= scrollHeight - 10) {
-                    fetchMoreData === null || fetchMoreData === void 0 ? void 0 : fetchMoreData();
-                }
+            if (programmaticScrollLockRef.current > 0)
+                return;
+            // Do not set userInteractingRef here: programmatic highlight scroll (often
+            // `behavior: "smooth"`) emits many scroll events after the programmatic
+            // lock unlocks, which would flip userInteracting and block the next follow.
+            // Pause is handled only via wheel / pointer when scrollToHighlightOnMouseLeave.
+            const { scrollTop, scrollHeight, clientHeight } = el;
+            if (fetchingMore || loading)
+                return;
+            const offset = typeof fetchMoreOffset === "number" ? fetchMoreOffset : 10;
+            if (scrollTop + clientHeight >= scrollHeight - offset) {
+                fetchMoreData === null || fetchMoreData === void 0 ? void 0 : fetchMoreData();
             }
         };
-        const tableBodyElement = tableBodyRef.current;
-        if (tableBodyElement) {
-            tableBodyElement.addEventListener("scroll", handleScroll);
+        el.addEventListener("scroll", handleScroll);
+        return () => el.removeEventListener("scroll", handleScroll);
+    }, [paginationMode, fetchMoreData, fetchingMore, loading, fetchMoreOffset]);
+    const isEmpty = tableRowsForView.length === 0;
+    // Virtualizer row offsets must match scroll coordinates: tbody starts below <thead>.
+    useLayoutEffect(() => {
+        if (!virtualized)
+            return;
+        const el = tableHeaderRef.current;
+        if (!el)
+            return;
+        const update = () => {
+            setStickyHeaderHeight(Math.round(el.getBoundingClientRect().height));
+        };
+        update();
+        const ro = new ResizeObserver(update);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [virtualized]);
+    const scrollHighlightIntoViewRef = useRef(() => { });
+    const hadVirtualScrollSizeRef = useRef(false);
+    const rowVirtualizer = useVirtualizer({
+        count: virtualized ? tableRowsForView.length : 0,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => virtualRowEstimate !== null && virtualRowEstimate !== void 0 ? virtualRowEstimate : 40,
+        overscan: 4,
+        // Offsets must include sticky thead height so item.start matches document offsets inside the scrollport.
+        paddingStart: virtualized ? stickyHeaderHeight : 0,
+        scrollPaddingStart: 0,
+        measureElement: virtualMeasureRowElement,
+        onChange: () => {
+            var _a, _b;
+            if (!virtualized || !highlightRowId)
+                return;
+            const h = (_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0;
+            if (h < 1) {
+                hadVirtualScrollSizeRef.current = false;
+                return;
+            }
+            if (hadVirtualScrollSizeRef.current)
+                return;
+            hadVirtualScrollSizeRef.current = true;
+            requestAnimationFrame(() => {
+                if (userInteractingRef.current)
+                    return;
+                scrollHighlightIntoViewRef.current("auto");
+            });
+        },
+    });
+    const scrollHighlightIntoView = useCallback((behavior = "smooth") => {
+        var _a, _b;
+        if (!highlightRowId)
+            return;
+        if (userInteractingRef.current)
+            return;
+        const container = scrollRef.current;
+        if (!container)
+            return;
+        const ids = Array.isArray(highlightRowId)
+            ? highlightRowId
+            : [highlightRowId];
+        // Virtualized: off-screen rows are not in the DOM, so querySelector fails.
+        // Drive scroll via the virtualizer so the target row mounts, then DOM path can fine-tune if needed.
+        if (virtualized) {
+            void rowVirtualizer.getTotalSize();
+            for (const id of ids) {
+                const idx = tableRowsForView.findIndex((r) => r.id === id);
+                if (idx !== -1) {
+                    // `scrollToIndex({ align: "center" })` aligns item *start* to viewport center
+                    // in TanStack Virtual; also thead was throwing off scroll coords — use
+                    // paddingStart + explicit center of row in the scrollport.
+                    const estimate = virtualRowEstimate !== null && virtualRowEstimate !== void 0 ? virtualRowEstimate : 40;
+                    const startOffset = rowVirtualizer.getOffsetForIndex(idx, "start");
+                    if (!startOffset)
+                        continue;
+                    const [scrollTopAlignStart] = startOffset;
+                    const vzWithCache = rowVirtualizer;
+                    const measured = (_b = (_a = vzWithCache.measurementsCache) === null || _a === void 0 ? void 0 : _a[idx]) === null || _b === void 0 ? void 0 : _b.size;
+                    const rowH = typeof measured === "number" ? measured : estimate;
+                    const target = scrollTopAlignStart + rowH / 2 - container.clientHeight / 2;
+                    programmaticScrollLockRef.current += 1;
+                    scheduleProgrammaticScrollEnd();
+                    rowVirtualizer.scrollToOffset(Math.max(0, target), {
+                        align: "start",
+                        behavior: behavior === "smooth" ? "smooth" : "auto",
+                    });
+                    return;
+                }
+            }
+            return;
         }
-        return () => {
-            if (tableBodyElement) {
-                tableBodyElement.removeEventListener("scroll", handleScroll);
+        for (const id of ids) {
+            const rowEl = container.querySelector(`[data-row-id="${id}"]`);
+            if (rowEl) {
+                programmaticScrollLockRef.current += 1;
+                scheduleProgrammaticScrollEnd();
+                rowEl.scrollIntoView({ block: "center", behavior });
+                break;
             }
+        }
+    }, [
+        highlightRowId,
+        tableRowsForView,
+        virtualized,
+        rowVirtualizer,
+        virtualRowEstimate,
+        stickyHeaderHeight,
+        scheduleProgrammaticScrollEnd,
+    ]);
+    scrollHighlightIntoViewRef.current = scrollHighlightIntoView;
+    // Allow one onChange retry when the highlight target or virtualization toggles
+    // (e.g. scrollport height was 0 on first layout).
+    useLayoutEffect(() => {
+        hadVirtualScrollSizeRef.current = false;
+    }, [virtualized, highlightRowId]);
+    // Scroll to highlighted row(s) when the value changes (e.g. user picks one).
+    // When `scrollToHighlightOnMouseLeave` is set, auto-scroll is skipped while
+    // `userInteractingRef` is true (wheel / pointer on table only; not raw scroll).
+    useLayoutEffect(() => {
+        scrollHighlightIntoView("smooth");
+    }, [virtualized, scrollHighlightIntoView, highlightRowId]);
+    // ---- pagination bar props ----
+    const paginationBarProps = {
+        pageIndex: pagination.pageIndex,
+        pageSize: pagination.pageSize,
+        totalCount: paginationMode === "server"
+            ? totalCount !== null && totalCount !== void 0 ? totalCount : data.length
+            : table.getFilteredRowModel().rows.length,
+        pageSizeOptions,
+        onPageChange: (idx) => table.setPagination((prev) => (Object.assign(Object.assign({}, prev), { pageIndex: idx }))),
+        onPageSizeChange: (size) => table.setPagination({ pageIndex: 0, pageSize: size }),
+    };
+    const computedFlexWidth = useFlexColumnWidth(table);
+    const flexWidth = tableLayout === "equal" ? computedFlexWidth : undefined;
+    const fixedColStyles = React.useMemo(() => {
+        if (tableLayout !== "fixed")
+            return null;
+        const cols = table.getVisibleLeafColumns();
+        const isPxExactCol = (col) => {
+            var _a;
+            const ew = (_a = col.columnDef.meta) === null || _a === void 0 ? void 0 : _a.exactWidth;
+            return exactWidthToPx(ew) != null;
         };
-    }, [fetchMoreData]);
-    const isEmpty = ((_a = table.getRowModel().rows) === null || _a === void 0 ? void 0 : _a.length) === 0;
-    return (_jsx("div", { className: "flex w-full h-full rounded-xl overflow-hidden border border-primary-10", children: _jsxs(Table, { className: isEmpty ? "h-full" : "", rootRef: tableBodyRef, children: [_jsx(TableHeader, { className: "sticky top-0", children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: "", children: headerGroup.headers.map((header, i) => {
-                            var _a;
-                            return (_jsx(TableHead, { children: _jsxs("div", { className: "flex flex-row items-center cursor-pointer", onClick: header.column.getToggleSortingHandler(), children: [header.isPlaceholder
-                                            ? null
-                                            : flexRender(header.column.columnDef.header, header.getContext()), (_a = {
-                                            asc: _jsx(ArrowUpIcon, { className: "ml-3 h-4 w-4" }),
-                                            desc: _jsx(ArrowDownIcon, { className: "ml-3 h-4 w-4" }),
-                                        }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : (header.column.getCanSort() ? (_jsx(ArrowsUpDownIcon, { className: "ml-3 h-4 w-4 text-text-g-contrast-high" })) : null)] }) }, header.id));
-                        }) }, headerGroup.id))) }), _jsx(TableBody, { className: "overflow-y-scroll", children: !isEmpty ? (table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", className: "", children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (_jsx(TableRow, { className: "h-full self-stretch", children: _jsx(TableCell, { colSpan: columns.length, className: "typography-body1 text-text-g-contrast-medium text-center h-full", children: _jsxs("div", { className: "flex flex-1 h-full flex-col items-center justify-center gap-3", children: [_jsx(ClipboardDocumentListIcon, { className: "w-8 text-secondary-120" }), "There is no information yet."] }) }) })) })] }) }));
+        // Full-width table + honour `size` as px: lock every non-exact column to
+        // its `size`, except the last “flex” column which absorbs leftover width
+        // (avoids `calc()` on every <col>/<th> — browsers often distribute badly).
+        const flexColIndices = cols
+            .map((c, i) => (!isPxExactCol(c) ? i : -1))
+            .filter((i) => i >= 0);
+        const growColIndex = flexColIndices.length > 0
+            ? flexColIndices[flexColIndices.length - 1]
+            : -1;
+        const map = new Map();
+        cols.forEach((col, index) => {
+            var _a, _b, _c;
+            if (isPxExactCol(col))
+                return;
+            if (index === growColIndex) {
+                // No entry → <col> has no width; cell styles omit width — column grows.
+                return;
+            }
+            const colSize = (_c = (_a = col.columnDef.size) !== null && _a !== void 0 ? _a : (_b = col.getSize) === null || _b === void 0 ? void 0 : _b.call(col)) !== null && _c !== void 0 ? _c : 150;
+            const px = typeof colSize === "number"
+                ? colSize
+                : Number.isFinite(parseFloat(String(colSize)))
+                    ? parseFloat(String(colSize))
+                    : 150;
+            map.set(col.id, {
+                width: `${px}px`,
+                minWidth: `${px}px`,
+                maxWidth: `${px}px`,
+                overflow: "hidden",
+                boxSizing: "border-box",
+            });
+        });
+        return map;
+    }, [tableLayout, table.getVisibleLeafColumns()]);
+    /**
+     * When `resizable` + `table-layout: fixed`, the table is often wider than
+     * `getTotalSize()` (`max(100%, …)`). Browsers then redistribute slack across
+     * *all* columns — even `<col>` + `th` locked to 42px can visually grow.
+     * Pick one non-exact column to absorb slack (empty `<col>`, no pixel width on
+     * cells) like the non-resizable `fixed` “grow” column. Not used for `equal`
+     * — there we leave non-exact `<col>`s empty and use `flexWidth` on cells only.
+     */
+    const resizableSlackGrowColId = React.useMemo(() => {
+        var _a, _b;
+        if (!resizable || tableLayout === "equal")
+            return null;
+        const cols = table.getVisibleLeafColumns();
+        const flexIndices = cols
+            .map((c, i) => {
+            var _a;
+            const ew = (_a = c.columnDef.meta) === null || _a === void 0 ? void 0 : _a.exactWidth;
+            return exactWidthToPx(ew) == null ? i : -1;
+        })
+            .filter((i) => i >= 0);
+        if (flexIndices.length === 0)
+            return null;
+        return (_b = (_a = cols[flexIndices[flexIndices.length - 1]]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
+    }, [resizable, tableLayout, table.getVisibleLeafColumns()]);
+    // Helper: find the first data cell (not checkbox/actions) for expand toggle
+    const firstDataCellId = (row) => {
+        var _a;
+        return (_a = row
+            .getVisibleCells()
+            .find((c) => c.column.id !== "__select__" &&
+            c.column.id !== "__actions__" &&
+            c.column.id !== "__reorder__")) === null || _a === void 0 ? void 0 : _a.id;
+    };
+    // ---- row reorder (drag-and-drop) ----
+    const rowReorderSensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const rowIds = React.useMemo(() => tableRowsForView.filter((r) => !(isRowReorderLocked === null || isRowReorderLocked === void 0 ? void 0 : isRowReorderLocked(r))).map((r) => r.id), [tableRowsForView, isRowReorderLocked]);
+    const handleRowDragEnd = (event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id || !onRowReorder)
+            return;
+        const oldIndex = data.findIndex((item) => (getRowIdProp
+            ? getRowIdProp(item)
+            : item.id) === active.id);
+        const newIndex = data.findIndex((item) => (getRowIdProp
+            ? getRowIdProp(item)
+            : item.id) === over.id);
+        if (oldIndex === -1 || newIndex === -1)
+            return;
+        onRowReorder(arrayMove([...data], oldIndex, newIndex));
+    };
+    // `resizable` uses `table-layout: fixed`; without min/max on `meta.exactWidth`
+    // (e.g. __select__), those columns absorb extra table width even when inline
+    // `width: 42px` is set. Lock px-based exactWidth whenever fixed layout applies.
+    const lockPxExactWidth = tableLayout === "fixed" || resizable;
+    const showColumnMenuVisibility = columnManagement && columnManagementOptions.visibility !== false;
+    const visibleHideableLeafCount = columnManagement
+        ? table
+            .getAllLeafColumns()
+            .filter((c) => c.getCanHide() && c.getIsVisible()).length
+        : 0;
+    // ---- render ----
+    const editContextValue = enableEditing ? editingState : null;
+    return (_jsx(EditContext.Provider, { value: editContextValue, children: _jsxs("div", { className: cn("flex flex-col w-full h-full min-h-0", bordered && "overflow-hidden rounded-md border border-table-c-border", !bordered && "overflow-hidden rounded-none", className), "data-surface": surface === "panel" ? "panel" : undefined, "data-testid": testId, children: [_jsx("div", { ref: scrollRef, className: cn("relative min-h-0 overflow-auto", "ui-scrollbar ui-scrollbar-x-m ui-scrollbar-y-s", isPaginated ? "flex-1" : "h-full"), onWheel: scrollToHighlightOnMouseLeave
+                        ? () => {
+                            userInteractingRef.current = true;
+                        }
+                        : undefined, onPointerDownCapture: scrollToHighlightOnMouseLeave
+                        ? () => {
+                            userInteractingRef.current = true;
+                        }
+                        : undefined, onMouseLeave: scrollToHighlightOnMouseLeave
+                        ? () => {
+                            userInteractingRef.current = false;
+                            scrollHighlightIntoView("smooth");
+                        }
+                        : undefined, children: _jsxs(Table, { scrollableWrapper: false, className: cn((tableLayout === "fixed" ||
+                            tableLayout === "equal" ||
+                            resizable) &&
+                            "table-fixed", isEmpty && "h-full"), style: resizable
+                            ? {
+                                // At least full scroll width, but grow when column sum exceeds it.
+                                width: `max(100%, ${table.getTotalSize()}px)`,
+                            }
+                            : { width: "100%" }, children: [tableLayout === "fixed" && !resizable && (_jsx("colgroup", { children: table.getVisibleLeafColumns().map((col) => {
+                                    const colDef = col.columnDef;
+                                    const exact = getExactWidthStyle(colDef, lockPxExactWidth);
+                                    const style = exact !== null && exact !== void 0 ? exact : fixedColStyles === null || fixedColStyles === void 0 ? void 0 : fixedColStyles.get(col.id);
+                                    return _jsx("col", { style: style }, col.id);
+                                }) })), resizable && (_jsx("colgroup", { children: table.getVisibleLeafColumns().map((col) => {
+                                    const colDef = col.columnDef;
+                                    const exact = getExactWidthStyle(colDef, lockPxExactWidth);
+                                    if (exact)
+                                        return _jsx("col", { style: exact }, col.id);
+                                    // Equal: only lock exact cols; flex columns share via flexWidth on th/td.
+                                    if (tableLayout === "equal")
+                                        return _jsx("col", {}, col.id);
+                                    if (resizableSlackGrowColId != null &&
+                                        col.id === resizableSlackGrowColId) {
+                                        return _jsx("col", {}, col.id);
+                                    }
+                                    return _jsx("col", { style: { width: col.getSize() } }, col.id);
+                                }) })), _jsx(TableHeader, { ref: tableHeaderRef, className: cn("sticky top-0 z-10", headerClassName), "data-testid": testId ? `${testId}-thead` : undefined, children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { divided: false, colDivided: divided, className: cn("hover:bg-transparent", headerRowClassName), children: headerGroup.headers.map((header) => {
+                                        var _a;
+                                        const canSort = header.column.getCanSort();
+                                        const isSorted = header.column.getIsSorted();
+                                        const showManage = columnManagement && header.column.getCanHide();
+                                        const canResize = resizable &&
+                                            tableLayout !== "equal" &&
+                                            header.column.getCanResize();
+                                        const isResizing = header.column.getIsResizing();
+                                        const fixedFallback = !resizable && fixedColStyles
+                                            ? fixedColStyles.get(header.column.id)
+                                            : undefined;
+                                        const usePixelResizeWidth = resizable &&
+                                            tableLayout !== "equal" &&
+                                            !(resizableSlackGrowColId != null &&
+                                                header.column.id === resizableSlackGrowColId);
+                                        const headerStyle = resolveHeaderWidthStyle(header.column.columnDef, flexWidth, fixedFallback, lockPxExactWidth, usePixelResizeWidth ? header.getSize() : undefined);
+                                        return (_jsxs(TableHead, { colSpan: header.colSpan, style: headerStyle, className: cn("relative overflow-visible group/col whitespace-pre", isResizing && "select-none", (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.headerCellClassName, typeof headerCellClassName === "function"
+                                                ? headerCellClassName(header)
+                                                : headerCellClassName), children: [_jsxs("div", { className: "flex flex-row items-center gap-1 group/header", children: [_jsx("span", { className: cn("flex flex-1 flex-row items-center overflow-hidden", canSort && "cursor-pointer select-none", columnMetaAlignClass(header.column.columnDef.meta)), onClick: header.column.getToggleSortingHandler(), children: header.isPlaceholder
+                                                                ? null
+                                                                : flexRender(header.column.columnDef.header, header.getContext()) }), canSort && (_jsx(ActionButton, { variant: "icon", size: "xs", className: cn("shrink-0 transition-opacity", isSorted
+                                                                ? "opacity-100"
+                                                                : sortIndicatorVisibility === "always"
+                                                                    ? "opacity-100"
+                                                                    : "opacity-0 group-hover/header:opacity-100"), onClick: header.column.getToggleSortingHandler(), "aria-label": isSorted === "asc"
+                                                                ? "Sorted ascending — click to sort descending"
+                                                                : isSorted === "desc"
+                                                                    ? "Sorted descending — click to clear sort"
+                                                                    : "Sort column", children: isSorted === "asc" ? (_jsx(ArrowUp, { className: "!size-4" })) : isSorted === "desc" ? (_jsx(ArrowDown, { className: "!size-4" })) : (_jsx(ArrowUpDown, { className: "!size-4 text-text-g-contrast-medium" })) })), showManage && (_jsxs(DropdownMenu, { open: columnManageMenuOpenId === header.column.id, onOpenChange: (open) => setColumnManageMenuOpenId(open ? header.column.id : null), modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", size: "sm", active: (manageOpen &&
+                                                                            manageAnchorId === header.column.id) ||
+                                                                            columnManageMenuOpenId === header.column.id, "aria-haspopup": "menu", "aria-expanded": columnManageMenuOpenId === header.column.id, "aria-label": "Column options", className: "shrink-0", ref: (el) => {
+                                                                            if (el) {
+                                                                                manageMenuTriggerRef.current.set(header.column.id, el);
+                                                                            }
+                                                                            else {
+                                                                                manageMenuTriggerRef.current.delete(header.column.id);
+                                                                            }
+                                                                        }, onClick: (e) => e.stopPropagation(), children: _jsx(EllipsisVertical, { className: "!size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 4, className: "min-w-[220px] py-1", onCloseAutoFocus: (e) => e.preventDefault(), children: [showColumnMenuVisibility && (_jsxs(DropdownMenuItem, { className: "py-3", disabled: header.column.getIsVisible() &&
+                                                                                visibleHideableLeafCount <= 1, icon: _jsx(EyeOff, { className: "size-4", "aria-hidden": true }), onSelect: () => {
+                                                                                header.column.toggleVisibility(false);
+                                                                            }, children: ["Hide ", manageColumnHeaderLabel(header), " ", "column"] })), _jsx(DropdownMenuItem, { className: "py-3", icon: _jsx(Columns3, { className: "size-4", "aria-hidden": true }), onSelect: () => {
+                                                                                requestAnimationFrame(() => {
+                                                                                    const el = manageMenuTriggerRef.current.get(header.column.id);
+                                                                                    if (el) {
+                                                                                        openManagePanelAt(header.column.id, el.getBoundingClientRect());
+                                                                                    }
+                                                                                });
+                                                                            }, children: "Manage columns" })] })] }))] }), canResize && (_jsx("div", { onMouseDown: header.getResizeHandler(document), onTouchStart: header.getResizeHandler(document), onClick: (e) => e.stopPropagation(), className: cn("absolute right-0 top-0 h-full w-[5px] z-10", "cursor-col-resize select-none touch-none", "flex items-center justify-center group/resize"), children: _jsx("div", { className: cn("h-4/5 w-1.5 rounded-full transition-all duration-150", isResizing
+                                                            ? "opacity-100 w-0.5 bg-primary-500"
+                                                            : "opacity-0 bg-table-c-col-line group-hover/col:opacity-100 group-hover/resize:bg-primary-400") }) }))] }, header.id));
+                                    }) }, headerGroup.id))) }), _jsx(TableBody, { striped: striped, "data-testid": testId ? `${testId}-tbody` : undefined, children: !isEmpty ? (virtualized ? ((() => {
+                                    var _a;
+                                    const virtualItems = rowVirtualizer.getVirtualItems();
+                                    if (!virtualItems.length)
+                                        return null;
+                                    // paddingStart models thead height in *scroll* coords; tbody spacers are only
+                                    // for rows inside tbody — subtract it or the first row is pushed down twice.
+                                    const top = Math.max(0, virtualItems[0].start - stickyHeaderHeight);
+                                    const bottom = rowVirtualizer.getTotalSize() -
+                                        ((_a = virtualItems[virtualItems.length - 1].end) !== null && _a !== void 0 ? _a : 0);
+                                    return (_jsxs(_Fragment, { children: [top > 0 && (_jsx("tr", { "aria-hidden": true, children: _jsx("td", { colSpan: finalColumns.length, style: { height: top } }) })), virtualItems.map((item) => {
+                                                const row = tableRowsForView[item.index];
+                                                const isExpandable = Boolean(getSubRows);
+                                                const rowBg = isExpandable && !striped
+                                                    ? "bg-table-bg-a"
+                                                    : undefined;
+                                                const isHighlighted = Array.isArray(highlightRowId)
+                                                    ? highlightRowId.includes(row.id)
+                                                    : highlightRowId === row.id;
+                                                const rowProps = {
+                                                    divided: isExpandable && !striped ? true : !striped,
+                                                    colDivided: divided,
+                                                    "data-state": row.getIsSelected()
+                                                        ? "selected"
+                                                        : undefined,
+                                                    "data-highlighted": isHighlighted
+                                                        ? "true"
+                                                        : undefined,
+                                                    className: cn(rowBg, onRowClick && "cursor-pointer", typeof rowClassName === "function"
+                                                        ? rowClassName(row, item.index)
+                                                        : rowClassName),
+                                                    onClick: onRowClick
+                                                        ? (e) => onRowClick(row, e)
+                                                        : undefined,
+                                                };
+                                                return (_jsx(TableRow, Object.assign({ ref: rowVirtualizer.measureElement, "data-index": item.index, "data-row-id": row.id }, rowProps, { children: renderDataTableBodyCells({
+                                                        row,
+                                                        getSubRows,
+                                                        firstDataCellId,
+                                                        fixedColStyles,
+                                                        flexWidth,
+                                                        lockPxExactWidth,
+                                                        resizable,
+                                                        tableLayout,
+                                                        resizableSlackGrowColId,
+                                                        cellClassName,
+                                                        onCellClick,
+                                                    }) }), row.id));
+                                            }), bottom > 0 && (_jsx("tr", { "aria-hidden": true, children: _jsx("td", { colSpan: finalColumns.length, style: { height: bottom } }) }))] }));
+                                })()) : reorderable ? (_jsx(DndContext, { sensors: rowReorderSensors, collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragEnd: handleRowDragEnd, children: _jsx(SortableContext, { items: rowIds, strategy: verticalListSortingStrategy, children: tableRowsForView.map((row, rowIndex) => {
+                                            const isExpandable = Boolean(getSubRows);
+                                            const rowBg = isExpandable && !striped
+                                                ? "bg-table-bg-a"
+                                                : undefined;
+                                            const locked = isRowReorderLocked === null || isRowReorderLocked === void 0 ? void 0 : isRowReorderLocked(row);
+                                            const isHighlighted = Array.isArray(highlightRowId)
+                                                ? highlightRowId.includes(row.id)
+                                                : highlightRowId === row.id;
+                                            const rowProps = {
+                                                divided: isExpandable && !striped ? true : !striped,
+                                                colDivided: divided,
+                                                "data-state": row.getIsSelected()
+                                                    ? "selected"
+                                                    : undefined,
+                                                "data-highlighted": isHighlighted
+                                                    ? "true"
+                                                    : undefined,
+                                                className: cn(rowBg, onRowClick && "cursor-pointer", typeof rowClassName === "function"
+                                                    ? rowClassName(row, rowIndex)
+                                                    : rowClassName),
+                                                onClick: onRowClick
+                                                    ? (e) => onRowClick(row, e)
+                                                    : undefined,
+                                            };
+                                            const cells = renderDataTableBodyCells({
+                                                row,
+                                                getSubRows,
+                                                firstDataCellId,
+                                                fixedColStyles,
+                                                flexWidth,
+                                                lockPxExactWidth,
+                                                resizable,
+                                                tableLayout,
+                                                resizableSlackGrowColId,
+                                                cellClassName,
+                                                onCellClick,
+                                            });
+                                            return locked ? (_jsx(TableRow, Object.assign({ "data-row-id": row.id }, rowProps, { children: cells }), row.id)) : (_jsx(SortableTableRow, Object.assign({ id: row.id, "data-row-id": row.id }, rowProps, { children: cells }), row.id));
+                                        }) }) })) : (tableRowsForView.map((row, rowIndex) => {
+                                    const isExpandable = Boolean(getSubRows);
+                                    // Non-striped expandable: solid bg-a on every row
+                                    const rowBg = isExpandable && !striped ? "bg-table-bg-a" : undefined;
+                                    const isHighlighted = Array.isArray(highlightRowId)
+                                        ? highlightRowId.includes(row.id)
+                                        : highlightRowId === row.id;
+                                    return (_jsx(TableRow, { divided: isExpandable && !striped ? true : !striped, colDivided: divided, "data-state": row.getIsSelected() ? "selected" : undefined, className: cn(rowBg, onRowClick && "cursor-pointer", typeof rowClassName === "function"
+                                            ? rowClassName(row, rowIndex)
+                                            : rowClassName), "data-highlighted": isHighlighted ? "true" : undefined, onClick: onRowClick
+                                            ? (e) => onRowClick(row, e)
+                                            : undefined, "data-row-id": row.id, children: renderDataTableBodyCells({
+                                            row,
+                                            getSubRows,
+                                            firstDataCellId,
+                                            fixedColStyles,
+                                            flexWidth,
+                                            lockPxExactWidth,
+                                            resizable,
+                                            tableLayout,
+                                            resizableSlackGrowColId,
+                                            cellClassName,
+                                            onCellClick,
+                                        }) }, row.id));
+                                }))) : loading ? (_jsx(TableRow, { className: "h-full hover:bg-transparent", divided: false, children: _jsx(TableCell, { colSpan: finalColumns.length, className: "typography-body1 text-text-g-contrast-medium text-center h-full min-h-[200px]", children: _jsxs("div", { className: "flex flex-1 min-h-[200px] h-full flex-col items-center justify-center gap-3 py-16", role: "status", "aria-live": "polite", "aria-busy": "true", children: [_jsx(Loader2, { className: "size-8 shrink-0 animate-spin text-secondary-120", "aria-hidden": true }), loadingLabel] }) }) })) : (_jsx(TableRow, { className: "h-full hover:bg-transparent", divided: false, children: _jsx(TableCell, { colSpan: finalColumns.length, className: "typography-body1 text-text-g-contrast-medium text-center h-full", children: _jsxs("div", { className: "flex flex-1 h-full flex-col items-center justify-center gap-3 py-16", children: [_jsx(ClipboardList, { className: "w-8 text-secondary-120" }), "There is no information yet."] }) }) })) }), paginationMode === "infinite" &&
+                                fetchingMore &&
+                                !isEmpty &&
+                                table.getVisibleLeafColumns().length > 0 && (_jsx("tfoot", { className: "[&_tr]:bg-table-c-row-bg", children: _jsx(TableRow, { divided: false, className: "hover:!bg-table-c-row-bg border-t border-t-table-c-row-line", children: _jsx(TableCell, { colSpan: table.getVisibleLeafColumns().length, className: "py-3 text-center typography-body3 text-text-g-contrast-medium bg-inherit", children: _jsxs("span", { role: "status", "aria-live": "polite", className: "inline-flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "size-4 shrink-0 animate-spin", "aria-hidden": true }), fetchingMoreLabel] }) }) }) }))] }) }), isPaginated && _jsx(TablePagination, Object.assign({}, paginationBarProps)), columnManagement && manageOpen && (_jsxs(Portal.Root, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setManageOpen(false) }), _jsx("div", { className: "fixed z-50 w-[460px] rounded-lg bg-modal-surface shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] overflow-hidden", style: {
+                                top: managePanelPos.top,
+                                right: managePanelPos.right,
+                            }, onClick: (e) => e.stopPropagation(), children: _jsx(ManageColumnPanel, { table: table, onClose: () => setManageOpen(false), maxListHeight: managePanelPos.maxListHeight, options: columnManagementOptions }) })] }))] }) }));
 }