Fix #700 - Hydration error in row dragging example

Author: icflorescu

app/examples/row-dragging/RowDraggingExample.module.css

@@ -0,0 +1,4 @@
+.draggableRow[data-is-dragging='true'] td {
+  opacity: 0.75;
+  border: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}

app/examples/row-dragging/RowDraggingExample.tsx

@@ -1,13 +1,15 @@
 'use client';
 
 import { DragDropContext, Draggable, type DropResult, Droppable } from '@hello-pangea/dnd';
-import { TableTd } from '@mantine/core';
+import { Center, TableTd } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { IconGripVertical } from '@tabler/icons-react';
 import type { DataTableColumn } from '__PACKAGE__';
 import { DataTable, DataTableDraggableRow } from '__PACKAGE__';
+import clsx from 'clsx';
 import { useState } from 'react';
 import companies from '~/data/companies.json';
+import classes from './RowDraggingExample.module.css';
 
 interface RecordData {
   id: string;
@@ -69,10 +71,18 @@ export function RowDraggingExample() {
         rowFactory={({ record, index, rowProps, children }) => (
           <Draggable key={record.id} draggableId={record.id} index={index}>
             {(provided, snapshot) => (
-              <DataTableDraggableRow isDragging={snapshot.isDragging} {...rowProps} {...provided.draggableProps}>
-                {/** custom drag handle */}
-                <TableTd {...provided.dragHandleProps} ref={provided.innerRef}>
-                  <IconGripVertical size={16} />
+              <DataTableDraggableRow
+                isDragging={snapshot.isDragging}
+                {...rowProps}
+                // 👇 custom class name for styling
+                className={clsx(rowProps.className, classes.draggableRow)}
+                {...provided.draggableProps}
+              >
+                <TableTd>
+                  {/** 👇 custom drag handle */}
+                  <Center {...provided.dragHandleProps} ref={provided.innerRef}>
+                    <IconGripVertical size={16} />
+                  </Center>
                 </TableTd>
                 {children}
               </DataTableDraggableRow>

app/examples/row-dragging/page.tsx

@@ -17,6 +17,7 @@ export const metadata = getRouteMetadata(PATH);
 export default async function BasicUsageExamplePage() {
   const code = await allPromiseProps({
     'RowDraggingExample.tsx': readCodeFile<string>(`${PATH}/RowDraggingExample.tsx`),
+    'RowDraggingExample.module.css': readCodeFile<string>(`${PATH}/RowDraggingExample.module.css`),
     'companies.json': readCodeFile<string>('/../data/companies.json'),
   });
 
@@ -30,7 +31,7 @@ export default async function BasicUsageExamplePage() {
         <br />
         Here is how you would implement it in your project:
       </Txt>
-      <CodeBlock tabs={{ code, keys: ['RowDraggingExample.tsx', 'companies.json'] }} />
+      <CodeBlock tabs={{ code, keys: ['RowDraggingExample.tsx', 'RowDraggingExample.module.css', 'companies.json'] }} />
       <Txt>The code above will produce the following result:</Txt>
       <RowDraggingExample />
 

package/DataTableDraggableRow.tsx

@@ -1,14 +1,20 @@
 import { TableTr } from '@mantine/core';
 import { useMergedRef } from '@mantine/hooks';
-import { forwardRef, useEffect, useRef } from 'react';
+import type { Ref } from 'react';
+import { useEffect, useRef } from 'react';
 import type { DataTableDraggableRowProps } from './types';
 
-const DataTableDraggableRow = forwardRef<HTMLTableRowElement, DataTableDraggableRowProps>(function (
-  { children, isDragging, ...props },
-  passedRef
-) {
+export function DataTableDraggableRow({
+  className,
+  children,
+  isDragging,
+  ref: refProp,
+  ...otherProps
+}: DataTableDraggableRowProps & {
+  ref?: Ref<HTMLTableRowElement>;
+}) {
   const ref = useRef<HTMLTableRowElement>(null);
-  const mergedRef = useMergedRef(ref, passedRef);
+  const mergedRef = useMergedRef(ref, refProp);
 
   useEffect(() => {
     // a simple fix to keep column width as in table
@@ -34,12 +40,8 @@ const DataTableDraggableRow = forwardRef<HTMLTableRowElement, DataTableDraggable
   }, [isDragging, children]);
 
   return (
-    <TableTr data-is-dragging={isDragging} ref={mergedRef} {...props}>
+    <TableTr data-is-dragging={isDragging} ref={mergedRef} {...otherProps} className={className}>
       {children}
     </TableTr>
   );
-});
-
-DataTableDraggableRow.displayName = 'DataTableDraggableRow';
-
-export { DataTableDraggableRow };
+}

package/types/DataTableDraggableRowProps.ts

@@ -1,6 +1,11 @@
 import type { TableTrProps } from '@mantine/core';
 
 export type DataTableDraggableRowProps = {
+  /**
+   * Optional class name.
+   */
+  className?: string;
+
   /**
    * Current dragging status.
    */