# ListingRow
- **Category:** Data Display (`data-display`)
- **Slug:** `data-display/listing-row`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { ListingRow } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/data-display/listing-row
> A scannable list row — mono title, mono meta columns, and a trailing outbound arrow; hover dims to 0.6.
## When to use it
**ListingRow** is for flat, scannable lists where each row is one record and columns align down the set — careers, changelogs, endpoint directories, search results. The mono cells and trailing `↗︎` signal "this is a list you skim and click into."
If the ordinal matters (numbered clauses, ranked items), use **NumberedRow** instead. When you need sorting, selection, pagination, or a header row, graduate to **DataTable** — ListingRow is deliberately header-less and unsortable. For a bare key/value block, use **DefinitionList**.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `arrow` | `boolean` | no | `true` | Show the trailing outbound `↗` glyph. |
| `className` | `string` | no | — | — |
| `href` | `string` | no | — | When set, the row renders as an anchor. |
| `meta` | `ReactNode[]` | no | `[]` | Trailing meta cells (location, type, date…); the first reads secondary, the rest muted. |
| `style` | `CSSProperties` | no | — | — |
| `title` | `ReactNode` | yes | — | Primary cell (e.g. a job title or entry name), rendered in ink. |
## Examples
### Basics
A `title` and an array of `meta` cells lay out on a grid: the title takes 1.6fr, each meta cell 1fr. The first meta cell reads secondary, the rest muted.
```tsx
import { ListingRow } from "@protocore/pds";
export default function ListingRowBasics() {
return (
);
}
```
### Without the arrow
Set `arrow={false}` when the row doesn't navigate anywhere — a changelog line, a static release list. The trailing `↗︎` column collapses out of the grid.
```tsx
import { ListingRow } from "@protocore/pds";
export default function ListingRowChangelog() {
return (
);
}
```
## Usage
**Do**
- Keep the same number of `meta` cells across a set so columns align.
- Lead with the most identifying meta cell — it reads secondary, the rest muted.
- Use `href` for rows that navigate; the whole row becomes the target.
- Drop the arrow (`arrow={false}`) for static, non-navigating lists.
**Don't**
- Don't use it when you need sorting, selection, or pagination — reach for DataTable.
- Don't pack more than ~3 meta cells; it stops being scannable.
- Don't nest buttons or links inside a row that already has an `href`.
- Don't rely on the `↗︎` alone to signal a link on a non-`href` row.
## Accessibility
**Keyboard**
| Keys | Action |
| --- | --- |
| `Tab` | Moves focus to the row when it has an href. |
| `Enter` | Follows the row link (native anchor behavior). |
**Notes**
- The `↗︎` glyph is `aria-hidden`; it never contributes to the accessible name.
- A non-`href` row is a plain container with no imposed role — add your own `role`/handlers if it must be operable.
- Hover dimming is decorative; keyboard focus still shows the base focus-visible ring.
## Related
`numbered-row`, `data-table`, `table`, `code-ref`
---
© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/