Renders a single data table row as a styled card, supporting click handlers, link navigation, compact/auto-height sizing, and optional expandable sub-row content. ## Key Components - **`DataTableRow`** — Memoized row component (wraps `DataTableRowImpl`) that renders TanStack Table cells inside a rounded card. Exported as `memo`-wrapped but typed as the original generic function. - **`DataTableRowProps`** — Props interface supporting `row`, `onClick`, `href`, `compact`, `autoHeight`, `className`, and `subRow`. - **`CellContent`** — Internal helper that wraps primitive (`string` | `number`) cell values in truncated, styled `` elements; passes React node children through unchanged. - **`handleClick`** — Memoized click handler implementing the click-bubbling protocol: ignores events from portaled descendants outside the row DOM subtree and short-circuits on `[data-no-row-click]` elements. ## Click-Bubbling Protocol Any interactive element inside a cell that should not trigger row navigation or `onClick` must carry the `data-no-row-click` attribute. ## Usage Example ```typescript import { DataTableRow } from './data-table-row' // Basic click handler console.log(item)} /> // Link mode (full-card anchor) // Link mode with sub-row (link wraps cells only) } /> // Column with action buttons (opt out of row click) const columns = [{ id: 'actions', cell: ({ row }) => (
), meta: { width: 'w-[160px] shrink-0', align: 'right' }, }] ``` ## Source [`data-table-row.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/data-table-row.tsx)