code · pull · May 16, 2025 · May 16, 2025 · May 16, 2025
diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx
@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 import { css } from '@linaria/core';
 
 import { useRovingTabIndex } from './hooks';
@@ -43,17 +44,30 @@ export const resizeHandleClassname = css`
 const cellDraggableClassname = 'rdg-cell-draggable';
 
 const cellDragging = css`
-  opacity: 0.5;
+  @layer rdg.HeaderCell {
+    background-color: var(--rdg-header-draggable-background-color);
+  }
 `;
 
 const cellDraggingClassname = `rdg-cell-dragging ${cellDragging}`;
 
 const cellOver = css`
-  background-color: var(--rdg-header-draggable-background-color);
+  @layer rdg.HeaderCell {
+    background-color: var(--rdg-header-draggable-background-color);
+  }
 `;
 
 const cellOverClassname = `rdg-cell-drag-over ${cellOver}`;
 
+const dragImageClassname = css`
+  @layer rdg.HeaderCell {
+    border-radius: 4px;
+    width: fit-content;
+    outline: 2px solid hsl(207, 100%, 50%);
+    outline-offset: -2px;
+  }
+`;
+
 type SharedHeaderRowProps<R, SR> = Pick<
   HeaderRowProps<R, SR, React.Key>,
   | 'sortColumns'
@@ -70,7 +84,8 @@ export interface HeaderCellProps<R, SR> extends SharedHeaderRowProps<R, SR> {
   colSpan: number | undefined;
   rowIdx: number;
   isCellSelected: boolean;
-  dragDropKey: string;
+  draggedColumnKey: string | undefined;
+  setDraggedColumnKey: (draggedColumnKey: string | undefined) => void;
 }
 
 export default function HeaderCell<R, SR>({
@@ -85,10 +100,12 @@ export default function HeaderCell<R, SR>({
   onSortColumnsChange,
   selectCell,
   direction,
-  dragDropKey
+  draggedColumnKey,
+  setDraggedColumnKey
 }: HeaderCellProps<R, SR>) {
-  const [isDragging, setIsDragging] = useState(false);
   const [isOver, setIsOver] = useState(false);
+  const dragImageRef = useRef<HTMLDivElement>(null);
+  const isDragging = draggedColumnKey === column.key;
   const rowSpan = getHeaderCellRowSpan(column, rowIdx);
   const { tabIndex, childTabIndex, onFocus } = useRovingTabIndex(isCellSelected);
   const sortIndex = sortColumns?.findIndex((sort) => sort.columnKey === column.key);
@@ -180,13 +197,16 @@ export default function HeaderCell<R, SR>({
   }
 
   function onDragStart(event: React.DragEvent<HTMLDivElement>) {
-    event.dataTransfer.setData(dragDropKey, column.key);
+    // need flushSync to make sure the drag image is rendered before the drag starts
+    flushSync(() => {
+      setDraggedColumnKey(column.key);
+    });
+    event.dataTransfer.setDragImage(dragImageRef.current!, 0, 0);
     event.dataTransfer.dropEffect = 'move';
-    setIsDragging(true);
   }
 
   function onDragEnd() {
-    setIsDragging(false);
+    setDraggedColumnKey(undefined);
   }
 
   function onDragOver(event: React.DragEvent<HTMLDivElement>) {
@@ -197,18 +217,9 @@ export default function HeaderCell<R, SR>({
 
   function onDrop(event: React.DragEvent<HTMLDivElement>) {
     setIsOver(false);
-    // The dragDropKey is derived from the useId() hook, which can sometimes generate keys with uppercase letters.
-    // When setting data using event.dataTransfer.setData(), the key is automatically converted to lowercase in some browsers.
-    // To ensure consistent comparison, we normalize the dragDropKey to lowercase before checking its presence in the event's dataTransfer types.
-    // https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface
-    if (event.dataTransfer.types.includes(dragDropKey.toLowerCase())) {
-      const sourceKey = event.dataTransfer.getData(dragDropKey.toLowerCase());
-      if (sourceKey !== column.key) {
-        // prevent the browser from redirecting in some cases
-        event.preventDefault();
-        onColumnsReorder?.(sourceKey, column.key);
-      }
-    }
+    // prevent the browser from redirecting in some cases
+    event.preventDefault();
+    onColumnsReorder?.(draggedColumnKey!, column.key);
   }
 
   function onDragEnter(event: React.DragEvent<HTMLDivElement>) {
@@ -223,57 +234,77 @@ export default function HeaderCell<R, SR>({
     }
   }
 
-  let draggableProps: React.ComponentProps<'div'> | undefined;
+  let dragTargetProps: React.ComponentProps<'div'> | undefined;
+  let dropTargetProps: React.ComponentProps<'div'> | undefined;
   if (draggable) {
-    draggableProps = {
+    dragTargetProps = {
       draggable: true,
-      /* events fired on the draggable target */
       onDragStart,
-      onDragEnd,
-      /* events fired on the drop targets */
-      onDragOver,
-      onDragEnter,
-      onDragLeave,
-      onDrop
+      onDragEnd
     };
+
+    if (draggedColumnKey !== undefined && draggedColumnKey !== column.key) {
+      dropTargetProps = {
+        onDragOver,
+        onDragEnter,
+        onDragLeave,
+        onDrop
+      };
+    }
   }
 
+  const style: React.CSSProperties = {
+    ...getHeaderCellStyle(column, rowIdx, rowSpan),
+    ...getCellStyle(column, colSpan)
+  };
+
+  const content = column.renderHeaderCell({
+    column,
+    sortDirection,
+    priority,
+    tabIndex: childTabIndex
+  });
+
   return (
-    <div
-      role="columnheader"
-      aria-colindex={column.idx + 1}
-      aria-colspan={colSpan}
-      aria-rowspan={rowSpan}
-      aria-selected={isCellSelected}
-      aria-sort={ariaSort}
-      tabIndex={tabIndex}
-      className={className}
-      style={{
-        ...getHeaderCellStyle(column, rowIdx, rowSpan),
-        ...getCellStyle(column, colSpan)
-      }}
-      onMouseDown={onMouseDown}
-      onFocus={onFocus}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
-      {...draggableProps}
-    >
-      {column.renderHeaderCell({
-        column,
-        sortDirection,
-        priority,
-        tabIndex: childTabIndex
-      })}
-
-      {resizable && (
-        <ResizeHandle
-          direction={direction}
-          column={column}
-          onColumnResize={onColumnResize}
-          onColumnResizeEnd={onColumnResizeEnd}
-        />
+    <>
+      {isDragging && (
+        <div
+          ref={dragImageRef}
+          style={style}
+          className={getCellClassname(column, column.headerCellClass, dragImageClassname)}
+        >
+          {content}
+        </div>
       )}
-    </div>
+      <div
+        role="columnheader"
+        aria-colindex={column.idx + 1}
+        aria-colspan={colSpan}
+        aria-rowspan={rowSpan}
+        aria-selected={isCellSelected}
+        aria-sort={ariaSort}
+        tabIndex={tabIndex}
+        className={className}
+        style={style}
+        onMouseDown={onMouseDown}
+        onFocus={onFocus}
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+        {...dragTargetProps}
+        {...dropTargetProps}
+      >
+        {content}
+
+        {resizable && (
+          <ResizeHandle
+            direction={direction}
+            column={column}
+            onColumnResize={onColumnResize}
+            onColumnResizeEnd={onColumnResizeEnd}
+          />
+        )}
+      </div>
+    </>
   );
 }
 

diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx
@@ -1,4 +1,4 @@
-import { memo, useId } from 'react';
+import { memo, useState } from 'react';
 import { css } from '@linaria/core';
 import clsx from 'clsx';
 
@@ -60,7 +60,7 @@ function HeaderRow<R, SR, K extends React.Key>({
   selectCell,
   direction
 }: HeaderRowProps<R, SR, K>) {
-  const dragDropKey = useId();
+  const [draggedColumnKey, setDraggedColumnKey] = useState<string>();
 
   const cells = [];
   for (let index = 0; index < columns.length; index++) {
@@ -84,7 +84,8 @@ function HeaderRow<R, SR, K extends React.Key>({
         sortColumns={sortColumns}
         selectCell={selectCell}
         direction={direction}
-        dragDropKey={dragDropKey}
+        draggedColumnKey={draggedColumnKey}
+        setDraggedColumnKey={setDraggedColumnKey}
       />
     );
   }

diff --git a/src/style/core.ts b/src/style/core.ts
@@ -42,7 +42,7 @@ const root = css`
 
   @layer rdg.Root {
     ${lightTheme}
-    --rdg-selection-color: #66afe9;
+    --rdg-selection-color: hsl(207, 75%, 66%);
     --rdg-font-size: 14px;
     --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
 

diff --git a/website/routes/ColumnsReordering.tsx b/website/routes/ColumnsReordering.tsx
@@ -106,18 +106,27 @@ function ColumnsReordering() {
   }, [rows, sortColumns]);
 
   function onColumnsReorder(sourceKey: string, targetKey: string) {
-    setColumnsOrder((columnsOrder) => {
-      const sourceColumnOrderIndex = columnsOrder.findIndex(
-        (index) => columns[index].key === sourceKey
-      );
-      const targetColumnOrderIndex = columnsOrder.findIndex(
-        (index) => columns[index].key === targetKey
-      );
-      const sourceColumnOrder = columnsOrder[sourceColumnOrderIndex];
-      const newColumnsOrder = columnsOrder.toSpliced(sourceColumnOrderIndex, 1);
-      newColumnsOrder.splice(targetColumnOrderIndex, 0, sourceColumnOrder);
-      return newColumnsOrder;
-    });
+    function reorderColumns() {
+      setColumnsOrder((columnsOrder) => {
+        const sourceColumnOrderIndex = columnsOrder.findIndex(
+          (index) => columns[index].key === sourceKey
+        );
+        const targetColumnOrderIndex = columnsOrder.findIndex(
+          (index) => columns[index].key === targetKey
+        );
+        const sourceColumnOrder = columnsOrder[sourceColumnOrderIndex];
+        const newColumnsOrder = columnsOrder.toSpliced(sourceColumnOrderIndex, 1);
+        newColumnsOrder.splice(targetColumnOrderIndex, 0, sourceColumnOrder);
+        return newColumnsOrder;
+      });
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (document.startViewTransition) {
+      document.startViewTransition(reorderColumns);
+    } else {
+      reorderColumns();
+    }
   }
 
   function resetOrderAndWidths() {