@uipath/apollo-vertex 0.0.0-stage → 0.3.0

package/dist/registry/data-table/data-table-row.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { TableCell, TableRow } from "../table/table.js";
+import { cn } from "../../lib/utils.js";
+const DATA_TABLE_ROW_HEIGHT = "h-[52px]";
+function DataTableRow({ className, ...props }) {
+    return /*#__PURE__*/ jsx(TableRow, {
+        "data-slot": "data-table-row",
+        className: cn(`border-b last:border-b-0 ${DATA_TABLE_ROW_HEIGHT}`, className),
+        ...props
+    });
+}
+function DataTableCell({ className, ...props }) {
+    return /*#__PURE__*/ jsx(TableCell, {
+        "data-slot": "data-table-cell",
+        className: cn("p-2 text-sm font-normal leading-5 text-foreground overflow-hidden text-ellipsis whitespace-nowrap", className),
+        ...props
+    });
+}
+export { DATA_TABLE_ROW_HEIGHT, DataTableCell, DataTableRow };

package/dist/registry/data-table/data-table-scroll-shadow.d.ts

@@ -0,0 +1,11 @@
+declare function useScrollShadow(): {
+    containerRef: (node: HTMLDivElement | null) => (() => void) | undefined;
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+};
+interface DataTableScrollShadowProps {
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+}
+declare function DataTableScrollShadow({ canScrollLeft, canScrollRight, }: DataTableScrollShadowProps): import("react/jsx-runtime").JSX.Element;
+export { DataTableScrollShadow, useScrollShadow };

package/dist/registry/data-table/data-table-scroll-shadow.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
+const edgeFadeVariants = {
+    initial: {
+        opacity: 0
+    },
+    animate: {
+        opacity: 1
+    },
+    exit: {
+        opacity: 0
+    }
+};
+const fastFadeTransition = {
+    duration: 0.15
+};
+function useScrollShadow() {
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    function containerRef(node) {
+        if (!node) return;
+        const el = node.querySelector('[data-slot="table-container"]');
+        if (!el) return;
+        let rafId = 0;
+        const update = ()=>{
+            cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(()=>{
+                setCanScrollLeft(el.scrollLeft > 0);
+                setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+            });
+        };
+        update();
+        el.addEventListener("scroll", update, {
+            passive: true
+        });
+        const observer = new ResizeObserver(update);
+        observer.observe(el);
+        return ()=>{
+            cancelAnimationFrame(rafId);
+            el.removeEventListener("scroll", update);
+            observer.disconnect();
+        };
+    }
+    return {
+        containerRef,
+        canScrollLeft,
+        canScrollRight
+    };
+}
+function DataTableScrollShadow({ canScrollLeft, canScrollRight }) {
+    return /*#__PURE__*/ jsxs(AnimatePresence, {
+        children: [
+            canScrollLeft && /*#__PURE__*/ jsx(motion.div, {
+                "data-slot": "data-table-scroll-shadow",
+                className: "pointer-events-none absolute inset-y-0 left-0 w-3 z-10 bg-gradient-to-r from-black/10 to-transparent",
+                variants: edgeFadeVariants,
+                initial: "initial",
+                animate: "animate",
+                exit: "exit",
+                transition: fastFadeTransition,
+                style: {
+                    originX: 0
+                }
+            }, "shadow-left"),
+            canScrollRight && /*#__PURE__*/ jsx(motion.div, {
+                "data-slot": "data-table-scroll-shadow",
+                className: "pointer-events-none absolute inset-y-0 right-0 w-3 z-10 bg-gradient-to-l from-black/10 to-transparent",
+                variants: edgeFadeVariants,
+                initial: "initial",
+                animate: "animate",
+                exit: "exit",
+                transition: fastFadeTransition,
+                style: {
+                    originX: 1
+                }
+            }, "shadow-right")
+        ]
+    });
+}
+export { DataTableScrollShadow, useScrollShadow };

package/dist/registry/data-table/data-table-search.d.ts

@@ -0,0 +1,8 @@
+import type { Table as TanstackTable } from "@tanstack/react-table";
+interface DataTableSearchProps<TData> {
+    table: TanstackTable<TData>;
+    placeholder?: string;
+    className?: string;
+}
+declare function DataTableSearch<TData>({ table, placeholder, className, }: DataTableSearchProps<TData>): import("react/jsx-runtime").JSX.Element;
+export { DataTableSearch };

package/dist/registry/data-table/data-table-search.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
+import { Input } from "../input/input.js";
+import { cn } from "../../lib/utils.js";
+function DataTableSearch({ table, placeholder, className }) {
+    const { t } = useVertexTranslation();
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "data-table-search",
+        className: cn("relative", className),
+        children: [
+            /*#__PURE__*/ jsx(SearchIcon, {
+                className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+            }),
+            /*#__PURE__*/ jsx(Input, {
+                placeholder: placeholder ?? t("search", {
+                    defaultValue: "Search..."
+                }),
+                value: String(table.getState().globalFilter ?? ""),
+                onChange: (e)=>table.setGlobalFilter(e.target.value),
+                className: "w-full sm:w-80 md:w-96 pl-9 border-0"
+            })
+        ]
+    });
+}
+export { DataTableSearch };

package/dist/registry/data-table/data-table-skeleton.d.ts

@@ -0,0 +1,6 @@
+declare function DataTableSkeleton({ columnCount, rowCount, columnWidths, }: {
+    columnCount?: number;
+    rowCount?: number;
+    columnWidths?: string[];
+}): import("react/jsx-runtime").JSX.Element;
+export { DataTableSkeleton };

package/dist/registry/data-table/data-table-skeleton.js

@@ -0,0 +1,38 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Skeleton } from "../skeleton/skeleton.js";
+import { TableCell, TableRow } from "../table/table.js";
+import { cn } from "../../lib/utils.js";
+import { DATA_TABLE_ROW_HEIGHT } from "./data-table-row.js";
+const generateSkeletonKey = (type, rowIndex, colIndex)=>`skeleton-${type}-${rowIndex}${null == colIndex ? "" : `-${colIndex}`}`;
+const DEFAULT_WIDTHS = [
+    "w-32",
+    "w-24",
+    "w-28",
+    "w-20",
+    "w-36",
+    "w-16",
+    "w-24"
+];
+function DataTableSkeleton({ columnCount = 3, rowCount = 5, columnWidths }) {
+    const getWidth = (colIndex)=>{
+        if (columnWidths && columnWidths[colIndex]) return columnWidths[colIndex];
+        return DEFAULT_WIDTHS[colIndex % DEFAULT_WIDTHS.length];
+    };
+    const columns = (rowIndex)=>Array.from({
+            length: columnCount
+        }, (_col, colIndex)=>/*#__PURE__*/ jsx(TableCell, {
+                children: /*#__PURE__*/ jsx(Skeleton, {
+                    className: cn("h-4", getWidth(colIndex))
+                })
+            }, generateSkeletonKey("cell", rowIndex, colIndex)));
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: Array.from({
+            length: rowCount
+        }, (_row, rowIndex)=>/*#__PURE__*/ jsx(TableRow, {
+                className: DATA_TABLE_ROW_HEIGHT,
+                children: columns(rowIndex)
+            }, generateSkeletonKey("row", rowIndex)))
+    });
+}
+export { DataTableSkeleton };

package/dist/registry/data-table/data-table-toolbar.d.ts

@@ -0,0 +1,11 @@
+import type { Table } from "@tanstack/react-table";
+import type * as React from "react";
+interface DataTableToolbarProps<TData> {
+    table: Table<TData>;
+    className?: string;
+    enableSearch?: boolean;
+    enableViewOptions?: boolean;
+    customContent?: React.ReactNode;
+}
+declare function DataTableToolbar<TData>({ table, className, enableSearch, enableViewOptions, customContent, }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element | null;
+export { DataTableToolbar };

package/dist/registry/data-table/data-table-toolbar.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { DataTableSearch } from "./data-table-search.js";
+import { DataTableViewOptions } from "./data-table-view-options.js";
+function DataTableToolbar({ table, className, enableSearch, enableViewOptions, customContent }) {
+    if (!enableSearch && !enableViewOptions && !customContent) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "data-table-toolbar",
+        className: cn("flex flex-wrap items-center justify-between gap-2", className),
+        children: [
+            enableSearch && /*#__PURE__*/ jsx(DataTableSearch, {
+                table: table,
+                className: "w-full sm:w-auto"
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    customContent,
+                    enableViewOptions && /*#__PURE__*/ jsx(DataTableViewOptions, {
+                        table: table
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { DataTableToolbar };

package/dist/registry/data-table/data-table-view-options.d.ts

@@ -0,0 +1,7 @@
+import type { Table as TanstackTable } from "@tanstack/react-table";
+interface DataTableViewOptionsProps<TData> {
+    table: TanstackTable<TData>;
+    className?: string;
+}
+declare function DataTableViewOptions<TData>({ table, className, }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
+export { DataTableViewOptions };

package/dist/registry/data-table/data-table-view-options.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Columns3Icon } from "lucide-react";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
+import { Button } from "../button/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../dropdown-menu/dropdown-menu.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { SortableColumnList } from "./sortable-column-list.js";
+function DataTableViewOptions({ table, className }) {
+    const { t } = useVertexTranslation();
+    const allReorderableColumns = table.getAllColumns().filter((column)=>null != column.accessorFn && column.getCanHide());
+    const currentOrder = table.getState().columnOrder;
+    const orderedColumns = ()=>{
+        if (!currentOrder || 0 === currentOrder.length) return allReorderableColumns;
+        const orderMap = new Map(currentOrder.map((id, index)=>[
+                id,
+                index
+            ]));
+        return [
+            ...allReorderableColumns
+        ].toSorted((a, b)=>{
+            const aIdx = orderMap.get(a.id) ?? Number.MAX_SAFE_INTEGER;
+            const bIdx = orderMap.get(b.id) ?? Number.MAX_SAFE_INTEGER;
+            return aIdx - bIdx;
+        });
+    };
+    const columnItems = orderedColumns().map((column)=>({
+            id: column.id,
+            displayName: column.columnDef.meta?.displayName ?? column.id,
+            isVisible: column.getIsVisible()
+        }));
+    const allColumns = table.getAllColumns();
+    const allColumnIds = currentOrder && currentOrder.length > 0 ? [
+        ...allColumns
+    ].toSorted((a, b)=>{
+        const aIdx = currentOrder.indexOf(a.id);
+        const bIdx = currentOrder.indexOf(b.id);
+        return (-1 === aIdx ? Number.MAX_SAFE_INTEGER : aIdx) - (-1 === bIdx ? Number.MAX_SAFE_INTEGER : bIdx);
+    }).map((c)=>c.id) : allColumns.map((c)=>c.id);
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "data-table-view-options",
+        className: className,
+        children: /*#__PURE__*/ jsxs(DropdownMenu, {
+            children: [
+                /*#__PURE__*/ jsxs(Tooltip, {
+                    children: [
+                        /*#__PURE__*/ jsx(TooltipTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    variant: "ghost",
+                                    size: "icon",
+                                    className: "ml-auto",
+                                    "aria-label": t("toggle_columns", {
+                                        defaultValue: "Toggle columns"
+                                    }),
+                                    children: /*#__PURE__*/ jsx(Columns3Icon, {})
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(TooltipContent, {
+                            children: t("toggle_columns", {
+                                defaultValue: "Toggle columns"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(DropdownMenuContent, {
+                    align: "end",
+                    className: "min-w-[220px] overflow-hidden",
+                    children: [
+                        /*#__PURE__*/ jsx(DropdownMenuLabel, {
+                            children: t("toggle_columns", {
+                                defaultValue: "Toggle columns"
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(DropdownMenuSeparator, {}),
+                        /*#__PURE__*/ jsx(SortableColumnList, {
+                            columns: columnItems,
+                            allColumnIds: allColumnIds,
+                            onReorder: (ids)=>table.setColumnOrder(ids),
+                            onToggleVisibility: (columnId, visible)=>table.getColumn(columnId)?.toggleVisibility(visible)
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { DataTableViewOptions };

package/dist/registry/data-table/data-table.d.ts

@@ -0,0 +1,48 @@
+import { type ColumnDef, type ColumnFiltersState, type ExpandedState, type FilterFn, type OnChangeFn, type PaginationState, type Row, type RowData, type RowSelectionState, type SortingState, type Table as TanstackTable, type VisibilityState } from "@tanstack/react-table";
+import * as React from "react";
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        displayName?: string;
+        getFilterValue?: (value: unknown, row: Row<TData>) => string;
+        overflowVisible?: boolean;
+    }
+}
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    className?: string;
+    isLoading?: boolean;
+    onRowClick?: (row: TData) => void;
+    sorting: SortingState;
+    onSortingChange: OnChangeFn<SortingState>;
+    columnFilters: ColumnFiltersState;
+    onColumnFiltersChange: OnChangeFn<ColumnFiltersState>;
+    columnVisibility: VisibilityState;
+    onColumnVisibilityChange: OnChangeFn<VisibilityState>;
+    columnOrder: string[];
+    onColumnOrderChange: OnChangeFn<string[]>;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    globalFilter: string;
+    onGlobalFilterChange: OnChangeFn<string>;
+    pagination?: PaginationState;
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+    globalFilterFn?: FilterFn<TData>;
+    enableSearch?: boolean;
+    enableViewOptions?: boolean;
+    enableColumnResizing?: boolean;
+    toolbarContent?: (table: TanstackTable<TData>) => React.ReactNode;
+    noResultsMessage?: React.ReactNode;
+    stickyHeader?: boolean;
+    expanded?: ExpandedState;
+    onExpandedChange?: OnChangeFn<ExpandedState>;
+    renderExpandedRow?: (row: Row<TData>) => React.ReactNode;
+    getRowClassName?: (row: TData) => string;
+    skeletonColumnWidths?: string[];
+    plain?: boolean;
+}
+declare function DataTable<TData, TValue>({ columns, data, className, isLoading, onRowClick, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, rowSelection, onRowSelectionChange, globalFilter, onGlobalFilterChange, pagination, onPaginationChange, getRowId, globalFilterFn, enableSearch, enableViewOptions, enableColumnResizing, toolbarContent, noResultsMessage, stickyHeader, expanded, onExpandedChange, renderExpandedRow, getRowClassName, skeletonColumnWidths, plain, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export { DataTable };
+export type { DataTableProps };
+export { DataTableColumnHeader } from "./data-table-column-header";

package/dist/registry/data-table/data-table.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/react-table";
+import { Fragment } from "react";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
+import { useReactTableCompat } from "../use-data-table/useReactTableCompat.js";
+import { cn } from "../../lib/utils.js";
+import { DataTableExpandAllToggle } from "./data-table-expand-toggle.js";
+import { DataTablePagination } from "./data-table-pagination.js";
+import { DATA_TABLE_ROW_HEIGHT } from "./data-table-row.js";
+import { DataTableScrollShadow, useScrollShadow } from "./data-table-scroll-shadow.js";
+import { DataTableSkeleton } from "./data-table-skeleton.js";
+import { DataTableToolbar } from "./data-table-toolbar.js";
+import { DataTableColumnHeader } from "./data-table-column-header.js";
+const GLASS_CLASSES = "bg-white/55 border border-white/80 rounded-2xl backdrop-blur-sm shadow-[0_2px_16px_2px_rgba(0,0,0,0.05),inset_0_1px_0_0_rgba(255,255,255,0.6)] dark:bg-white/[0.055] dark:border-white/[0.03] dark:shadow-[0_2px_16px_2px_rgba(0,0,0,0.2),inset_0_1px_0_0_rgba(255,255,255,0.04)]";
+function DataTable({ columns, data, className, isLoading = false, onRowClick, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, rowSelection, onRowSelectionChange, globalFilter, onGlobalFilterChange, pagination, onPaginationChange, getRowId, globalFilterFn, enableSearch = true, enableViewOptions = true, enableColumnResizing = false, toolbarContent, noResultsMessage, stickyHeader = false, expanded, onExpandedChange, renderExpandedRow, getRowClassName, skeletonColumnWidths, plain = false }) {
+    const { t } = useVertexTranslation();
+    const isRowSelectionEnabled = !!(rowSelection && onRowSelectionChange);
+    const isPaginationEnabled = !!(pagination && onPaginationChange);
+    const resetPageIndex = ()=>{
+        onPaginationChange?.((prev)=>0 === prev.pageIndex ? prev : {
+                ...prev,
+                pageIndex: 0
+            });
+    };
+    const table = useReactTableCompat({
+        data,
+        columns,
+        onSortingChange,
+        onColumnFiltersChange: (updater)=>{
+            onColumnFiltersChange(updater);
+            resetPageIndex();
+        },
+        onColumnVisibilityChange,
+        onColumnOrderChange,
+        ...isRowSelectionEnabled && {
+            onRowSelectionChange
+        },
+        onGlobalFilterChange: (updater)=>{
+            onGlobalFilterChange(updater);
+            resetPageIndex();
+        },
+        ...isPaginationEnabled && {
+            onPaginationChange,
+            getPaginationRowModel: getPaginationRowModel()
+        },
+        ...onExpandedChange ? {
+            onExpandedChange
+        } : {},
+        ...getRowId ? {
+            getRowId
+        } : {},
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        ...renderExpandedRow ? {
+            getExpandedRowModel: getExpandedRowModel()
+        } : {},
+        ...globalFilterFn ? {
+            globalFilterFn
+        } : {},
+        ...enableColumnResizing && {
+            columnResizeMode: "onChange"
+        },
+        enableColumnResizing,
+        enableRowSelection: isRowSelectionEnabled,
+        autoResetPageIndex: false,
+        state: {
+            sorting,
+            columnFilters,
+            columnVisibility,
+            columnOrder,
+            globalFilter,
+            ...isRowSelectionEnabled && {
+                rowSelection
+            },
+            ...isPaginationEnabled && {
+                pagination
+            },
+            ...expanded ? {
+                expanded
+            } : {}
+        }
+    });
+    const columnSizeVars = ()=>{
+        if (!enableColumnResizing) return {};
+        const headers = table.getFlatHeaders();
+        const colSizes = {};
+        for (const header of headers){
+            colSizes[`--header-${header.id}-size`] = header.getSize();
+            colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+        }
+        return colSizes;
+    };
+    const rows = table.getRowModel().rows;
+    const isExpandable = !!renderExpandedRow;
+    const { containerRef, canScrollLeft, canScrollRight } = useScrollShadow();
+    return /*#__PURE__*/ jsxs("div", {
+        "data-slot": "data-table",
+        className: cn("space-y-4 min-w-0", className),
+        children: [
+            /*#__PURE__*/ jsx(DataTableToolbar, {
+                table: table,
+                enableSearch: enableSearch,
+                enableViewOptions: enableViewOptions,
+                customContent: toolbarContent?.(table)
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                ref: containerRef,
+                className: cn(!plain && GLASS_CLASSES, "relative min-w-0 overflow-hidden", stickyHeader && "overflow-auto"),
+                children: [
+                    /*#__PURE__*/ jsxs(Table, {
+                        className: cn("w-full [&_tr>:first-child]:pl-4 [&_tr>:last-child]:pr-4", enableColumnResizing && "table-fixed"),
+                        style: enableColumnResizing ? {
+                            ...columnSizeVars(),
+                            width: table.getTotalSize()
+                        } : {},
+                        children: [
+                            /*#__PURE__*/ jsx(TableHeader, {
+                                className: stickyHeader ? "sticky top-0 z-10 bg-background" : "",
+                                children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ jsx(TableRow, {
+                                        children: headerGroup.headers.map((header)=>/*#__PURE__*/ jsxs(TableHead, {
+                                                className: cn(enableColumnResizing && "relative group pr-2"),
+                                                style: {
+                                                    ...header.column.columnDef.maxSize ? {
+                                                        maxWidth: header.column.columnDef.maxSize
+                                                    } : {},
+                                                    ...enableColumnResizing ? {
+                                                        width: `calc(var(--header-${header.id}-size) * 1px)`
+                                                    } : {}
+                                                },
+                                                children: [
+                                                    !header.isPlaceholder && isExpandable && "expand" === header.column.id && rows.length > 0 ? /*#__PURE__*/ jsx(DataTableExpandAllToggle, {
+                                                        table: table
+                                                    }) : header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                                                    enableColumnResizing && /*#__PURE__*/ jsx("div", {
+                                                        "data-slot": "column-resizer",
+                                                        onDoubleClick: ()=>header.column.resetSize(),
+                                                        onMouseDown: header.getResizeHandler(),
+                                                        onTouchStart: header.getResizeHandler(),
+                                                        className: cn("absolute top-0 right-0 z-10 h-full w-2 cursor-col-resize select-none touch-none", "after:absolute after:top-0 after:right-0 after:h-full after:w-0.5", "after:opacity-0 group-hover:after:opacity-100 after:transition-opacity", header.column.getIsResizing() ? "after:bg-primary after:opacity-100" : "after:bg-border")
+                                                    })
+                                                ]
+                                            }, header.id))
+                                    }, headerGroup.id))
+                            }),
+                            /*#__PURE__*/ jsx(TableBody, {
+                                children: isLoading ? /*#__PURE__*/ jsx(DataTableSkeleton, {
+                                    columnCount: table.getVisibleLeafColumns().length,
+                                    columnWidths: skeletonColumnWidths
+                                }) : rows.length > 0 ? rows.map((row)=>/*#__PURE__*/ jsxs(Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(TableRow, {
+                                                "data-state": row.getIsSelected() && "selected",
+                                                className: cn(`border-b last:border-b-0 ${DATA_TABLE_ROW_HEIGHT}`, onRowClick && "cursor-pointer hover:bg-muted/50", getRowClassName?.(row.original)),
+                                                ...onRowClick && {
+                                                    onClick: ()=>onRowClick(row.original)
+                                                },
+                                                children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ jsx(TableCell, {
+                                                        style: {
+                                                            ...cell.column.columnDef.maxSize ? {
+                                                                maxWidth: cell.column.columnDef.maxSize
+                                                            } : {},
+                                                            ...enableColumnResizing ? {
+                                                                width: `calc(var(--col-${cell.column.id}-size) * 1px)`
+                                                            } : {}
+                                                        },
+                                                        children: /*#__PURE__*/ jsx("div", {
+                                                            className: cn("text-ellipsis whitespace-nowrap text-sm font-normal leading-5 text-foreground", !cell.column.columnDef.meta?.overflowVisible && "overflow-hidden"),
+                                                            onMouseEnter: (e)=>{
+                                                                const el = e.currentTarget;
+                                                                if (el.scrollWidth > el.clientWidth + 1) el.title = el.textContent || "";
+                                                            },
+                                                            onMouseLeave: (e)=>{
+                                                                e.currentTarget.title = "";
+                                                            },
+                                                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                                                        })
+                                                    }, cell.id))
+                                            }),
+                                            renderExpandedRow && row.getIsExpanded() && /*#__PURE__*/ jsx(TableRow, {
+                                                "data-state": "expanded",
+                                                className: "hover:bg-transparent",
+                                                children: /*#__PURE__*/ jsx(TableCell, {
+                                                    colSpan: row.getVisibleCells().length,
+                                                    children: renderExpandedRow(row)
+                                                })
+                                            })
+                                        ]
+                                    }, row.id)) : /*#__PURE__*/ jsx(TableRow, {
+                                    children: /*#__PURE__*/ jsx(TableCell, {
+                                        colSpan: columns.length,
+                                        className: "text-center py-8 text-muted-foreground",
+                                        children: noResultsMessage ?? t("no_results", {
+                                            defaultValue: "No results."
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(DataTableScrollShadow, {
+                        canScrollLeft: canScrollLeft,
+                        canScrollRight: canScrollRight
+                    })
+                ]
+            }),
+            isPaginationEnabled && /*#__PURE__*/ jsx(DataTablePagination, {
+                table: table
+            })
+        ]
+    });
+}
+export { DataTable, DataTableColumnHeader };

package/dist/registry/data-table/index.d.ts

@@ -0,0 +1,12 @@
+export type { ColumnDef, ColumnFiltersState, ExpandedState, OnChangeFn, PaginationState, Row, RowSelectionState, SortingState, Table as TanstackTable, VisibilityState, } from "@tanstack/react-table";
+export type { DataTableProps } from "./data-table";
+export { DataTable } from "./data-table";
+export { DataTableColumnHeader } from "./data-table-column-header";
+export { FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, } from "../filter-dropdown/index";
+export { dataTableFacetedFilterFn, dataTableGlobalFilterFn, } from "./data-table-filters";
+export { DataTablePagination } from "./data-table-pagination";
+export { DataTableCell, DataTableRow } from "./data-table-row";
+export { DataTableSearch } from "./data-table-search";
+export { DataTableSkeleton } from "./data-table-skeleton";
+export { DataTableToolbar } from "./data-table-toolbar";
+export { DataTableViewOptions } from "./data-table-view-options";

package/dist/registry/data-table/index.js

@@ -0,0 +1,11 @@
+import { DataTable } from "./data-table.js";
+import { DataTableColumnHeader } from "./data-table-column-header.js";
+import { FilterDropdown } from "../filter-dropdown/index.js";
+import { dataTableFacetedFilterFn, dataTableGlobalFilterFn } from "./data-table-filters.js";
+import { DataTablePagination } from "./data-table-pagination.js";
+import { DataTableCell, DataTableRow } from "./data-table-row.js";
+import { DataTableSearch } from "./data-table-search.js";
+import { DataTableSkeleton } from "./data-table-skeleton.js";
+import { DataTableToolbar } from "./data-table-toolbar.js";
+import { DataTableViewOptions } from "./data-table-view-options.js";
+export { DataTable, DataTableCell, DataTableColumnHeader, DataTablePagination, DataTableRow, DataTableSearch, DataTableSkeleton, DataTableToolbar, DataTableViewOptions, FilterDropdown, dataTableFacetedFilterFn, dataTableGlobalFilterFn };

package/dist/registry/data-table/sortable-column-item.d.ts

@@ -0,0 +1,9 @@
+interface SortableColumnItemProps {
+    id: string;
+    displayName: string;
+    isVisible: boolean;
+    onToggleVisibility: (value: boolean) => void;
+}
+declare function SortableColumnItem({ id, displayName, isVisible, onToggleVisibility, }: SortableColumnItemProps): import("react/jsx-runtime").JSX.Element;
+export { SortableColumnItem };
+export type { SortableColumnItemProps };