@techsio/ui-kit 0.37.0 → 0.38.0

package/dist/organisms/data-table.js

@@ -0,0 +1,1736 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToHorizontalAxis, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { flexRender, useTable } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Fragment as external_react_Fragment, createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { ActionIcon } from "../atoms/action-icon.js";
+import { Button } from "../atoms/button.js";
+import { Checkbox } from "../atoms/checkbox.js";
+import { Icon } from "../atoms/icon.js";
+import { Skeleton } from "../atoms/skeleton.js";
+import { Menu } from "../molecules/menu.js";
+import { Pagination } from "../molecules/pagination.js";
+import { SearchForm } from "../molecules/search-form.js";
+import { tv } from "../utils.js";
+import { DEFAULT_EDITOR_RENDERERS, DEFAULT_FILTER_RENDERERS, FieldSelect, columnLabel, isBlank } from "./data-table.fields.js";
+import { DATA_TABLE_Z, applyColumnDefaults, conditionalFilterFn, dataTableFeatures, getColumnSizeStyles, getPinningStyles, isFirstEndPinned, isLastStartPinned, resolveColumnType } from "./data-table.helpers.js";
+import { Table } from "./table.js";
+const dataTableVariants = tv({
+    slots: {
+        wrapper: [
+            "flex w-full flex-col overflow-hidden rounded-table",
+            "border-(length:--border-table-width) border-table-border"
+        ],
+        toolbar: [
+            "flex items-center justify-between gap-200",
+            "bg-table-header-bg text-table-header-fg",
+            "px-300 py-200",
+            "border-b-(length:--border-table-width) border-table-border"
+        ],
+        toolbarSearch: [
+            "min-w-0 flex-1"
+        ],
+        toolbarActions: [
+            "flex shrink-0 items-center gap-200"
+        ],
+        scroll: [
+            "relative w-full overflow-auto"
+        ],
+        headerLabel: [
+            "inline-flex items-center gap-100 whitespace-nowrap"
+        ],
+        sortButton: [
+            "inline-flex items-center gap-100 whitespace-nowrap",
+            "cursor-pointer select-none bg-transparent text-left",
+            "data-[disabled=true]:cursor-default"
+        ],
+        sortIcon: [
+            "text-fg-secondary",
+            "data-[active=true]:text-fg-accent-primary"
+        ],
+        dragHandle: [
+            "inline-flex cursor-grab items-center rounded-table text-fg-secondary",
+            "opacity-0 transition-opacity duration-200 motion-reduce:transition-none",
+            "hover:bg-table-row-bg-hover hover:opacity-100 focus-visible:opacity-100",
+            "group-hover/header:opacity-100 group-hover/row:opacity-100",
+            "group-focus-within/header:opacity-100 group-focus-within/row:opacity-100",
+            "group-data-dragging/header:opacity-100 group-data-dragging/row:opacity-100",
+            "active:cursor-grabbing"
+        ],
+        resizeHandle: [
+            "absolute end-0 top-0 h-full w-100 cursor-col-resize touch-none select-none",
+            "opacity-0 transition-opacity duration-200 motion-reduce:transition-none",
+            "bg-table-border hover:opacity-100 focus-visible:opacity-100",
+            "group-hover/header:opacity-100"
+        ],
+        filterRow: [
+            "bg-table-header-bg"
+        ],
+        filterCell: [
+            "px-200 py-100",
+            "min-w-fit",
+            "border-b-(length:--border-table-width) border-table-border"
+        ],
+        filterControl: [
+            "flex flex-wrap items-center gap-100"
+        ],
+        editorControl: [
+            "flex flex-col gap-50"
+        ],
+        editorError: [
+            "text-danger-fg text-table-sm"
+        ],
+        actionsCell: [
+            "flex items-center justify-end gap-100"
+        ],
+        empty: [
+            "flex flex-col items-center justify-center gap-200",
+            "p-700 text-center text-fg-secondary"
+        ],
+        paginationBar: [
+            "flex flex-wrap items-center justify-between gap-300",
+            "bg-table-header-bg text-table-header-fg",
+            "px-300 py-200",
+            "border-t-(length:--border-table-width) border-table-border"
+        ],
+        detailBox: [
+            "w-full p-300"
+        ],
+        paginationInfo: [
+            "whitespace-nowrap text-table-sm"
+        ],
+        paginationControls: [
+            "flex items-center gap-300"
+        ]
+    },
+    variants: {
+        outlined: {
+            true: {
+                wrapper: "shadow-table-outline"
+            }
+        }
+    }
+});
+const DATA_TABLE_MAX_TOOLBAR_ACTIONS = 3;
+function useControllable(controlled, initial, callback) {
+    const [internal, setInternal] = useState(initial);
+    const isControlled = void 0 !== controlled;
+    const value = isControlled ? controlled : internal;
+    const latest = useRef(value);
+    latest.current = value;
+    const onChange = (updater)=>{
+        const next = "function" == typeof updater ? updater(latest.current) : updater;
+        latest.current = next;
+        if (!isControlled) setInternal(next);
+        callback?.(next);
+    };
+    return [
+        value,
+        onChange
+    ];
+}
+function dropEdge(sortable, edges) {
+    if (!sortable.isOver || sortable.isDragging) return;
+    return sortable.activeIndex < sortable.overIndex ? edges.after : edges.before;
+}
+function SortableHeaderContent({ columnId, children }) {
+    const sortable = useSortable({
+        id: columnId,
+        data: {
+            type: "column"
+        }
+    });
+    const style = {
+        transform: CSS.Translate.toString(sortable.transform),
+        transition: sortable.transition,
+        opacity: sortable.isDragging ? 0.4 : 1
+    };
+    const dropSide = dropEdge({
+        isOver: sortable.isOver,
+        isDragging: sortable.isDragging,
+        activeIndex: sortable.activeIndex ?? 0,
+        overIndex: sortable.overIndex ?? 0
+    }, {
+        after: "end",
+        before: "start"
+    });
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: children({
+            setActivatorNodeRef: sortable.setActivatorNodeRef,
+            listeners: sortable.listeners,
+            style,
+            setNodeRef: sortable.setNodeRef,
+            isDragging: sortable.isDragging,
+            dropSide,
+            attributes: sortable.attributes
+        })
+    });
+}
+function SortableRow({ row, enabled, children }) {
+    const sortable = useSortable({
+        id: row.id,
+        disabled: !enabled,
+        data: {
+            type: "row"
+        }
+    });
+    const style = {
+        transform: CSS.Transform.toString(sortable.transform),
+        transition: sortable.transition,
+        opacity: sortable.isDragging ? 0.4 : 1,
+        position: "relative",
+        zIndex: sortable.isDragging ? 1 : void 0
+    };
+    const dropSide = dropEdge({
+        isOver: sortable.isOver,
+        isDragging: sortable.isDragging,
+        activeIndex: sortable.activeIndex ?? 0,
+        overIndex: sortable.overIndex ?? 0
+    }, {
+        after: "bottom",
+        before: "top"
+    });
+    const dragHandleProps = {
+        ref: sortable.setActivatorNodeRef,
+        ...sortable.attributes,
+        ...sortable.listeners
+    };
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: children({
+            setNodeRef: sortable.setNodeRef,
+            style,
+            dragHandleProps,
+            isDragging: sortable.isDragging,
+            dropSide
+        })
+    });
+}
+const DataTableContext = /*#__PURE__*/ createContext(null);
+function useDataTableContext() {
+    const ctx = useContext(DataTableContext);
+    if (!ctx) throw new Error("DataTable sub-components must be used within DataTable");
+    return ctx;
+}
+const DEFAULT_TRANSLATIONS = {
+    searchPlaceholder: "Search…",
+    searchLabel: "Search",
+    clearSearchLabel: "Clear search",
+    searchButtonLabel: "Submit search",
+    columnsLabel: "Column settings",
+    emptyTitle: "No records",
+    emptyDescription: "There is no data to display.",
+    pageSizeLabel: "Rows per page",
+    actionsLabel: "Actions",
+    filtersLabel: "Column filters",
+    selectAllLabel: "Select all rows",
+    loadingLabel: "Loading data",
+    operatorLabels: {},
+    editingLabel: "Editing a row — other table controls are locked",
+    rangeLabel: ({ start, end, total })=>`${start}–${end} of ${total}`,
+    requiredLabel: "Required"
+};
+const SELECTION_COLUMN_ID = "__select";
+const EMPTY_COLUMN_PINNING = {
+    start: [],
+    end: []
+};
+const DRAG_COLUMN_ID = "__drag";
+const BUILTIN_COLUMN_IDS = new Set([
+    SELECTION_COLUMN_ID,
+    DRAG_COLUMN_ID
+]);
+function pinClass(column, kind) {
+    if (!column.getIsPinned()) return;
+    return [
+        "header" === kind ? "bg-table-header-bg" : "data-table-frozen-cell",
+        isLastStartPinned(column) ? "border-e-(length:--border-table-width) border-table-border" : "",
+        isFirstEndPinned(column) ? "border-s-(length:--border-table-width) border-table-border" : ""
+    ].join(" ");
+}
+function HeaderDragHandle({ styles, setActivatorNodeRef, listeners, attributes, label }) {
+    return /*#__PURE__*/ jsx("button", {
+        "aria-label": `Drag to reorder ${label}`,
+        className: styles.dragHandle(),
+        ref: setActivatorNodeRef,
+        type: "button",
+        ...attributes,
+        ...listeners,
+        children: /*#__PURE__*/ jsx(Icon, {
+            icon: "icon-[mdi--drag-vertical]",
+            size: "current"
+        })
+    });
+}
+function HeaderSortLabel({ header, styles, enableSorting, locked }) {
+    const column = header.column;
+    const canSort = enableSorting && column.getCanSort();
+    const sortDir = column.getIsSorted();
+    const label = header.isPlaceholder ? null : flexRender(column.columnDef.header, header.getContext());
+    if (!canSort) return /*#__PURE__*/ jsx(Fragment, {
+        children: label
+    });
+    let sortIconName = "icon-[mdi--unfold-more-horizontal]";
+    if ("desc" === sortDir) sortIconName = "token-icon-chevron-down";
+    else if ("asc" === sortDir) sortIconName = "token-icon-chevron-up";
+    return /*#__PURE__*/ jsxs("button", {
+        className: styles.sortButton(),
+        "data-disabled": locked || void 0,
+        disabled: locked,
+        onClick: (event)=>column.getToggleSortingHandler()?.(event),
+        type: "button",
+        children: [
+            label,
+            /*#__PURE__*/ jsx(Icon, {
+                className: styles.sortIcon(),
+                "data-active": !!sortDir,
+                icon: sortIconName,
+                size: "current"
+            })
+        ]
+    });
+}
+function renderCellContent({ cell, column, styles, enableRowReorder, dnd, editor, editorError, editorErrorId, isDragCol, rowLabel }) {
+    if (isDragCol && enableRowReorder && dnd) return /*#__PURE__*/ jsx("button", {
+        "aria-label": `Drag to reorder ${rowLabel}`,
+        className: styles.dragHandle(),
+        onClick: (e)=>e.stopPropagation(),
+        type: "button",
+        ...dnd.dragHandleProps,
+        children: /*#__PURE__*/ jsx(Icon, {
+            icon: "icon-[mdi--drag-horizontal]",
+            size: "current"
+        })
+    });
+    if (editor) return /*#__PURE__*/ jsxs("div", {
+        className: styles.editorControl(),
+        "data-editor-control": "",
+        children: [
+            editor,
+            editorError ? /*#__PURE__*/ jsx("span", {
+                className: styles.editorError(),
+                id: editorErrorId,
+                role: "alert",
+                children: editorError
+            }) : null
+        ]
+    });
+    return flexRender(column.columnDef.cell, cell.getContext());
+}
+function stickyRowOffset(stickyHeader, offsets, groupIndex) {
+    if (!stickyHeader) return;
+    return {
+        top: offsets[groupIndex] ?? 0
+    };
+}
+function DataTableBodyCell({ cell, span, row, styles, columnSizing, enableColumnResizing, enableRowReorder, dnd, editor, editorError, editorErrorId, indentColumnId, rowLabel }) {
+    const column = cell.column;
+    const pinned = column.getIsPinned();
+    const isDragCol = column.id === DRAG_COLUMN_ID;
+    const indent = row.depth > 0 && column.id === indentColumnId ? {
+        paddingInlineStart: `${1.5 * row.depth}rem`
+    } : void 0;
+    return /*#__PURE__*/ jsx(Table.Cell, {
+        align: column.columnDef.meta?.align,
+        className: pinClass(column, "body"),
+        colSpan: span?.colSpan,
+        "data-pinned": pinned || void 0,
+        rowSpan: span?.rowSpan,
+        style: {
+            ...getPinningStyles(column),
+            ...getColumnSizeStyles(column, enableColumnResizing, columnSizing),
+            ...indent
+        },
+        children: renderCellContent({
+            cell,
+            column,
+            styles,
+            enableRowReorder,
+            dnd,
+            editor,
+            editorError,
+            editorErrorId,
+            isDragCol,
+            rowLabel
+        })
+    });
+}
+function validateDraft(columns, draft, requiredLabel) {
+    const errors = {};
+    for (const column of columns){
+        const meta = column.columnDef.meta;
+        if (!meta?.editable) continue;
+        const value = draft[column.id];
+        const empty = isBlank(value) || "number" == typeof value && Number.isNaN(value) || Array.isArray(value) && 0 === value.length;
+        if (meta.required && empty) {
+            errors[column.id] = requiredLabel;
+            continue;
+        }
+        const message = meta.validate?.(value, draft);
+        if (message) errors[column.id] = message;
+    }
+    return errors;
+}
+function renderExpandedDetailRow({ row, renderExpandedRow, colSpan, instanceId, styles, tintNestedRows }) {
+    return /*#__PURE__*/ jsx(Table.Row, {
+        className: tintNestedRows ? "data-table-row-nested-tint" : void 0,
+        "data-depth": row.depth + 1,
+        children: /*#__PURE__*/ jsx(Table.Cell, {
+            colSpan: colSpan,
+            children: /*#__PURE__*/ jsx("div", {
+                className: styles.detailBox(),
+                id: `${instanceId}-detail-${row.id}`,
+                children: renderExpandedRow(row)
+            })
+        })
+    });
+}
+function rowDragClass(dnd, opts) {
+    const { className, striped, tintNestedRows, rowIndex } = opts;
+    return [
+        "group/row",
+        "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width) focus-visible:outline-primary",
+        "data-[selected=true]:[--dt-row-tint:var(--color-table-row-bg-selected)]",
+        "group-hover/row:[--dt-row-tint:var(--color-table-row-bg-hover)]",
+        "hover:[--dt-row-tint:var(--color-table-row-bg-hover)]",
+        striped ? `${(rowIndex ?? 0) % 2 === 0 ? "bg-table-row-striped-primary [--dt-row-tint:var(--color-table-row-striped-primary)]" : "bg-table-row-striped-secondary [--dt-row-tint:var(--color-table-row-striped-secondary)]"} border-b-0` : "",
+        tintNestedRows ? "data-[depth]:data-table-row-nested-tint" : "",
+        dnd?.isDragging ? "shadow-table-outline" : "",
+        dnd?.dropSide === "top" ? "border-primary border-t-2" : "",
+        dnd?.dropSide === "bottom" ? "border-primary border-b-2" : "",
+        className ?? ""
+    ].filter(Boolean).join(" ");
+}
+const OPAQUE_HEADER_BG = {
+    backgroundColor: "var(--color-table-bg)",
+    backgroundImage: "linear-gradient(var(--color-table-header-bg), var(--color-table-header-bg))"
+};
+function sortState(column, enableSorting) {
+    if (!(enableSorting && column.getCanSort())) return;
+    const sorted = column.getIsSorted();
+    if ("asc" === sorted) return "ascending";
+    if ("desc" === sorted) return "descending";
+    return "none";
+}
+function activateRowByKeyboard(event, activate) {
+    if ("Enter" !== event.key && " " !== event.key) return;
+    if (event.target !== event.currentTarget) return;
+    event.preventDefault();
+    activate();
+}
+function checkReachEnd(distance, reachEndThreshold, reachedEndRef, onReachEnd) {
+    if (distance <= reachEndThreshold) {
+        if (!reachedEndRef.current) {
+            reachedEndRef.current = true;
+            onReachEnd();
+        }
+    } else reachedEndRef.current = false;
+}
+const useIsomorphicLayoutEffect = "undefined" == typeof window ? useEffect : useLayoutEffect;
+function clampSelection(selectedIds, previous, max) {
+    return [
+        ...selectedIds.filter((id)=>previous[id]),
+        ...selectedIds.filter((id)=>!previous[id])
+    ].slice(0, max);
+}
+function buildRowKeyDownHandler(row, onRowClick, blocked) {
+    return (event)=>activateRowByKeyboard(event, ()=>{
+            if (!blocked("rowClick")) onRowClick?.(row, event);
+        });
+}
+function buildRowClickHandler(row, rowOnClick, onRowClick, blocked) {
+    return (event)=>{
+        rowOnClick?.(event);
+        if (onRowClick && !blocked("rowClick")) onRowClick(row, event);
+    };
+}
+function editedRowElementId(instanceId, rowId) {
+    return `${instanceId}-editing-${rowId}`;
+}
+function editingRowElementId(editingRowId, instanceId, rowId) {
+    return editingRowId === rowId ? editedRowElementId(instanceId, rowId) : void 0;
+}
+function composeRowRef(dnd, consumerRef) {
+    return (node)=>{
+        dnd?.setNodeRef(node);
+        if ("function" == typeof consumerRef) consumerRef(node);
+        else if (consumerRef) consumerRef.current = node;
+    };
+}
+function DataTable(props) {
+    const { data, columns: userColumns, getRowId, id: idProp, className, ref, variant = "line", size = "md", stickyHeader, interactive, showColumnBorder, caption, hideHeader, maxHeight, enableSorting = true, enableGlobalFilter = false, enableColumnFilters = false, enableRowSelection = false, enableColumnVisibility = false, enableColumnPinning = false, enableColumnReorder = false, enableColumnResizing = false, tableLayout = "auto", enableRowReorder = false, enableExpanding = false, enablePagination = false, enableVirtualization = false, getSubRows, getRowCanExpand, getCellSpan, sorting: sortingProp, onSortingChange, columnFilters: columnFiltersProp, onColumnFiltersChange, globalFilter: globalFilterProp, onGlobalFilterChange, rowSelection: rowSelectionProp, onRowSelectionChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, expanded: expandedProp, onExpandedChange, pagination: paginationProp, onPaginationChange, pageSizeOptions = [
+        10,
+        25,
+        50,
+        100
+    ], manualSorting, manualFiltering, manualPagination, rowCount, pageCount, onRowClick, onReachEnd, onColumnReorder, onRowReorder, onCellEditCommit, onReady, renderToolbar, toolbarActions, renderEmpty, renderRowActions, renderHeaderFilter, renderExpandedRow, slotProps, translations: translationsProp, estimateRowHeight = 44, reachEndThreshold = 240, enableInlineEdit = false, editingRowId: editingRowIdProp, onEditingRowIdChange, onEditStart, onEditChange, onEditCommit, onEditCancel, onEditValidationError, lockInteractionsWhileEditing = true, onInteractionBlocked, filterRenderers, editorRenderers, stickyActions = true, paginationProps, canEditRow, rowActions, getRowLabel, striped = false, tintNestedRows = false, loading = false, loadingRowCount = 5, loadingMore = false, selectionMode = "multiple", maxSelectedRows, canSelectRow, onSelectionLimitReached } = props;
+    const translations = {
+        ...DEFAULT_TRANSLATIONS
+    };
+    if (translationsProp) {
+        for (const [key, value] of Object.entries(translationsProp))if (void 0 !== value) translations[key] = value;
+    }
+    const outlined = "outline" === variant;
+    const effectiveStriped = striped || "striped" === variant;
+    const styles = dataTableVariants({
+        outlined
+    });
+    const generatedId = useId();
+    const instanceId = idProp ?? generatedId;
+    const scrollRef = useRef(null);
+    const reachedEndRef = useRef(false);
+    const lastReachEndCountRef = useRef(-1);
+    const reportedSelectionLimitRef = useRef(null);
+    const dataLengthRef = useRef(data.length);
+    dataLengthRef.current = data.length;
+    const fireReachEnd = ()=>{
+        lastReachEndCountRef.current = dataLengthRef.current;
+        onReachEnd?.();
+    };
+    const headerRowRefs = useRef([]);
+    const [headerOffsets, setHeaderOffsets] = useState([
+        0
+    ]);
+    const headerHeight = headerOffsets.at(-1) ?? 0;
+    const [sorting, setSorting] = useControllable(sortingProp, [], onSortingChange);
+    const [columnFilters, setColumnFilters] = useControllable(columnFiltersProp, [], onColumnFiltersChange);
+    const [globalFilter, setGlobalFilter] = useControllable(globalFilterProp, "", onGlobalFilterChange);
+    const [rowSelection, setRowSelectionState] = useControllable(rowSelectionProp, {}, onRowSelectionChange);
+    const setRowSelection = (updater)=>{
+        let limitReached;
+        setRowSelectionState((old)=>{
+            const next = "function" == typeof updater ? updater(old) : updater;
+            if (null == maxSelectedRows) return next;
+            const selectedIds = Object.keys(next).filter((id)=>next[id]);
+            const previousCount = Object.keys(old).filter((id)=>old[id]).length;
+            if (selectedIds.length <= maxSelectedRows) {
+                if (selectedIds.length === maxSelectedRows && selectedIds.length > previousCount) limitReached = {
+                    limit: maxSelectedRows,
+                    selectedCount: selectedIds.length
+                };
+                return next;
+            }
+            const kept = clampSelection(selectedIds, old, maxSelectedRows);
+            limitReached = {
+                limit: maxSelectedRows,
+                selectedCount: kept.length
+            };
+            return Object.fromEntries(kept.map((id)=>[
+                    id,
+                    true
+                ]));
+        });
+        if (limitReached) onSelectionLimitReached?.(limitReached);
+    };
+    useEffect(()=>{
+        if (null == maxSelectedRows) return;
+        const selectedIds = Object.keys(rowSelection).filter((id)=>rowSelection[id]);
+        if (selectedIds.length <= maxSelectedRows) {
+            reportedSelectionLimitRef.current = null;
+            return;
+        }
+        const signature = `${maxSelectedRows}:${selectedIds.join(",")}`;
+        if (reportedSelectionLimitRef.current === signature) return;
+        reportedSelectionLimitRef.current = signature;
+        const kept = selectedIds.slice(0, maxSelectedRows);
+        setRowSelectionState(Object.fromEntries(kept.map((id)=>[
+                id,
+                true
+            ])));
+        onSelectionLimitReached?.({
+            limit: maxSelectedRows,
+            selectedCount: kept.length
+        });
+    }, [
+        maxSelectedRows,
+        rowSelection
+    ]);
+    const [columnVisibility, setColumnVisibility] = useControllable(columnVisibilityProp, {}, onColumnVisibilityChange);
+    const [columnOrder, setColumnOrder] = useControllable(columnOrderProp, [], onColumnOrderChange);
+    const [columnPinning, setColumnPinning] = useControllable(columnPinningProp, EMPTY_COLUMN_PINNING, onColumnPinningChange);
+    const [expanded, setExpanded] = useControllable(expandedProp, {}, onExpandedChange);
+    const [pagination, setPagination] = useControllable(paginationProp, {
+        pageIndex: 0,
+        pageSize: pageSizeOptions[0] ?? 10
+    }, onPaginationChange);
+    const [columnSizing, setColumnSizing] = useState({});
+    const editTriggerIdRef = useRef(null);
+    const draftRowIdRef = useRef(null);
+    const [editingRowId, setEditingRowId] = useControllable(editingRowIdProp, null, onEditingRowIdChange);
+    const [draft, setDraft] = useState({});
+    const draftRef = useRef(draft);
+    draftRef.current = draft;
+    const [editErrors, setEditErrors] = useState({});
+    const [dirty, setDirty] = useState(false);
+    const isEditing = null != editingRowId;
+    const locked = isEditing && lockInteractionsWhileEditing;
+    const blocked = (action)=>{
+        if (!locked) return false;
+        onInteractionBlocked?.({
+            action,
+            reason: "editing",
+            rowId: editingRowId
+        });
+        return true;
+    };
+    const selectedCount = Object.values(rowSelection).filter(Boolean).length;
+    const selectionLimitReached = null != maxSelectedRows && selectedCount >= maxSelectedRows;
+    const rowSelectionPredicate = (row)=>{
+        const isSelected = true === rowSelection[row.id];
+        if (canSelectRow && !canSelectRow(row, {
+            selectedCount,
+            isSelected
+        })) return false;
+        if (selectionLimitReached && !isSelected) return false;
+        return true;
+    };
+    const columns = useMemo(()=>buildColumns({
+            userColumns: applyColumnDefaults(userColumns),
+            enableRowReorder,
+            enableRowSelection,
+            locked,
+            getRowLabel,
+            selectAllLabel: translations.selectAllLabel,
+            showSelectAll: "multiple" === selectionMode && null == maxSelectedRows
+        }), [
+        userColumns,
+        enableRowReorder,
+        enableRowSelection,
+        locked,
+        getRowLabel,
+        translations.selectAllLabel,
+        selectionMode,
+        maxSelectedRows
+    ]);
+    const effectiveColumnOrder = useMemo(()=>{
+        if (0 === columnOrder.length) return columnOrder;
+        const builtIns = [
+            DRAG_COLUMN_ID,
+            SELECTION_COLUMN_ID
+        ].filter((id)=>!columnOrder.includes(id));
+        return builtIns.length > 0 ? [
+            ...builtIns,
+            ...columnOrder
+        ] : columnOrder;
+    }, [
+        columnOrder
+    ]);
+    const table = useTable({
+        features: dataTableFeatures,
+        data,
+        columns,
+        getRowId,
+        state: {
+            sorting,
+            columnFilters,
+            globalFilter,
+            rowSelection,
+            columnVisibility,
+            columnOrder: effectiveColumnOrder,
+            columnPinning,
+            expanded,
+            pagination,
+            columnSizing
+        },
+        enableSorting,
+        enableRowSelection: enableRowSelection ? rowSelectionPredicate : false,
+        enableMultiRowSelection: "multiple" === selectionMode,
+        enableRowRangeSelection: false,
+        enableColumnFilters,
+        enableColumnPinning,
+        enableColumnResizing,
+        columnResizeMode: "onChange",
+        manualSorting,
+        manualFiltering,
+        manualPagination: manualPagination || !enablePagination,
+        rowCount,
+        pageCount,
+        getSubRows,
+        getRowCanExpand: getRowCanExpand ?? (renderExpandedRow ? ()=>true : void 0),
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onGlobalFilterChange: setGlobalFilter,
+        onRowSelectionChange: setRowSelection,
+        onColumnVisibilityChange: setColumnVisibility,
+        onColumnOrderChange: setColumnOrder,
+        onColumnPinningChange: setColumnPinning,
+        onExpandedChange: setExpanded,
+        onPaginationChange: setPagination,
+        onColumnSizingChange: setColumnSizing,
+        globalFilterFn: "includesString",
+        meta: {
+            updateData: (rowId, columnId, value)=>{
+                const target = table.getCoreRowModel().rowsById[rowId];
+                if (!target) return;
+                onCellEditCommit?.({
+                    rowId,
+                    columnId,
+                    value,
+                    row: target.original
+                });
+            }
+        }
+    });
+    useEffect(()=>{
+        onReady?.(table);
+    }, []);
+    useEffect(()=>{
+        if (editingRowId) {
+            const row = document.getElementById(editedRowElementId(instanceId, editingRowId));
+            const candidates = row?.querySelectorAll("[data-editor-control] input, [data-editor-control] select, [data-editor-control] textarea, [data-editor-control] button");
+            const first = Array.from(candidates ?? []).find((node)=>!node.disabled);
+            first?.focus();
+            return;
+        }
+        const trigger = editTriggerIdRef.current ? document.getElementById(editTriggerIdRef.current) : null;
+        trigger?.focus();
+        editTriggerIdRef.current = null;
+    }, [
+        editingRowId,
+        instanceId
+    ]);
+    useEffect(()=>{
+        if (!editingRowId) {
+            draftRowIdRef.current = null;
+            setDraft({});
+            setEditErrors({});
+            setDirty(false);
+            return;
+        }
+        if (draftRowIdRef.current === editingRowId) return;
+        const row = table.getCoreRowModel().rowsById[editingRowId];
+        if (row) seedDraft(row);
+    }, [
+        editingRowId
+    ]);
+    useEffect(()=>{
+        if (editingRowId && !table.getCoreRowModel().rowsById[editingRowId]) cancelEdit();
+    }, [
+        editingRowId,
+        data
+    ]);
+    const headerGroupCount = table.getHeaderGroups().length;
+    useIsomorphicLayoutEffect(()=>{
+        if (!stickyHeader) return;
+        const nodes = headerRowRefs.current.filter((n)=>null != n);
+        if (0 === nodes.length) return;
+        const measure = ()=>{
+            const offsets = [
+                0
+            ];
+            for (const node of nodes)offsets.push((offsets.at(-1) ?? 0) + node.getBoundingClientRect().height);
+            setHeaderOffsets(offsets);
+        };
+        const observer = new ResizeObserver(measure);
+        for (const node of nodes)observer.observe(node);
+        measure();
+        return ()=>observer.disconnect();
+    }, [
+        stickyHeader,
+        headerGroupCount
+    ]);
+    const seedDraft = (row)=>{
+        const initial = {};
+        for (const column of table.getAllLeafColumns())if (column.columnDef.meta?.editable) initial[column.id] = row.getValue(column.id);
+        draftRowIdRef.current = row.id;
+        setDraft(initial);
+        setEditErrors({});
+        setDirty(false);
+    };
+    const startEdit = (row)=>{
+        if (isEditing || canEditRow && !canEditRow(row)) return;
+        editTriggerIdRef.current = `${instanceId}-edit-${row.id}`;
+        seedDraft(row);
+        setEditingRowId(row.id);
+        onEditStart?.({
+            rowId: row.id,
+            row: row.original
+        });
+    };
+    const setDraftValue = (rowId, columnId, value)=>{
+        const next = {
+            ...draftRef.current,
+            [columnId]: value
+        };
+        draftRef.current = next;
+        setDraft(next);
+        onEditChange?.({
+            rowId,
+            columnId,
+            value,
+            draft: next
+        });
+        setDirty(true);
+        setEditErrors((old)=>old[columnId] ? {
+                ...old,
+                [columnId]: ""
+            } : old);
+    };
+    const cancelEdit = ()=>{
+        if (!isEditing) return;
+        const rowId = editingRowId;
+        setEditingRowId(null);
+        onEditCancel?.({
+            rowId,
+            dirty
+        });
+    };
+    const commitEdit = ()=>{
+        if (!isEditing) return;
+        const rowId = editingRowId;
+        const row = table.getCoreRowModel().rowsById[rowId];
+        if (!row) return void cancelEdit();
+        const editableColumns = table.getVisibleLeafColumns().filter((column)=>{
+            const meta = column.columnDef.meta;
+            if (!meta?.editable) return false;
+            if ("custom" !== resolveColumnType(meta)) return true;
+            return Boolean(meta.renderEditor || editorRenderers?.custom);
+        });
+        const committed = draftRef.current;
+        const errors = validateDraft(editableColumns, committed, translations.requiredLabel);
+        if (Object.keys(errors).length > 0) {
+            setEditErrors(errors);
+            onEditValidationError?.({
+                rowId,
+                errors
+            });
+            return;
+        }
+        onEditCommit?.({
+            rowId,
+            draft: committed,
+            row: row.original
+        });
+        setEditingRowId(null);
+    };
+    const rows = table.getRowModel().rows;
+    const rootRowIds = useMemo(()=>rows.filter((r)=>0 === r.depth).map((r)=>r.id), [
+        rows
+    ]);
+    const headerGroups = table.getHeaderGroups();
+    const leafColumns = useMemo(()=>headerGroups.at(-1)?.headers.map((h)=>h.column) ?? table.getVisibleLeafColumns(), [
+        headerGroups
+    ]);
+    const columnCount = leafColumns.length;
+    const virtualizationUsable = enableVirtualization && !!maxHeight;
+    const hasWarnedAboutUnboundedVirtualization = useRef(false);
+    const hasWarnedAboutVirtualizedCellSpan = useRef(false);
+    useEffect(()=>{
+        if (!(virtualizationUsable && getCellSpan) || hasWarnedAboutVirtualizedCellSpan.current || "undefined" == typeof process || process.env?.NODE_ENV === "production") return;
+        hasWarnedAboutVirtualizedCellSpan.current = true;
+        console.warn("DataTable: getCellSpan and enableVirtualization are both set. rowSpan/colSpan require the merged rows to be adjacent DOM siblings, which virtualization's windowing does not guarantee — a spanning cell's owner row can scroll out of view while a `hidden: true` follower row stays rendered, leaving a gap.");
+    }, [
+        virtualizationUsable,
+        getCellSpan
+    ]);
+    const hasWarnedAboutVirtualizedRowReorder = useRef(false);
+    useEffect(()=>{
+        if (!(virtualizationUsable && enableRowReorder) || hasWarnedAboutVirtualizedRowReorder.current || "undefined" == typeof process || process.env?.NODE_ENV === "production") return;
+        hasWarnedAboutVirtualizedRowReorder.current = true;
+        console.warn("DataTable: enableRowReorder and enableVirtualization are both set. Dragging a row toward a target outside the currently rendered window is unreliable — dnd-kit only tracks rows that are actually mounted, not the full row list.");
+    }, [
+        virtualizationUsable,
+        enableRowReorder
+    ]);
+    useEffect(()=>{
+        if (!enableVirtualization || maxHeight) {
+            hasWarnedAboutUnboundedVirtualization.current = false;
+            return;
+        }
+        if (hasWarnedAboutUnboundedVirtualization.current || "undefined" == typeof process || process.env?.NODE_ENV === "production") return;
+        hasWarnedAboutUnboundedVirtualization.current = true;
+        console.warn("DataTable: enableVirtualization has no effect without maxHeight — the scroll container never gets a bounded height to measure scrollTop against, so only the first batch of rows would render. Pass maxHeight to enable virtualization.");
+    }, [
+        enableVirtualization,
+        maxHeight
+    ]);
+    const rowVirtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: ()=>scrollRef.current,
+        estimateSize: ()=>estimateRowHeight,
+        overscan: 12,
+        enabled: virtualizationUsable
+    });
+    const virtualItems = virtualizationUsable ? rowVirtualizer.getVirtualItems() : [];
+    const firstVirtual = virtualItems[0];
+    const lastVirtual = virtualItems.at(-1);
+    const paddingTop = firstVirtual ? firstVirtual.start : 0;
+    const paddingBottom = lastVirtual ? rowVirtualizer.getTotalSize() - lastVirtual.end : 0;
+    const renderRows = virtualizationUsable ? virtualItems.flatMap((vi)=>{
+        const row = rows[vi.index];
+        return row ? [
+            {
+                row,
+                index: vi.index
+            }
+        ] : [];
+    }) : rows.map((row, index)=>({
+            row,
+            index
+        }));
+    const [activeDragAxis, setActiveDragAxis] = useState(null);
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates
+    }));
+    useEffect(()=>{
+        if (!onReachEnd || maxHeight) return;
+        const onWindowScroll = ()=>{
+            if (dataLengthRef.current === lastReachEndCountRef.current) return;
+            const distance = document.documentElement.scrollHeight - window.scrollY - window.innerHeight;
+            checkReachEnd(distance, reachEndThreshold, reachedEndRef, fireReachEnd);
+        };
+        window.addEventListener("scroll", onWindowScroll, {
+            passive: true
+        });
+        return ()=>window.removeEventListener("scroll", onWindowScroll);
+    }, [
+        onReachEnd,
+        maxHeight,
+        reachEndThreshold
+    ]);
+    useEffect(()=>{
+        if (!onReachEnd || loadingMore || maxHeight) return;
+        if (data.length === lastReachEndCountRef.current) return;
+        const distance = document.documentElement.scrollHeight - window.scrollY - window.innerHeight;
+        reachedEndRef.current = distance <= reachEndThreshold;
+        if (reachedEndRef.current) fireReachEnd();
+    }, [
+        data.length,
+        loadingMore,
+        reachEndThreshold,
+        maxHeight
+    ]);
+    useEffect(()=>{
+        if (!onReachEnd || loadingMore || !maxHeight) return;
+        const el = scrollRef.current;
+        if (!el) return;
+        if (data.length === lastReachEndCountRef.current) return;
+        const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+        reachedEndRef.current = distance <= reachEndThreshold;
+        if (reachedEndRef.current) fireReachEnd();
+    }, [
+        data.length,
+        loadingMore,
+        reachEndThreshold
+    ]);
+    const handleScroll = (event)=>{
+        if (!(onReachEnd && maxHeight)) return;
+        const el = event.currentTarget;
+        if (el.scrollHeight <= el.clientHeight) return;
+        if (data.length === lastReachEndCountRef.current) return;
+        const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+        checkReachEnd(distance, reachEndThreshold, reachedEndRef, fireReachEnd);
+    };
+    const handleColumnDragEnd = (event)=>{
+        const { active, over } = event;
+        if (!over || active.id === over.id) return;
+        const current = table.state.columnOrder.length ? table.state.columnOrder : table.getAllLeafColumns().map((c)=>c.id);
+        const from = current.indexOf(active.id);
+        const to = current.indexOf(over.id);
+        if (-1 === from || -1 === to) return;
+        const next = arrayMove(current, from, to);
+        setColumnOrder(next);
+        const publicBefore = current.filter((id)=>!BUILTIN_COLUMN_IDS.has(id));
+        const publicOrder = next.filter((id)=>!BUILTIN_COLUMN_IDS.has(id));
+        onColumnReorder?.({
+            from: publicBefore.indexOf(active.id),
+            to: publicOrder.indexOf(active.id),
+            columnId: active.id,
+            order: publicOrder
+        });
+    };
+    const handleRowDragEnd = (event)=>{
+        const { active, over } = event;
+        if (!over || active.id === over.id) return;
+        const coreRowsById = table.getCoreRowModel().rowsById;
+        const from = coreRowsById[active.id]?.index;
+        const to = coreRowsById[over.id]?.index;
+        if (void 0 === from || void 0 === to) return;
+        const next = arrayMove([
+            ...data
+        ], from, to);
+        onRowReorder?.({
+            from,
+            to,
+            rowId: active.id,
+            data: next
+        });
+    };
+    const hasFooter = table.getAllLeafColumns().some((c)=>null != c.columnDef.footer);
+    const indentColumnId = leafColumns.find((c)=>!BUILTIN_COLUMN_IDS.has(c.id))?.id;
+    const reorderableLeafIds = useMemo(()=>leafColumns.filter((c)=>!(BUILTIN_COLUMN_IDS.has(c.id) || c.getIsPinned())).map((c)=>c.id), [
+        leafColumns
+    ]);
+    const hasActionsColumn = !!renderRowActions || !!rowActions?.length || enableInlineEdit || enableExpanding && (!!renderExpandedRow || !!getSubRows || !!getRowCanExpand);
+    const hasWarnedAboutPinnedActionsOverlap = useRef(false);
+    useEffect(()=>{
+        const endPinned = enableColumnPinning && table.getAllLeafColumns().some((c)=>"end" === c.getIsPinned());
+        if (!(endPinned && stickyActions && hasActionsColumn) || hasWarnedAboutPinnedActionsOverlap.current || "undefined" == typeof process || process.env?.NODE_ENV === "production") return;
+        hasWarnedAboutPinnedActionsOverlap.current = true;
+        console.warn("DataTable: a column pinned to 'end' and the sticky actions cell both freeze at the trailing edge, so they overlap — the actions column is not part of the column model, so end-pinned offsets cannot account for its width. Use stickyActions={false}, or pin to 'start' instead.");
+    }, [
+        enableColumnPinning,
+        stickyActions,
+        hasActionsColumn,
+        table
+    ]);
+    const hasWarnedAboutPinnedStringWidth = useRef(false);
+    useEffect(()=>{
+        const offender = enableColumnPinning && table.getAllLeafColumns().find((c)=>c.getIsPinned() && "string" == typeof c.columnDef.meta?.width);
+        if (!offender || hasWarnedAboutPinnedStringWidth.current || "undefined" == typeof process || process.env?.NODE_ENV === "production") return;
+        hasWarnedAboutPinnedStringWidth.current = true;
+        console.warn(`DataTable: pinned column "${offender.id}" declares a string meta.width, which cannot be mirrored into TanStack's numeric \`size\`. Frozen offsets are computed from \`size\`, so this column will be positioned as if it were the default width and overlap its neighbours. Give pinned columns a numeric meta.width.`);
+    }, [
+        enableColumnPinning,
+        table
+    ]);
+    const renderColumnFilter = (column)=>{
+        const meta = column.columnDef.meta;
+        const type = resolveColumnType(meta);
+        const ctx = {
+            column,
+            type,
+            value: column.getFilterValue(),
+            setValue: (next)=>column.setFilterValue(next),
+            disabled: locked,
+            size,
+            operatorLabels: translations.operatorLabels,
+            options: meta?.options ?? meta?.filterOptions ?? []
+        };
+        if (meta?.renderFilter) return meta.renderFilter(ctx);
+        const slot = renderHeaderFilter?.(column);
+        if (void 0 !== slot) return slot;
+        const renderer = filterRenderers?.[type] ?? DEFAULT_FILTER_RENDERERS[type];
+        return renderer?.(ctx) ?? null;
+    };
+    const renderHeaderCell = (header, groupIndex, dnd)=>{
+        const column = header.column;
+        const ariaSort = sortState(column, enableSorting);
+        let dropClass = "";
+        if (dnd?.dropSide === "start") dropClass = "border-primary border-s-2";
+        else if (dnd?.dropSide === "end") dropClass = "border-primary border-e-2";
+        return /*#__PURE__*/ jsxs(Table.ColumnHeader, {
+            align: column.columnDef.meta?.align,
+            "aria-sort": ariaSort,
+            className: `group/header ${stickyHeader ? "" : "relative"} ${pinClass(column, "header") ?? ""} ${dropClass}`,
+            colSpan: header.colSpan,
+            "data-dragging": dnd?.isDragging || void 0,
+            "data-pinned": column.getIsPinned() || void 0,
+            ref: dnd?.setNodeRef,
+            style: {
+                ...OPAQUE_HEADER_BG,
+                ...stickyRowOffset(stickyHeader, headerOffsets, groupIndex),
+                ...getPinningStyles(column, "header"),
+                ...dnd?.style,
+                ...getColumnSizeStyles(column, enableColumnResizing, columnSizing)
+            },
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: styles.headerLabel(),
+                    children: [
+                        dnd && /*#__PURE__*/ jsx(HeaderDragHandle, {
+                            attributes: dnd.attributes,
+                            label: columnLabel(column),
+                            listeners: dnd.listeners,
+                            setActivatorNodeRef: dnd.setActivatorNodeRef,
+                            styles: styles
+                        }),
+                        /*#__PURE__*/ jsx(HeaderSortLabel, {
+                            enableSorting: enableSorting,
+                            header: header,
+                            locked: locked,
+                            styles: styles
+                        })
+                    ]
+                }),
+                enableColumnResizing && column.getCanResize() ? /*#__PURE__*/ jsx("button", {
+                    "aria-label": `Resize ${columnLabel(column)}`,
+                    className: styles.resizeHandle(),
+                    onDoubleClick: ()=>column.resetSize(),
+                    onMouseDown: header.getResizeHandler(),
+                    onTouchStart: header.getResizeHandler(),
+                    type: "button"
+                }) : null
+            ]
+        }, header.id);
+    };
+    const headerContent = /*#__PURE__*/ jsxs(Table.Header, {
+        ...slotProps?.header,
+        children: [
+            table.getHeaderGroups().map((headerGroup, groupIndex)=>/*#__PURE__*/ jsxs(Table.Row, {
+                    className: hideHeader ? "sr-only" : void 0,
+                    ref: (node)=>{
+                        headerRowRefs.current[groupIndex] = node;
+                    },
+                    children: [
+                        headerGroup.headers.map((header)=>{
+                            const reorderable = enableColumnReorder && !locked && 0 === header.subHeaders.length && !header.column.getIsPinned() && !BUILTIN_COLUMN_IDS.has(header.column.id);
+                            return reorderable ? /*#__PURE__*/ jsx(SortableHeaderContent, {
+                                columnId: header.column.id,
+                                children: (dnd)=>renderHeaderCell(header, groupIndex, dnd)
+                            }, header.id) : renderHeaderCell(header, groupIndex);
+                        }),
+                        hasActionsColumn && 0 === groupIndex && /*#__PURE__*/ jsx(Table.ColumnHeader, {
+                            className: stickyActions ? "sticky end-0" : void 0,
+                            numeric: true,
+                            rowSpan: table.getHeaderGroups().length,
+                            style: {
+                                ...OPAQUE_HEADER_BG,
+                                ...stickyActions ? {
+                                    zIndex: DATA_TABLE_Z.stickyActionsHeaderCell
+                                } : void 0
+                            },
+                            children: translations.actionsLabel
+                        })
+                    ]
+                }, headerGroup.id)),
+            enableColumnFilters && /*#__PURE__*/ jsxs("tr", {
+                "aria-label": translations.filtersLabel,
+                className: styles.filterRow(),
+                children: [
+                    leafColumns.map((column)=>/*#__PURE__*/ jsx("td", {
+                            className: `${styles.filterCell()} ${pinClass(column, "header") ?? ""}`,
+                            "data-pinned": column.getIsPinned() || void 0,
+                            style: {
+                                ...OPAQUE_HEADER_BG,
+                                ...getPinningStyles(column, "header"),
+                                ...stickyHeader ? {
+                                    position: "sticky",
+                                    top: headerHeight,
+                                    zIndex: DATA_TABLE_Z.stickyHeaderCell
+                                } : void 0,
+                                ...column.getIsPinned() && stickyHeader ? {
+                                    zIndex: DATA_TABLE_Z.pinnedHeaderCell
+                                } : void 0
+                            },
+                            children: /*#__PURE__*/ jsx("div", {
+                                className: styles.filterControl(),
+                                children: column.getCanFilter() ? renderColumnFilter(column) : null
+                            })
+                        }, column.id)),
+                    hasActionsColumn && /*#__PURE__*/ jsx("td", {
+                        className: stickyActions ? `${styles.filterCell()} sticky end-0 bg-table-header-bg` : styles.filterCell(),
+                        style: {
+                            ...OPAQUE_HEADER_BG,
+                            ...stickyHeader ? {
+                                position: "sticky",
+                                top: headerHeight
+                            } : void 0,
+                            ...stickyActions ? {
+                                zIndex: DATA_TABLE_Z.stickyActionsHeaderCell
+                            } : void 0
+                        }
+                    })
+                ]
+            })
+        ]
+    });
+    const renderCellEditor = (row, column)=>{
+        const meta = column.columnDef.meta;
+        if (!(enableInlineEdit && meta?.editable) || editingRowId !== row.id) return;
+        const type = resolveColumnType(meta);
+        const ctx = {
+            row,
+            column,
+            type,
+            value: draft[column.id],
+            setValue: (next)=>setDraftValue(row.id, column.id, next),
+            disabled: false,
+            size,
+            options: meta.options ?? meta.filterOptions ?? [],
+            error: editErrors[column.id] || void 0,
+            errorId: `${instanceId}-err-${row.id}-${column.id}`,
+            commit: commitEdit,
+            cancel: cancelEdit
+        };
+        if (meta.renderEditor) return meta.renderEditor(ctx);
+        const renderer = editorRenderers?.[type] ?? DEFAULT_EDITOR_RENDERERS[type];
+        return renderer?.(ctx) ?? void 0;
+    };
+    const defaultRowActions = (row)=>{
+        if (!enableInlineEdit) return null;
+        if (editingRowId === row.id) return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Button, {
+                    "aria-label": "Save row",
+                    icon: "token-icon-check",
+                    onClick: (e)=>{
+                        e.stopPropagation();
+                        commitEdit();
+                    },
+                    size: "sm",
+                    theme: "borderless",
+                    variant: "primary"
+                }),
+                /*#__PURE__*/ jsx(Button, {
+                    "aria-label": "Cancel edit",
+                    icon: "token-icon-close",
+                    onClick: (e)=>{
+                        e.stopPropagation();
+                        cancelEdit();
+                    },
+                    size: "sm",
+                    theme: "borderless",
+                    variant: "secondary"
+                })
+            ]
+        });
+        return /*#__PURE__*/ jsx(ActionIcon, {
+            "aria-label": `Edit ${getRowLabel?.(row) ?? `row ${row.id}`}`,
+            disabled: isEditing || (canEditRow ? !canEditRow(row) : false),
+            icon: "icon-[mdi--pencil-outline]",
+            id: `${instanceId}-edit-${row.id}`,
+            onClick: (e)=>{
+                e.stopPropagation();
+                startEdit(row);
+            },
+            size: size,
+            tone: "neutral"
+        });
+    };
+    const rowActionsContent = (row)=>{
+        const custom = renderRowActions?.(row, {
+            isEditing: editingRowId === row.id,
+            startEdit: ()=>startEdit(row),
+            commitEdit,
+            cancelEdit,
+            disabled: locked && editingRowId !== row.id
+        });
+        return void 0 === custom ? defaultRowActions(row) : custom;
+    };
+    const expandAriaControls = (rowId)=>renderExpandedRow ? `${instanceId}-detail-${rowId}` : void 0;
+    const renderActionsCell = (row)=>/*#__PURE__*/ jsx(Table.Cell, {
+            className: stickyActions ? "data-table-frozen-cell sticky end-0" : void 0,
+            numeric: true,
+            style: stickyActions ? {
+                zIndex: DATA_TABLE_Z.stickyActionsCell
+            } : void 0,
+            children: /*#__PURE__*/ jsxs("div", {
+                className: styles.actionsCell(),
+                children: [
+                    enableExpanding && row.getCanExpand() ? /*#__PURE__*/ jsx(Button, {
+                        "aria-controls": expandAriaControls(row.id),
+                        "aria-expanded": row.getIsExpanded(),
+                        "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+                        disabled: locked,
+                        icon: row.getIsExpanded() ? "token-icon-chevron-down" : "token-icon-chevron-right",
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            if (blocked("expand")) return;
+                            row.getToggleExpandedHandler()();
+                        },
+                        size: "sm",
+                        theme: "borderless",
+                        variant: "secondary"
+                    }) : null,
+                    rowActions?.map((action)=>action.hidden?.(row) ? null : /*#__PURE__*/ jsx(Button, {
+                            "aria-label": action.label,
+                            disabled: action.disabled?.(row) || locked,
+                            icon: action.icon,
+                            onClick: (e)=>{
+                                e.stopPropagation();
+                                action.onAction(row);
+                            },
+                            size: "sm",
+                            theme: "borderless",
+                            variant: "danger" === action.tone ? "danger" : "secondary"
+                        }, action.id)),
+                    rowActionsContent(row)
+                ]
+            })
+        });
+    const { onClick: rowOnClick, style: rowStyle, ref: rowRef, ...restRowProps } = slotProps?.row ?? {};
+    const renderRowCells = (row, cells, rowIndex, dnd)=>{
+        const rowLabel = getRowLabel?.(row) ?? `row ${row.id}`;
+        return cells.map((cell)=>{
+            const span = getCellSpan?.(cell, {
+                row,
+                rows,
+                rowIndex
+            });
+            if (span?.hidden) return null;
+            const column = cell.column;
+            return /*#__PURE__*/ jsx(DataTableBodyCell, {
+                cell: cell,
+                columnSizing: columnSizing,
+                dnd: dnd,
+                editor: renderCellEditor(row, column),
+                editorError: editingRowId === row.id ? editErrors[column.id] || void 0 : void 0,
+                editorErrorId: `${instanceId}-err-${row.id}-${column.id}`,
+                enableColumnResizing: enableColumnResizing,
+                enableRowReorder: enableRowReorder,
+                indentColumnId: indentColumnId,
+                row: row,
+                rowLabel: rowLabel,
+                span: span,
+                styles: styles
+            }, cell.id);
+        });
+    };
+    const headerRowCount = table.getHeaderGroups().length + (enableColumnFilters ? 1 : 0);
+    const pageRowOffset = enablePagination ? pagination.pageIndex * pagination.pageSize : 0;
+    const buildMainRow = (row, rowIndex, dnd, opts)=>/*#__PURE__*/ jsxs(Table.Row, {
+            ...restRowProps,
+            "aria-rowindex": headerRowCount + pageRowOffset + rowIndex + 1,
+            className: rowDragClass(dnd, {
+                className: restRowProps.className,
+                striped: effectiveStriped,
+                tintNestedRows,
+                rowIndex
+            }),
+            "data-depth": row.depth || void 0,
+            "data-dragging": dnd?.isDragging || void 0,
+            id: opts.rowElementId ?? restRowProps.id,
+            onClick: buildRowClickHandler(row, rowOnClick, onRowClick, blocked),
+            onKeyDown: (event)=>{
+                restRowProps.onKeyDown?.(event);
+                opts.rowKeyDown?.(event);
+            },
+            ref: composeRowRef(dnd, rowRef),
+            selected: enableRowSelection ? row.getIsSelected() : void 0,
+            style: {
+                ...rowStyle,
+                ...dnd?.style
+            },
+            tabIndex: opts.rowIsClickable ? 0 : restRowProps.tabIndex,
+            children: [
+                renderRowCells(row, row.getVisibleCells(), rowIndex, dnd),
+                hasActionsColumn ? renderActionsCell(row) : null
+            ]
+        });
+    const renderBodyRow = (row, rowIndex, dnd)=>{
+        const rowIsClickable = !!onRowClick && !locked;
+        const actionsColumn = hasActionsColumn ? 1 : 0;
+        const rowElementId = editingRowElementId(editingRowId, instanceId, row.id);
+        const rowKeyDown = rowIsClickable ? buildRowKeyDownHandler(row, onRowClick, blocked) : void 0;
+        const mainRow = buildMainRow(row, rowIndex, dnd, {
+            rowIsClickable,
+            rowElementId,
+            rowKeyDown
+        });
+        const expandedRow = renderExpandedRow && row.getIsExpanded() ? renderExpandedDetailRow({
+            row,
+            renderExpandedRow,
+            colSpan: columnCount + actionsColumn,
+            instanceId,
+            styles,
+            tintNestedRows
+        }) : null;
+        return /*#__PURE__*/ jsxs(external_react_Fragment, {
+            children: [
+                mainRow,
+                expandedRow
+            ]
+        }, row.id);
+    };
+    const rowReorderActive = enableRowReorder && !locked && 0 === sorting.length && 0 === columnFilters.length && !globalFilter;
+    const bodyRows = renderRows.map(({ row, index: rowIndex })=>rowReorderActive && 0 === row.depth ? /*#__PURE__*/ jsx(SortableRow, {
+            enabled: enableRowReorder,
+            row: row,
+            children: (dnd)=>renderBodyRow(row, rowIndex, dnd)
+        }, row.id) : renderBodyRow(row, rowIndex));
+    const skeletonRows = (count, keyPrefix)=>Array.from({
+            length: count
+        }, (_, i)=>`${keyPrefix}-${i}`).map((rowKey)=>/*#__PURE__*/ jsxs(Table.Row, {
+                "aria-hidden": "true",
+                children: [
+                    leafColumns.map((column)=>/*#__PURE__*/ jsx(Table.Cell, {
+                            children: /*#__PURE__*/ jsx(Skeleton.Text, {
+                                noOfLines: 1,
+                                size: size
+                            })
+                        }, `${rowKey}-${column.id}`)),
+                    hasActionsColumn && /*#__PURE__*/ jsx(Table.Cell, {
+                        className: stickyActions ? "data-table-frozen-cell sticky end-0" : void 0,
+                        numeric: true,
+                        style: stickyActions ? {
+                            zIndex: DATA_TABLE_Z.stickyActionsCell
+                        } : void 0,
+                        children: /*#__PURE__*/ jsx(Skeleton.Text, {
+                            noOfLines: 1,
+                            size: size
+                        })
+                    })
+                ]
+            }, rowKey));
+    const emptyState = renderEmpty ? renderEmpty() : /*#__PURE__*/ jsxs("div", {
+        className: styles.empty(),
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                icon: "icon-[mdi--table-off]",
+                size: "xl"
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        children: translations.emptyTitle
+                    }),
+                    /*#__PURE__*/ jsx("p", {
+                        className: "text-table-sm",
+                        children: translations.emptyDescription
+                    })
+                ]
+            })
+        ]
+    });
+    let statusMessage = "";
+    if (loading) statusMessage = translations.loadingLabel;
+    else if (0 === rows.length) statusMessage = translations.emptyTitle;
+    else if (isEditing) statusMessage = translations.editingLabel;
+    const emptyRow = /*#__PURE__*/ jsx("tr", {
+        children: /*#__PURE__*/ jsx(Table.Cell, {
+            colSpan: columnCount + (hasActionsColumn ? 1 : 0),
+            children: emptyState
+        })
+    });
+    let bodyState = "rows";
+    if (loading) bodyState = "loading";
+    else if (0 === rows.length) bodyState = loadingMore ? "loading" : "empty";
+    const bodyContent = /*#__PURE__*/ jsxs(Table.Body, {
+        ...slotProps?.body,
+        children: [
+            "loading" === bodyState && skeletonRows(loadingRowCount, "skeleton"),
+            "empty" === bodyState && emptyRow,
+            "rows" === bodyState && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    paddingTop > 0 && /*#__PURE__*/ jsx("tr", {
+                        children: /*#__PURE__*/ jsx("td", {
+                            colSpan: columnCount + (hasActionsColumn ? 1 : 0),
+                            style: {
+                                height: paddingTop
+                            }
+                        })
+                    }),
+                    bodyRows,
+                    loadingMore && skeletonRows(1, "skeleton-more"),
+                    paddingBottom > 0 && /*#__PURE__*/ jsx("tr", {
+                        children: /*#__PURE__*/ jsx("td", {
+                            colSpan: columnCount + (hasActionsColumn ? 1 : 0),
+                            style: {
+                                height: paddingBottom
+                            }
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+    const footerContent = hasFooter ? /*#__PURE__*/ jsx(Table.Footer, {
+        children: table.getFooterGroups().map((footerGroup)=>/*#__PURE__*/ jsxs(Table.Row, {
+                children: [
+                    footerGroup.headers.map((header)=>/*#__PURE__*/ jsx(Table.Cell, {
+                            children: header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())
+                        }, header.id)),
+                    hasActionsColumn && /*#__PURE__*/ jsx(Table.Cell, {
+                        className: stickyActions ? "sticky end-0 bg-table-footer-bg" : void 0,
+                        numeric: true,
+                        style: stickyActions ? {
+                            zIndex: DATA_TABLE_Z.stickyActionsCell
+                        } : void 0
+                    })
+                ]
+            }, footerGroup.id))
+    }) : null;
+    const tableEl = /*#__PURE__*/ jsxs(Table, {
+        "aria-busy": loading || loadingMore || void 0,
+        "aria-rowcount": headerRowCount + table.getRowCount(),
+        interactive: (interactive || !!onRowClick) && !locked,
+        showColumnBorder: showColumnBorder,
+        size: size,
+        stickyHeader: stickyHeader,
+        variant: outlined || "striped" === variant ? "line" : variant,
+        ...slotProps?.root,
+        style: {
+            tableLayout,
+            ...slotProps?.root?.style
+        },
+        children: [
+            caption && /*#__PURE__*/ jsx(Table.Caption, {
+                children: caption
+            }),
+            enableColumnReorder ? /*#__PURE__*/ jsx(SortableContext, {
+                items: reorderableLeafIds,
+                strategy: horizontalListSortingStrategy,
+                children: headerContent
+            }) : headerContent,
+            rowReorderActive ? /*#__PURE__*/ jsx(SortableContext, {
+                items: rootRowIds,
+                strategy: verticalListSortingStrategy,
+                children: bodyContent
+            }) : bodyContent,
+            footerContent
+        ]
+    });
+    const isColumnDrag = (event)=>event.active.data.current?.type === "column";
+    const handleDragEnd = (event)=>{
+        if (enableColumnReorder && isColumnDrag(event)) return void handleColumnDragEnd(event);
+        if (rowReorderActive) handleRowDragEnd(event);
+    };
+    let scrollBody = tableEl;
+    if (enableColumnReorder || rowReorderActive) scrollBody = /*#__PURE__*/ jsx(DndContext, {
+        collisionDetection: closestCenter,
+        modifiers: [
+            "column" === activeDragAxis ? restrictToHorizontalAxis : restrictToVerticalAxis
+        ],
+        onDragEnd: (event)=>{
+            handleDragEnd(event);
+            setActiveDragAxis(null);
+        },
+        onDragStart: (event)=>setActiveDragAxis(enableColumnReorder && isColumnDrag(event) ? "column" : "row"),
+        sensors: sensors,
+        children: scrollBody
+    });
+    const ctxValue = {
+        table,
+        pageSizeOptions,
+        translations,
+        locked,
+        blocked,
+        size,
+        paginationProps,
+        toolbarActions
+    };
+    return /*#__PURE__*/ jsx(DataTableContext.Provider, {
+        value: ctxValue,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: styles.wrapper({
+                className
+            }),
+            id: instanceId,
+            ref: ref,
+            children: [
+                /*#__PURE__*/ jsx("output", {
+                    "aria-live": "polite",
+                    className: "sr-only",
+                    children: statusMessage
+                }),
+                (enableGlobalFilter || enableColumnVisibility || toolbarActions?.length || renderToolbar) && (renderToolbar ? renderToolbar(table) : /*#__PURE__*/ jsxs(DataTable.Toolbar, {
+                    children: [
+                        enableGlobalFilter && /*#__PURE__*/ jsx(DataTable.GlobalSearch, {}),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: styles.toolbarActions(),
+                            children: [
+                                enableColumnVisibility && /*#__PURE__*/ jsx(DataTable.ColumnVisibility, {}),
+                                /*#__PURE__*/ jsx(DataTable.ToolbarActions, {})
+                            ]
+                        })
+                    ]
+                })),
+                /*#__PURE__*/ jsx("div", {
+                    className: styles.scroll(),
+                    onScroll: handleScroll,
+                    ref: scrollRef,
+                    style: maxHeight ? {
+                        maxHeight
+                    } : void 0,
+                    children: scrollBody
+                }),
+                enablePagination && /*#__PURE__*/ jsx(DataTable.Pagination, {})
+            ]
+        })
+    });
+}
+function buildColumns({ userColumns, enableRowReorder, enableRowSelection, locked, getRowLabel, selectAllLabel, showSelectAll }) {
+    const leading = [];
+    if (enableRowReorder) leading.push({
+        id: DRAG_COLUMN_ID,
+        header: ()=>null,
+        cell: ()=>null,
+        enableSorting: false,
+        enableColumnFilter: false,
+        size: 40,
+        meta: {
+            width: 40
+        }
+    });
+    if (enableRowSelection) leading.push({
+        id: SELECTION_COLUMN_ID,
+        header: ({ table })=>showSelectAll ? /*#__PURE__*/ jsx(Checkbox, {
+                "aria-label": selectAllLabel,
+                checked: table.getIsAllRowsSelected(),
+                disabled: locked,
+                indeterminate: table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected(),
+                onChange: table.getToggleAllRowsSelectedHandler()
+            }) : null,
+        cell: ({ row })=>/*#__PURE__*/ jsx(Checkbox, {
+                "aria-label": `Select ${getRowLabel?.(row) ?? `row ${row.id}`}`,
+                checked: row.getIsSelected(),
+                disabled: locked || !row.getCanSelect(),
+                indeterminate: row.getIsSomeSelected(),
+                onChange: row.getToggleSelectedHandler(),
+                onClick: (e)=>e.stopPropagation()
+            }),
+        enableSorting: false,
+        enableColumnFilter: false,
+        size: 44,
+        meta: {
+            width: 44
+        }
+    });
+    return [
+        ...leading,
+        ...userColumns
+    ];
+}
+DataTable.Toolbar = function({ children }) {
+    const styles = dataTableVariants();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.toolbar(),
+        children: children
+    });
+};
+DataTable.GlobalSearch = function({ className }) {
+    const { table, translations, locked, blocked, size } = useDataTableContext();
+    const styles = dataTableVariants();
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.toolbarSearch({
+            className
+        }),
+        children: /*#__PURE__*/ jsx(SearchForm, {
+            className: "w-full",
+            onSubmit: (event)=>event.preventDefault(),
+            onValueChange: (value)=>{
+                if (blocked("globalFilter")) return;
+                table.setGlobalFilter(value);
+            },
+            size: size,
+            value: table.state.globalFilter ?? "",
+            children: /*#__PURE__*/ jsxs(SearchForm.Control, {
+                children: [
+                    /*#__PURE__*/ jsx(SearchForm.Input, {
+                        "aria-label": translations.searchLabel,
+                        disabled: locked,
+                        placeholder: translations.searchPlaceholder
+                    }),
+                    /*#__PURE__*/ jsx(SearchForm.ClearButton, {
+                        "aria-label": translations.clearSearchLabel
+                    }),
+                    /*#__PURE__*/ jsx(SearchForm.Button, {
+                        "aria-label": translations.searchButtonLabel,
+                        disabled: locked,
+                        showSearchIcon: true
+                    })
+                ]
+            })
+        })
+    });
+};
+DataTable.ToolbarActions = function() {
+    const { toolbarActions, size, locked } = useDataTableContext();
+    const styles = dataTableVariants();
+    const count = toolbarActions?.length ?? 0;
+    const hasWarnedAboutToolbarOverflow = useRef(false);
+    useEffect(()=>{
+        if (count <= DATA_TABLE_MAX_TOOLBAR_ACTIONS) {
+            hasWarnedAboutToolbarOverflow.current = false;
+            return;
+        }
+        if (hasWarnedAboutToolbarOverflow.current || "undefined" == typeof process || process.env?.NODE_ENV === "production") return;
+        hasWarnedAboutToolbarOverflow.current = true;
+        console.warn(`[DataTable] toolbarActions has ${count} actions; at most ${DATA_TABLE_MAX_TOOLBAR_ACTIONS} is recommended. They still render, but the toolbar gets crowded — consider moving the extras into a menu.`);
+    }, [
+        count
+    ]);
+    if (!count) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.toolbarActions(),
+        children: toolbarActions?.map(({ id, label, children, disabled, ...action }, i)=>/*#__PURE__*/ jsx(Button, {
+                disabled: disabled || locked,
+                size: size,
+                ...action,
+                children: label ?? children
+            }, id ?? `toolbar-action-${i}`))
+    });
+};
+DataTable.ColumnVisibility = function() {
+    const { table, translations, blocked, size } = useDataTableContext();
+    const hideableColumns = table.getAllLeafColumns().filter((c)=>c.getCanHide() && ![
+            SELECTION_COLUMN_ID,
+            DRAG_COLUMN_ID
+        ].includes(c.id));
+    const items = hideableColumns.map((column)=>({
+            type: "checkbox",
+            value: column.id,
+            label: columnLabel(column),
+            checked: column.getIsVisible()
+        }));
+    return /*#__PURE__*/ jsx(Menu, {
+        closeOnSelect: false,
+        customTrigger: /*#__PURE__*/ jsx(Button, {
+            "aria-label": translations.columnsLabel,
+            icon: "icon-[mdi--cog-outline]",
+            size: "sm",
+            title: translations.columnsLabel,
+            variant: "primary"
+        }),
+        items: items,
+        onCheckedChange: (item)=>{
+            if ("checkbox" === item.type && !blocked("columnVisibility")) table.getColumn(item.value)?.toggleVisibility();
+        },
+        size: size
+    });
+};
+DataTable.Pagination = function() {
+    const { table, pageSizeOptions, translations, locked, blocked, size, paginationProps } = useDataTableContext();
+    const state = table.state.pagination;
+    const declaredPageCount = table.options.pageCount;
+    const total = table.options.rowCount ?? (null != declaredPageCount && declaredPageCount >= 0 ? declaredPageCount * state.pageSize : table.getRowCount());
+    const start = 0 === total ? 0 : state.pageIndex * state.pageSize + 1;
+    const end = Math.min((state.pageIndex + 1) * state.pageSize, total);
+    const styles = dataTableVariants();
+    const pageSizeItems = pageSizeOptions.map((n)=>({
+            label: String(n),
+            value: String(n)
+        }));
+    return /*#__PURE__*/ jsxs("div", {
+        className: styles.paginationBar(),
+        style: OPAQUE_HEADER_BG,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: styles.paginationInfo(),
+                children: translations.rangeLabel({
+                    start,
+                    end,
+                    total
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: styles.paginationControls(),
+                children: [
+                    /*#__PURE__*/ jsx(Pagination, {
+                        size: size,
+                        ...paginationProps,
+                        count: total,
+                        getPageUrl: ()=>"#",
+                        linkProps: {
+                            ...paginationProps?.linkProps,
+                            onClick: (event)=>{
+                                paginationProps?.linkProps?.onClick?.(event);
+                                event.preventDefault();
+                            }
+                        },
+                        onPageChange: (page)=>{
+                            if (!blocked("paginate")) table.setPageIndex(page - 1);
+                        },
+                        page: state.pageIndex + 1,
+                        pageSize: state.pageSize
+                    }),
+                    /*#__PURE__*/ jsx(FieldSelect, {
+                        ariaLabel: translations.pageSizeLabel,
+                        disabled: locked,
+                        items: pageSizeItems,
+                        onChange: (v)=>{
+                            if (!blocked("paginate")) table.setPageSize(Number(v));
+                        },
+                        size: size,
+                        value: String(state.pageSize)
+                    })
+                ]
+            })
+        ]
+    });
+};
+DataTable.displayName = "DataTable";
+export { DATA_TABLE_MAX_TOOLBAR_ACTIONS, DataTable, conditionalFilterFn };