DataTable Row 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 { useDataTable } from "../core/data-table-context"
15import {
16  TableRowDndProvider,
17  type TableRowDndProviderProps,
18  TableDraggableRow,
19  type TableDraggableRowProps,
20  TableRowDragHandle,
21  type TableRowDragHandleProps,
22} from "../filters/table-row-dnd"
23 
24// ============================================================================
25// DataTableRowDndProvider
26// ============================================================================
27 
28export type DataTableRowDndProviderProps<TData> = Omit<
29  TableRowDndProviderProps<TData>,
30  "table"
31>
32 
33/**
34 * Context-aware row DnD provider that automatically connects to the DataTable context.
35 *
36 * @example
37 * <DataTableRoot data={data} columns={columns} getRowId={(row) => row.id}>
38 *   <DataTableRowDndProvider data={data} onReorder={setData}>
39 *     <DataTable>
40 *       <DataTableHeader />
41 *       <DataTableDndBody />
42 *     </DataTable>
43 *   </DataTableRowDndProvider>
44 * </DataTableRoot>
45 */
46export function DataTableRowDndProvider<TData>(
47  props: DataTableRowDndProviderProps<TData>,
48) {
49  const { table } = useDataTable<TData>()
50  return <TableRowDndProvider<TData> table={table} {...props} />
51}
52 
53DataTableRowDndProvider.displayName = "DataTableRowDndProvider"
54 
55// ============================================================================
56// DataTableDraggableRow
57// ============================================================================
58 
59export type DataTableDraggableRowProps<TData> = TableDraggableRowProps<TData>
60 
61/**
62 * Context-aware draggable row component.
63 *
64 * @example
65 * <DataTableDraggableRow row={row}>
66 *   {row.getVisibleCells().map(cell => (
67 *     <TableCell key={cell.id}>
68 *       {flexRender(cell.column.columnDef.cell, cell.getContext())}
69 *     </TableCell>
70 *   ))}
71 * </DataTableDraggableRow>
72 */
73export function DataTableDraggableRow<TData>(
74  props: DataTableDraggableRowProps<TData>,
75) {
76  return <TableDraggableRow<TData> {...props} />
77}
78 
79DataTableDraggableRow.displayName = "DataTableDraggableRow"
80 
81// … truncated