Skip to content
Pinky UI

data

Expandable Data Row

A structured row opens its detail surface in place while preserving identity and nearby values.

  • data
  • table
  • disclosure
  • details
Related pattern

Canonical structured-data row; list/feed disclosure remains a separate semantic pattern.

Live preview

Detail stays attached to the row identity and can contain a next action.

Expand row

Quick usage

usage
import { ExpandableDataRow } from "@pinky-ui/systems";

<ExpandableDataRow row={row} columns={["Owner", "Status"]} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
rowExpandableDataRowItem—The row label, values and inline detail content.
classNamestring—Styles the outer interaction surface.

Accessibility

  • The complete row is one labelled disclosure button and exposes aria-expanded and a named detail region.
  • Detail content remains in the document flow instead of requiring a modal detour.

Performance

  • Only the opened detail region mounts; row identity stays stable for quiet updates.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Tables that need a focused secondary view without abandoning scan context

When not to use

  • Dense financial tables where every cell must stay visible at once

Skill

Purpose

A structured row opens its detail surface in place while preserving identity and nearby values — the row does not become a modal detour.

Good for

  • Tables that need a focused secondary view without abandoning scan context

Avoid for

  • Dense financial tables where every cell must stay visible at once

Usage

tsx
<ExpandableDataRow row={row} columns={["Owner", "Status"]} />

Accessibility

  • The complete row is one labelled disclosure button and exposes aria-expanded and a named detail region.
  • Detail content remains in the document flow instead of requiring a modal detour.

Performance

  • Only the opened detail region mounts; row identity stays stable for quiet updates.

Related: expandable-list-row, selection-tray.

Open this skill on its own page