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
  7fe99828_3114_afac_ab5b_752f4456da9d["DraggableRow()"]
  d3cd7675_a22f_8fdf_eec9_5f6b6d751feb["data-table.tsx"]
  7fe99828_3114_afac_ab5b_752f4456da9d -->|defined in| d3cd7675_a22f_8fdf_eec9_5f6b6d751feb
  style 7fe99828_3114_afac_ab5b_752f4456da9d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/dashboard-01/components/data-table.tsx lines 330–353

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