# TableLinkRow

> Fully navigable table row: the real link lives in the first cell and, via a stretched link (positioned `<tr>` + anchor `::before` at `inset-0`), its click area covers the whole ro…

Source: https://ui.jcsoftdev.com/docs/components/table-link-row

Fully navigable table row: the real link lives in the first cell and, via a
stretched link (positioned `<tr>` + anchor `::before` at `inset-0`), its
click area covers the whole row without duplicating the link per cell.

## Import

```ts
import { TableLinkRow } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/table`.

## Usage

```tsx
<TableLinkRow aria-label="Inventario de productos">
  <>
          <TableHead>
            <tr>
              <TableHeaderCell>Producto</TableHeaderCell>
              <TableHeaderCell>SKU</TableHeaderCell>
              <TableHeaderCell alignRight>Stock</TableHeaderCell>
              <TableHeaderCell alignRight>Precio</TableHeaderCell>
            </tr>
          </TableHead>
          <TableBody>
            {inventory.map((item) => (
              <TableRow key={item.sku}>
                <TableCell>
                  {item.name} {item.low ? <Chip tone="danger">Stock bajo</Chip> : null}
                </TableCell>
                <TableCell>{item.sku}</TableCell>
                <TableCell alignRight>{item.stock}</TableCell>
                <TableCell alignRight>{item.price}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </>
</TableLinkRow>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `href` * | `string` |  | Row destination: rendered as a real `<a href>` in the first cell. |
| `primary` * | `ReactNode` |  | Content of the first cell, wrapped by the anchor. |
| `primaryColumnId` | `string` |  | `columnId` of the first cell, so that column can be pinned. |
| `children` | `ReactNode` |  | Additional `<td>` cells of the row. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-table--default)
- [Link Rows](/storybook/?path=/story/containers-table--link-rows)
- [Empty](/storybook/?path=/story/containers-table--empty)
- [PinnedColumns](/storybook/?path=/story/containers-table--pinned-left-and-right)
- [User Pinning](/storybook/?path=/story/containers-table--user-pinning)
- [Controlled Pinning](/storybook/?path=/story/containers-table--controlled-pinning)
- [Narrow](/storybook/?path=/story/containers-table--narrow)

## Source

`packages/ui/src/containers/table/table.tsx`