@mendylanda/ui 0.3.0-alpha.0 → 0.3.0-alpha.10

package/dist/table/table-column-settings.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
+import { GripVertical, Pin, RotateCcw, SlidersHorizontal } from "lucide-react";
+import { useMendyUI } from "../customization.js";
+import { Button } from "../primitives/button.js";
+import { Checkbox } from "../primitives/checkbox.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/popover.js";
+import { cn } from "../utils.js";
+import { applyTablePreferences } from "./use-data-table.js";
+export function TableColumnSettings({ table, children, }) {
+    const id = useId();
+    const { portalContainer } = useMendyUI();
+    const columns = table.getAllLeafColumns();
+    const byId = new Map(columns.map((column) => [column.id, column]));
+    const order = [
+        ...new Set([...table.state.columnOrder, ...columns.map((column) => column.id)]),
+    ].filter((key) => byId.has(key));
+    const ordered = order.map((key) => byId.get(key));
+    const hidden = columns.filter((column) => !column.getIsVisible()).length;
+    const start = columns.filter((column) => column.getIsPinned() === "start").length;
+    const end = columns.filter((column) => column.getIsPinned() === "end").length;
+    const summary = [
+        hidden && `${hidden} hidden`,
+        start && `${start} pinned left`,
+        end && `${end} pinned right`,
+    ]
+        .filter(Boolean)
+        .join(", ");
+    function reorder(result) {
+        if (!result.destination || result.destination.index === result.source.index)
+            return;
+        const next = [...order];
+        const [moved] = next.splice(result.source.index, 1);
+        next.splice(result.destination.index, 0, moved);
+        table.setColumnOrder(next);
+    }
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Column settings", title: "Column settings", children: _jsx(SlidersHorizontal, { className: "mui-100c22d5776b" }) }) }), _jsxs(PopoverContent, { align: "end", "aria-label": "Column settings", className: "mui-222f930b8752 mui-a4cce7869436 mui-302c0d124a94 mui-04760bcd507f", onCloseAutoFocus: (event) => {
+                    if (document.activeElement?.closest('[role="grid"]'))
+                        event.preventDefault();
+                }, children: [_jsxs("div", { className: "mui-27ead27a81df mui-bbe39cfb5cc6 mui-9513b3968002 mui-d3cea061f2f3", children: [_jsx("h4", { className: "mui-c74ab393b96d mui-daaac3fbf55e", children: "Column settings" }), _jsx("p", { className: "mui-3992de70b033 mui-35f35c41d134", children: "Drag to reorder, toggle visibility, and pin columns." })] }), children, _jsx(DragDropContext, { onDragEnd: reorder, children: _jsx(Droppable, { droppableId: id, getContainerForClone: () => portalContainer ?? document.body, renderClone: (provided, snapshot, rubric) => (_jsx(ColumnSettingsRow, { column: ordered[rubric.source.index], provided: provided, dragging: snapshot.isDragging })), children: (provided) => (_jsxs("div", { ref: provided.innerRef, ...provided.droppableProps, className: "mui-410da8dfa8ac mui-da0beef015c9 mui-2368e909f3a5 mui-b97db4a9f432", children: [ordered.map((column, index) => (_jsx(Draggable, { draggableId: `${id}-${column.id}`, disableInteractiveElementBlocking: true, index: index, children: (provided, snapshot) => (_jsx(ColumnSettingsRow, { column: column, provided: provided, dragging: snapshot.isDragging })) }, column.id))), provided.placeholder] })) }) }), _jsxs("div", { className: "mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-32c92bb1fde4 mui-074569488cca mui-894c3815a57f mui-9513b3968002 mui-b5edc3ea7c91", children: [_jsx("p", { className: "mui-3992de70b033 mui-35f35c41d134", "aria-live": "polite", children: summary || "No changes" }), _jsxs(Button, { variant: "ghost", size: "sm", className: "mui-c8e50836f8a1 mui-e7e01cc7f4df mui-3992de70b033", "aria-label": "Reset columns", onClick: () => applyTablePreferences(table, { version: 1, ...table.initialState }), children: [_jsx(RotateCcw, { className: "mui-5e34f5313859" }), "Reset"] })] })] })] }));
+}
+function ColumnSettingsRow({ column, provided, dragging, }) {
+    const definition = column.columnDef;
+    const label = definition.label ?? (typeof definition.header === "string" ? definition.header : column.id);
+    const pin = column.getIsPinned();
+    const next = pin === "start" ? "end" : pin === "end" ? false : "start";
+    const pinLabel = next === "start"
+        ? `Pin ${label} to left`
+        : next === "end"
+            ? `Pin ${label} to right`
+            : `Unpin ${label}`;
+    return (_jsxs("div", { ref: provided.innerRef, ...provided.draggableProps, "data-mendy-ui": "", "data-column-setting": column.id, "data-dragging": dragging, style: provided.draggableProps.style, className: cn("mui-222f930b8752 mui-71556df3b421 mui-074569488cca mui-3fa8c572949b mui-5b272f3c5076 mui-e7e01cc7f4df mui-a8c1dfb1d4ef mui-c74ab393b96d mui-957a109f887f", dragging ? "mui-3eef1ce97dba mui-0d4ca75de41c mui-853be6c11609 mui-fd9d0b696aac" : "mui-5cbdd1b32f1a"), children: [_jsx("button", { type: "button", ...provided.dragHandleProps, "aria-label": `Reorder ${label}`, title: "Drag to reorder. Press Space to move with arrow keys.", className: "mui-222f930b8752 mui-2bd43fb57913 mui-27ead27a81df mui-f2e47d9c52ad mui-71556df3b421 mui-a503dd374cca mui-02e603944040 mui-35f35c41d134 mui-b30fc56058b6 mui-355efe22aedb mui-db549d38ff19 mui-71998ea7a2d0", children: _jsx(GripVertical, { className: "mui-61c000c8a98a" }) }), _jsxs("label", { className: "mui-222f930b8752 mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-d2fa8848968d mui-71556df3b421 mui-074569488cca", children: [_jsx(Checkbox, { checked: column.getIsVisible(), disabled: !column.getCanHide(), onCheckedChange: (value) => column.toggleVisibility(value === true), "aria-label": `Show ${label}` }), _jsx("span", { className: "mui-5a3a4ee420c2", title: label, children: label })] }), _jsx(Button, { variant: "ghost", size: "icon-sm", disabled: !column.getCanPin(), "aria-label": pinLabel, title: pinLabel, className: cn("mui-0712570dcc9f mui-27ead27a81df", pin && "mui-87ecb59f2d2d"), onClick: () => column.pin(next), children: _jsx(Pin, { className: cn("mui-61c000c8a98a", pin === "start" && "mui-4e3f08588318", pin === "end" && "mui-c80411b7591f", !pin && "mui-35f35c41d134") }) })] }));
+}

package/dist/table/table-controls.d.ts

@@ -2,9 +2,7 @@ import type { ReactNode } from "react";
 import type { DataTableInstance } from "./use-data-table.js";
 import type { TableColumn } from "./columns.js";
 import type { SavedTableView } from "./state.js";
-export declare function TableColumnSettings<T extends object>({ table }: {
-    table: DataTableInstance<T>;
-}): import("react/jsx-runtime").JSX.Element;
+export { TableColumnSettings } from "./table-column-settings.js";
 export declare function TablePagination<T extends object>({ table, loading, }: {
     table: DataTableInstance<T>;
     loading?: boolean;

package/dist/table/table-controls.js

@@ -1,49 +1,12 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { ChevronLeft, ChevronRight, SlidersHorizontal } from "lucide-react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "../primitives/button.js";
 import { Checkbox } from "../primitives/checkbox.js";
 import { Input } from "../primitives/input.js";
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from "../primitives/dropdown-menu.js";
-import { applyTablePreferences } from "./use-data-table.js";
-export function TableColumnSettings({ table }) {
-    const columns = table.getAllLeafColumns();
-    const byId = new Map(columns.map((column) => [column.id, column]));
-    const orderedIds = new Set(table.state.columnOrder);
-    const order = [
-        ...table.state.columnOrder,
-        ...columns.map((column) => column.id).filter((id) => !orderedIds.has(id)),
-    ];
-    function move(id, delta) {
-        const next = [...order], index = next.indexOf(id), destination = index + delta;
-        if (index < 0 || destination < 0 || destination >= next.length)
-            return;
-        next.splice(index, 1);
-        next.splice(destination, 0, id);
-        table.setColumnOrder(next);
-    }
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", "aria-label": "Column settings", children: [_jsx(SlidersHorizontal, { className: "mui-100c22d5776b" }), _jsx("span", { children: "Columns" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "mui-b057efba3283 mui-72b37c1a040d mui-1a26a0d28420", "aria-label": "Column settings", children: [order.map((id, index) => {
-                        const column = byId.get(id);
-                        if (!column)
-                            return null;
-                        const definition = column.columnDef;
-                        const label = definition.label ?? (typeof definition.header === "string" ? definition.header : id);
-                        return (_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: label }), _jsxs(DropdownMenuSubContent, { children: [_jsx(DropdownMenuCheckboxItem, { checked: column.getIsVisible(), disabled: !column.getCanHide(), onSelect: (event) => event.preventDefault(), onCheckedChange: (value) => column.toggleVisibility(value), children: "Visible" }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: !column.getCanPin(), onSelect: (event) => {
-                                                event.preventDefault();
-                                                column.pin(column.getIsPinned() === "start" ? false : "start");
-                                            }, children: [" ", column.getIsPinned() === "start" ? "Unpin" : "Pin to start"] }), _jsx(DropdownMenuItem, { disabled: !column.getCanPin(), onSelect: (event) => {
-                                                event.preventDefault();
-                                                column.pin(column.getIsPinned() === "end" ? false : "end");
-                                            }, children: column.getIsPinned() === "end" ? "Unpin" : "Pin to end" }), _jsx(DropdownMenuItem, { disabled: index === 0, onSelect: (event) => {
-                                                event.preventDefault();
-                                                move(id, -1);
-                                            }, children: "Move earlier" }), _jsx(DropdownMenuItem, { disabled: index === order.length - 1, onSelect: (event) => {
-                                                event.preventDefault();
-                                                move(id, 1);
-                                            }, children: "Move later" })] })] }, id));
-                    }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: () => applyTablePreferences(table, { version: 1, ...table.initialState }), children: "Reset columns" })] })] }));
-}
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from "../primitives/dropdown-menu.js";
+export { TableColumnSettings } from "./table-column-settings.js";
 export function TablePagination({ table, loading, }) {
     return (_jsxs("nav", { "data-mendy-ui": "", "aria-label": "Table pagination", className: "mui-222f930b8752 mui-faa8a23c68f6 mui-71556df3b421 mui-307644c34db6 mui-d7db3451d154 mui-b5edc3ea7c91 mui-c74ab393b96d", children: [_jsxs("span", { children: ["Page ", table.state.pagination.pageIndex + 1, table.getPageCount() >= 0 ? ` of ${Math.max(1, table.getPageCount())}` : ""] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", children: [table.state.pagination.pageSize, " rows"] }) }), _jsx(DropdownMenuContent, { children: [10, 20, 50, 100].map((size) => (_jsxs(DropdownMenuItem, { onSelect: () => table.setPageSize(size), children: [size, " rows"] }, size))) })] }), _jsx(Button, { variant: "outline", size: "icon-sm", disabled: loading || !table.getCanPreviousPage(), "aria-label": "Previous page", onClick: () => table.previousPage(), children: _jsx(ChevronLeft, { className: "mui-100c22d5776b" }) }), _jsx(Button, { variant: "outline", size: "icon-sm", disabled: loading || !table.getCanNextPage(), "aria-label": "Next page", onClick: () => table.nextPage(), children: _jsx(ChevronRight, { className: "mui-100c22d5776b" }) })] }));
 }

package/dist/table/table-feedback.d.ts

@@ -1,7 +1,11 @@
 import type { ReactNode } from "react";
 import type { TableDataState } from "./table-view.js";
-export declare function TableInitialState({ status, hasRows, loadingState, emptyState, error, retry, }: Pick<TableDataState, "status" | "error" | "retry"> & {
+export declare function TableInitialState({ status, hasRows, loadingState, emptyState, error, retry, hasFilters, pageIndex, clearFilters, firstPage, }: Pick<TableDataState, "status" | "error" | "retry"> & {
     hasRows: boolean;
     loadingState?: ReactNode;
     emptyState?: ReactNode;
+    hasFilters?: boolean;
+    pageIndex?: number;
+    clearFilters?: () => void;
+    firstPage?: () => void;
 }): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;

package/dist/table/table-feedback.js

@@ -1,11 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from "../primitives/button.js";
-export function TableInitialState({ status, hasRows, loadingState, emptyState, error, retry, }) {
+export function TableInitialState({ status, hasRows, loadingState, emptyState, error, retry, hasFilters, pageIndex = 0, clearFilters, firstPage, }) {
     if (hasRows)
         return null;
     if (status === "loading")
-        return (loadingState ?? (_jsx("div", { role: "status", "aria-label": "Loading rows", className: "mui-b8ceaab118a4 mui-094f5333853b", children: Array.from({ length: 8 }, (_, index) => (_jsx("div", { className: "mui-1fb07b38c63b mui-7b3cd77eb999 mui-01024deec75e mui-87ecb59f2d2d mui-237747164b60" }, index))) })));
+        return loadingState ?? null;
     if (status === "error")
         return (_jsxs("div", { role: "alert", className: "mui-c432836760e3 mui-05ab12448317", children: [error ?? "Could not load rows.", retry && (_jsx(Button, { variant: "outline", size: "sm", onClick: retry, children: "Retry" }))] }));
-    return (_jsx("div", { role: "status", className: "mui-c7902d77ad80 mui-05ab12448317 mui-35f35c41d134", children: emptyState ?? "No results." }));
+    return (_jsx("div", { role: "status", className: "mui-222f930b8752 mui-302c0d124a94 mui-71556df3b421 mui-074569488cca mui-c7902d77ad80 mui-05ab12448317 mui-35f35c41d134", children: emptyState ??
+            (pageIndex > 0 ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "No results on this page." }), _jsx(Button, { variant: "outline", size: "sm", onClick: firstPage, children: "Go to first page" })] })) : hasFilters ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "No results match your filters." }), clearFilters && (_jsx(Button, { variant: "outline", size: "sm", onClick: clearFilters, children: "Clear filters" }))] })) : ("No rows yet.")) }));
 }

package/dist/table/table-filters.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from "react";
+import { FilterBar } from "../filters/filter-bar.js";
+export type TableFiltersProps = ComponentProps<typeof FilterBar> & {
+    /** Hide the free-text search when the query only supports defined filters. */
+    showSearch?: boolean;
+};
+/** Use the same controller here and on TableView when composing a custom toolbar. */
+export declare function TableFilters({ showSearch, ...props }: TableFiltersProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-filters.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FilterBar, FilterRoot, FilterMenu, FilterList, FilterFeedback, } from "../filters/filter-bar.js";
+/** Use the same controller here and on TableView when composing a custom toolbar. */
+export function TableFilters({ showSearch = true, ...props }) {
+    if (showSearch)
+        return _jsx(FilterBar, { ...props });
+    return (_jsxs(FilterRoot, { ...props, children: [_jsx(FilterMenu, {}), _jsx(FilterList, { showClear: props.showClear }), _jsx(FilterFeedback, {})] }));
+}

package/dist/table/table-frame.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+/** Shared sizing for the composed view and the table with built-in controls. */
+export declare function TableFrame({ layout, stretch, slot, header, footer, children, }: {
+    layout: "content" | "fill";
+    stretch?: boolean;
+    slot?: string;
+    header?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-frame.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils.js";
+import { useFillLayout } from "./use-fill-layout.js";
+/** Shared sizing for the composed view and the table with built-in controls. */
+export function TableFrame({ layout, stretch = false, slot = "table-view", header, footer, children, }) {
+    const fill = layout === "fill";
+    const ref = useFillLayout(fill);
+    return (_jsxs("div", { ref: ref, "data-mendy-ui": "", "data-slot": slot, "data-layout": layout, className: cn("mui-184ddc11e5f9", fill ? "mui-222f930b8752 mui-410da8dfa8ac mui-302c0d124a94 mui-074569488cca" : "mui-267171770524"), style: !fill && stretch ? { height: "100%" } : undefined, children: [header && _jsx("div", { className: "mui-27ead27a81df", children: header }), _jsx("div", { className: fill ? "mui-0f2a693e93e2 mui-410da8dfa8ac mui-7bd5bab6d7f4 mui-b5985369ee35" : undefined, style: !fill && stretch ? { height: "100%" } : undefined, children: children }), footer && _jsx("div", { className: "mui-27ead27a81df mui-267171770524", children: footer })] }));
+}

package/dist/table/table-layout.d.ts

@@ -0,0 +1,44 @@
+import type { CSSProperties } from "react";
+import type { Column } from "@tanstack/react-table";
+import type { DataTableFeatures } from "./features.js";
+import type { DataTableInstance } from "./use-data-table.js";
+/** Keep headers, skeletons, and loaded cells on the same column geometry. */
+export declare function tableLayout<T extends object>(table: DataTableInstance<T>, viewportWidth: number | null, rowHeight: number): {
+    columns: Column<{
+        cellSelectionFeature: import("@tanstack/react-table").TableFeature;
+        columnResizingFeature: import("@tanstack/react-table").TableFeature;
+        columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+        columnPinningFeature: import("@tanstack/react-table").TableFeature;
+        columnSizingFeature: import("@tanstack/react-table").TableFeature;
+        columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+        columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+        columnFacetingFeature: import("@tanstack/react-table").TableFeature;
+        globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+        rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+        rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+        rowSortingFeature: import("@tanstack/react-table").TableFeature;
+        filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+        sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+        paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+        facetedRowModel: (table: import("@tanstack/react-table").Table<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
+        facetedUniqueValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => Map<any, number>;
+        filterFns: {
+            includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+            inNumberRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+            inDateRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+            equals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+            arrIncludes: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+            weakEquals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        };
+        sortFns: {
+            alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+            basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+            datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+            text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        };
+    }, T, unknown>[];
+    totalWidth: number;
+    pinningActive: boolean;
+    cellStyle: (column: Column<DataTableFeatures, T>) => CSSProperties;
+    offsets: number[];
+};

package/dist/table/table-layout.js

@@ -0,0 +1,68 @@
+import { distributeColumnWidths } from "./column-widths.js";
+/** Keep headers, skeletons, and loaded cells on the same column geometry. */
+export function tableLayout(table, viewportWidth, rowHeight) {
+    const columns = [
+        ...table.getStartVisibleLeafColumns(),
+        ...table.getCenterVisibleLeafColumns(),
+        ...table.getEndVisibleLeafColumns(),
+    ];
+    const widths = distributeColumnWidths(columns.map((column) => {
+        const definition = column.columnDef;
+        return {
+            id: column.id,
+            size: column.getSize(),
+            maxSize: definition.maxSize ?? 1200,
+            grow: Object.hasOwn(table.state.columnSizing, column.id)
+                ? false
+                : (definition.grow ?? (column.accessorFn ? 1 : false)),
+        };
+    }), viewportWidth);
+    const size = (column) => widths.get(column.id);
+    const totalWidth = columns.reduce((sum, column) => sum + size(column), 0);
+    const pinnedWidth = [
+        ...table.getStartVisibleLeafColumns(),
+        ...table.getEndVisibleLeafColumns(),
+    ].reduce((sum, column) => sum + size(column), 0);
+    // Preserve stored pins, but leave room to reach the middle columns on narrow screens.
+    const pinningActive = (viewportWidth ?? Infinity) >= Math.min(totalWidth, pinnedWidth + 120);
+    const positions = new Map();
+    let offset = 0;
+    for (const column of table.getStartVisibleLeafColumns()) {
+        positions.set(column.id, { side: "left", offset });
+        offset += size(column);
+    }
+    offset = 0;
+    for (const column of [...table.getEndVisibleLeafColumns()].reverse()) {
+        positions.set(column.id, { side: "right", offset });
+        offset += size(column);
+    }
+    const styles = new Map();
+    const offsets = [0];
+    for (const column of columns) {
+        offsets.push(offsets.at(-1) + size(column));
+        const pin = pinningActive ? positions.get(column.id) : undefined;
+        styles.set(column.id, {
+            width: size(column),
+            minWidth: size(column),
+            height: rowHeight,
+            ...(column.id === table.getEndVisibleLeafColumns()[0]?.id
+                ? { marginInlineStart: "auto" }
+                : {}),
+            ...(pin
+                ? {
+                    position: "sticky",
+                    [pin.side]: pin.offset,
+                    zIndex: 2,
+                    ...(column.id === table.getStartVisibleLeafColumns().at(-1)?.id
+                        ? { borderRightWidth: 4 }
+                        : {}),
+                    ...(column.id === table.getEndVisibleLeafColumns()[0]?.id
+                        ? { borderLeftWidth: 4 }
+                        : {}),
+                }
+                : {}),
+        });
+    }
+    const cellStyle = (column) => styles.get(column.id);
+    return { columns, totalWidth, pinningActive, cellStyle, offsets };
+}

package/dist/table/table-loading.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from "react";
+import type { Column } from "@tanstack/react-table";
+import type { DataTableFeatures } from "./features.js";
+/** Loading shares the live column geometry and its single scroll container. */
+export declare function TableLoadingRows<T extends object>({ columns, columnGaps, count, width, rowHeight, cellStyle, }: {
+    columns: Column<DataTableFeatures, T>[];
+    columnGaps: Map<string, number>;
+    count: number;
+    width: number;
+    rowHeight: number;
+    cellStyle: (column: Column<DataTableFeatures, T>) => CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-loading.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+/** Loading shares the live column geometry and its single scroll container. */
+export function TableLoadingRows({ columns, columnGaps, count, width, rowHeight, cellStyle, }) {
+    return (_jsx("div", { role: "status", "aria-label": "Loading rows", className: "mui-2bf6510f1330", style: { width }, children: Array.from({ length: count }, (_, index) => (_jsx("div", { "aria-hidden": "true", "data-slot": "table-loading-row", className: "mui-222f930b8752 mui-2bf6510f1330", style: { height: rowHeight }, children: columns.map((column) => (_jsxs(Fragment, { children: [columnGaps.has(column.id) && (_jsx("div", { "aria-hidden": "true", className: "mui-27ead27a81df", style: { width: columnGaps.get(column.id) } })), _jsx("div", { "data-slot": "table-loading-cell", "data-column-id": column.id, className: "mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-bbe39cfb5cc6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a", style: cellStyle(column), children: _jsx("div", { className: "mui-2edce89ef182 mui-56bb14cbd1fe mui-7b3cd77eb999 mui-02e603944040 mui-87ecb59f2d2d mui-237747164b60" }) }, column.id)] }, column.id))) }, index))) }));
+}

package/dist/table/table-parts.d.ts

@@ -2,23 +2,41 @@ import type { CSSProperties, ReactNode } from "react";
 import type { Column, Header, Row } from "@tanstack/react-table";
 import type { DataTableFeatures } from "./features.js";
 import type { DataTableInstance } from "./use-data-table.js";
-export declare function TableHeaderCell<T extends object>({ table, header, index, style, renderHeader, contentClassName, }: {
+export declare function TableHeaderCell<T extends object>({ table, header, index, style, renderHeader, contentClassName, selectLoaded, }: {
     table: DataTableInstance<T>;
     header: Header<DataTableFeatures, T, unknown>;
     index: number;
     style: CSSProperties;
     renderHeader?: (header: Header<DataTableFeatures, T, unknown>) => ReactNode;
     contentClassName?: string;
+    selectLoaded?: {
+        checked: boolean | "indeterminate";
+        disabled: boolean;
+    };
 }): import("react/jsx-runtime").JSX.Element;
-export declare function TableBodyRow<T extends object>({ row, rowIndex, start, rowHeight, cellStyle, focusedId, copied, contentClassName, onRowActivate, isRowHighlighted, }: {
+declare function TableBodyRowImpl<T extends object>({ row, rowIndex, start, rowHeight, autoRowHeight, measureElement, rowClassName, renderRowDetail, detailWidth, cellStyle, columns, columnGaps, columnIndexes, contentVersion, contentState, focusedId, copied, contentClassName, onRowClick, onRowActivate, isRowHighlighted, inlineSelection, }: {
     row: Row<DataTableFeatures, T>;
     rowIndex: number;
     start: number;
     rowHeight: number;
+    autoRowHeight: boolean;
+    measureElement?: (element: HTMLDivElement | null) => void;
+    rowClassName?: (row: T) => string | undefined;
+    renderRowDetail?: (row: T) => ReactNode;
+    detailWidth: number;
     cellStyle: (column: Column<DataTableFeatures, T>) => CSSProperties;
+    columns: Column<DataTableFeatures, T>[];
+    columnGaps: Map<string, number>;
+    columnIndexes: Map<string, number>;
+    contentVersion: unknown;
+    contentState: unknown;
     focusedId?: string;
     copied: boolean;
     contentClassName?: string;
+    onRowClick?: (row: T) => void;
     onRowActivate?: (row: T) => void;
     isRowHighlighted?: (row: T) => boolean;
+    inlineSelection: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+export declare const TableBodyRow: typeof TableBodyRowImpl;
+export {};

package/dist/table/table-parts.js

@@ -1,67 +1,121 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { flexRender } from "@tanstack/react-table";
+import { Fragment, memo, useMemo } from "react";
+import { constructCell, flexRender } from "@tanstack/react-table";
 import { ArrowDown, ArrowUp } from "lucide-react";
 import { Button } from "../primitives/button.js";
+import { Checkbox } from "../primitives/checkbox.js";
 import { cn } from "../utils.js";
 import { interactiveSelector } from "./clipboard.js";
-export function TableHeaderCell({ table, header, index, style, renderHeader, contentClassName, }) {
+export function TableHeaderCell({ table, header, index, style, renderHeader, contentClassName, selectLoaded, }) {
     const column = header.column;
     const definition = column.columnDef;
     const title = definition.label ?? (typeof definition.header === "string" ? definition.header : column.id);
     const sorted = column.getIsSorted();
-    return (_jsxs("div", { role: "columnheader", "aria-colindex": index + 1, "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined, style: style, className: "mui-d2d9e1f13413 mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-19e97f3f40e6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a mui-daaac3fbf55e mui-35f35c41d134 mui-beeef6663906", children: [_jsx("div", { className: cn("mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-d5111d0e9f48", (renderHeader || typeof definition.header === "function") && contentClassName), children: _jsx(TableHeaderContent, { header: header, renderHeader: renderHeader, title: title }) }), column.getCanResize() && _jsx(TableResizeHandle, { table: table, header: header, title: title })] }, column.id));
+    return (_jsxs("div", { role: "columnheader", "data-column-id": column.id, "aria-colindex": index + 1, "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined, style: style, className: "mui-ad936fcbed63 mui-d2d9e1f13413 mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-19e97f3f40e6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a mui-daaac3fbf55e mui-35f35c41d134", children: [selectLoaded && index === 0 && (_jsx(Checkbox, { "aria-label": "Select loaded rows", disabled: selectLoaded.disabled, checked: selectLoaded.checked, onCheckedChange: (value) => table.toggleAllPageRowsSelected(value === true), className: "mui-477d8f4dfce9 mui-94f91922a10e mui-34a57d4b4103 mui-8da02faac748 mui-b8b1747fa763 mui-d2e4a66bb430 mui-978f422895e5 mui-d0c2ae8419e1 mui-e2ed522ed9b7 mui-fa8e1efead3c mui-eaedb91f8774" })), _jsx("div", { className: cn("mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-d5111d0e9f48", (renderHeader || typeof definition.header === "function") && contentClassName), children: _jsx(TableHeaderContent, { header: header, renderHeader: renderHeader, title: title }) }), column.getCanResize() && (_jsx(TableResizeHandle, { table: table, header: header, title: title, width: Number(style.width) }))] }, column.id));
 }
-export function TableBodyRow({ row, rowIndex, start, rowHeight, cellStyle, focusedId, copied, contentClassName, onRowActivate, isRowHighlighted, }) {
-    const cells = [
-        ...row.getStartVisibleCells(),
-        ...row.getCenterVisibleCells(),
-        ...row.getEndVisibleCells(),
-    ];
-    return (_jsx("div", { role: "row", "aria-rowindex": rowIndex + 2, "aria-selected": row.getIsSelected(), "data-highlighted": isRowHighlighted?.(row.original), "data-index": rowIndex, className: "mui-ad936fcbed63 mui-747355bdc2a2 mui-635702706586 mui-98599e4ee250 mui-222f930b8752 mui-2bf6510f1330 mui-63b29dace366 mui-9d7d1760cd8e", style: { height: rowHeight, transform: `translateY(${start}px)` }, children: cells.map((cell, index) => {
+function TableBodyRowImpl({ row, rowIndex, start, rowHeight, autoRowHeight, measureElement, rowClassName, renderRowDetail, detailWidth, cellStyle, columns, columnGaps, columnIndexes, contentVersion, contentState, focusedId, copied, contentClassName, onRowClick, onRowActivate, isRowHighlighted, inlineSelection, }) {
+    // The engine's getAllCells API eagerly allocates every column. Build only the
+    // viewport cells with its public constructor, and release them with this row.
+    const cache = useMemo(() => new WeakMap(), [row]);
+    const cells = columns.map((column) => {
+        let cell = cache.get(column);
+        if (!cell) {
+            cell = constructCell(column, row, row.table);
+            cache.set(column, cell);
+        }
+        return cell;
+    });
+    const rowElement = (_jsx("div", { ref: renderRowDetail ? undefined : measureElement, role: "row", "aria-rowindex": renderRowDetail ? undefined : rowIndex + 2, "aria-selected": row.getIsSelected(), "data-highlighted": row.getIsSelected() || isRowHighlighted?.(row.original), "data-index": rowIndex, className: cn("mui-ad936fcbed63 mui-635702706586 mui-222f930b8752 mui-2bf6510f1330 mui-5b272f3c5076 mui-37ad15a95595 mui-9d7d1760cd8e", rowClassName?.(row.original)), style: {
+            height: autoRowHeight ? undefined : rowHeight,
+            minHeight: rowHeight,
+            top: renderRowDetail ? 0 : start,
+            position: renderRowDetail ? "relative" : "absolute",
+        }, children: cells.map((cell) => {
+            const index = columnIndexes.get(cell.column.id);
             const selected = cell.getIsSelected();
             const definition = cell.column.columnDef;
             const edge = selected ? cell.getSelectionEdges() : null;
-            return (_jsx("div", { role: "gridcell", "aria-colindex": index + 1, "aria-selected": selected, "data-row-id": row.id, "data-column-id": cell.column.id, tabIndex: focusedId ? (focusedId === cell.id ? 0 : -1) : rowIndex === 0 && index === 0 ? 0 : -1, style: {
-                    ...cellStyle(cell.column),
-                    ...(selected
-                        ? {
-                            boxShadow: `${edge?.top ? "inset 0 2px var(--primary)," : ""}${edge?.bottom ? "inset 0 -2px var(--primary)," : ""}${edge?.left ? "inset 2px 0 var(--primary)," : ""}${edge?.right ? "inset -2px 0 var(--primary)," : ""} inset 0 0 0 0 transparent`,
-                        }
-                        : {}),
-                }, className: cn("mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-d5111d0e9f48 mui-bbe39cfb5cc6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a mui-97b1c00ff005 mui-e6020023567a mui-a47d391255f3 mui-a8719ed8b095 mui-2b1c7d88acff", definition.align === "end" && "mui-307644c34db6 mui-10558dbb3a24", definition.align === "center" && "mui-a503dd374cca mui-05ab12448317", selected && "mui-292affc1f780", selected && copied && "mui-047624ec0c39 mui-d254c96aea74"), onMouseDown: (event) => {
-                    if (event.button !== 0 ||
-                        event.detail > 1 ||
-                        !cell.getCanSelect() ||
-                        event.target.closest(interactiveSelector) ||
-                        window.getSelection()?.toString())
-                        return;
-                    event.preventDefault();
-                    event.stopPropagation();
-                    event.currentTarget.focus({ preventScroll: true });
-                    cell.getSelectionStartHandler()(event);
-                }, onMouseEnter: cell.getSelectionExtendHandler(), onDoubleClick: (event) => {
-                    if (!event.target.closest(interactiveSelector))
-                        onRowActivate?.(row.original);
-                }, children: _jsx("div", { className: cn("mui-184ddc11e5f9 mui-81b198a2db84 mui-5a3a4ee420c2", contentClassName), children: flexRender(cell.column.columnDef.cell ?? (() => String(cell.getValue() ?? "")), cell.getContext()) }) }, cell.id));
+            return (_jsxs(Fragment, { children: [columnGaps.has(cell.column.id) && (_jsx("div", { "aria-hidden": "true", className: "mui-27ead27a81df", style: { width: columnGaps.get(cell.column.id) } })), _jsxs("div", { role: "gridcell", "aria-colindex": index + 1, "aria-selected": selected, "data-row-id": row.id, "data-column-id": cell.column.id, tabIndex: focusedId
+                            ? focusedId === cell.id
+                                ? 0
+                                : -1
+                            : rowIndex === 0 && index === 0
+                                ? 0
+                                : -1, style: autoRowHeight
+                            ? { ...cellStyle(cell.column), height: undefined, minHeight: rowHeight }
+                            : cellStyle(cell.column), className: cn("mui-d2d9e1f13413 mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-bbe39cfb5cc6 mui-3b6d5fc7b061 mui-6ba846e1630e mui-0f9e6672913a", !(selected && copied) && "mui-97b1c00ff005 mui-e6020023567a", !selected && "mui-a47d391255f3 mui-a8719ed8b095 mui-2b1c7d88acff", definition.align === "end" && "mui-307644c34db6 mui-10558dbb3a24", definition.align === "center" && "mui-a503dd374cca mui-05ab12448317", selected && "mui-292affc1f780 mui-b30fc56058b6", selected && copied && "mui-047624ec0c39 mui-d254c96aea74"), onMouseDown: (event) => {
+                            if (event.button !== 0 ||
+                                event.detail > 1 ||
+                                !cell.getCanSelect() ||
+                                event.target.closest(interactiveSelector) ||
+                                window.getSelection()?.toString())
+                                return;
+                            event.preventDefault();
+                            event.stopPropagation();
+                            event.currentTarget.focus({ preventScroll: true });
+                            cell.getSelectionStartHandler()(event);
+                        }, onMouseEnter: cell.getSelectionExtendHandler(), onClick: (event) => {
+                            if (event.detail <= 1 && !event.target.closest(interactiveSelector))
+                                onRowClick?.(row.original);
+                        }, onDoubleClick: (event) => {
+                            if (!event.target.closest(interactiveSelector))
+                                onRowActivate?.(row.original);
+                        }, children: [selected && (_jsx("span", { "aria-hidden": "true", "data-selection-outline": "", className: "mui-33228ff7d583 mui-747355bdc2a2 mui-d7efd1b0b0f9 mui-515f9fdc6db7", style: {
+                                    top: edge?.top ? 0 : -1,
+                                    bottom: edge?.bottom ? -1 : -2,
+                                    left: -Number(cellStyle(cell.column).borderLeftWidth ?? 0),
+                                    right: -Number(cellStyle(cell.column).borderRightWidth ?? 1),
+                                    borderTopWidth: edge?.top ? 2 : 0,
+                                    borderBottomWidth: edge?.bottom ? 2 : 0,
+                                    borderLeftWidth: edge?.left ? 2 : 0,
+                                    borderRightWidth: edge?.right ? 2 : 0,
+                                } })), inlineSelection && index === 0 && (_jsx(Checkbox, { "aria-label": `Select row ${rowIndex + 1}`, checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (value) => row.toggleSelected(value === true), onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), className: "mui-68d781378b03 mui-94f91922a10e mui-34a57d4b4103 mui-8da02faac748 mui-b8b1747fa763 mui-d2e4a66bb430 mui-978f422895e5 mui-d0c2ae8419e1 mui-9c02852bfc55 mui-e2ed522ed9b7 mui-cbd3aed703f7 mui-fa8e1efead3c mui-eaedb91f8774" })), _jsx("div", { className: cn("mui-184ddc11e5f9 mui-81b198a2db84", autoRowHeight ? "mui-726fca123972 mui-37cf9655f30a mui-b5edc3ea7c91" : "mui-7bd696ca6be3 mui-5a3a4ee420c2", contentClassName), children: _jsx(TableCellContent, { cell: cell, renderer: cell.column.columnDef.cell, version: contentVersion, state: contentState }) })] }, cell.id)] }, cell.id));
         }) }, row.id));
+    if (!renderRowDetail)
+        return rowElement;
+    const detail = renderRowDetail(row.original);
+    return (_jsxs("div", { ref: measureElement, "data-index": rowIndex, role: "rowgroup", className: "mui-747355bdc2a2 mui-635702706586 mui-2bf6510f1330", style: { top: start }, children: [rowElement, detail != null && (_jsx("div", { role: "row", className: "mui-bbe39cfb5cc6 mui-5b272f3c5076", children: _jsx("div", { role: "gridcell", "aria-colspan": columns.length, className: "mui-964a9431ff49 mui-184ddc11e5f9 mui-094f5333853b", style: { width: detailWidth, maxWidth: "100%", insetInlineStart: 0 }, children: detail }) }))] }));
 }
-function TableResizeHandle({ table, header, title, }) {
+export const TableBodyRow = memo(TableBodyRowImpl);
+function TableResizeHandle({ table, header, title, width, }) {
     const column = header.column;
-    return (_jsx("div", { role: "separator", tabIndex: 0, "aria-label": `Resize ${title}`, "aria-orientation": "vertical", "aria-valuenow": Math.round(column.getSize()), "aria-valuemin": column.columnDef.minSize ?? 48, "aria-valuemax": column.columnDef.maxSize ?? 1200, onDoubleClick: () => column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), onKeyDown: (event) => {
+    const beginResize = (event) => {
+        if ("touches" in event && event.touches.length > 1)
+            return;
+        if ("button" in event) {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            event.currentTarget.focus({ preventScroll: true });
+        }
+        // Start dragging from the visible width, not the smaller configured base width.
+        header.getResizeHandler()(event);
+        table.setColumnSizing((sizes) => ({ ...sizes, [column.id]: width }));
+        table.setColumnResizing((state) => ({
+            ...state,
+            startSize: width,
+            columnSizingStart: [[column.id, width]],
+        }));
+    };
+    return (_jsx("div", { role: "separator", tabIndex: 0, "aria-label": `Resize ${title}`, "aria-orientation": "vertical", "aria-valuenow": Math.round(width), "aria-valuemin": column.columnDef.minSize ?? 48, "aria-valuemax": column.columnDef.maxSize ?? 1200, onDoubleClick: () => column.resetSize(), onMouseDown: beginResize, onTouchStart: beginResize, onKeyDown: (event) => {
             if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
                 event.preventDefault();
                 event.stopPropagation();
                 table.setColumnSizing((sizes) => ({
                     ...sizes,
-                    [column.id]: Math.min(column.columnDef.maxSize ?? 1200, Math.max(column.columnDef.minSize ?? 48, column.getSize() + (event.key === "ArrowLeft" ? -10 : 10))),
+                    [column.id]: Math.min(column.columnDef.maxSize ?? 1200, Math.max(column.columnDef.minSize ?? 48, width + (event.key === "ArrowLeft" ? -10 : 10))),
                 }));
             }
-        }, className: "mui-747355bdc2a2 mui-eb9e48c5dda9 mui-a74c4477017c mui-418e44ad4f9e mui-d4ea834145ae mui-2194d094b585 mui-739a9a000791 mui-4273133a876a mui-2f669cfad5aa mui-2e357972fc10" }));
+        }, className: "mui-747355bdc2a2 mui-eb9e48c5dda9 mui-a74c4477017c mui-418e44ad4f9e mui-d4ea834145ae mui-2194d094b585 mui-739a9a000791 mui-78905c9e865c mui-4273133a876a mui-2f669cfad5aa mui-2e357972fc10" }));
 }
 function TableHeaderContent({ header, renderHeader, title, }) {
     const column = header.column;
     const definition = column.columnDef;
     const sorted = column.getIsSorted();
-    return renderHeader ? (renderHeader(header)) : typeof definition.header === "function" ? (flexRender(definition.header, header.getContext())) : !column.getCanSort() ? (_jsx("span", { className: "mui-496aca80e4d8 mui-5a3a4ee420c2", title: title, children: title })) : (_jsxs(Button, { variant: "ghost", size: "sm", className: "mui-1fb07b38c63b mui-81b198a2db84 mui-c62ec162662e mui-19e97f3f40e6 mui-16e909e6f01d mui-daaac3fbf55e", onClick: column.getToggleSortingHandler(), title: title, children: [_jsx("span", { className: "mui-5a3a4ee420c2", children: title }), sorted === "asc" ? (_jsx(ArrowUp, { className: "mui-5e34f5313859 mui-27ead27a81df" })) : sorted === "desc" ? (_jsx(ArrowDown, { className: "mui-5e34f5313859 mui-27ead27a81df" })) : null] }));
+    return renderHeader ? (renderHeader(header)) : typeof definition.header === "function" ? (flexRender(definition.header, header.getContext())) : !column.getCanSort() ? (_jsx("span", { className: "mui-496aca80e4d8 mui-5a3a4ee420c2", title: title, children: title })) : (_jsxs(Button, { variant: "ghost", size: "sm", className: "mui-1fb07b38c63b mui-81b198a2db84 mui-c62ec162662e mui-19e97f3f40e6 mui-16e909e6f01d mui-daaac3fbf55e mui-35f35c41d134 mui-71863717995b mui-4d6720d47806", onClick: column.getToggleSortingHandler(), title: title, children: [_jsx("span", { className: "mui-5a3a4ee420c2", children: title }), sorted === "asc" ? (_jsx(ArrowUp, { className: "mui-5e34f5313859 mui-27ead27a81df" })) : sorted === "desc" ? (_jsx(ArrowDown, { className: "mui-5e34f5313859 mui-27ead27a81df" })) : null] }));
 }
+// Geometry-only updates do not need to rerun application-owned cell renderers.
+const TableCellContent = memo(function TableCellContent({ cell, renderer, }) {
+    return renderer ? flexRender(renderer, cell.getContext()) : String(cell.getValue() ?? "");
+});

package/dist/table/table-view.d.ts

@@ -2,6 +2,7 @@ import type { ReactNode, Ref } from "react";
 import type { Header } from "@tanstack/react-table";
 import type { DataTableFeatures } from "./features.js";
 import type { DataTableInstance } from "./use-data-table.js";
+import type { FilterController } from "../filters/use-filters.js";
 export interface TableDataState {
     status?: "loading" | "ready" | "error";
     error?: ReactNode;
@@ -17,8 +18,17 @@ export interface TableDataState {
 export interface TableViewProps<T extends object> extends TableDataState {
     table: DataTableInstance<T>;
     label?: string;
+    /** Defaults to "auto": fit the rows, capped at 65% of the viewport height. */
     height?: number | string;
-    rowHeight?: number;
+    /** Fill the remaining page height, or fit content by default. Fill overrides height. */
+    layout?: "content" | "fill";
+    /** Controls below the grid, included in the available height when layout is fill. */
+    footer?: ReactNode;
+    /** Auto measures multiline rows and retains all columns to keep their height stable. */
+    rowHeight?: number | "auto";
+    rowClassName?: (row: T) => string | undefined;
+    /** Expanded content beneath a record. Return null for collapsed records. */
+    renderRowDetail?: (row: T) => ReactNode;
     className?: string;
     /** Theme adapter for application-owned renderers, not package controls. */
     contentClassName?: string;
@@ -27,9 +37,16 @@ export interface TableViewProps<T extends object> extends TableDataState {
     scrollRef?: Ref<HTMLDivElement>;
     /** Change when the result set changes, not when another page is appended. */
     queryKey?: string;
+    /** Shared filter state for query resets and empty-result recovery. */
+    filters?: FilterController;
     renderHeader?: (header: Header<DataTableFeatures, T, unknown>) => ReactNode;
+    /** Single-click action, also used by Enter unless onRowActivate is provided. */
+    onRowClick?: (row: T) => void;
+    /** Optional double-click and Enter action. Interactive controls keep their own behavior. */
     onRowActivate?: (row: T) => void;
     isRowHighlighted?: (row: T) => boolean;
+    /** Inline checkboxes for enabled row selection. Set false for custom selection controls. */
+    rowSelectionControls?: boolean;
     onCopyError?: (error: unknown) => void;
 }
-export declare function TableView<T extends object>({ table, label, height, rowHeight, className, contentClassName, emptyState, loadingState, scrollRef, status, refreshing, error, retry, loadMore, queryKey, renderHeader, onRowActivate, isRowHighlighted, onCopyError, }: TableViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TableView<T extends object>({ table, label, height, layout: layoutMode, footer, rowHeight: rowHeightOption, rowClassName, renderRowDetail, className, contentClassName, emptyState, loadingState, scrollRef, status, refreshing, error, retry, loadMore, queryKey, filters, renderHeader, onRowClick, onRowActivate, isRowHighlighted, rowSelectionControls, onCopyError, }: TableViewProps<T>): import("react/jsx-runtime").JSX.Element;