Skip to content

Use renderRow to implement row dragging #3965

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
amanmahajan7 merged 4 commits into from
Feb 20, 2026
+12 −16
Merged

Use renderRow to implement row dragging #3965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
61ced7c
Use `renderRow` to implement row dragging
amanmahajan7 Feb 20, 2026
d0e1c4e
new line
amanmahajan7 Feb 20, 2026
a61aad1
Fix newline
amanmahajan7 Feb 20, 2026
5108aac
Merge branch 'main' into am-row-dragging
amanmahajan7 Feb 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 6 additions & 10 deletions website/components/DraggableCellRenderer.tsx → website/components/DraggableRowRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,26 @@ import { useState } from 'react';
import { css } from 'ecij';
import clsx from 'clsx';

import { Cell, type CellRendererProps } from '../../src';
import { Row, type RenderRowProps } from '../../src';

const rowDraggingClassname = css`
opacity: 0.5;
`;

const rowOverClassname = css`
.rdg-row:has(&) {
Copy link
Collaborator

@nstepien nstepien Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cells have background-color: inherit; so I don't think we ever needed this selector 🤔

background-color: #ececec;
}
background-color: #ececec;
`;

interface DraggableCellRenderProps<R, SR> extends CellRendererProps<R, SR> {
interface DraggableRowRenderProps<R, SR> extends RenderRowProps<R, SR> {
onRowReorder: (sourceIndex: number, targetIndex: number) => void;
}

export function DraggableCellRenderer<R, SR>({
export function DraggableRowRenderer<R, SR>({
rowIdx,
className,
onRowReorder,
...props
}: DraggableCellRenderProps<R, SR>) {
}: DraggableRowRenderProps<R, SR>) {
const [isDragging, setIsDragging] = useState(false);
const [isOver, setIsOver] = useState(false);

Expand All @@ -34,8 +32,6 @@ export function DraggableCellRenderer<R, SR>({

function onDragStart(event: React.DragEvent<HTMLDivElement>) {
setIsDragging(true);
// TODO: use a custom drag image to show a preview of the row being dragged
event.dataTransfer.setDragImage(event.currentTarget.parentElement!.firstElementChild!, 40, 17);
Comment on lines -37 to -38
Copy link
Collaborator Author

@amanmahajan7 amanmahajan7 Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default image is not the best but at least it shows the full row. I am sure there is a way to improve it

event.dataTransfer.setData('text/plain', String(rowIdx));
event.dataTransfer.dropEffect = 'move';
}
Expand Down Expand Up @@ -70,7 +66,7 @@ export function DraggableCellRenderer<R, SR>({
}

return (
<Cell
<Row
draggable
onDragStart={onDragStart}
onDragEnd={onDragEnd}
Expand Down
2 changes: 1 addition & 1 deletion website/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export * from './CellExpanderFormatter';
export * from './ChildRowDeleteButton';
export * from './DraggableCellRenderer';
export * from './DraggableRowRenderer';
10 changes: 5 additions & 5 deletions website/routes/RowsReordering.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useCallback, useState } from 'react';

import { DataGrid, renderTextEditor, type CellRendererProps, type Column } from '../../src';
import { DraggableCellRenderer } from '../components';
import { DataGrid, renderTextEditor, type Column, type RenderRowProps } from '../../src';
import { DraggableRowRenderer } from '../components';
import { startViewTransition } from '../utils';
import { useDirection } from '../directionContext';

Expand Down Expand Up @@ -62,7 +62,7 @@ function RowsReordering() {
const direction = useDirection();
const [rows, setRows] = useState(createRows);

const renderCell = useCallback((key: React.Key, props: CellRendererProps<Row, unknown>) => {
const renderRow = useCallback((key: React.Key, props: RenderRowProps<Row>) => {
function onRowReorder(fromIndex: number, toIndex: number) {
function reorderRows() {
setRows((rows) => {
Expand All @@ -76,7 +76,7 @@ function RowsReordering() {
startViewTransition(reorderRows);
}

return <DraggableCellRenderer key={key} {...props} onRowReorder={onRowReorder} />;
return <DraggableRowRenderer<Row, unknown> key={key} {...props} onRowReorder={onRowReorder} />;
}, []);

return (
Expand All @@ -85,7 +85,7 @@ function RowsReordering() {
columns={columns}
rows={rows}
onRowsChange={setRows}
renderers={{ renderCell }}
renderers={{ renderRow }}
direction={direction}
/>
);
Expand Down