Skip to content
Pinky UI

data

Sortable Data Rows

Structured data rows can be reordered without losing their columns or keyboard path.

  • data
  • table
  • reorder
  • drag

Live preview

ItemOwnerStatusReorder

Project brief

Updated today

Flora
Ready

Interaction audit

Updated yesterday

Team
Review

Release notes

Updated Friday

Flora
Draft
Drag rows on desktop; use ↑ ↓ on touch.Focus ↕, press Space, then use arrows.

Quick usage

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

<SortableDataRows columns={columns} items={rows} onReorder={setRows} />

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
onReorder(items: SortableDataRow[]) => void—Receives the new row order after drag or keyboard movement.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Each row has a labelled reorder handle; Space grabs, arrows move and Space drops.
  • Visible up/down buttons provide a touch-safe alternative to desktop drag.

Performance

  • Native drag events and discrete reorder updates avoid a pointer-frame React loop.

Reduced motion

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

When to use

  • Small to medium tables where order is part of the product model

When not to use

  • Huge virtualized datasets or touch-only reorder surfaces

Skill

Purpose

Structured data rows can be reordered without losing their columns or keyboard path — order is part of the product model, not a decoration.

Good for

  • Small to medium tables where order is part of the product model

Avoid for

  • Huge virtualized datasets or touch-only reorder surfaces

Usage

tsx
<SortableDataRows columns={columns} items={rows} onReorder={setRows} />

Accessibility

  • Each row has a labelled reorder handle; Space grabs, arrows move and Space drops.
  • Visible up/down buttons provide a touch-safe alternative to desktop drag.

Performance

  • Native drag events and discrete reorder updates avoid a pointer-frame React loop.

Related: reorderable-list, expandable-data-row.

Open this skill on its own page