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
Data Table Cell Primitives
Data Table Cell Primitives
Render every kind of table cell the same way, wherever the table happens to be.
What it does
A shared set of cell renderers for numbers, dates, people, statuses, links, and row actions, used by every table in the app.
How it works
- 1 Catalogue the cell types the app's tables already render and reduce them to a small set: number and currency, date and relative time, person or avatar, status or badge, link or identifier, and an actions cell.
- 2 Separate each cell's underlying value from its presentation, so sorting, filtering, grouping, and export operate on the raw value while the user sees the formatted one.
- 3 Align and format numerically consistent cells the same way everywhere — figures right-aligned with tabular figures and a fixed precision per column, dates in the user's locale and time zone, currency with its code where more than one is possible.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/data-table-cell-primitives
Segment Event Forwarding
Segment Event Forwarding
Send one clean stream of product events to Segment and let it fan out downstream.
What it does
A documented event schema and a single forwarding path emitting track, identify, group, and page calls with consistent identity.
How it works
- 1 Write the event schema before writing any code: the exact set of event names, the properties each carries with their types, and the traits attached to a user and to an account. Every downstream tool inherits this schema, so a name chosen carelessly is expensive to change later.
- 2 Establish one identity model and apply it everywhere. Use a stable internal user identifier that never changes, associate the anonymous identifier from the first visit with it at signup, and attach the account or workspace so downstream tools can roll events up by customer.
- 3 Route every event through one internal emitter rather than calling the provider from feature code. That emitter validates the event against the schema, drops or flags anything unrecognised, and is the single place where identity and default properties are attached.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/segment-event-forwarding
Google Analytics Server Events
Google Analytics Server Events
Report confirmed outcomes to Google Analytics when browser tracking cannot be trusted.
What it does
Server-side delivery of completed conversions to Google Analytics, joined to the browser session and deduplicated against it.
How it works
- 1 Identify the outcomes the browser cannot see or reports unreliably — a payment confirmed by a webhook, a subscription that renewed, a signup completed after a redirect, anything blocked by an ad blocker — and send those from the server.
- 2 Capture the analytics client identifier from the browser when the visit begins, store it against the session or the record, and send it with the server event so the conversion joins the same session and campaign rather than appearing as a new anonymous visit.
- 3 Generate a stable event identifier at the moment the outcome happens and use it for both the browser and the server send, so the provider can collapse the pair into one event. Assign each event type a primary origin and treat the other as the fallback.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/google-analytics-server-events
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.