DraggableRow() — ui Function Reference

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

Function tsx ApplicationExhibition TaskManagement

Entity Profile

ApplicationExhibition→ TaskManagement→ DraggableRow() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/app/(app)/examples/dashboard/components/data-table.tsx lines 314–337

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>
  )
}