DraggableRow() — ui Function Reference

Architecture documentation for the DraggableRow() function in data-table.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ DraggableRow() — ui Function Reference

Dependency Diagram

graph TD
  daf771b6_b8a9_6c50_dd1d_5ccffea5e250["DraggableRow()"]
  c4efa45e_6cce_3dec_3c41_b4fbc9755b38["data-table.tsx"]
  daf771b6_b8a9_6c50_dd1d_5ccffea5e250 -->|defined in| c4efa45e_6cce_3dec_3c41_b4fbc9755b38
  style daf771b6_b8a9_6c50_dd1d_5ccffea5e250 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/new-york/blocks/dashboard-01/components/data-table.tsx lines 317–340

function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
  const { transform, transition, setNodeRef, isDragging } = useSortable({
    id: row.original.id,
  })

  return (
    <TableRow
      data-state={row.getIsSelected() && "selected"}
      data-dragging={isDragging}
      ref={setNodeRef}
      className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
      style={{
        transform: CSS.Transform.toString(transform),
        transition: transition,
      }}
    >
      {row.getVisibleCells().map((cell) => (
        <TableCell key={cell.id}>
          {flexRender(cell.column.columnDef.cell, cell.getContext())}
        </TableCell>
      ))}
    </TableRow>
  )
}