DraggableRow() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ DraggableRow() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/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>
  )
}