DataTable Virtualized Row DnD
niko-table/data-table-virtualized-row-dndFreeComponent
Virtualized row drag-and-drop body (`DataTableVirtualizedDndBody`). Requires data-table-virtualized + data-table-row-dnd. Does not ship column DnD.
Install it
npx shadcn@latest add https://niko-table.com/r/data-table-virtualized-row-dnd.jsonSource
1"use client"23/**4 * niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance.5 *6 * Before reporting anything: please check the changelog first.7 * - In-repo: ./CHANGELOG.md8 * - Docs site: https://niko-table.com/changelog9 *10 * Found a bug or have a fix? Open an issue or PR on GitHub so other11 * users (and future LLMs reading this code) benefit:12 * https://github.com/Semkoo/niko-table-registry13 */14/**15 * @internal Deep-import only.16 * Intentionally not re-exported from the package barrel — the DnD17 * virtualized variants are an opt-in advanced surface; the deep18 * path keeps consumers explicit about pulling them in and avoids19 * bloating the barrel for the common (non-DnD) case.20 */2122import React from "react"23import { useVirtualizer } from "@tanstack/react-virtual"24import { flexRender, type Row } from "@tanstack/react-table"25import { cn } from "@/lib/utils"26import { useDataTable } from "./data-table-context"27import { TableRow, TableBody, TableCell } from "@/components/ui/table"28import { DataTableRowContextMenu } from "../components/data-table-row-context-menu"29import { useResolvedRowContextMenuRenderer } from "../components/data-table-row-context-menu-slot"30import { createScrollHandler } from "../lib/create-scroll-handler"31import { resolveRowFromClick } from "../lib/row-click"32import { getCommonPinningStyles } from "../lib/styles"33import {34 SortableContext,35 verticalListSortingStrategy,36 type UniqueIdentifier,37} from "../filters/table-row-dnd"38import { useSortable } from "@dnd-kit/sortable"39import { CSS } from "@dnd-kit/utilities"40import type { ScrollEvent } from "./data-table-virtualized-structure"4142// ============================================================================43// Stable measureElement — computed once at module level44// ============================================================================4546// See `data-table-virtualized-structure.tsx` for full rationale: sums base +47// adjacent expanded-row height since ResizeObserver only attaches to the base.48// Prefers `ResizeObserverEntry.borderBoxSize` over `getBoundingClientRect`49// when TanStack Virtual passes the entry — skips a forced layout read on50// the hot path. Disabled in Firefox (stale getBoundingClientRect during51// scroll). Module-scoped for stable reference identity.52const measureElement:53 | ((element: Element, entry?: ResizeObserverEntry | undefined) => number)54 | undefined =55// … truncated
What it pulls in
npm packages
Other registry items
Files it writes
More from niko-table
All 31 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| DataTable Asidedata-table-aside | niko-table | Components | Free | 1 dep | |
| DataTable Clear Filterdata-table-clear-filter | niko-table | Components | Free | 1 dep · 2 files | |
| DataTable Column Auto-fitdata-table-column-auto-fit | niko-table | Components | Free | no deps · 2 files | |
| DataTable Column Date Filterdata-table-column-date-filter | niko-table | Components | Free | 2 deps · 2 files | |
| DataTable Column DnDdata-table-column-dnd | niko-table | Components | Free | 4 deps · 3 files | |
| DataTable Column Faceted Filterdata-table-column-faceted-filter | niko-table | Components | Free | 1 dep · 3 files | |
| DataTable Column Hidedata-table-column-hide | niko-table | Components | Free | 1 dep · 2 files | |
| DataTable Column Pindata-table-column-pin | niko-table | Components | Free | 1 dep · 2 files |
