DataTable Column DnD

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 */
14import {
15  TableColumnDndProvider,
16  type TableColumnDndProviderProps,
17  TableDraggableHeader,
18  type TableDraggableHeaderProps,
19  TableDragAlongCell,
20  type TableDragAlongCellProps,
21} from "../filters/table-column-dnd"
22 
23// ============================================================================
24// DataTableColumnDndProvider
25// ============================================================================
26 
27export type DataTableColumnDndProviderProps = Omit<
28  TableColumnDndProviderProps,
29  never
30>
31 
32/**
33 * Context-aware column DnD provider that wraps children with drag-and-drop
34 * column reordering capabilities.
35 *
36 * @example
37 * <DataTableRoot
38 *   data={data}
39 *   columns={columns}
40 *   state={{ columnOrder }}
41 *   onColumnOrderChange={setColumnOrder}
42 * >
43 *   <DataTableColumnDndProvider
44 *     columnOrder={columnOrder}
45 *     onColumnOrderChange={setColumnOrder}
46 *   >
47 *     <DataTable>
48 *       <DataTableDndHeader />
49 *       <DataTableDndColumnBody />
50 *     </DataTable>
51 *   </DataTableColumnDndProvider>
52 * </DataTableRoot>
53 */
54export function DataTableColumnDndProvider(
55  props: DataTableColumnDndProviderProps,
56) {
57  return <TableColumnDndProvider {...props} />
58}
59 
60DataTableColumnDndProvider.displayName = "DataTableColumnDndProvider"
61 
62// ============================================================================
63// DataTableDraggableHeader
64// ============================================================================
65 
66export type DataTableDraggableHeaderProps<TData, TValue> =
67  TableDraggableHeaderProps<TData, TValue>
68 
69/**
70 * Context-aware draggable header cell for column DnD.
71 *
72 * @example
73 * <DataTableDraggableHeader header={header}>
74 *   {flexRender(header.column.columnDef.header, header.getContext())}
75 * </DataTableDraggableHeader>
76 */
77export function DataTableDraggableHeader<TData, TValue>(
78  props: DataTableDraggableHeaderProps<TData, TValue>,
79) {
80  return <TableDraggableHeader<TData, TValue> {...props} />
81}
82 
83DataTableDraggableHeader.displayName = "DataTableDraggableHeader"
84 
85// … truncated