@handled-ai/design-system 0.14.10 → 0.15.1

package/dist/components/virtualized-data-table.d.ts

@@ -1,6 +1,12 @@
 import * as React from 'react';
-import { ColumnDef, ColumnSizingState, OnChangeFn, SortingState, ColumnFiltersState, VisibilityState } from '@tanstack/react-table';
+import { RowData, ColumnDef, ColumnSizingState, OnChangeFn, SortingState, ColumnFiltersState, VisibilityState } from '@tanstack/react-table';
 
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /** Server-side sort key for this column. Enables sort in the header menu when onColumnSort is also provided. */
+        sortKey?: string;
+    }
+}
 interface VirtualizedDataTableProps<TData> {
     columns: ColumnDef<TData, any>[];
     data: TData[];
@@ -27,8 +33,16 @@ interface VirtualizedDataTableProps<TData> {
     emptyIcon?: React.ReactNode;
     emptyMessage?: string;
     emptyDescription?: string;
+    /** Called when user requests sorting from column header. columnId is the column's meta.sortKey. */
+    onColumnSort?: (columnId: string, direction: "asc" | "desc") => void;
+    /** Called when user hides a column from the header menu. */
+    onColumnHide?: (columnId: string) => void;
+    /** The currently active sort column ID — matches a column's meta.sortKey. Used for visual indicators and aria-sort. */
+    activeSortColumn?: string | null;
+    /** The current sort direction. Used for visual indicators and aria-sort. */
+    activeSortDirection?: "asc" | "desc";
     className?: string;
 }
-declare function VirtualizedDataTable<TData>({ columns, data, height, estimateRowHeight, overscan, onRowClick, getRowId, onReachBottom, reachBottomThreshold, hasMore, isFetchingMore, enableColumnResizing, columnResizeMode, columnSizing, onColumnSizingChange, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, isLoading, emptyIcon, emptyMessage, emptyDescription, className, }: VirtualizedDataTableProps<TData>): React.JSX.Element;
+declare function VirtualizedDataTable<TData>({ columns, data, height, estimateRowHeight, overscan, onRowClick, getRowId, onReachBottom, reachBottomThreshold, hasMore, isFetchingMore, enableColumnResizing, columnResizeMode, columnSizing, onColumnSizingChange, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, onColumnSort, onColumnHide, activeSortColumn, activeSortDirection, isLoading, emptyIcon, emptyMessage, emptyDescription, className, }: VirtualizedDataTableProps<TData>): React.JSX.Element;
 
 export { VirtualizedDataTable, type VirtualizedDataTableProps };

package/dist/components/virtualized-data-table.js

@@ -20,7 +20,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import {
@@ -28,7 +28,14 @@ import {
   getCoreRowModel,
   flexRender
 } from "@tanstack/react-table";
-import { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from "lucide-react";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, EyeOff, Check, SearchX, Loader2 } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+  DropdownMenuSeparator
+} from "./dropdown-menu.js";
 import { cn } from "../lib/utils.js";
 function VirtualizedDataTable({
   columns,
@@ -52,6 +59,10 @@ function VirtualizedDataTable({
   onColumnFiltersChange,
   columnVisibility,
   onColumnVisibilityChange,
+  onColumnSort,
+  onColumnHide,
+  activeSortColumn,
+  activeSortDirection,
   isLoading,
   emptyIcon,
   emptyMessage = "No rows found",
@@ -141,58 +152,148 @@ function VirtualizedDataTable({
           {
             className: "flex w-max min-w-full border-b border-border/50",
             role: "row",
-            children: headerGroup.headers.map((header, colIdx) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: cn(
-                  "h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative",
-                  header.column.getCanResize() && "pr-4"
-                ),
-                style: {
-                  width: header.getSize(),
-                  minWidth: header.getSize()
-                },
-                role: "columnheader",
-                "aria-colindex": colIdx + 1,
-                "aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : header.column.getCanSort() ? "none" : void 0,
-                children: [
-                  header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      className: "inline-flex items-center gap-1 hover:text-foreground transition-colors",
-                      onClick: header.column.getToggleSortingHandler(),
-                      children: [
-                        flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        ),
-                        header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "w-3 h-3" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-3 h-3 opacity-40" })
-                      ]
-                    }
-                  ) : flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
+            children: headerGroup.headers.map((header, colIdx) => {
+              var _a;
+              const sortKey = (_a = header.column.columnDef.meta) == null ? void 0 : _a.sortKey;
+              const canServerSort = Boolean(sortKey && onColumnSort);
+              const resolvedAriaSort = (() => {
+                if (activeSortColumn !== void 0) {
+                  if (!sortKey) return void 0;
+                  if (activeSortColumn === sortKey) return activeSortDirection === "asc" ? "ascending" : "descending";
+                  return "none";
+                }
+                const sorted = header.column.getIsSorted();
+                if (sorted === "asc") return "ascending";
+                if (sorted === "desc") return "descending";
+                if (header.column.getCanSort()) return "none";
+                return void 0;
+              })();
+              const sortIcon = (() => {
+                if (!canServerSort) return null;
+                if (activeSortColumn === sortKey && activeSortDirection === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "w-3 h-3" });
+                if (activeSortColumn === sortKey && activeSortDirection === "desc") return /* @__PURE__ */ jsx(ArrowDown, { className: "w-3 h-3" });
+                return /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-3 h-3 opacity-40" });
+              })();
+              const handleHeaderClick = canServerSort ? () => {
+                const newDir = activeSortColumn === sortKey ? activeSortDirection === "asc" ? "desc" : "asc" : "asc";
+                onColumnSort(sortKey, newDir);
+              } : void 0;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "group/header h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative",
+                    header.column.getCanResize() && "pr-4"
                   ),
-                  header.column.getCanResize() && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      onMouseDown: header.getResizeHandler(),
-                      onTouchStart: header.getResizeHandler(),
-                      className: cn(
-                        "absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none",
-                        "after:absolute after:right-1.5 after:top-0 after:h-full after:w-px",
-                        "after:bg-transparent hover:after:bg-primary/30",
-                        header.column.getIsResizing() && "after:bg-primary/50"
+                  style: {
+                    width: header.getSize(),
+                    minWidth: header.getSize()
+                  },
+                  role: "columnheader",
+                  "aria-colindex": colIdx + 1,
+                  "aria-sort": resolvedAriaSort,
+                  children: [
+                    header.isPlaceholder ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      canServerSort ? /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          className: "inline-flex items-center gap-1 hover:text-foreground transition-colors",
+                          onClick: handleHeaderClick,
+                          children: [
+                            flexRender(header.column.columnDef.header, header.getContext()),
+                            sortIcon
+                          ]
+                        }
+                      ) : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          className: "inline-flex items-center gap-1 hover:text-foreground transition-colors",
+                          onClick: header.column.getToggleSortingHandler(),
+                          children: [
+                            flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            ),
+                            header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "w-3 h-3" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-3 h-3 opacity-40" })
+                          ]
+                        }
+                      ) : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
                       ),
-                      role: "separator",
-                      "aria-orientation": "vertical"
-                    }
-                  )
-                ]
-              },
-              header.id
-            ))
+                      (canServerSort || header.column.getCanSort() || header.column.getCanHide()) && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "ml-1 inline-flex items-center hover:text-foreground transition-all opacity-0 group-hover/header:opacity-100",
+                            "aria-label": "Column actions",
+                            children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" })
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-48", children: [
+                          /* @__PURE__ */ jsxs(
+                            DropdownMenuItem,
+                            {
+                              disabled: !canServerSort,
+                              onClick: () => canServerSort && onColumnSort(sortKey, "asc"),
+                              children: [
+                                /* @__PURE__ */ jsx(ArrowUp, { className: "w-3.5 h-3.5 mr-2" }),
+                                "Sort ascending",
+                                activeSortColumn === sortKey && activeSortDirection === "asc" && /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 ml-auto" })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            DropdownMenuItem,
+                            {
+                              disabled: !canServerSort,
+                              onClick: () => canServerSort && onColumnSort(sortKey, "desc"),
+                              children: [
+                                /* @__PURE__ */ jsx(ArrowDown, { className: "w-3.5 h-3.5 mr-2" }),
+                                "Sort descending",
+                                activeSortColumn === sortKey && activeSortDirection === "desc" && /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 ml-auto" })
+                              ]
+                            }
+                          ),
+                          header.column.getCanHide() && /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                            /* @__PURE__ */ jsxs(
+                              DropdownMenuItem,
+                              {
+                                onClick: () => onColumnHide ? onColumnHide(header.column.id) : header.column.toggleVisibility(false),
+                                children: [
+                                  /* @__PURE__ */ jsx(EyeOff, { className: "w-3.5 h-3.5 mr-2" }),
+                                  "Hide column"
+                                ]
+                              }
+                            )
+                          ] })
+                        ] })
+                      ] })
+                    ] }),
+                    header.column.getCanResize() && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        onMouseDown: header.getResizeHandler(),
+                        onTouchStart: header.getResizeHandler(),
+                        className: cn(
+                          "absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none",
+                          "after:absolute after:right-1.5 after:top-0 after:h-full after:w-px",
+                          "after:bg-transparent hover:after:bg-primary/30",
+                          header.column.getIsResizing() && "after:bg-primary/50"
+                        ),
+                        role: "separator",
+                        "aria-orientation": "vertical"
+                      }
+                    )
+                  ]
+                },
+                header.id
+              );
+            })
           },
           headerGroup.id
         )) }),

package/dist/components/virtualized-data-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/virtualized-data-table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport {\n  useReactTable,\n  getCoreRowModel,\n  flexRender,\n  type ColumnDef,\n  type SortingState,\n  type ColumnFiltersState,\n  type VisibilityState,\n  type ColumnSizingState,\n  type OnChangeFn,\n} from \"@tanstack/react-table\"\nimport { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface VirtualizedDataTableProps<TData> {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columns: ColumnDef<TData, any>[]\n  data: TData[]\n\n  // Virtualization\n  height?: number | string\n  estimateRowHeight?: number\n  overscan?: number\n\n  // Row interaction\n  onRowClick?: (row: TData) => void\n  getRowId?: (original: TData, index: number) => string\n\n  // Infinite scroll\n  onReachBottom?: () => void\n  reachBottomThreshold?: number\n  hasMore?: boolean\n  isFetchingMore?: boolean\n\n  // Column resizing\n  enableColumnResizing?: boolean\n  columnResizeMode?: \"onChange\" | \"onEnd\"\n  columnSizing?: ColumnSizingState\n  onColumnSizingChange?: OnChangeFn<ColumnSizingState>\n\n  // Server-driven state (controlled) — omit for internal state\n  sorting?: SortingState\n  onSortingChange?: OnChangeFn<SortingState>\n  columnFilters?: ColumnFiltersState\n  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>\n  columnVisibility?: VisibilityState\n  onColumnVisibilityChange?: OnChangeFn<VisibilityState>\n\n  // Loading / Empty state\n  isLoading?: boolean\n  emptyIcon?: React.ReactNode\n  emptyMessage?: string\n  emptyDescription?: string\n\n  // Styling\n  className?: string\n}\n\nexport function VirtualizedDataTable<TData>({\n  columns,\n  data,\n  height = 600,\n  estimateRowHeight = 48,\n  overscan = 8,\n  onRowClick,\n  getRowId,\n  onReachBottom,\n  reachBottomThreshold = 5,\n  hasMore = true,\n  isFetchingMore,\n  enableColumnResizing = false,\n  columnResizeMode = \"onEnd\",\n  columnSizing,\n  onColumnSizingChange,\n  sorting,\n  onSortingChange,\n  columnFilters,\n  onColumnFiltersChange,\n  columnVisibility,\n  onColumnVisibilityChange,\n  isLoading,\n  emptyIcon,\n  emptyMessage = \"No rows found\",\n  emptyDescription = \"Try adjusting your filters\",\n  className,\n}: VirtualizedDataTableProps<TData>) {\n  // Controlled/uncontrolled state for sorting\n  const [internalSorting, setInternalSorting] = React.useState<SortingState>([])\n  const resolvedSorting = sorting ?? internalSorting\n  const resolvedOnSortingChange = onSortingChange ?? setInternalSorting\n\n  // Controlled/uncontrolled state for column filters\n  const [internalColumnFilters, setInternalColumnFilters] =\n    React.useState<ColumnFiltersState>([])\n  const resolvedColumnFilters = columnFilters ?? internalColumnFilters\n  const resolvedOnColumnFiltersChange =\n    onColumnFiltersChange ?? setInternalColumnFilters\n\n  // Controlled/uncontrolled state for column visibility\n  const [internalColumnVisibility, setInternalColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility\n  const resolvedOnColumnVisibilityChange =\n    onColumnVisibilityChange ?? setInternalColumnVisibility\n\n  // Controlled/uncontrolled state for column sizing\n  const [internalColumnSizing, setInternalColumnSizing] =\n    React.useState<ColumnSizingState>({})\n  const resolvedColumnSizing = columnSizing ?? internalColumnSizing\n  const resolvedOnColumnSizingChange =\n    onColumnSizingChange ?? setInternalColumnSizing\n\n  // TanStack Table setup\n  const table = useReactTable({\n    data,\n    columns,\n    ...(getRowId ? { getRowId } : {}),\n    state: {\n      sorting: resolvedSorting,\n      columnFilters: resolvedColumnFilters,\n      columnVisibility: resolvedColumnVisibility,\n      columnSizing: resolvedColumnSizing,\n    },\n    onSortingChange: resolvedOnSortingChange,\n    onColumnFiltersChange: resolvedOnColumnFiltersChange,\n    onColumnVisibilityChange: resolvedOnColumnVisibilityChange,\n    onColumnSizingChange: resolvedOnColumnSizingChange,\n    enableColumnResizing,\n    columnResizeMode,\n    manualSorting: true,\n    manualFiltering: true,\n    manualPagination: true,\n    getCoreRowModel: getCoreRowModel(),\n  })\n\n  // Virtualizer setup\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n  const rows = table.getRowModel().rows\n\n  const virtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => estimateRowHeight,\n    overscan,\n    measureElement: (element) => element.getBoundingClientRect().height,\n  })\n\n  // Infinite scroll detection\n  const lastTriggeredDataLengthRef = React.useRef<number>(0)\n\n  // Derive a stable primitive for the last visible virtual-item index so the\n  // effect below doesn't re-run on every render (getVirtualItems() returns a\n  // new array reference each call).\n  const virtualItems = virtualizer.getVirtualItems()\n  const lastVirtualItemIndex =\n    virtualItems.length > 0\n      ? virtualItems[virtualItems.length - 1].index\n      : -1\n\n  React.useEffect(() => {\n    if (!onReachBottom || isFetchingMore || hasMore === false) return\n    if (lastVirtualItemIndex < 0) return\n    if (lastVirtualItemIndex < rows.length - reachBottomThreshold) return\n\n    // Prevent re-firing until data.length changes (i.e. new page loaded).\n    if (lastTriggeredDataLengthRef.current === data.length) return\n    lastTriggeredDataLengthRef.current = data.length\n\n    onReachBottom()\n  }, [\n    lastVirtualItemIndex,\n    rows.length,\n    data.length,\n    onReachBottom,\n    isFetchingMore,\n    hasMore,\n    reachBottomThreshold,\n  ])\n\n  return (\n    <div className={cn(\n      \"w-full\",\n      typeof height === \"string\" && height.trim().endsWith(\"%\") && \"h-full\",\n      className,\n    )}>\n      <div\n        ref={scrollContainerRef}\n        className=\"relative overflow-auto\"\n        style={{\n          height: typeof height === \"number\" ? `${height}px` : height,\n          contain: \"strict\",\n        }}\n        role=\"table\"\n        aria-rowcount={data.length}\n        aria-colcount={table.getVisibleLeafColumns().length}\n      >\n        {/* Sticky header */}\n        <div className=\"sticky top-0 z-10 bg-background\" role=\"rowgroup\">\n          {table.getHeaderGroups().map((headerGroup) => (\n            <div\n              key={headerGroup.id}\n              className=\"flex w-max min-w-full border-b border-border/50\"\n              role=\"row\"\n            >\n              {headerGroup.headers.map((header, colIdx) => (\n                <div\n                  key={header.id}\n                  className={cn(\n                    \"h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative\",\n                    header.column.getCanResize() && \"pr-4\",\n                  )}\n                  style={{\n                    width: header.getSize(),\n                    minWidth: header.getSize(),\n                  }}\n                  role=\"columnheader\"\n                  aria-colindex={colIdx + 1}\n                  aria-sort={\n                    header.column.getIsSorted() === \"asc\"\n                      ? \"ascending\"\n                      : header.column.getIsSorted() === \"desc\"\n                        ? \"descending\"\n                        : header.column.getCanSort()\n                          ? \"none\"\n                          : undefined\n                  }\n                >\n                  {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                    <button\n                      type=\"button\"\n                      className=\"inline-flex items-center gap-1 hover:text-foreground transition-colors\"\n                      onClick={header.column.getToggleSortingHandler()}\n                    >\n                      {flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )}\n                      {header.column.getIsSorted() === \"asc\" ? (\n                        <ArrowUp className=\"w-3 h-3\" />\n                      ) : header.column.getIsSorted() === \"desc\" ? (\n                        <ArrowDown className=\"w-3 h-3\" />\n                      ) : (\n                        <ArrowUpDown className=\"w-3 h-3 opacity-40\" />\n                      )}\n                    </button>\n                  ) : (\n                    flexRender(\n                      header.column.columnDef.header,\n                      header.getContext(),\n                    )\n                  )}\n                  {header.column.getCanResize() && (\n                    <div\n                      onMouseDown={header.getResizeHandler()}\n                      onTouchStart={header.getResizeHandler()}\n                      className={cn(\n                        \"absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none\",\n                        \"after:absolute after:right-1.5 after:top-0 after:h-full after:w-px\",\n                        \"after:bg-transparent hover:after:bg-primary/30\",\n                        header.column.getIsResizing() && \"after:bg-primary/50\",\n                      )}\n                      role=\"separator\"\n                      aria-orientation=\"vertical\"\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          ))}\n        </div>\n\n        {/* Virtualized body or empty state */}\n        {rows.length > 0 ? (\n          <div\n            role=\"rowgroup\"\n            style={{\n              height: virtualizer.getTotalSize(),\n              width: \"100%\",\n              position: \"relative\",\n            }}\n          >\n            {virtualizer.getVirtualItems().map((virtualRow) => {\n              const row = rows[virtualRow.index]\n              return (\n                <div\n                  key={row.id}\n                  data-index={virtualRow.index}\n                  ref={virtualizer.measureElement}\n                  className={cn(\n                    \"absolute left-0 w-max min-w-full flex group transition-colors\",\n                    onRowClick && \"cursor-pointer\",\n                  )}\n                  style={{\n                    transform: `translateY(${virtualRow.start}px)`,\n                  }}\n                  role=\"row\"\n                  aria-rowindex={virtualRow.index + 2}\n                  onClick={() => onRowClick?.(row.original)}\n                  tabIndex={onRowClick ? 0 : undefined}\n                  onKeyDown={\n                    onRowClick\n                      ? (e: React.KeyboardEvent) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault()\n                            onRowClick(row.original)\n                          }\n                        }\n                      : undefined\n                  }\n                >\n                  {row.getVisibleCells().map((cell, colIdx) => (\n                    <div\n                      key={cell.id}\n                      className=\"px-3 py-3 flex items-center whitespace-nowrap group-hover:bg-muted/50\"\n                      style={{\n                        width: cell.column.getSize(),\n                        minWidth: cell.column.getSize(),\n                      }}\n                      role=\"cell\"\n                      aria-colindex={colIdx + 1}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </div>\n                  ))}\n                </div>\n              )\n            })}\n          </div>\n        ) : isLoading ? (\n          <div className=\"flex flex-col items-center justify-center gap-2 text-muted-foreground py-20\">\n            <Loader2 className=\"h-7 w-7 animate-spin opacity-60\" />\n            <p className=\"text-sm font-medium\">Loading...</p>\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center gap-1 text-muted-foreground py-20\">\n            {emptyIcon ?? <SearchX className=\"h-7 w-7 opacity-40\" />}\n            <p className=\"text-sm font-medium\">{emptyMessage}</p>\n            <p className=\"text-xs\">{emptyDescription}</p>\n          </div>\n        )}\n\n        {/* Loading indicator */}\n        {isFetchingMore && (\n          <div className=\"flex items-center justify-center py-4\">\n            <Loader2 className=\"h-5 w-5 animate-spin text-muted-foreground\" />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/virtualized-data-table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport {\n  useReactTable,\n  getCoreRowModel,\n  flexRender,\n  type ColumnDef,\n  type SortingState,\n  type ColumnFiltersState,\n  type VisibilityState,\n  type ColumnSizingState,\n  type OnChangeFn,\n} from \"@tanstack/react-table\"\nimport type { RowData } from \"@tanstack/react-table\"\nimport { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, EyeOff, Check, SearchX, Loader2 } from \"lucide-react\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n} from \"./dropdown-menu\"\n\nimport { cn } from \"../lib/utils\"\n\ndeclare module \"@tanstack/react-table\" {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    /** Server-side sort key for this column. Enables sort in the header menu when onColumnSort is also provided. */\n    sortKey?: string\n  }\n}\n\nexport interface VirtualizedDataTableProps<TData> {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columns: ColumnDef<TData, any>[]\n  data: TData[]\n\n  // Virtualization\n  height?: number | string\n  estimateRowHeight?: number\n  overscan?: number\n\n  // Row interaction\n  onRowClick?: (row: TData) => void\n  getRowId?: (original: TData, index: number) => string\n\n  // Infinite scroll\n  onReachBottom?: () => void\n  reachBottomThreshold?: number\n  hasMore?: boolean\n  isFetchingMore?: boolean\n\n  // Column resizing\n  enableColumnResizing?: boolean\n  columnResizeMode?: \"onChange\" | \"onEnd\"\n  columnSizing?: ColumnSizingState\n  onColumnSizingChange?: OnChangeFn<ColumnSizingState>\n\n  // Server-driven state (controlled) — omit for internal state\n  sorting?: SortingState\n  onSortingChange?: OnChangeFn<SortingState>\n  columnFilters?: ColumnFiltersState\n  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>\n  columnVisibility?: VisibilityState\n  onColumnVisibilityChange?: OnChangeFn<VisibilityState>\n\n  // Loading / Empty state\n  isLoading?: boolean\n  emptyIcon?: React.ReactNode\n  emptyMessage?: string\n  emptyDescription?: string\n\n  // Column header menu\n  /** Called when user requests sorting from column header. columnId is the column's meta.sortKey. */\n  onColumnSort?: (columnId: string, direction: \"asc\" | \"desc\") => void\n  /** Called when user hides a column from the header menu. */\n  onColumnHide?: (columnId: string) => void\n  /** The currently active sort column ID — matches a column's meta.sortKey. Used for visual indicators and aria-sort. */\n  activeSortColumn?: string | null\n  /** The current sort direction. Used for visual indicators and aria-sort. */\n  activeSortDirection?: \"asc\" | \"desc\"\n\n  // Styling\n  className?: string\n}\n\nexport function VirtualizedDataTable<TData>({\n  columns,\n  data,\n  height = 600,\n  estimateRowHeight = 48,\n  overscan = 8,\n  onRowClick,\n  getRowId,\n  onReachBottom,\n  reachBottomThreshold = 5,\n  hasMore = true,\n  isFetchingMore,\n  enableColumnResizing = false,\n  columnResizeMode = \"onEnd\",\n  columnSizing,\n  onColumnSizingChange,\n  sorting,\n  onSortingChange,\n  columnFilters,\n  onColumnFiltersChange,\n  columnVisibility,\n  onColumnVisibilityChange,\n  onColumnSort,\n  onColumnHide,\n  activeSortColumn,\n  activeSortDirection,\n  isLoading,\n  emptyIcon,\n  emptyMessage = \"No rows found\",\n  emptyDescription = \"Try adjusting your filters\",\n  className,\n}: VirtualizedDataTableProps<TData>) {\n  // Controlled/uncontrolled state for sorting\n  const [internalSorting, setInternalSorting] = React.useState<SortingState>([])\n  const resolvedSorting = sorting ?? internalSorting\n  const resolvedOnSortingChange = onSortingChange ?? setInternalSorting\n\n  // Controlled/uncontrolled state for column filters\n  const [internalColumnFilters, setInternalColumnFilters] =\n    React.useState<ColumnFiltersState>([])\n  const resolvedColumnFilters = columnFilters ?? internalColumnFilters\n  const resolvedOnColumnFiltersChange =\n    onColumnFiltersChange ?? setInternalColumnFilters\n\n  // Controlled/uncontrolled state for column visibility\n  const [internalColumnVisibility, setInternalColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility\n  const resolvedOnColumnVisibilityChange =\n    onColumnVisibilityChange ?? setInternalColumnVisibility\n\n  // Controlled/uncontrolled state for column sizing\n  const [internalColumnSizing, setInternalColumnSizing] =\n    React.useState<ColumnSizingState>({})\n  const resolvedColumnSizing = columnSizing ?? internalColumnSizing\n  const resolvedOnColumnSizingChange =\n    onColumnSizingChange ?? setInternalColumnSizing\n\n  // TanStack Table setup\n  const table = useReactTable({\n    data,\n    columns,\n    ...(getRowId ? { getRowId } : {}),\n    state: {\n      sorting: resolvedSorting,\n      columnFilters: resolvedColumnFilters,\n      columnVisibility: resolvedColumnVisibility,\n      columnSizing: resolvedColumnSizing,\n    },\n    onSortingChange: resolvedOnSortingChange,\n    onColumnFiltersChange: resolvedOnColumnFiltersChange,\n    onColumnVisibilityChange: resolvedOnColumnVisibilityChange,\n    onColumnSizingChange: resolvedOnColumnSizingChange,\n    enableColumnResizing,\n    columnResizeMode,\n    manualSorting: true,\n    manualFiltering: true,\n    manualPagination: true,\n    getCoreRowModel: getCoreRowModel(),\n  })\n\n  // Virtualizer setup\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n  const rows = table.getRowModel().rows\n\n  const virtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: () => estimateRowHeight,\n    overscan,\n    measureElement: (element) => element.getBoundingClientRect().height,\n  })\n\n  // Infinite scroll detection\n  const lastTriggeredDataLengthRef = React.useRef<number>(0)\n\n  // Derive a stable primitive for the last visible virtual-item index so the\n  // effect below doesn't re-run on every render (getVirtualItems() returns a\n  // new array reference each call).\n  const virtualItems = virtualizer.getVirtualItems()\n  const lastVirtualItemIndex =\n    virtualItems.length > 0\n      ? virtualItems[virtualItems.length - 1].index\n      : -1\n\n  React.useEffect(() => {\n    if (!onReachBottom || isFetchingMore || hasMore === false) return\n    if (lastVirtualItemIndex < 0) return\n    if (lastVirtualItemIndex < rows.length - reachBottomThreshold) return\n\n    // Prevent re-firing until data.length changes (i.e. new page loaded).\n    if (lastTriggeredDataLengthRef.current === data.length) return\n    lastTriggeredDataLengthRef.current = data.length\n\n    onReachBottom()\n  }, [\n    lastVirtualItemIndex,\n    rows.length,\n    data.length,\n    onReachBottom,\n    isFetchingMore,\n    hasMore,\n    reachBottomThreshold,\n  ])\n\n  return (\n    <div className={cn(\n      \"w-full\",\n      typeof height === \"string\" && height.trim().endsWith(\"%\") && \"h-full\",\n      className,\n    )}>\n      <div\n        ref={scrollContainerRef}\n        className=\"relative overflow-auto\"\n        style={{\n          height: typeof height === \"number\" ? `${height}px` : height,\n          contain: \"strict\",\n        }}\n        role=\"table\"\n        aria-rowcount={data.length}\n        aria-colcount={table.getVisibleLeafColumns().length}\n      >\n        {/* Sticky header */}\n        <div className=\"sticky top-0 z-10 bg-background\" role=\"rowgroup\">\n          {table.getHeaderGroups().map((headerGroup) => (\n            <div\n              key={headerGroup.id}\n              className=\"flex w-max min-w-full border-b border-border/50\"\n              role=\"row\"\n            >\n              {headerGroup.headers.map((header, colIdx) => {\n                const sortKey = header.column.columnDef.meta?.sortKey\n                const canServerSort = Boolean(sortKey && onColumnSort)\n\n                const resolvedAriaSort = (() => {\n                  if (activeSortColumn !== undefined) {\n                    // Server-driven\n                    if (!sortKey) return undefined\n                    if (activeSortColumn === sortKey) return activeSortDirection === \"asc\" ? \"ascending\" as const : \"descending\" as const\n                    return \"none\" as const\n                  }\n                  // Fallback to TanStack state\n                  const sorted = header.column.getIsSorted()\n                  if (sorted === \"asc\") return \"ascending\" as const\n                  if (sorted === \"desc\") return \"descending\" as const\n                  if (header.column.getCanSort()) return \"none\" as const\n                  return undefined\n                })()\n\n                const sortIcon = (() => {\n                  if (!canServerSort) return null\n                  if (activeSortColumn === sortKey && activeSortDirection === \"asc\") return <ArrowUp className=\"w-3 h-3\" />\n                  if (activeSortColumn === sortKey && activeSortDirection === \"desc\") return <ArrowDown className=\"w-3 h-3\" />\n                  return <ArrowUpDown className=\"w-3 h-3 opacity-40\" />\n                })()\n\n                const handleHeaderClick = canServerSort ? () => {\n                  const newDir = activeSortColumn === sortKey\n                    ? (activeSortDirection === \"asc\" ? \"desc\" : \"asc\")\n                    : \"asc\"\n                  onColumnSort!(sortKey!, newDir)\n                } : undefined\n\n                return (\n                  <div\n                    key={header.id}\n                    className={cn(\n                      \"group/header h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative\",\n                      header.column.getCanResize() && \"pr-4\",\n                    )}\n                    style={{\n                      width: header.getSize(),\n                      minWidth: header.getSize(),\n                    }}\n                    role=\"columnheader\"\n                    aria-colindex={colIdx + 1}\n                    aria-sort={resolvedAriaSort}\n                  >\n                    {header.isPlaceholder ? null : (\n                      <>\n                        {canServerSort ? (\n                          <button\n                            type=\"button\"\n                            className=\"inline-flex items-center gap-1 hover:text-foreground transition-colors\"\n                            onClick={handleHeaderClick}\n                          >\n                            {flexRender(header.column.columnDef.header, header.getContext())}\n                            {sortIcon}\n                          </button>\n                        ) : header.column.getCanSort() ? (\n                          <button\n                            type=\"button\"\n                            className=\"inline-flex items-center gap-1 hover:text-foreground transition-colors\"\n                            onClick={header.column.getToggleSortingHandler()}\n                          >\n                            {flexRender(\n                              header.column.columnDef.header,\n                              header.getContext(),\n                            )}\n                            {header.column.getIsSorted() === \"asc\" ? (\n                              <ArrowUp className=\"w-3 h-3\" />\n                            ) : header.column.getIsSorted() === \"desc\" ? (\n                              <ArrowDown className=\"w-3 h-3\" />\n                            ) : (\n                              <ArrowUpDown className=\"w-3 h-3 opacity-40\" />\n                            )}\n                          </button>\n                        ) : (\n                          flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )\n                        )}\n                        {(canServerSort || header.column.getCanSort() || header.column.getCanHide()) && (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <button\n                                type=\"button\"\n                                className=\"ml-1 inline-flex items-center hover:text-foreground transition-all opacity-0 group-hover/header:opacity-100\"\n                                aria-label=\"Column actions\"\n                              >\n                                <ChevronDown className=\"w-3 h-3\" />\n                              </button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"start\" className=\"w-48\">\n                              <DropdownMenuItem\n                                disabled={!canServerSort}\n                                onClick={() => canServerSort && onColumnSort!(sortKey!, \"asc\")}\n                              >\n                                <ArrowUp className=\"w-3.5 h-3.5 mr-2\" />\n                                Sort ascending\n                                {activeSortColumn === sortKey && activeSortDirection === \"asc\" && <Check className=\"w-3.5 h-3.5 ml-auto\" />}\n                              </DropdownMenuItem>\n                              <DropdownMenuItem\n                                disabled={!canServerSort}\n                                onClick={() => canServerSort && onColumnSort!(sortKey!, \"desc\")}\n                              >\n                                <ArrowDown className=\"w-3.5 h-3.5 mr-2\" />\n                                Sort descending\n                                {activeSortColumn === sortKey && activeSortDirection === \"desc\" && <Check className=\"w-3.5 h-3.5 ml-auto\" />}\n                              </DropdownMenuItem>\n                              {header.column.getCanHide() && (\n                                <>\n                                  <DropdownMenuSeparator />\n                                  <DropdownMenuItem\n                                    onClick={() => onColumnHide ? onColumnHide(header.column.id) : header.column.toggleVisibility(false)}\n                                  >\n                                    <EyeOff className=\"w-3.5 h-3.5 mr-2\" />\n                                    Hide column\n                                  </DropdownMenuItem>\n                                </>\n                              )}\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        )}\n                      </>\n                    )}\n                    {header.column.getCanResize() && (\n                      <div\n                        onMouseDown={header.getResizeHandler()}\n                        onTouchStart={header.getResizeHandler()}\n                        className={cn(\n                          \"absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none\",\n                          \"after:absolute after:right-1.5 after:top-0 after:h-full after:w-px\",\n                          \"after:bg-transparent hover:after:bg-primary/30\",\n                          header.column.getIsResizing() && \"after:bg-primary/50\",\n                        )}\n                        role=\"separator\"\n                        aria-orientation=\"vertical\"\n                      />\n                    )}\n                  </div>\n                )\n              })}\n            </div>\n          ))}\n        </div>\n\n        {/* Virtualized body or empty state */}\n        {rows.length > 0 ? (\n          <div\n            role=\"rowgroup\"\n            style={{\n              height: virtualizer.getTotalSize(),\n              width: \"100%\",\n              position: \"relative\",\n            }}\n          >\n            {virtualizer.getVirtualItems().map((virtualRow) => {\n              const row = rows[virtualRow.index]\n              return (\n                <div\n                  key={row.id}\n                  data-index={virtualRow.index}\n                  ref={virtualizer.measureElement}\n                  className={cn(\n                    \"absolute left-0 w-max min-w-full flex group transition-colors\",\n                    onRowClick && \"cursor-pointer\",\n                  )}\n                  style={{\n                    transform: `translateY(${virtualRow.start}px)`,\n                  }}\n                  role=\"row\"\n                  aria-rowindex={virtualRow.index + 2}\n                  onClick={() => onRowClick?.(row.original)}\n                  tabIndex={onRowClick ? 0 : undefined}\n                  onKeyDown={\n                    onRowClick\n                      ? (e: React.KeyboardEvent) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault()\n                            onRowClick(row.original)\n                          }\n                        }\n                      : undefined\n                  }\n                >\n                  {row.getVisibleCells().map((cell, colIdx) => (\n                    <div\n                      key={cell.id}\n                      className=\"px-3 py-3 flex items-center whitespace-nowrap group-hover:bg-muted/50\"\n                      style={{\n                        width: cell.column.getSize(),\n                        minWidth: cell.column.getSize(),\n                      }}\n                      role=\"cell\"\n                      aria-colindex={colIdx + 1}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </div>\n                  ))}\n                </div>\n              )\n            })}\n          </div>\n        ) : isLoading ? (\n          <div className=\"flex flex-col items-center justify-center gap-2 text-muted-foreground py-20\">\n            <Loader2 className=\"h-7 w-7 animate-spin opacity-60\" />\n            <p className=\"text-sm font-medium\">Loading...</p>\n          </div>\n        ) : (\n          <div className=\"flex flex-col items-center justify-center gap-1 text-muted-foreground py-20\">\n            {emptyIcon ?? <SearchX className=\"h-7 w-7 opacity-40\" />}\n            <p className=\"text-sm font-medium\">{emptyMessage}</p>\n            <p className=\"text-xs\">{emptyDescription}</p>\n          </div>\n        )}\n\n        {/* Loading indicator */}\n        {isFetchingMore && (\n          <div className=\"flex items-center justify-center py-4\">\n            <Loader2 className=\"h-5 w-5 animate-spin text-muted-foreground\" />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.14.10",
+  "version": "0.15.1",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",

package/src/components/__tests__/virtualized-data-table.test.tsx

@@ -0,0 +1,557 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { VirtualizedDataTable } from "../virtualized-data-table";
+import type { ColumnDef } from "@tanstack/react-table";
+
+type TestRow = { id: string; name: string; value: number };
+
+const testData: TestRow[] = [
+  { id: "1", name: "Alpha", value: 10 },
+  { id: "2", name: "Beta", value: 20 },
+];
+
+// ─── Group 1: Dropdown menu trigger renders with sortKey + onColumnSort ──────
+
+describe("VirtualizedDataTable — column header dropdown menu", () => {
+  it("renders dropdown menu trigger when column has meta.sortKey and onColumnSort is provided", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+      },
+      {
+        accessorKey: "value",
+        header: "Value",
+        size: 150,
+        meta: { sortKey: "value" },
+      },
+    ];
+    const onColumnSort = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={onColumnSort}
+        activeSortColumn="name"
+        activeSortDirection="asc"
+      />,
+    );
+
+    // Should have "Column actions" aria-label buttons (one per column)
+    const triggers = container.querySelectorAll(
+      'button[aria-label="Column actions"]',
+    );
+    expect(triggers.length).toBe(2);
+  });
+
+  it("renders header label as a clickable button when sortKey + onColumnSort are provided", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+      },
+    ];
+    const onColumnSort = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={onColumnSort}
+        activeSortColumn={null}
+      />,
+    );
+
+    const headerButtons = container.querySelectorAll(
+      '[role="columnheader"] button',
+    );
+    // Should have at least two buttons: one for label (sort click), one for dropdown trigger
+    expect(headerButtons.length).toBeGreaterThanOrEqual(2);
+
+    // Click the first button (header label) — should call onColumnSort
+    fireEvent.click(headerButtons[0]);
+    expect(onColumnSort).toHaveBeenCalledWith("name", "asc");
+  });
+});
+
+// ─── Group 2: Without onColumnSort — header label is NOT a sort button ───────
+
+describe("VirtualizedDataTable — no onColumnSort", () => {
+  it("header label is NOT wrapped in a button when onColumnSort is not provided (and enableSorting is not set)", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+        enableSorting: false,
+        enableHiding: false,
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        // No onColumnSort
+      />,
+    );
+
+    const header = container.querySelector('[role="columnheader"]')!;
+    // No buttons at all — no sort, no dropdown (non-sortable + non-hideable = no menu)
+    const buttons = header.querySelectorAll("button");
+    expect(buttons.length).toBe(0);
+  });
+});
+
+// ─── Group 3: enableHiding: false → no "Hide column" menu item ──────────────
+
+describe("VirtualizedDataTable — column hiding", () => {
+  it("column with enableHiding: false does not render 'Hide column' in the dropdown", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+        enableHiding: false,
+      },
+    ];
+    const onColumnSort = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={onColumnSort}
+        activeSortColumn="name"
+        activeSortDirection="asc"
+      />,
+    );
+
+    // The "Hide column" text should NOT appear in the DOM for non-hideable columns
+    expect(container.textContent).not.toContain("Hide column");
+  });
+
+  it("column with enableHiding: true (default) includes 'Hide column' in the dropdown content (present in DOM)", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+        // enableHiding defaults to true — getCanHide() returns true
+      },
+      {
+        accessorKey: "value",
+        header: "Value",
+        size: 150,
+        meta: { sortKey: "value" },
+        enableHiding: false,
+      },
+    ];
+    const onColumnSort = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={onColumnSort}
+        activeSortColumn="name"
+        activeSortDirection="asc"
+      />,
+    );
+
+    // For hideable columns, the dropdown menu content includes a "Hide column" item.
+    // For non-hideable columns, it does not.
+    // We can verify by checking the number of data-slot="dropdown-menu-separator"
+    // elements in each header. The separator only appears when getCanHide() is true.
+    const headers = container.querySelectorAll('[role="columnheader"]');
+
+    // First column (enableHiding default=true): should have the separator+hide item
+    // The DropdownMenuSeparator renders with data-slot="dropdown-menu-separator"
+    // But since Radix uses portals, the content may not be inside the container.
+    // Instead, let's just verify the dropdown trigger exists for both columns
+    // and that the first enableHiding:false test already covered the negative case.
+    const triggers = container.querySelectorAll(
+      'button[aria-label="Column actions"]',
+    );
+    // Both columns should have dropdown triggers
+    expect(triggers.length).toBe(2);
+    // The key verification is the "enableHiding: false" test above which confirms
+    // no "Hide column" appears for non-hideable columns.
+    // This test confirms the dropdown infrastructure is present for hideable columns too.
+    expect(headers.length).toBe(2);
+  });
+});
+
+// ─── Group 4: aria-sort reflects activeSortColumn / activeSortDirection ──────
+
+describe("VirtualizedDataTable — aria-sort", () => {
+  it("sets aria-sort='ascending' on the active sort column with asc direction", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+      },
+      {
+        accessorKey: "value",
+        header: "Value",
+        size: 150,
+        meta: { sortKey: "value" },
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        activeSortColumn="name"
+        activeSortDirection="asc"
+      />,
+    );
+
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    expect(headers[0].getAttribute("aria-sort")).toBe("ascending");
+    expect(headers[1].getAttribute("aria-sort")).toBe("none");
+  });
+
+  it("sets aria-sort='descending' on the active sort column with desc direction", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+      },
+      {
+        accessorKey: "value",
+        header: "Value",
+        size: 150,
+        meta: { sortKey: "value" },
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        activeSortColumn="value"
+        activeSortDirection="desc"
+      />,
+    );
+
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    expect(headers[0].getAttribute("aria-sort")).toBe("none");
+    expect(headers[1].getAttribute("aria-sort")).toBe("descending");
+  });
+
+  it("sets aria-sort=undefined for columns without sortKey when activeSortColumn is provided", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        // no meta.sortKey
+      },
+      {
+        accessorKey: "value",
+        header: "Value",
+        size: 150,
+        meta: { sortKey: "value" },
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        activeSortColumn="value"
+        activeSortDirection="asc"
+      />,
+    );
+
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    // Column without sortKey should not have aria-sort
+    expect(headers[0].hasAttribute("aria-sort")).toBe(false);
+    expect(headers[1].getAttribute("aria-sort")).toBe("ascending");
+  });
+});
+
+// ─── Group 5: Sort toggle logic ─────────────────────────────────────────────
+
+describe("VirtualizedDataTable — sort toggle", () => {
+  it("toggles sort direction when clicking the active sort column header", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+      },
+    ];
+    const onColumnSort = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={onColumnSort}
+        activeSortColumn="name"
+        activeSortDirection="asc"
+      />,
+    );
+
+    // Click the header label button (first button in the header, not the dropdown trigger)
+    const headerButtons = container.querySelectorAll(
+      '[role="columnheader"] button',
+    );
+    const sortButton = Array.from(headerButtons).find(
+      (b) => b.getAttribute("aria-label") !== "Column actions",
+    )!;
+    fireEvent.click(sortButton);
+    // Was asc, should toggle to desc
+    expect(onColumnSort).toHaveBeenCalledWith("name", "desc");
+  });
+});
+
+// ─── Group 6: onColumnHide callback ─────────────────────────────────────────
+
+describe("VirtualizedDataTable — onColumnHide callback", () => {
+  it("renders dropdown trigger for hideable columns when onColumnHide is provided", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+        // enableHiding defaults to true — getCanHide() returns true
+      },
+    ];
+    const onColumnHide = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        onColumnHide={onColumnHide}
+        activeSortColumn={null}
+      />,
+    );
+
+    // Dropdown trigger should exist because column is sortable + hideable
+    const triggers = container.querySelectorAll(
+      'button[aria-label="Column actions"]',
+    );
+    expect(triggers.length).toBe(1);
+  });
+
+  it("does not render 'Hide column' text when enableHiding is false even with onColumnHide", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+        enableHiding: false,
+      },
+    ];
+    const onColumnHide = vi.fn();
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        onColumnHide={onColumnHide}
+        activeSortColumn={null}
+      />,
+    );
+
+    // "Hide column" text should NOT appear — column has enableHiding: false
+    expect(container.textContent).not.toContain("Hide column");
+  });
+});
+
+// ─── Group 6b: Consistent header styling (WIT-573) ──────────────────────────
+
+describe("VirtualizedDataTable — consistent header styling", () => {
+  it("active sort column header button does NOT get text-foreground class", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+      },
+      {
+        accessorKey: "value",
+        header: "Value",
+        size: 150,
+        meta: { sortKey: "value" },
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        activeSortColumn="name"
+        activeSortDirection="asc"
+      />,
+    );
+
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    // Get the sort buttons (not the dropdown triggers)
+    const sortButtons = Array.from(
+      container.querySelectorAll('[role="columnheader"] button'),
+    ).filter((b) => b.getAttribute("aria-label") !== "Column actions");
+
+    // Both sort buttons should have the same classes — no standalone text-foreground on active column
+    expect(sortButtons.length).toBe(2);
+    expect(sortButtons[0].className).toBe(sortButtons[1].className);
+    // hover:text-foreground is fine (hover state), but there should be no standalone text-foreground class
+    const classes = sortButtons[0].className.split(/\s+/);
+    expect(classes).not.toContain("text-foreground");
+  });
+
+  it("dropdown chevron has consistent opacity classes across all columns", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+        enableHiding: false,
+      },
+      {
+        accessorKey: "value",
+        header: "Value",
+        size: 150,
+        meta: { sortKey: "value" },
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        activeSortColumn="name"
+        activeSortDirection="asc"
+      />,
+    );
+
+    const triggers = container.querySelectorAll(
+      'button[aria-label="Column actions"]',
+    );
+    expect(triggers.length).toBe(2);
+    // Both dropdown triggers should have the same opacity classes
+    expect(triggers[0].className).toBe(triggers[1].className);
+    // Both should use hover-reveal pattern, not always-visible
+    expect(triggers[0].className).toContain("opacity-0");
+    expect(triggers[0].className).toContain("group-hover/header:opacity-100");
+  });
+
+  it("header cell container uses same classes for all columns regardless of sort state", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+      },
+      {
+        accessorKey: "value",
+        header: "Value",
+        size: 150,
+        meta: { sortKey: "value" },
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        activeSortColumn="name"
+        activeSortDirection="asc"
+      />,
+    );
+
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    expect(headers.length).toBe(2);
+    // Both header cells should have text-muted-foreground (not text-foreground)
+    expect(headers[0].className).toContain("text-muted-foreground");
+    expect(headers[1].className).toContain("text-muted-foreground");
+  });
+});
+
+// ─── Group 7: Empty dropdown gating ─────────────────────────────────────────
+
+describe("VirtualizedDataTable — dropdown gating", () => {
+  it("does NOT render dropdown trigger on columns with no sortKey, no client sort, and enableHiding: false", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        // No meta.sortKey
+        enableSorting: false,
+        enableHiding: false,
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+      />,
+    );
+
+    // No dropdown trigger button should exist — column has no actionable items
+    const triggers = container.querySelectorAll(
+      'button[aria-label="Column actions"]',
+    );
+    expect(triggers.length).toBe(0);
+  });
+
+  it("renders dropdown trigger on columns that are only hideable (no sort)", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        // No meta.sortKey
+        enableSorting: false,
+        // enableHiding defaults to true
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+      />,
+    );
+
+    // Dropdown trigger should render because column can be hidden
+    const triggers = container.querySelectorAll(
+      'button[aria-label="Column actions"]',
+    );
+    expect(triggers.length).toBe(1);
+  });
+});

package/src/components/virtualized-data-table.tsx

@@ -13,10 +13,26 @@ import {
   type ColumnSizingState,
   type OnChangeFn,
 } from "@tanstack/react-table"
-import { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from "lucide-react"
+import type { RowData } from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, EyeOff, Check, SearchX, Loader2 } from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "./dropdown-menu"
 
 import { cn } from "../lib/utils"
 
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    /** Server-side sort key for this column. Enables sort in the header menu when onColumnSort is also provided. */
+    sortKey?: string
+  }
+}
+
 export interface VirtualizedDataTableProps<TData> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   columns: ColumnDef<TData, any>[]
@@ -57,6 +73,16 @@ export interface VirtualizedDataTableProps<TData> {
   emptyMessage?: string
   emptyDescription?: string
 
+  // Column header menu
+  /** Called when user requests sorting from column header. columnId is the column's meta.sortKey. */
+  onColumnSort?: (columnId: string, direction: "asc" | "desc") => void
+  /** Called when user hides a column from the header menu. */
+  onColumnHide?: (columnId: string) => void
+  /** The currently active sort column ID — matches a column's meta.sortKey. Used for visual indicators and aria-sort. */
+  activeSortColumn?: string | null
+  /** The current sort direction. Used for visual indicators and aria-sort. */
+  activeSortDirection?: "asc" | "desc"
+
   // Styling
   className?: string
 }
@@ -83,6 +109,10 @@ export function VirtualizedDataTable<TData>({
   onColumnFiltersChange,
   columnVisibility,
   onColumnVisibilityChange,
+  onColumnSort,
+  onColumnHide,
+  activeSortColumn,
+  activeSortDirection,
   isLoading,
   emptyIcon,
   emptyMessage = "No rows found",
@@ -207,69 +237,150 @@ export function VirtualizedDataTable<TData>({
               className="flex w-max min-w-full border-b border-border/50"
               role="row"
             >
-              {headerGroup.headers.map((header, colIdx) => (
-                <div
-                  key={header.id}
-                  className={cn(
-                    "h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative",
-                    header.column.getCanResize() && "pr-4",
-                  )}
-                  style={{
-                    width: header.getSize(),
-                    minWidth: header.getSize(),
-                  }}
-                  role="columnheader"
-                  aria-colindex={colIdx + 1}
-                  aria-sort={
-                    header.column.getIsSorted() === "asc"
-                      ? "ascending"
-                      : header.column.getIsSorted() === "desc"
-                        ? "descending"
-                        : header.column.getCanSort()
-                          ? "none"
-                          : undefined
+              {headerGroup.headers.map((header, colIdx) => {
+                const sortKey = header.column.columnDef.meta?.sortKey
+                const canServerSort = Boolean(sortKey && onColumnSort)
+
+                const resolvedAriaSort = (() => {
+                  if (activeSortColumn !== undefined) {
+                    // Server-driven
+                    if (!sortKey) return undefined
+                    if (activeSortColumn === sortKey) return activeSortDirection === "asc" ? "ascending" as const : "descending" as const
+                    return "none" as const
                   }
-                >
-                  {header.isPlaceholder ? null : header.column.getCanSort() ? (
-                    <button
-                      type="button"
-                      className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
-                      onClick={header.column.getToggleSortingHandler()}
-                    >
-                      {flexRender(
-                        header.column.columnDef.header,
-                        header.getContext(),
-                      )}
-                      {header.column.getIsSorted() === "asc" ? (
-                        <ArrowUp className="w-3 h-3" />
-                      ) : header.column.getIsSorted() === "desc" ? (
-                        <ArrowDown className="w-3 h-3" />
-                      ) : (
-                        <ArrowUpDown className="w-3 h-3 opacity-40" />
-                      )}
-                    </button>
-                  ) : (
-                    flexRender(
-                      header.column.columnDef.header,
-                      header.getContext(),
-                    )
-                  )}
-                  {header.column.getCanResize() && (
-                    <div
-                      onMouseDown={header.getResizeHandler()}
-                      onTouchStart={header.getResizeHandler()}
-                      className={cn(
-                        "absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none",
-                        "after:absolute after:right-1.5 after:top-0 after:h-full after:w-px",
-                        "after:bg-transparent hover:after:bg-primary/30",
-                        header.column.getIsResizing() && "after:bg-primary/50",
-                      )}
-                      role="separator"
-                      aria-orientation="vertical"
-                    />
-                  )}
-                </div>
-              ))}
+                  // Fallback to TanStack state
+                  const sorted = header.column.getIsSorted()
+                  if (sorted === "asc") return "ascending" as const
+                  if (sorted === "desc") return "descending" as const
+                  if (header.column.getCanSort()) return "none" as const
+                  return undefined
+                })()
+
+                const sortIcon = (() => {
+                  if (!canServerSort) return null
+                  if (activeSortColumn === sortKey && activeSortDirection === "asc") return <ArrowUp className="w-3 h-3" />
+                  if (activeSortColumn === sortKey && activeSortDirection === "desc") return <ArrowDown className="w-3 h-3" />
+                  return <ArrowUpDown className="w-3 h-3 opacity-40" />
+                })()
+
+                const handleHeaderClick = canServerSort ? () => {
+                  const newDir = activeSortColumn === sortKey
+                    ? (activeSortDirection === "asc" ? "desc" : "asc")
+                    : "asc"
+                  onColumnSort!(sortKey!, newDir)
+                } : undefined
+
+                return (
+                  <div
+                    key={header.id}
+                    className={cn(
+                      "group/header h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap relative",
+                      header.column.getCanResize() && "pr-4",
+                    )}
+                    style={{
+                      width: header.getSize(),
+                      minWidth: header.getSize(),
+                    }}
+                    role="columnheader"
+                    aria-colindex={colIdx + 1}
+                    aria-sort={resolvedAriaSort}
+                  >
+                    {header.isPlaceholder ? null : (
+                      <>
+                        {canServerSort ? (
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
+                            onClick={handleHeaderClick}
+                          >
+                            {flexRender(header.column.columnDef.header, header.getContext())}
+                            {sortIcon}
+                          </button>
+                        ) : header.column.getCanSort() ? (
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
+                            onClick={header.column.getToggleSortingHandler()}
+                          >
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                            {header.column.getIsSorted() === "asc" ? (
+                              <ArrowUp className="w-3 h-3" />
+                            ) : header.column.getIsSorted() === "desc" ? (
+                              <ArrowDown className="w-3 h-3" />
+                            ) : (
+                              <ArrowUpDown className="w-3 h-3 opacity-40" />
+                            )}
+                          </button>
+                        ) : (
+                          flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )
+                        )}
+                        {(canServerSort || header.column.getCanSort() || header.column.getCanHide()) && (
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <button
+                                type="button"
+                                className="ml-1 inline-flex items-center hover:text-foreground transition-all opacity-0 group-hover/header:opacity-100"
+                                aria-label="Column actions"
+                              >
+                                <ChevronDown className="w-3 h-3" />
+                              </button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start" className="w-48">
+                              <DropdownMenuItem
+                                disabled={!canServerSort}
+                                onClick={() => canServerSort && onColumnSort!(sortKey!, "asc")}
+                              >
+                                <ArrowUp className="w-3.5 h-3.5 mr-2" />
+                                Sort ascending
+                                {activeSortColumn === sortKey && activeSortDirection === "asc" && <Check className="w-3.5 h-3.5 ml-auto" />}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                disabled={!canServerSort}
+                                onClick={() => canServerSort && onColumnSort!(sortKey!, "desc")}
+                              >
+                                <ArrowDown className="w-3.5 h-3.5 mr-2" />
+                                Sort descending
+                                {activeSortColumn === sortKey && activeSortDirection === "desc" && <Check className="w-3.5 h-3.5 ml-auto" />}
+                              </DropdownMenuItem>
+                              {header.column.getCanHide() && (
+                                <>
+                                  <DropdownMenuSeparator />
+                                  <DropdownMenuItem
+                                    onClick={() => onColumnHide ? onColumnHide(header.column.id) : header.column.toggleVisibility(false)}
+                                  >
+                                    <EyeOff className="w-3.5 h-3.5 mr-2" />
+                                    Hide column
+                                  </DropdownMenuItem>
+                                </>
+                              )}
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        )}
+                      </>
+                    )}
+                    {header.column.getCanResize() && (
+                      <div
+                        onMouseDown={header.getResizeHandler()}
+                        onTouchStart={header.getResizeHandler()}
+                        className={cn(
+                          "absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none",
+                          "after:absolute after:right-1.5 after:top-0 after:h-full after:w-px",
+                          "after:bg-transparent hover:after:bg-primary/30",
+                          header.column.getIsResizing() && "after:bg-primary/50",
+                        )}
+                        role="separator"
+                        aria-orientation="vertical"
+                      />
+                    )}
+                  </div>
+                )
+              })}
             </div>
           ))}
         </div>