Skip to content
Pinky UI

lists

Sticky Data Header

A small sticky header surface that preserves list or table context.

  • lists
  • sticky
  • table
  • scroll

Live preview

ProjectOwnerStatus
Pinky UIFloraReady
DocsFloraReady
SkillsFloraReady

Quick usage

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

<StickyDataHeader>Project · Owner · Status</StickyDataHeader>

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

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use a small sticky context row for a scrolling list or table.

Use when

Column labels would otherwise disappear while comparing rows.

Avoid

Building a full data-grid or changing column widths while the header sticks.

Accessibility

Use real table/list semantics supplied by the host and preserve reading order.

Keyboard and touch

Scrolling remains native; no pointer interaction is required.

Reduced motion and performance

Prefer CSS sticky and a subtle shadow over scroll event state.

Composition and anti-patterns

Pair with RowSpotlight for context and a real table when sorting/filtering is needed.

Open this skill on its own page