@kinetixui/ui 0.18.0 → 0.20.0

package/dist/index.d.ts

@@ -1621,6 +1621,18 @@ interface DataGridColumn<TData> {
     editable?: boolean;
     onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
 }
+/** A rectangular range of cells, in display order (after sorting and column reordering). */
+interface DataGridRange {
+    /** first and last selected row index, inclusive, into the *displayed* (sorted) rows */
+    rows: [number, number];
+    /** ids of the selected columns, in display order */
+    columns: string[];
+}
+/** The selection: the range being edited (`rows` / `columns`, the last one) plus every range in `ranges`. */
+interface DataGridSelection extends DataGridRange {
+    /** every selected range, in the order they were added — more than one after Ctrl/Cmd+click or Ctrl+Space */
+    ranges: DataGridRange[];
+}
 interface DataGridProps<TData> {
     columns: DataGridColumn<TData>[];
     data: TData[];
@@ -1630,6 +1642,15 @@ interface DataGridProps<TData> {
     overscan?: number;
     getRowId?: (row: TData, index: number) => React$1.Key;
     className?: string;
+    /**
+     * Opt in to range selection: drag, or Shift+arrows / Shift+click, to extend a rectangle from the
+     * anchor cell; Ctrl/Cmd+click or Ctrl+Space starts an additional, separate range; Ctrl/Cmd+A selects
+     * everything; Ctrl/Cmd+C copies the ranges as tab-separated text (each column's `value()`; empty where
+     * a column has none; ranges separated by a blank line); Esc clears. Sets aria-multiselectable.
+     */
+    selectable?: boolean;
+    /** fires when the selected range changes; `null` when it is cleared */
+    onSelectionChange?: (selection: DataGridSelection | null) => void;
 }
 /**
  * DataGrid — the "product on its own" the `COMPONENT-ADDITIONS.md` Tier 3
@@ -1647,7 +1668,7 @@ interface DataGridProps<TData> {
  * flexibility, at the cost of the native table-navigation semantics
  * `DataTable` still gets for free.
  */
-declare function DataGrid<TData>({ columns, data, height, rowHeight, overscan, getRowId, className, }: DataGridProps<TData>): React$1.JSX.Element;
+declare function DataGrid<TData>({ columns, data, height, rowHeight, overscan, getRowId, className, selectable, onSelectionChange, }: DataGridProps<TData>): React$1.JSX.Element;
 
 interface JsonViewerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
     data: unknown;
@@ -1797,4 +1818,4 @@ declare const MarkdownEditor: React$1.ForwardRefExoticComponent<MarkdownEditorPr
 /** Merges Tailwind class names, resolving conflicts (clsx + tailwind-merge). */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBar, AppBarActions, AppBarBrand, AppBarLink, type AppBarLinkProps, AppBarNav, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Banner, type BannerProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockFile, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparisonSlider, type ComparisonSliderProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, type DataGridColumn, type DataGridProps, DataTable, DatePicker, type DatePickerProps, DescriptionList, DescriptionListItem, type DescriptionListItemProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffViewer, type DiffViewerProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, EmptyTitle, Fab, type FabProps, Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadProps, Footer, FooterBottom, FooterColumn, type FooterColumnProps, FooterLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, Inform, type InformProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, JsonViewer, type JsonViewerProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, KinetixDirectionProvider, type KinetixDirectionProviderProps, Label, List, ListItem, type ListItemProps, MarkdownEditor, type MarkdownEditorProps, Marquee, type MarqueeProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBubble, type MessageBubbleProps, Metric, type MetricProps, Modal, type ModalProps, type ModalType, MultiSelect, type MultiSelectOption, type MultiSelectProps, NativeSelect, NativeSelectOptGroup, type NativeSelectOptGroupProps, NativeSelectOption, type NativeSelectOptionProps, type NativeSelectProps, NavigationBar, type NavigationBarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, NotificationCenterContent, type NotificationCenterContentProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, NotificationItem, type NotificationItemProps, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, type QuoteProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, TabBar, TabBarItem, type TabBarItemProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, type TourProps, type TourStep, TreeItem, type TreeItemProps, TreeView, type TreeViewProps, TypingIndicator, type UploadFile, VirtualList, type VirtualListProps, badgeVariants, bannerVariants, buttonVariants, cn, emptyMediaVariants, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, nativeSelectVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBar, AppBarActions, AppBarBrand, AppBarLink, type AppBarLinkProps, AppBarNav, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Banner, type BannerProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockFile, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparisonSlider, type ComparisonSliderProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, type DataGridColumn, type DataGridProps, type DataGridRange, type DataGridSelection, DataTable, DatePicker, type DatePickerProps, DescriptionList, DescriptionListItem, type DescriptionListItemProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffViewer, type DiffViewerProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, EmptyTitle, Fab, type FabProps, Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadProps, Footer, FooterBottom, FooterColumn, type FooterColumnProps, FooterLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, Inform, type InformProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, JsonViewer, type JsonViewerProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, KinetixDirectionProvider, type KinetixDirectionProviderProps, Label, List, ListItem, type ListItemProps, MarkdownEditor, type MarkdownEditorProps, Marquee, type MarqueeProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBubble, type MessageBubbleProps, Metric, type MetricProps, Modal, type ModalProps, type ModalType, MultiSelect, type MultiSelectOption, type MultiSelectProps, NativeSelect, NativeSelectOptGroup, type NativeSelectOptGroupProps, NativeSelectOption, type NativeSelectOptionProps, type NativeSelectProps, NavigationBar, type NavigationBarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, NotificationCenterContent, type NotificationCenterContentProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, NotificationItem, type NotificationItemProps, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, type QuoteProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, TabBar, TabBarItem, type TabBarItemProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, type TourProps, type TourStep, TreeItem, type TreeItemProps, TreeView, type TreeViewProps, TypingIndicator, type UploadFile, VirtualList, type VirtualListProps, badgeVariants, bannerVariants, buttonVariants, cn, emptyMediaVariants, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, nativeSelectVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };

package/dist/index.js

@@ -5029,7 +5029,9 @@ function DataGrid({
   rowHeight = DEFAULT_ROW_HEIGHT,
   overscan = 6,
   getRowId,
-  className
+  className,
+  selectable = false,
+  onSelectionChange
 }) {
   const columnById = React83.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
   const [order, setOrder] = React83.useState(() => columns.map((c) => c.id));
@@ -5145,12 +5147,89 @@ function DataGrid({
   const [active, setActive] = React83.useState({ row: -1, columnId: columns[0]?.id ?? "" });
   const pendingFocusRef = React83.useRef(null);
   const [announcement, setAnnouncement] = React83.useState("");
+  const [sel, setSel] = React83.useState(null);
+  const [extra, setExtra] = React83.useState([]);
+  const dragRef = React83.useRef(null);
+  React83.useEffect(() => {
+    const end = () => {
+      dragRef.current = null;
+    };
+    window.addEventListener("mouseup", end);
+    return () => window.removeEventListener("mouseup", end);
+  }, []);
+  const clearSel = () => {
+    setSel(null);
+    setExtra([]);
+  };
+  const onSelectionChangeRef = React83.useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  const lastEmittedRef = React83.useRef("null");
   const rowCount = sortedData.length;
   const colIds = renderedColumns.map((c) => c.id);
   const activeCol = colIds.includes(active.columnId) ? active.columnId : colIds[0] ?? "";
   const activeRow = Math.min(active.row, rowCount - 1);
   const activeRendered = activeRow < 0 || activeRow >= startIndex && activeRow < endIndex;
   const tabStop = { row: activeRendered ? activeRow : -1, columnId: activeCol };
+  const colKey = colIds.join("|");
+  const rects = React83.useMemo(() => {
+    if (!selectable) return [];
+    const out = [];
+    for (const s of sel ? [...extra, sel] : extra) {
+      const a = colIds.indexOf(s.anchor.columnId);
+      const b = colIds.indexOf(s.end.columnId);
+      if (a < 0 || b < 0) continue;
+      out.push({ r0: Math.min(s.anchor.row, s.end.row), r1: Math.max(s.anchor.row, s.end.row), c0: Math.min(a, b), c1: Math.max(a, b) });
+    }
+    return out;
+  }, [selectable, sel, extra, colKey]);
+  const hasSelection = rects.length > 0;
+  const cellCount = rects.reduce((n, r) => n + (r.r1 - r.r0 + 1) * (r.c1 - r.c0 + 1), 0);
+  const isSelectedCell = (row, colIdx) => rects.some((r) => row >= r.r0 && row <= r.r1 && colIdx >= r.c0 && colIdx <= r.c1);
+  React83.useEffect(() => {
+    setSel(null);
+    setExtra([]);
+  }, [sort, rowCount]);
+  React83.useEffect(() => {
+    if (!selectable) return;
+    const ranges = rects.map((r) => ({ rows: [r.r0, r.r1], columns: colIds.slice(r.c0, r.c1 + 1) }));
+    const value = ranges.length ? { ...ranges[ranges.length - 1], ranges } : null;
+    const key = JSON.stringify(value);
+    if (key === lastEmittedRef.current) return;
+    lastEmittedRef.current = key;
+    onSelectionChangeRef.current?.(value);
+    setAnnouncement(value ? `${cellCount} cells selected` : "Selection cleared");
+  }, [selectable, rects]);
+  function extendSelection(fromRow, fromCol, toRow, toCol) {
+    const anchor = sel?.anchor ?? { row: fromRow, columnId: fromCol };
+    const end = { row: Math.max(0, Math.min(toRow, rowCount - 1)), columnId: toCol };
+    setSel({ anchor, end });
+    moveTo(end.row, end.columnId);
+  }
+  function addRange(row, columnId, prev) {
+    const previous = sel ?? (prev ? { anchor: prev, end: prev } : null);
+    if (previous) setExtra((x) => [...x, previous]);
+    setSel({ anchor: { row, columnId }, end: { row, columnId } });
+  }
+  function selectAll() {
+    if (rowCount === 0 || colIds.length === 0) return;
+    setExtra([]);
+    setSel({ anchor: { row: 0, columnId: colIds[0] }, end: { row: rowCount - 1, columnId: colIds[colIds.length - 1] } });
+  }
+  function copySelection() {
+    if (!hasSelection) return;
+    const text = rects.map((r) => {
+      const ids = colIds.slice(r.c0, r.c1 + 1);
+      return sortedData.slice(r.r0, r.r1 + 1).map((row) => ids.map((id) => {
+        const c = columnById.get(id);
+        return c?.value ? String(c.value(row)) : "";
+      }).join("	")).join("\n");
+    }).join("\n\n");
+    try {
+      void navigator.clipboard?.writeText(text);
+      setAnnouncement(`Copied ${cellCount} cells`);
+    } catch {
+    }
+  }
   const pageRows = Math.max(1, Math.floor((viewportHeight - HEADER_HEIGHT) / rowHeight) - 1);
   const labelOf = (c) => typeof c.header === "string" ? c.header : c.id;
   function ensureRowVisible(row) {
@@ -5224,9 +5303,32 @@ function DataGrid({
       else resizeColumn(column, horizontal * 10);
       return;
     }
+    const mod = e.ctrlKey || e.metaKey;
+    if (selectable && row >= 0) {
+      if (mod && e.key.toLowerCase() === "a") {
+        e.preventDefault();
+        return selectAll();
+      }
+      if (mod && e.key.toLowerCase() === "c" && hasSelection) {
+        e.preventDefault();
+        return copySelection();
+      }
+      if (mod && e.key === " ") {
+        e.preventDefault();
+        return addRange(row, column.id, { row, columnId: column.id });
+      }
+      if (e.key === "Escape" && hasSelection) {
+        e.preventDefault();
+        return clearSel();
+      }
+    }
+    const extend = selectable && e.shiftKey && row >= 0;
     const go = (r, i) => {
       e.preventDefault();
-      moveTo(r, colIds[Math.max(0, Math.min(i, colIds.length - 1))]);
+      const target = colIds[Math.max(0, Math.min(i, colIds.length - 1))];
+      if (extend) return extendSelection(row, column.id, r, target);
+      if (hasSelection) clearSel();
+      moveTo(r, target);
     };
     switch (e.key) {
       case "ArrowRight":
@@ -5270,6 +5372,7 @@ function DataGrid({
         role: "grid",
         "aria-rowcount": rowCount + 1,
         "aria-colcount": colIds.length,
+        "aria-multiselectable": selectable || void 0,
         className: cn("relative overflow-auto rounded-md border font-sans text-sm", className),
         style: { height },
         onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
@@ -5346,19 +5449,48 @@ function DataGrid({
                   const width = widths[column.id] ?? column.width ?? DEFAULT_WIDTH;
                   const pinnedStyle = column.pinned === "left" ? { position: "sticky", left: leftOffsets[column.id], zIndex: 1 } : column.pinned === "right" ? { position: "sticky", right: rightOffsets[column.id], zIndex: 1 } : {};
                   const isEditing = editing?.rowIndex === rowIndex && editing.columnId === column.id;
+                  const selected = selectable && isSelectedCell(rowIndex, colIdx);
                   return /* @__PURE__ */ jsx89(
                     "div",
                     {
                       role: "gridcell",
                       "aria-colindex": colIdx + 1,
+                      "aria-selected": selectable ? selected : void 0,
                       "data-cell": `${rowIndex}:${column.id}`,
+                      onMouseDown: (e) => {
+                        if (!selectable || e.button !== 0 || isEditing) return;
+                        const here = { row: rowIndex, columnId: column.id };
+                        if (e.shiftKey) {
+                          e.preventDefault();
+                          extendSelection(activeRow >= 0 ? activeRow : rowIndex, activeCol, rowIndex, column.id);
+                        } else if (e.ctrlKey || e.metaKey) {
+                          addRange(rowIndex, column.id, activeRow >= 0 ? { row: activeRow, columnId: activeCol } : void 0);
+                          dragRef.current = here;
+                        } else {
+                          if (hasSelection) clearSel();
+                          dragRef.current = here;
+                        }
+                      },
+                      onMouseEnter: (e) => {
+                        const start = dragRef.current;
+                        if (!selectable || !start) return;
+                        if (e.buttons !== 1) {
+                          dragRef.current = null;
+                          return;
+                        }
+                        if (start.row === rowIndex && start.columnId === column.id) return;
+                        setSel({ anchor: start, end: { row: rowIndex, columnId: column.id } });
+                        moveTo(rowIndex, column.id);
+                      },
                       onDoubleClick: () => column.editable && setEditing({ rowIndex, columnId: column.id }),
                       tabIndex: tabStop.row === rowIndex && tabStop.columnId === column.id ? 0 : -1,
                       onFocus: () => setActive({ row: rowIndex, columnId: column.id }),
                       onKeyDown: (e) => onNavKeyDown(e, rowIndex, column),
                       className: cn(
                         "flex shrink-0 items-center px-2 outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-                        column.pinned && "bg-background"
+                        column.pinned && "bg-background",
+                        selectable && "select-none",
+                        selected && "bg-accent"
                       ),
                       style: { width, ...pinnedStyle },
                       children: isEditing ? /* @__PURE__ */ jsx89(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -44,7 +44,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.9.1",
-    "@kinetixui/tokens": "0.18.0",
+    "@kinetixui/tokens": "0.20.0",
     "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-aspect-ratio": "^1.1.15",

package/src/components/data-grid.tsx

@@ -24,6 +24,20 @@ export interface DataGridColumn<TData> {
   onCellEdit?: (row: TData, rowIndex: number, value: string) => void;
 }
 
+/** A rectangular range of cells, in display order (after sorting and column reordering). */
+export interface DataGridRange {
+  /** first and last selected row index, inclusive, into the *displayed* (sorted) rows */
+  rows: [number, number];
+  /** ids of the selected columns, in display order */
+  columns: string[];
+}
+
+/** The selection: the range being edited (`rows` / `columns`, the last one) plus every range in `ranges`. */
+export interface DataGridSelection extends DataGridRange {
+  /** every selected range, in the order they were added — more than one after Ctrl/Cmd+click or Ctrl+Space */
+  ranges: DataGridRange[];
+}
+
 export interface DataGridProps<TData> {
   columns: DataGridColumn<TData>[];
   data: TData[];
@@ -33,6 +47,15 @@ export interface DataGridProps<TData> {
   overscan?: number;
   getRowId?: (row: TData, index: number) => React.Key;
   className?: string;
+  /**
+   * Opt in to range selection: drag, or Shift+arrows / Shift+click, to extend a rectangle from the
+   * anchor cell; Ctrl/Cmd+click or Ctrl+Space starts an additional, separate range; Ctrl/Cmd+A selects
+   * everything; Ctrl/Cmd+C copies the ranges as tab-separated text (each column's `value()`; empty where
+   * a column has none; ranges separated by a blank line); Esc clears. Sets aria-multiselectable.
+   */
+  selectable?: boolean;
+  /** fires when the selected range changes; `null` when it is cleared */
+  onSelectionChange?: (selection: DataGridSelection | null) => void;
 }
 
 type SortState = { columnId: string; direction: "asc" | "desc" } | null;
@@ -61,6 +84,8 @@ function DataGrid<TData>({
   overscan = 6,
   getRowId,
   className,
+  selectable = false,
+  onSelectionChange,
 }: DataGridProps<TData>) {
   const columnById = React.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
   const [order, setOrder] = React.useState(() => columns.map((c) => c.id));
@@ -203,6 +228,28 @@ function DataGrid<TData>({
   const pendingFocusRef = React.useRef<Pos | null>(null);
   const [announcement, setAnnouncement] = React.useState("");
 
+  // ── range selection (opt-in) ──────────────────────────────────────────────────────────────
+  type Anchor = { row: number; columnId: string };
+  type Sel = { anchor: Anchor; end: Anchor };
+  const [sel, setSel] = React.useState<Sel | null>(null);
+  /** ranges committed before the current one (Ctrl/Cmd+click, Ctrl+Space) */
+  const [extra, setExtra] = React.useState<Sel[]>([]);
+  const dragRef = React.useRef<Anchor | null>(null);
+  React.useEffect(() => {
+    const end = () => {
+      dragRef.current = null;
+    };
+    window.addEventListener("mouseup", end);
+    return () => window.removeEventListener("mouseup", end);
+  }, []);
+  const clearSel = () => {
+    setSel(null);
+    setExtra([]);
+  };
+  const onSelectionChangeRef = React.useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  const lastEmittedRef = React.useRef("null");
+
   const rowCount = sortedData.length;
   const colIds = renderedColumns.map((c) => c.id);
   const activeCol = colIds.includes(active.columnId) ? active.columnId : (colIds[0] ?? "");
@@ -211,6 +258,80 @@ function DataGrid<TData>({
   // the grid stays reachable by Tab
   const activeRendered = activeRow < 0 || (activeRow >= startIndex && activeRow < endIndex);
   const tabStop: Pos = { row: activeRendered ? activeRow : -1, columnId: activeCol };
+  const colKey = colIds.join("|");
+  const rects = React.useMemo(() => {
+    if (!selectable) return [];
+    const out: { r0: number; r1: number; c0: number; c1: number }[] = [];
+    for (const s of sel ? [...extra, sel] : extra) {
+      const a = colIds.indexOf(s.anchor.columnId);
+      const b = colIds.indexOf(s.end.columnId);
+      if (a < 0 || b < 0) continue;
+      out.push({ r0: Math.min(s.anchor.row, s.end.row), r1: Math.max(s.anchor.row, s.end.row), c0: Math.min(a, b), c1: Math.max(a, b) });
+    }
+    return out;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectable, sel, extra, colKey]);
+  const hasSelection = rects.length > 0;
+  const cellCount = rects.reduce((n, r) => n + (r.r1 - r.r0 + 1) * (r.c1 - r.c0 + 1), 0);
+  const isSelectedCell = (row: number, colIdx: number) => rects.some((r) => row >= r.r0 && row <= r.r1 && colIdx >= r.c0 && colIdx <= r.c1);
+
+  // Selection refers to displayed rows, so a re-sort or a different row count invalidates it.
+  React.useEffect(() => {
+    setSel(null);
+    setExtra([]);
+  }, [sort, rowCount]);
+
+  React.useEffect(() => {
+    if (!selectable) return;
+    const ranges: DataGridRange[] = rects.map((r) => ({ rows: [r.r0, r.r1] as [number, number], columns: colIds.slice(r.c0, r.c1 + 1) }));
+    const value: DataGridSelection | null = ranges.length ? { ...ranges[ranges.length - 1]!, ranges } : null;
+    const key = JSON.stringify(value);
+    if (key === lastEmittedRef.current) return;
+    lastEmittedRef.current = key;
+    onSelectionChangeRef.current?.(value);
+    setAnnouncement(value ? `${cellCount} cells selected` : "Selection cleared");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectable, rects]);
+
+  function extendSelection(fromRow: number, fromCol: string, toRow: number, toCol: string) {
+    const anchor = sel?.anchor ?? { row: fromRow, columnId: fromCol };
+    const end = { row: Math.max(0, Math.min(toRow, rowCount - 1)), columnId: toCol };
+    setSel({ anchor, end });
+    moveTo(end.row, end.columnId);
+  }
+
+  /** Start a new range at a cell, keeping the current one (the active cell counts when nothing is selected yet). */
+  function addRange(row: number, columnId: string, prev?: Anchor) {
+    const previous = sel ?? (prev ? { anchor: prev, end: prev } : null);
+    if (previous) setExtra((x) => [...x, previous]);
+    setSel({ anchor: { row, columnId }, end: { row, columnId } });
+  }
+
+  function selectAll() {
+    if (rowCount === 0 || colIds.length === 0) return;
+    setExtra([]);
+    setSel({ anchor: { row: 0, columnId: colIds[0]! }, end: { row: rowCount - 1, columnId: colIds[colIds.length - 1]! } });
+  }
+
+  function copySelection() {
+    if (!hasSelection) return;
+    const text = rects
+      .map((r) => {
+        const ids = colIds.slice(r.c0, r.c1 + 1);
+        return sortedData
+          .slice(r.r0, r.r1 + 1)
+          .map((row) => ids.map((id) => { const c = columnById.get(id); return c?.value ? String(c.value(row)) : ""; }).join("\t"))
+          .join("\n");
+      })
+      .join("\n\n");
+    try {
+      void navigator.clipboard?.writeText(text);
+      setAnnouncement(`Copied ${cellCount} cells`);
+    } catch {
+      /* clipboard unavailable (insecure context / permission) — nothing to announce */
+    }
+  }
+
   const pageRows = Math.max(1, Math.floor((viewportHeight - HEADER_HEIGHT) / rowHeight) - 1);
   const labelOf = (c: DataGridColumn<TData>) => (typeof c.header === "string" ? c.header : c.id);
 
@@ -295,9 +416,33 @@ function DataGrid<TData>({
       return;
     }
 
+    const mod = e.ctrlKey || e.metaKey;
+    if (selectable && row >= 0) {
+      if (mod && e.key.toLowerCase() === "a") {
+        e.preventDefault();
+        return selectAll();
+      }
+      if (mod && e.key.toLowerCase() === "c" && hasSelection) {
+        e.preventDefault();
+        return copySelection();
+      }
+      if (mod && e.key === " ") {
+        // keyboard equivalent of Ctrl/Cmd+click: keep what is selected and start another range here
+        e.preventDefault();
+        return addRange(row, column.id, { row, columnId: column.id });
+      }
+      if (e.key === "Escape" && hasSelection) {
+        e.preventDefault();
+        return clearSel();
+      }
+    }
+    const extend = selectable && e.shiftKey && row >= 0;
     const go = (r: number, i: number) => {
       e.preventDefault();
-      moveTo(r, colIds[Math.max(0, Math.min(i, colIds.length - 1))]!);
+      const target = colIds[Math.max(0, Math.min(i, colIds.length - 1))]!;
+      if (extend) return extendSelection(row, column.id, r, target);
+      if (hasSelection) clearSel(); // a plain move collapses the selection
+      moveTo(r, target);
     };
     switch (e.key) {
       case "ArrowRight":
@@ -341,6 +486,7 @@ function DataGrid<TData>({
       role="grid"
       aria-rowcount={rowCount + 1}
       aria-colcount={colIds.length}
+      aria-multiselectable={selectable || undefined}
       className={cn("relative overflow-auto rounded-md border font-sans text-sm", className)}
       style={{ height }}
       onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
@@ -434,12 +580,41 @@ function DataGrid<TData>({
                         ? { position: "sticky", right: rightOffsets[column.id], zIndex: 1 }
                         : {};
                   const isEditing = editing?.rowIndex === rowIndex && editing.columnId === column.id;
+                  const selected = selectable && isSelectedCell(rowIndex, colIdx);
                   return (
                     <div
                       key={column.id}
                       role="gridcell"
                       aria-colindex={colIdx + 1}
+                      aria-selected={selectable ? selected : undefined}
                       data-cell={`${rowIndex}:${column.id}`}
+                      onMouseDown={(e) => {
+                        if (!selectable || e.button !== 0 || isEditing) return;
+                        const here = { row: rowIndex, columnId: column.id };
+                        if (e.shiftKey) {
+                          // extend from the previously active cell (focus has not moved yet on mousedown) — even when it has
+                          // since scrolled out of the rendered window
+                          e.preventDefault();
+                          extendSelection(activeRow >= 0 ? activeRow : rowIndex, activeCol, rowIndex, column.id);
+                        } else if (e.ctrlKey || e.metaKey) {
+                          addRange(rowIndex, column.id, activeRow >= 0 ? { row: activeRow, columnId: activeCol } : undefined);
+                          dragRef.current = here; // Ctrl+drag sizes the new range
+                        } else {
+                          if (hasSelection) clearSel();
+                          dragRef.current = here; // a plain click selects nothing until the pointer reaches another cell
+                        }
+                      }}
+                      onMouseEnter={(e) => {
+                        const start = dragRef.current;
+                        if (!selectable || !start) return;
+                        if (e.buttons !== 1) {
+                          dragRef.current = null; // the button was released outside the grid
+                          return;
+                        }
+                        if (start.row === rowIndex && start.columnId === column.id) return;
+                        setSel({ anchor: start, end: { row: rowIndex, columnId: column.id } });
+                        moveTo(rowIndex, column.id); // the dragged-to cell becomes the active one, so Shift+arrows continue from it
+                      }}
                       onDoubleClick={() => column.editable && setEditing({ rowIndex, columnId: column.id })}
                       // roving tabindex; Enter or F2 edits an editable cell (the spreadsheet convention)
                       tabIndex={tabStop.row === rowIndex && tabStop.columnId === column.id ? 0 : -1}
@@ -448,6 +623,8 @@ function DataGrid<TData>({
                       className={cn(
                         "flex shrink-0 items-center px-2 outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
                         column.pinned && "bg-background",
+                        selectable && "select-none",
+                        selected && "bg-accent",
                       )}
                       style={{ width, ...pinnedStyle }}
                     >

package/src/components-keyboard.test.tsx

@@ -6,7 +6,7 @@ import { Checkbox } from "./components/checkbox";
 import { ColorPicker } from "./components/color-picker";
 import { FileUpload } from "./components/file-upload";
 import { List, ListItem } from "./components/list";
-import { DataGrid, type DataGridColumn } from "./components/data-grid";
+import { DataGrid, type DataGridColumn, type DataGridSelection } from "./components/data-grid";
 import { KinetixDirectionProvider } from "./components/direction-provider";
 import {
   Dialog,
@@ -434,13 +434,30 @@ describe("DataGrid", () => {
     { id: 2, name: "Abe" },
     { id: 3, name: "Bea" },
   ];
-  function setup(opts: { onCellEdit?: ReturnType<typeof vi.fn>; data?: Row[]; wrapper?: (n: React.ReactNode) => React.ReactNode } = {}) {
+  function setup(
+    opts: {
+      onCellEdit?: ReturnType<typeof vi.fn>;
+      data?: Row[];
+      wrapper?: (n: React.ReactNode) => React.ReactNode;
+      selectable?: boolean;
+      onSelectionChange?: (s: DataGridSelection | null) => void;
+    } = {},
+  ) {
     const onCellEdit = opts.onCellEdit ?? vi.fn();
     const columns: DataGridColumn<Row>[] = [
       { id: "name", header: "Name", cell: (r) => r.name, value: (r) => r.name, sortable: true, editable: true, onCellEdit },
       { id: "id", header: "ID", cell: (r) => r.id, value: (r) => r.id, minWidth: 60, width: 100 },
     ];
-    const grid = <DataGrid columns={columns} data={opts.data ?? rows} height={200} getRowId={(r) => r.id} />;
+    const grid = (
+      <DataGrid
+        columns={columns}
+        data={opts.data ?? rows}
+        height={200}
+        getRowId={(r) => r.id}
+        selectable={opts.selectable}
+        onSelectionChange={opts.onSelectionChange}
+      />
+    );
     render(
       <>
         {opts.wrapper ? opts.wrapper(grid) : grid}
@@ -612,6 +629,239 @@ describe("DataGrid", () => {
     expect(header("Name")).toHaveFocus();
   });
 
+  describe("range selection (opt-in)", () => {
+    const selectedCells = () => screen.getAllByRole("gridcell").filter((c) => c.getAttribute("aria-selected") === "true");
+
+    it("is off by default: no aria-multiselectable, no aria-selected, Shift+Arrow just moves", async () => {
+      const user = userEvent.setup();
+      setup();
+      expect(screen.getByRole("grid")).not.toHaveAttribute("aria-multiselectable");
+      expect(cell(0, 0)).not.toHaveAttribute("aria-selected");
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}");
+      expect(cell(1, 0)).toHaveFocus();
+      expect(cell(0, 0)).not.toHaveAttribute("aria-selected");
+    });
+
+    it("declares the grid multi-selectable and marks every cell selected=false until something is selected", async () => {
+      setup({ selectable: true });
+      expect(screen.getByRole("grid")).toHaveAttribute("aria-multiselectable", "true");
+      expect(cell(0, 0)).toHaveAttribute("aria-selected", "false");
+      expect(selectedCells()).toHaveLength(0);
+    });
+
+    it("Shift+Arrow extends a rectangle from the anchor and reports it", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      setup({ selectable: true, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // Name, row 0 (anchor)
+      await user.keyboard("{Shift>}{ArrowDown}{ArrowRight}{/Shift}");
+
+      expect(selectedCells()).toHaveLength(4); // rows 0-1 x Name, ID
+      expect(cell(1, 1)).toHaveFocus();
+      expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, 1], columns: ["name", "id"], ranges: [{ rows: [0, 1], columns: ["name", "id"] }] });
+      expect(screen.getByRole("status")).toHaveTextContent("4 cells selected");
+    });
+
+    it("shrinks when Shift moves back toward the anchor", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{ArrowDown}{/Shift}");
+      expect(selectedCells()).toHaveLength(3);
+      await user.keyboard("{Shift>}{ArrowUp}{/Shift}");
+      expect(selectedCells()).toHaveLength(2);
+    });
+
+    it("a plain arrow key collapses the selection", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      setup({ selectable: true, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}");
+      expect(selectedCells().length).toBeGreaterThan(0);
+      await user.keyboard("{ArrowDown}");
+      expect(selectedCells()).toHaveLength(0);
+      expect(onSelectionChange).toHaveBeenLastCalledWith(null);
+    });
+
+    it("Ctrl+A selects every cell; Escape clears it", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}");
+      await user.keyboard("{Control>}a{/Control}");
+      expect(selectedCells()).toHaveLength(6); // 3 rows x 2 columns
+      await user.keyboard("{Escape}");
+      expect(selectedCells()).toHaveLength(0);
+    });
+
+    it("Shift+click extends from the previously active cell", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // active: row 0, Name
+      await user.keyboard("{Shift>}");
+      await user.click(cell(2, 1));
+      await user.keyboard("{/Shift}");
+      expect(selectedCells()).toHaveLength(6);
+    });
+
+    it("a plain click clears the selection", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}");
+      expect(selectedCells().length).toBeGreaterThan(0);
+      await user.click(cell(2, 0));
+      expect(selectedCells()).toHaveLength(0);
+    });
+
+    it("Ctrl+C copies the range as tab-separated values", async () => {
+      const user = userEvent.setup();
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{ArrowRight}{/Shift}");
+      await user.keyboard("{Control>}c{/Control}");
+      expect(writeText).toHaveBeenCalledWith("Cara\t1\nAbe\t2");
+      expect(screen.getByRole("status")).toHaveTextContent("Copied 4 cells");
+    });
+
+    it("Shift+click extends from the anchor even after it has scrolled out of the rendered window", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      const many = Array.from({ length: 300 }, (_, i) => ({ id: i + 1, name: `Person ${i + 1}` }));
+      setup({ selectable: true, data: many, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // active + anchor: row 0
+      const grid = screen.getByRole("grid");
+      grid.scrollTop = 4000;
+      grid.dispatchEvent(new Event("scroll"));
+      await waitFor(() => expect(screen.queryByText("Person 1")).not.toBeInTheDocument());
+
+      const target = screen.getAllByRole("gridcell").find((c) => c.getAttribute("data-cell")?.endsWith(":name"))!;
+      const targetRow = Number(target.getAttribute("data-cell")!.split(":")[0]);
+      expect(targetRow).toBeGreaterThan(50);
+
+      await user.keyboard("{Shift>}");
+      await user.click(target);
+      await user.keyboard("{/Shift}");
+      expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, targetRow], columns: ["name"], ranges: [{ rows: [0, targetRow], columns: ["name"] }] });
+    });
+
+    it("Ctrl+click adds a separate range and keeps the first, reporting both", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      setup({ selectable: true, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}"); // Name, rows 0-1
+      await user.keyboard("{Control>}");
+      await user.click(cell(2, 1)); // ID, row 2
+      await user.keyboard("{/Control}");
+      expect(selectedCells()).toHaveLength(3);
+      expect(cell(0, 0)).toHaveAttribute("aria-selected", "true");
+      expect(cell(2, 1)).toHaveAttribute("aria-selected", "true");
+      expect(cell(2, 0)).toHaveAttribute("aria-selected", "false");
+      expect(onSelectionChange).toHaveBeenLastCalledWith({
+        rows: [2, 2],
+        columns: ["id"],
+        ranges: [
+          { rows: [0, 1], columns: ["name"] },
+          { rows: [2, 2], columns: ["id"] },
+        ],
+      });
+      expect(screen.getByRole("status")).toHaveTextContent("3 cells selected");
+    });
+
+    it("Ctrl+click with nothing selected keeps the active cell as the first range", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // active: row 0, Name — not selected yet
+      await user.keyboard("{Control>}");
+      await user.click(cell(2, 1));
+      await user.keyboard("{/Control}");
+      expect(selectedCells()).toHaveLength(2);
+      expect(cell(0, 0)).toHaveAttribute("aria-selected", "true");
+    });
+
+    it("Ctrl+Space is the keyboard way to add a range; Shift+arrows then extends the new one", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      setup({ selectable: true, onSelectionChange });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // row 0, Name
+      await user.keyboard("{Control>} {/Control}"); // range 1 = this cell
+      await user.keyboard("{ArrowDown}{ArrowDown}"); // plain arrows collapse everything...
+      expect(selectedCells()).toHaveLength(0);
+      await user.keyboard("{Control>} {/Control}"); // ...so start over at row 2
+      await user.keyboard("{ArrowUp}");
+      expect(selectedCells()).toHaveLength(0);
+      // build two ranges without collapsing: Shift+arrows extends, Ctrl+Space branches
+      await user.keyboard("{ArrowUp}{Shift>}{ArrowDown}{/Shift}"); // rows 0-1
+      await user.keyboard("{Control>} {/Control}"); // second range starts at the active cell (row 1)
+      await user.keyboard("{Shift>}{ArrowDown}{ArrowRight}{/Shift}"); // rows 1-2, Name+ID
+      expect(onSelectionChange).toHaveBeenLastCalledWith({
+        rows: [1, 2],
+        columns: ["name", "id"],
+        ranges: [
+          { rows: [0, 1], columns: ["name"] },
+          { rows: [1, 2], columns: ["name", "id"] },
+        ],
+      });
+    });
+
+    it("Ctrl+C copies every range, separated by a blank line", async () => {
+      const user = userEvent.setup();
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}"); // Cara
+      await user.keyboard("{Control>}");
+      await user.click(cell(2, 1)); // 3
+      await user.keyboard("{/Control}");
+      await user.keyboard("{Control>}c{/Control}");
+      expect(writeText).toHaveBeenCalledWith("Cara\n\n3");
+      expect(screen.getByRole("status")).toHaveTextContent("Copied 2 cells");
+    });
+
+    it("dragging across cells selects the rectangle; a plain click selects nothing", async () => {
+      const user = userEvent.setup();
+      const onSelectionChange = vi.fn();
+      setup({ selectable: true, onSelectionChange });
+      await user.pointer({ keys: "[MouseLeft>]", target: cell(0, 0) });
+      expect(selectedCells()).toHaveLength(0); // pressed but not moved
+      await user.pointer({ target: cell(1, 1) });
+      await user.pointer({ keys: "[/MouseLeft]" });
+      expect(selectedCells()).toHaveLength(4);
+      expect(onSelectionChange).toHaveBeenLastCalledWith({ rows: [0, 1], columns: ["name", "id"], ranges: [{ rows: [0, 1], columns: ["name", "id"] }] });
+      expect(cell(1, 1)).toHaveFocus(); // Shift+arrows continue from the end
+    });
+
+    it("moving over cells with no button held does not select", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.pointer({ keys: "[MouseLeft>]", target: cell(0, 0) });
+      await user.pointer({ keys: "[/MouseLeft]" });
+      await user.pointer({ target: cell(2, 1) });
+      expect(selectedCells()).toHaveLength(0);
+    });
+
+    it("re-sorting clears the selection (it refers to displayed rows)", async () => {
+      const user = userEvent.setup();
+      setup({ selectable: true });
+      await user.tab();
+      await user.keyboard("{ArrowDown}{Shift>}{ArrowDown}{/Shift}");
+      expect(selectedCells().length).toBeGreaterThan(0);
+      await user.keyboard("{ArrowUp}{ArrowUp}{Enter}"); // Name header, sort
+      expect(selectedCells()).toHaveLength(0);
+    });
+  });
+
   describe("with many rows (virtualized)", () => {
     const many: Row[] = Array.from({ length: 200 }, (_, i) => ({ id: i + 1, name: `Person ${i + 1}` }));
 

package/src/index.ts

@@ -372,7 +372,7 @@ export { MultiSelect, type MultiSelectOption, type MultiSelectProps } from "./co
 export { MessageBubble, TypingIndicator, type MessageBubbleProps } from "./components/message-bubble";
 export { Tour, type TourStep, type TourProps } from "./components/tour";
 export { VirtualList, type VirtualListProps } from "./components/virtual-list";
-export { DataGrid, type DataGridColumn, type DataGridProps } from "./components/data-grid";
+export { DataGrid, type DataGridColumn, type DataGridProps, type DataGridRange, type DataGridSelection } from "./components/data-grid";
 export { JsonViewer, type JsonViewerProps } from "./components/json-viewer";
 export { DiffViewer, type DiffViewerProps } from "./components/diff-viewer";
 export { ColorPicker, type ColorPickerProps } from "./components/color-picker";

package/src/stories/DataGrid.stories.tsx

@@ -19,6 +19,7 @@ const Demo = () => {
     return (
       <DataGrid
         className="w-full"
+        selectable
         height={280}
         data={data}
         getRowId={(row) => row.id}
@@ -45,7 +46,7 @@ const meta = {
   title: "Data Display/DataGrid",
   parameters: {
     layout: "padded",
-    docs: { source: { code: "<DataGrid\\n  height={280}\\n  data={data}\\n  getRowId={(row) => row.id}\\n  columns={[\\n    { id: \"id\", header: \"ID\", cell: (row) => row.id, value: (row) => row.id, sortable: true, pinned: \"left\" },\\n    { id: \"name\", header: \"Name\", cell: (row) => row.name, value: (row) => row.name, editable: true, onCellEdit: updateName },\\n    { id: \"qty\", header: \"Qty\", cell: (row) => row.qty, value: (row) => row.qty, sortable: true },\\n  ]}\\n/>", language: "tsx" } },
+    docs: { source: { code: "<DataGrid\\n  selectable\\n  height={280}\\n  data={data}\\n  getRowId={(row) => row.id}\\n  columns={[\\n    { id: \"id\", header: \"ID\", cell: (row) => row.id, value: (row) => row.id, sortable: true, pinned: \"left\" },\\n    { id: \"name\", header: \"Name\", cell: (row) => row.name, value: (row) => row.name, editable: true, onCellEdit: updateName },\\n    { id: \"qty\", header: \"Qty\", cell: (row) => row.qty, value: (row) => row.qty, sortable: true },\\n  ]}\\n/>", language: "tsx" } },
   },
 } satisfies Meta;