# ListRow

> The standard row of a list: an entry, a subscription, an account, a notification. A leading tile, a title that truncates and shows the rest on hover, a muted meta line, and a trailing value that never truncates. With href or onClick the whole row is the target, through its title, and the actions sit outside it. ListGroup heads a set of rows with a heading that sticks while they scroll, and a total. Rows are set apart by space and hover, not a border each.

Section: Data. Docs: https://entrepta.vercel.app/docs/components/list-row

## Install

```bash
npx @entrepta/cli@latest add list-row
```

Files: `data/list-row.tsx`.
No npm packages.

## Usage

```tsx
import { ListGroup, ListRow } from "@/components/entrepta/list-row"

<ListGroup label="Today" total={<Amount value={-5240} tone="auto" />}>
  <ListRow
    leading={<IconTile icon={CoffeeIcon} color="chart-4" />}
    title="Coffee"
    meta="card · 08:12"
    trailing={<Amount value={-450} />}
    href="/entries/123"
    linkComponent={Link}
    actions={<EntryActions />}
  />
</ListGroup>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `leading` | `ReactNode` | - | An IconTile or an Avatar |
| `title / meta` | `ReactNode` | - | One line each. Both truncate |
| `trailing / trailingMeta` | `ReactNode` | - | Usually an Amount, and a line under it. Never truncates |
| `href / linkComponent / onClick` | `string / ElementType / () => void` | - | Makes the whole row a link or a button, through its title |
| `actions` | `ReactNode` | - | A Dropdown, outside the row's link |
| `selected / muted` | `boolean` | - | The brand tint for a bulk pick; softer text for something pending |
| `label / total / stickyTop` | `ReactNode / ReactNode / number \| string` | - | The heading, its total, and how far from the top it sticks (ListGroup) |