@handled-ai/design-system 0.14.8 → 0.15.1

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

@@ -10,12 +10,29 @@ import {
   type SortingState,
   type ColumnFiltersState,
   type VisibilityState,
+  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>[]
@@ -36,6 +53,12 @@ export interface VirtualizedDataTableProps<TData> {
   hasMore?: boolean
   isFetchingMore?: boolean
 
+  // Column resizing
+  enableColumnResizing?: boolean
+  columnResizeMode?: "onChange" | "onEnd"
+  columnSizing?: ColumnSizingState
+  onColumnSizingChange?: OnChangeFn<ColumnSizingState>
+
   // Server-driven state (controlled) — omit for internal state
   sorting?: SortingState
   onSortingChange?: OnChangeFn<SortingState>
@@ -50,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
 }
@@ -66,12 +99,20 @@ export function VirtualizedDataTable<TData>({
   reachBottomThreshold = 5,
   hasMore = true,
   isFetchingMore,
+  enableColumnResizing = false,
+  columnResizeMode = "onEnd",
+  columnSizing,
+  onColumnSizingChange,
   sorting,
   onSortingChange,
   columnFilters,
   onColumnFiltersChange,
   columnVisibility,
   onColumnVisibilityChange,
+  onColumnSort,
+  onColumnHide,
+  activeSortColumn,
+  activeSortDirection,
   isLoading,
   emptyIcon,
   emptyMessage = "No rows found",
@@ -97,6 +138,13 @@ export function VirtualizedDataTable<TData>({
   const resolvedOnColumnVisibilityChange =
     onColumnVisibilityChange ?? setInternalColumnVisibility
 
+  // Controlled/uncontrolled state for column sizing
+  const [internalColumnSizing, setInternalColumnSizing] =
+    React.useState<ColumnSizingState>({})
+  const resolvedColumnSizing = columnSizing ?? internalColumnSizing
+  const resolvedOnColumnSizingChange =
+    onColumnSizingChange ?? setInternalColumnSizing
+
   // TanStack Table setup
   const table = useReactTable({
     data,
@@ -106,10 +154,14 @@ export function VirtualizedDataTable<TData>({
       sorting: resolvedSorting,
       columnFilters: resolvedColumnFilters,
       columnVisibility: resolvedColumnVisibility,
+      columnSizing: resolvedColumnSizing,
     },
     onSortingChange: resolvedOnSortingChange,
     onColumnFiltersChange: resolvedOnColumnFiltersChange,
     onColumnVisibilityChange: resolvedOnColumnVisibilityChange,
+    onColumnSizingChange: resolvedOnColumnSizingChange,
+    enableColumnResizing,
+    columnResizeMode,
     manualSorting: true,
     manualFiltering: true,
     manualPagination: true,
@@ -185,52 +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="h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap"
-                  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(),
-                    )
-                  )}
-                </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>

package/src/index.ts

@@ -91,6 +91,7 @@ export * from "./components/tooltip"
 export * from "./components/variable-autocomplete"
 export * from "./components/view-mode-toggle"
 export * from "./components/virtualized-data-table"
+export type { ColumnSizingState } from "@tanstack/react-table"
 
 // Charts (re-exported for backward compatibility with root imports)
 export * from "./charts/index"