DataTable Virtualized Column DnD
niko-table/data-table-virtualized-column-dndFreeComponent
Virtualized column drag-and-drop header/body (`DataTableVirtualizedDndHeader`, `DataTableVirtualizedDndColumnBody`). Requires data-table-virtualized + data-table-column-dnd. Does not ship row DnD.
Install it
npx shadcn@latest add https://niko-table.com/r/data-table-virtualized-column-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 {28 TableHeader,29 TableRow,30 TableBody,31 TableCell,32} from "@/components/ui/table"33import { DataTableColumnHeaderRoot } from "../components/data-table-column-header"34import { DataTableColumnResizeHandle } from "../lib/column-resize-handle"35import { DataTableRowContextMenu } from "../components/data-table-row-context-menu"36import { useResolvedRowContextMenuRenderer } from "../components/data-table-row-context-menu-slot"37import { createScrollHandler } from "../lib/create-scroll-handler"38import { resolveRowFromClick } from "../lib/row-click"39import { getCommonPinningStyles } from "../lib/styles"40import {41 TableDraggableHeader,42 TableDragAlongCell,43} from "../filters/table-column-dnd"44import type { ScrollEvent } from "./data-table-virtualized-structure"4546// ============================================================================47// Stable measureElement — computed once at module level48// ============================================================================4950// See `data-table-virtualized-structure.tsx` for full rationale: sums base +51// adjacent expanded-row height since ResizeObserver only attaches to the base.52// Prefers `ResizeObserverEntry.borderBoxSize` over `getBoundingClientRect`53// when TanStack Virtual passes the entry — skips a forced layout read on54// the hot path. Disabled in Firefox (stale getBoundingClientRect during55// scroll). Module-scoped for stable reference identity.56const measureElement:57 | ((element: Element, entry?: ResizeObserverEntry | undefined) => number)58// … 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 |
