DraggableRow() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ DraggableRow() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx lines 333–355

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