Attempt at Row DnD implementation on @tanstack/solid-table

[Koning3ton]

Hello,

Thanks for this great library! I'm trying to implement the Row DnD example for React for the SolidJS version.

Below my current implementation can be found. Feedback always welcome!

Code can be found on StackBlitz.

I also include the DraggableRow implementation of my code example here for completeness:

import { flexRender } from '@tanstack/solid-table';
import {
  createSortable,
  useDragDropContext,
  transformStyle,
} from '@thisbeyond/solid-dnd';

// Row Component shown when row is dragged
const DraggableRow = ({ row, className }: { row: any; className?: string }) => {
  const sortable = createSortable(row.original.id);
  const context = useDragDropContext();
  const state = context && context[0];

  return (
    <tr
      ref={sortable.ref}
      class={className}
      style={transformStyle(sortable.transform)}
      classList={{
        'opacity-25': sortable.isActiveDraggable,
        'transition-transform': !!state?.active.overlay,
      }}
    >
      {row.getVisibleCells().map((cell: any, idx: number) =>
        cell.column.id == 'drag-handle' ? ( // Only the Drag handle should allow the row to be dragged.
          <td
            {...sortable.dragActivators}
            class="border border-border"
            style={{ height: '1px', width: cell.column.getSize() + 'px' }}
          >
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </td>
        ) : (
          <td
            class="border border-border"
            style={{ height: '1px', width: cell.column.getSize() + 'px' }}
          >
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
          </td>
        )
      )}
    </tr>
  );
};
export default DraggableRow;

[Terbiy]

Thank you for sharing, your example helped a lot!