<!-- source-hash: bcf36c7fa76e89e4c5f5a36b1b5b7494 -->
Renders a single data table row as either a navigable `<Link>` or a clickable `<div>`, with built-in click-bubbling control for nested interactive elements.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `DataTableRow` | `React.memo` component | Memoized row renderer wrapping `DataTableRowImpl` |
| `DataTableRowProps<T>` | Interface | Typed props for row data, click handler, href, compact mode, and className |
| `CellContent` | Internal component | Wraps primitive string/number values in default truncated text styling |

## Click-Bubbling Protocol

The row implements a `data-no-row-click` attribute contract. Any cell element that should **not** trigger row navigation or `onClick` must carry this attribute:

```tsx
// Column definition with opt-out buttons
{
  id: 'actions',
  cell: ({ row }) => (
    <div data-no-row-click className="flex gap-2 justify-end">
      <Button onClick={() => edit(row.original)}>Edit</Button>
    </div>
  ),
}
```

Portaled descendants (tooltips, dropdowns via `FloatingPortal`) are also safely ignored — clicks whose DOM target falls outside the row's `containerRef` are suppressed without needing `stopPropagation` at the source.

## Usage Example

```typescript
// Clickable row (div mode)
<DataTableRow
  row={row}
  onClick={(item) => console.log('Selected:', item)}
  compact={false}
/>

// Link mode — enables browser-native behaviours (right-click, Cmd+click, :visited)
<DataTableRow
  row={row}
  href={`/tickets/${row.original.id}`}
/>
```

> **Performance note:** Pass stable references for `onClick` and `className` via `useCallback` / `useMemo` in the parent to avoid unnecessary re-renders in long lists. `href` and string `className` are compared by value automatically.