Table Action Column Pattern
Put row actions in one predictable place and reveal them the same way everywhere.
What it adds
A single convention for where row-level actions sit in a table, which ones are always visible, and which collapse into an overflow menu.
What your agent is told to do
5
What your agent is told to do
5-
1
Inventory every table in the app and list the row-level actions each one offers today. Group them into a small shared set — the one or two the user reaches for constantly, and the long tail that belongs behind an overflow control.
-
2
Fix the action column to one edge of the row and keep it there in every table, at a fixed width that does not change with the contents of the row. A column that drifts by a few pixels between tables costs the user a re-scan on every screen.
-
3
Make the actions reachable by keyboard: the row's controls must be in tab order in visual order, the overflow menu must open on Enter or Space, and arrow keys must move within the menu without leaving the table.
-
4
Reserve the space for actions the current user cannot perform rather than removing the cell, so rows stay aligned when permissions differ between records in the same table.
-
5
Do not reveal actions only on hover. Hover-only controls are invisible on touch, invisible to keyboard users until focus lands, and invisible to anyone scanning a screenshot; hover may emphasise, but it must not be the only way to find them.
Edge cases it handles
7
Edge cases it handles
7- The one or two actions people use most must be visible without opening anything. Burying edit or delete under an overflow menu turns a one-click task into three.
- Touch has no hover and no focus ring, so the pattern must be usable by tapping alone, with hit areas that do not overlap the row's own tap target.
- An overflow menu opening near the bottom or right edge of a scroll container will be clipped by the container's overflow, so the menu must escape its ancestor or flip to the opposite side.
- When some rows allow an action and others do not, the columns must still line up. Disabled with an explanation is usually better than absent.
- Tapping or clicking an action must not also trigger the row's own click behaviour, such as opening the record.
- Destructive actions in the row need the same confirmation as they have elsewhere, and must not sit adjacent to a harmless action in the visible set.
- The action column must survive horizontal scrolling on narrow screens — either pinned to the edge or moved somewhere deliberate, never left floating off-screen.
Definition of done
8
Definition of done
8- Every table places row actions in the same position, at the same width.
- The primary actions are visible without hover, focus, or a menu.
- All row actions are reachable and operable by keyboard alone, in visual order.
- An open overflow menu is fully visible regardless of the row's position in a scrolling container.
- Rows the user cannot act on keep the column's alignment.
- Triggering a row action never also activates the row's navigation.
- 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.