feat(data-table): row drag-and-drop reordering for tasks table#1123
Open
yassir-jeraidi wants to merge 2 commits into
Open
feat(data-table): row drag-and-drop reordering for tasks table#1123yassir-jeraidi wants to merge 2 commits into
yassir-jeraidi wants to merge 2 commits into
Conversation
yassir-jeraidi
commented
May 9, 2026
yassir-jeraidi
commented
- Drag handle column on the tasks table so rows can be reordered without conflicting with cell interactions.
- Data table support for sortable rows, including new DataTableDragHandle and DataTableSortableRow building blocks.
- useDataTableRowDnd hook for DnD Kit–based ordering and state (with cleanup/refinement in the second commit).
- User feedback via a success toast when reorder completes successfully.
- Refactor pass on DataTable, the drag handle, sortable row, and the hook: leaner imports, clearer DnD flow, and more consistent drag styling/context.
- Introduced a drag handle column for reordering tasks in the tasks table. - Implemented state management for row order overrides and integrated drag-and-drop logic using DnD Kit. - Enhanced DataTable component to support row reordering and updated relevant hooks for drag-and-drop behavior. - Added success toast notification upon successful row reordering.
- Removed redundant imports and improved code organization in the DataTable and related components. - Streamlined the drag-and-drop logic for better readability and maintainability. - Enhanced the DataTableDragHandle component with consistent formatting and improved context handling. - Updated the SortableRow component to ensure proper context usage and styling during drag operations. - Refactored the useDataTableRowDnd hook for clarity and efficiency in managing drag-and-drop state.
|
@yassir-jeraidi is attempting to deploy a commit to the sadmann7 Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds row drag-and-drop reordering support to the shared DataTable and wires it into the Tasks table via a dedicated drag-handle column and a reorder callback.
Changes:
- Introduces a
useDataTableRowDndhook to encapsulate DnD Kit sensors/modifiers and drag-end → reordered row-id mapping. - Extends
DataTableto optionally wrap rendering inDndContext/SortableContextand render sortable rows when enabled. - Adds Tasks-table UI integration: drag handle column + local client-side reorder state + success toast.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/hooks/use-data-table-row-dnd.ts | New hook providing SSR-safe DnD Kit wiring and reorder mapping. |
| src/components/data-table/data-table.tsx | Adds optional row DnD support and new props for enabling/handling reorder. |
| src/components/data-table/data-table-sortable-row.tsx | New sortable <tr> implementation that provides drag-handle context. |
| src/components/data-table/data-table-drag-handle.tsx | New drag handle component + context bridge between row and handle cell. |
| src/app/components/tasks-table.tsx | Adds reorder state override and toast feedback on reorder. |
| src/app/components/tasks-table-columns.tsx | Adds a leading drag-handle column to the tasks table. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ] = React.use(promises); | ||
|
|
||
| const [orderOverride, setOrderOverride] = React.useState<Task[] | null>(null); | ||
|
|
Comment on lines
+83
to
+94
| setOrderOverride((prev) => { | ||
| const source = prev ?? data; | ||
| const rowMap = new Map(source.map((row) => [String(row.id), row])); | ||
| const next = orderedRowIds | ||
| .map((id) => rowMap.get(id)) | ||
| .filter((row): row is Task => row !== undefined); | ||
| if (next.length !== source.length) return prev; | ||
| return next; | ||
| }); | ||
| toast.success("Rows reordered successfully"); | ||
| }, | ||
| [data], |
Comment on lines
+45
to
+48
|
|
||
| const dnd = useDataTableRowDnd({ | ||
| rows, | ||
| enabled: enableRowDragAndDrop, |
| } from "@dnd-kit/sortable"; | ||
| import { | ||
| flexRender, | ||
| Row, |
| return [ | ||
| { | ||
| id: "drag", | ||
| header: () => null, |
| import { flexRender, type Row } from "@tanstack/react-table"; | ||
| import { useMemo } from "react"; | ||
| import { getColumnPinningStyle } from "@/lib/data-table"; | ||
| import { TableCell, TableRow } from "../ui/table"; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.