BlockDex

Components

Registries

Free blocks

Method

BlockDex

Components

Registries

Free blocks

Method

Open API

BlockDex

Components

Registries

Free blocks

Method

Open API

Components/niko-table/data-table-virtualized-column-dnd

DataTable Virtualized Column DnD

niko-table/data-table-virtualized-column-dnd
FreeComponent

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.json

Source

src/components/niko-table/core/data-table-virtualized-column-dnd-structure.tsxniko-table.com/r/data-table-virtualized-column-dnd.json · first 6 KB
1"use client"
2
3/**
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.md
8 * - Docs site: https://niko-table.com/changelog
9 *
10 * Found a bug or have a fix? Open an issue or PR on GitHub so other
11 * users (and future LLMs reading this code) benefit:
12 * https://github.com/Semkoo/niko-table-registry
13 */
14/**
15 * @internal Deep-import only.
16 * Intentionally not re-exported from the package barrel — the DnD
17 * virtualized variants are an opt-in advanced surface; the deep
18 * path keeps consumers explicit about pulling them in and avoids
19 * bloating the barrel for the common (non-DnD) case.
20 */
21
22import 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"
45
46// ============================================================================
47// Stable measureElement — computed once at module level
48// ============================================================================
49
50// 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 on
54// the hot path. Disabled in Firefox (stale getBoundingClientRect during
55// scroll). Module-scoped for stable reference identity.
56const measureElement:
57 | ((element: Element, entry?: ResizeObserverEntry | undefined) => number)
58// … truncated

What it pulls in

npm packages

  • @tanstack/react-virtual
  • @dnd-kit/sortable
  • @dnd-kit/utilities

Other registry items

  • https://niko-table.com/r/data-table-virtualized.json
  • https://niko-table.com/r/data-table-column-dnd.json

Files it writes

  • src/components/niko-table/core/data-table-virtualized-column-dnd-structure.tsx

Facts

Registry
niko-table
Type
registry:component
Access
Free
Files written
1
Licence
the repository states none
In the index
at or before 2026-08-13
Last confirmed
yesterday

Go to the source

niko-table.com Semkoo/niko-table-registry on GitHub Raw registry item This item as JSON

More from niko-table

All 31 items
Same registry, same kind — the ones you would have found next
ComponentRegistryKindAccessInstallsCommand
DataTable Asidedata-table-asideniko-tableComponentsFree1 dep
DataTable Clear Filterdata-table-clear-filterniko-tableComponentsFree1 dep · 2 files
DataTable Column Auto-fitdata-table-column-auto-fitniko-tableComponentsFreeno deps · 2 files
DataTable Column Date Filterdata-table-column-date-filterniko-tableComponentsFree2 deps · 2 files
DataTable Column DnDdata-table-column-dndniko-tableComponentsFree4 deps · 3 files
DataTable Column Faceted Filterdata-table-column-faceted-filterniko-tableComponentsFree1 dep · 3 files
DataTable Column Hidedata-table-column-hideniko-tableComponentsFree1 dep · 2 files
DataTable Column Pindata-table-column-pinniko-tableComponentsFree1 dep · 2 files

Also from Kynth Studios

Built for the same person as BlockDex

SkillWorks

Claude Code skills and plugins, scored

skillworks.kynth.studio

RuleStack

AGENTS.md gallery and agent-config comparison

rulestack.kynth.studio

ToolDrift

What the AI coding tools changed last night

tooldrift.kynth.studio

The studio list

One product, taken apart, once a month

Kynth Studios pulls one shipped product open every month — what it does, what it cost to build, what the pipeline behind it looks like, and what the numbers did. One email a month, nothing in between.

Double opt-in — we send one confirmation link and nothing else until you click it.

BlockDex

Built by

Kynth Studios

the studio behind SkillWorks, RuleStack and ToolDrift

part of Toolproof, the measurement layer for AI agent tooling

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

© 2026 BlockDex. A Kynth Studios product. Changelog

BlockDex

The studio list

One product, taken apart, once a month

Kynth Studios pulls one shipped product open every month — what it does, what it cost to build, what the pipeline behind it looks like, and what the numbers did. One email a month, nothing in between.

Double opt-in — we send one confirmation link and nothing else until you click it.

BlockDex

Built by

Kynth Studios

the studio behind SkillWorks, RuleStack and ToolDrift

part of Toolproof, the measurement layer for AI agent tooling

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

© 2026 BlockDex. A Kynth Studios product. Changelog

BlockDex

The studio list

One product, taken apart, once a month

Kynth Studios pulls one shipped product open every month — what it does, what it cost to build, what the pipeline behind it looks like, and what the numbers did. One email a month, nothing in between.

Double opt-in — we send one confirmation link and nothing else until you click it.

BlockDex

Built by

Kynth Studios

the studio behind SkillWorks, RuleStack and ToolDrift

part of Toolproof, the measurement layer for AI agent tooling

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

© 2026 BlockDex. A Kynth Studios product. Changelog

BlockDex