Add row reordering example

src/Cell.tsx

@@ -124,4 +124,4 @@ function Cell<R, SR>({
   );
 }
 
-export default memo(forwardRef(Cell)) as <R, SR = unknown>(props: CellRendererProps<R, SR>) => JSX.Element;
+export default memo(forwardRef(Cell)) as <R, SR = unknown>(props: CellRendererProps<R, SR> & { ref?: React.Ref<HTMLDivElement> }) => JSX.Element;

src/Row.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, forwardRef } from 'react';
 import clsx from 'clsx';
 
 import Cell from './Cell';
@@ -25,7 +25,7 @@ function Row<R, SR = unknown>({
   'aria-rowindex': ariaRowIndex,
   'aria-selected': ariaSelected,
   ...props
-}: RowRendererProps<R, SR>) {
+}: RowRendererProps<R, SR>, ref: React.Ref<HTMLDivElement>) {
   function handleDragEnter() {
     setDraggedOverRowIdx?.(rowIdx);
   }
@@ -43,6 +43,7 @@ function Row<R, SR = unknown>({
       role="row"
       aria-rowindex={ariaRowIndex}
       aria-selected={ariaSelected}
+      ref={ref}
       className={className}
       onMouseEnter={wrapEvent(handleDragEnter, onMouseEnter)}
       style={{ top }}
@@ -67,4 +68,4 @@ function Row<R, SR = unknown>({
   );
 }
 
-export default memo(Row) as <R, SR>(props: RowRendererProps<R, SR>) => JSX.Element;
+export default memo(forwardRef(Row)) as <R, SR = unknown>(props: RowRendererProps<R, SR> & { ref?: React.Ref<HTMLDivElement> }) => JSX.Element;

stories/demos/ColumnsReordering.tsx

@@ -20,8 +20,8 @@ function createRows(): Row[] {
       id: i,
       task: `Task ${i}`,
       complete: Math.min(100, Math.round(Math.random() * 110)),
-      priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)],
-      issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)]
+      priority: ['Critical', 'High', 'Medium', 'Low'][Math.round(Math.random() * 3)],
+      issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.round(Math.random() * 3)]
     });
   }
 

stories/demos/RowsReordering.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+import { DraggableRowRenderer } from './components/RowRenderers';
+import DataGrid, { Column } from '../../src';
+
+interface Row {
+  id: number;
+  task: string;
+  complete: number;
+  priority: string;
+  issueType: string;
+}
+
+function createRows(): readonly Row[] {
+  const rows = [];
+  for (let i = 1; i < 500; i++) {
+    rows.push({
+      id: i,
+      task: `Task ${i}`,
+      complete: Math.min(100, Math.round(Math.random() * 110)),
+      priority: ['Critical', 'High', 'Medium', 'Low'][Math.round(Math.random() * 3)],
+      issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.round(Math.random() * 3)]
+    });
+  }
+
+  return rows;
+}
+
+const columns: readonly Column<Row>[] = [
+  {
+    key: 'id',
+    name: 'ID',
+    width: 80
+  },
+  {
+    key: 'task',
+    name: 'Title'
+  },
+  {
+    key: 'priority',
+    name: 'Priority'
+  },
+  {
+    key: 'issueType',
+    name: 'Issue Type'
+  },
+  {
+    key: 'complete',
+    name: '% Complete'
+  }
+];
+
+export default function RowsReordering() {
+  const [rows, setRows] = useState(createRows);
+
+  function onRowReorder(fromIndex: number, toIndex: number) {
+    const newRows = [...rows];
+    newRows.splice(
+      toIndex,
+      0,
+      newRows.splice(fromIndex, 1)[0]
+    );
+
+    setRows(newRows);
+  }
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <DataGrid
+        columns={columns}
+        rows={rows}
+        rowRenderer={p => <DraggableRowRenderer {...p} onRowReorder={onRowReorder} />}
+      />
+    </DndProvider>
+  );
+}

stories/demos/components/HeaderRenderers/DraggableHeaderRenderer.tsx

@@ -2,25 +2,12 @@ import React from 'react';
 import { useDrag, useDrop, DragObjectWithType } from 'react-dnd';
 
 import { HeaderRendererProps } from '../../../../src';
-
+import { useCombinedRefs } from '../../../../src/hooks';
 
 interface ColumnDragObject extends DragObjectWithType {
   key: string;
 }
 
-function wrapRefs<T>(...refs: React.Ref<T>[]) {
-  return (handle: T | null) => {
-    for (const ref of refs) {
-      if (typeof ref === 'function') {
-        ref(handle);
-      } else if (ref !== null) {
-        // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065
-        (ref as React.MutableRefObject<T | null>).current = handle;
-      }
-    }
-  };
-}
-
 export function DraggableHeaderRenderer<R>({ onColumnsReorder, ...props }: HeaderRendererProps<R> & { onColumnsReorder: (sourceKey: string, targetKey: string) => void }) {
   const [{ isDragging }, drag] = useDrag({
     item: { key: props.column.key, type: 'COLUMN_DRAG' },
@@ -44,7 +31,7 @@ export function DraggableHeaderRenderer<R>({ onColumnsReorder, ...props }: Heade
 
   return (
     <div
-      ref={wrapRefs(drag, drop)}
+      ref={useCombinedRefs(drag, drop)}
       style={{
         opacity: isDragging ? 0.5 : 1,
         backgroundColor: isOver ? '#ececec' : 'inherit',

stories/demos/components/RowRenderers/DraggableRowRenderer.less

@@ -0,0 +1,7 @@
+.rdg-row-dragging {
+  opacity: 0.5;
+}
+
+.rdg-row-over {
+  background-color: #ececec;
+}

stories/demos/components/RowRenderers/DraggableRowRenderer.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useDrag, useDrop, DragObjectWithType } from 'react-dnd';
+import clsx from 'clsx';
+
+import { Row, RowRendererProps } from '../../../../src';
+import { useCombinedRefs } from '../../../../src/hooks';
+
+import './DraggableRowRenderer.less';
+
+interface RowDragObject extends DragObjectWithType {
+  index: number;
+}
+
+interface DraggableRowRenderProps<R, SR> extends RowRendererProps<R, SR> {
+  onRowReorder: (sourceIndex: number, targetIndex: number) => void;
+}
+
+export function DraggableRowRenderer<R, SR = unknown>({
+  rowIdx,
+  isRowSelected,
+  className,
+  onRowReorder,
+  ...props
+}: DraggableRowRenderProps<R, SR>) {
+  const [{ isDragging }, drag] = useDrag({
+    item: { index: rowIdx, type: 'ROW_DRAG' },
+    collect: monitor => ({
+      isDragging: monitor.isDragging()
+    })
+  });
+
+  const [{ isOver }, drop] = useDrop({
+    accept: 'ROW_DRAG',
+    drop({ index, type }: RowDragObject) {
+      if (type === 'ROW_DRAG') {
+        onRowReorder(index, rowIdx);
+      }
+    },
+    collect: monitor => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop()
+    })
+  });
+
+  className = clsx(
+    className,
+    {
+      'rdg-row-dragging': isDragging,
+      'rdg-row-over': isOver
+    }
+  );
+
+  return (
+    <Row
+      ref={useCombinedRefs(drag, drop)}
+      rowIdx={rowIdx}
+      isRowSelected={isRowSelected}
+      className={className}
+      {...props}
+    />
+  );
+}

stories/demos/components/RowRenderers/index.ts

@@ -0,0 +1 @@
+export * from './DraggableRowRenderer';

stories/index.tsx

@@ -15,6 +15,7 @@ import ScrollToRow from './demos/ScrollToRow';
 import CellNavigation from './demos/CellNavigation';
 import HeaderFilters from './demos/HeaderFilters';
 import ColumnsReordering from './demos/ColumnsReordering';
+import RowsReordering from './demos/RowsReordering';
 import LegacyGrouping from './demos/LegacyGrouping';
 
 storiesOf('Demos', module)
@@ -29,4 +30,5 @@ storiesOf('Demos', module)
   .add('Cell Navigation', () => <CellNavigation />)
   .add('Header Filters', () => <HeaderFilters />)
   .add('Columns Reordering', () => <ColumnsReordering />)
+  .add('Rows Reordering', () => <RowsReordering />)
   .add('Legacy Grouping', () => <LegacyGrouping />);