Data Table Cell Primitives
Render every kind of table cell the same way, wherever the table happens to be.
What it adds
A shared set of cell renderers for numbers, dates, people, statuses, links, and row actions, used by every table in the app.
What your agent is told to do
5
What your agent is told to do
5-
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.
-
4
Give every cell type an explicit rendering for absent data, for the loading state, and for a value the current user is not permitted to see, and make those three visually distinct from one another.
-
5
Do not put more than one focusable control in a cell without deciding how it is reached. An actions cell with three buttons multiplies the tab stops in a hundred-row table; expose one primary control and put the rest behind a single menu, and leave header pinning to Sticky Table Header rather than adding a second scroll mechanism here.
Edge cases it handles
7
Edge cases it handles
7- Sorting on the displayed string rather than the underlying value puts ten before nine and orders dates alphabetically; every cell must carry a sort value distinct from its label, and relative times must sort on the real timestamp.
- Absent, still loading, and redacted are three different states and must not collapse into one dash. A blank where the user lacks permission reads as no data and leads people to draw the wrong conclusion from the table.
- Cells must stay readable when compact. Truncate with a clear affordance and the full value available on hover and focus, keep it to one line, and make sure the truncation happens on the text rather than clipping the whole cell.
- Row-level keyboard navigation breaks when cells add their own arrow key handling or insert extra tab stops; cell contents must cooperate with the table's existing focus model rather than compete with it.
- Zero, null, and empty string are different values and each needs its own treatment — a zero balance is a fact, an unknown balance is not.
- Long free text and long identifiers must not set the column width; give each cell type a sensible maximum and let the column keep its share.
- Numbers rendered for display must round consistently with what the app exports, or a user reconciling a downloaded file against the screen will find figures that do not agree.
Definition of done
9
Definition of done
9- Every table in the app renders its cells through the shared primitives.
- Sorting, filtering, and export use the raw value, never the formatted string.
- Numbers are right-aligned with consistent precision, and dates respect the user's locale and time zone.
- Missing, loading, and redacted values are visually and textually distinct.
- Each row contributes a predictable number of tab stops regardless of how many actions it has.
- Truncated cells expose their full value on hover and on focus.
- Displayed and exported values agree to the same precision.
- 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.