/// Data Display
ListingRow
A scannable list row — mono title, mono meta columns, and a trailing outbound arrow; hover dims to 0.6.
import { ListingRow } from "@protocore/pds";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.
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.
Linked rows
Give a row an href to render a real anchor (it also supports mailto:). The whole row dims to 0.6 on hover rather than highlighting — a CSS-only affordance.
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.
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
| Keys | Action |
|---|---|
| Tab | Moves focus to the row when it has an href. |
| Enter | Follows the row link (native anchor behavior). |
- 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.
ListingRow props
| Prop | Type | Default | Description |
|---|---|---|---|
arrow | boolean | true | Show the trailing outbound `↗` glyph. |
className | string | — | |
href | string | — | When set, the row renders as an anchor. |
meta | ReactNode[] | [] | Trailing meta cells (location, type, date…); the first reads secondary, the rest muted. |
style | CSSProperties | — | |
title * | ReactNode | — | Primary cell (e.g. a job title or entry name), rendered in ink. |