Sticky Table Header
Keep column labels on screen so people know what they are reading halfway down.
What it adds
Column headers that remain visible while the table body scrolls, with the header and body staying in alignment.
What your agent is told to do
5
What your agent is told to do
5-
1
Find the tables long enough for the header to leave the viewport and pin those headers only; a table that fits on one screen gains nothing and pays the cost.
-
2
Keep the header in the same table structure as the body so column widths are resolved once and the two cannot drift apart. Splitting the header into a separate element forces you to measure and copy widths, which fails on every resize and every content change.
-
3
Establish which scroll container owns the stickiness — the page, or the table's own overflow region — and pin against that one, accounting for any header, toolbar, or filter bar already occupying the top edge.
-
4
Recompute nothing on scroll. Alignment must hold structurally, so that resizing a column, toggling density, or loading another page of rows keeps the header and body in step without a measurement pass.
-
5
Do not let the pinned header cover the element that has just received focus. Scrolling a row into view must offset by the header's height, and cell rendering itself belongs to Data Table Cell Primitives rather than being reworked here.
Edge cases it handles
7
Edge cases it handles
7- Header and body widths must stay synchronized as content changes; any approach that measures the body and applies the result to a detached header will fall out of alignment on the first column resize, font load, or long value.
- Nested scroll containers defeat sticky positioning silently — an ancestor with overflow hidden or auto, or a transform creating a containing block, will pin the header to the wrong thing or to nothing at all. Identify the real scroll parent before choosing an offset.
- Keyboard navigation and in-page search scroll a target to the top of the container, directly under the pinned header. Add scroll padding equal to the header height so the focused cell lands below it.
- On narrow screens where the table stacks into cards or rows, the pinned header has nothing to label and must be removed rather than left floating above a stacked layout with its own repeated labels.
- A frozen first column and a pinned header intersect at the top-left cell, which needs its own stacking treatment or it will slide under one of them.
- The pinned header must sit below modals, dropdowns, and the app's own sticky chrome in the stacking order, not above them.
- On short viewports a tall header plus surrounding chrome can leave only a few rows visible; cap the pinned height or fall back to a non-sticky header.
Definition of done
9
Definition of done
9- Column labels remain visible at every scroll position in long tables.
- Header and body columns stay aligned through resizes, density changes, and newly loaded rows, with no measurement on scroll.
- The header pins against the correct scroll container and clears any existing sticky chrome.
- A cell reached by keyboard or by in-page search is never hidden behind the header.
- Stacked mobile layouts render without an orphaned pinned header.
- A frozen first column and the pinned header do not overlap at their intersection.
- Modals, menus, and toasts render above the pinned header.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
UI Event Naming Schema
UI Event Naming Schema
Give every tracked interaction a name that still means the same thing in a year.
What it does
A documented vocabulary and structure for event names and properties, applied across the app's existing tracking.
How it works
- 1 Audit the events the app already sends and list them. The duplicates, the near-synonyms, and the ones nobody can explain are the reason the schema is needed, and they are also the migration list.
- 2 Fix a structure of object, action, and context: what was acted on, what happened to it, and where. Fix a closed set of actions — viewed, clicked, opened, submitted, selected, failed — and require every new event to reuse one of them.
- 3 Keep variable detail in properties, never in the name. A record identifier, a plan name, or a workspace slug baked into an event name produces thousands of unaggregatable one-off events.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/ui-event-naming-schema
Amplitude Event Tracking
Amplitude Event Tracking
Send behavioural events to Amplitude with stable users, devices, and account grouping.
What it does
A server-side pipeline that forwards behavioural events, user properties, and account-level groupings to Amplitude.
How it works
- 1 Identify the behaviours worth measuring and emit them from one place in the application layer, so that the set of events is readable in a single file rather than inferred by grepping the codebase.
- 2 Establish the identity model before writing any send code: what identifies a signed-in user, what identifies a device or anonymous session, and how the two are stitched at sign-up and sign-in.
- 3 Map the app's own tenancy — workspace, organisation, or team — onto Amplitude's group concept, and derive it from the record the event belongs to rather than from whatever context the request happened to carry.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/amplitude-event-tracking
Component Analytics Hook
Component Analytics Hook
Instrument shared components once instead of hand-writing events on every screen.
What it does
Interaction tracking attached to the app's shared components, emitting named events carrying the context of where they were used.
How it works
- 1 Identify the shared components that account for most interaction — buttons, links, menus, dialogs, tabs, table rows, form submits — and attach tracking inside them rather than at each of the hundreds of call sites.
- 2 Have each component emit its own identity and the context it was rendered in: the screen, the surface, and a stable identifier supplied by the caller. Position on the page and visible label are not identity.
- 3 Emit exactly one event per user action. A menu item inside a card inside a table row must not produce three overlapping records of the same click.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/component-analytics-hook
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
3
It inspects, then implements
Your agent reads your existing app first, then adds the feature to fit it.
Works with your stack
These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.
Need it tighter than that? Customize the feature and tell it exactly what you're running.