Table Row Context Menu — Real Right-Click contextmenu Handling (JS)

Desktop apps use right-click context menus constantly; most web tables ignore the gesture entirely and let the browser's generic menu appear instead. This snippet intercepts it properly: right-clicking a table row suppresses the native browser menu and opens a real custom one, positioned at the cursor, with Edit, Duplicate, and Delete actions that genuinely mutate the row data and re-render — all in plain HTML, CSS, and vanilla JavaScript.

Intercepting the real contextmenu event

The table body listens for the native contextmenu event and calls e.preventDefault() the moment it fires on a row — this is the one line that actually suppresses the browser's own right-click menu; without it, both menus would fight for the same click. Because it's the genuine contextmenu event (not a click-and-hold hack or a visible "⋮" button), the interaction feels native: right-click anywhere on the row, not just a specific icon, opens the menu.

Positioned at the cursor, clamped to the viewport

openMenu() reads e.clientX/e.clientY and sets the menu's position: fixed coordinates directly to the click point, so it opens exactly where the user right-clicked — then clamps both axes against window.innerWidth/innerHeight so a right-click near the edge of the screen never renders the menu partially off-screen, which is what a naive "always position at cursor" implementation gets wrong.

Real mutations, not decorative buttons

Each menu action operates on the actual ROWS array: Edit prompts for a new name and writes it back to the matching record by id; Duplicate splices a cloned row (with a fresh id) directly after the original; Delete splices the row out entirely. Every action is followed by render(), which rebuilds the table body from the mutated array — so the table you see after clicking Delete has genuinely lost that row from the underlying data, not just visually hidden it.

Closes the way users expect

The menu closes on an outside click, on Escape, on right-clicking elsewhere (so a new right-click doesn't stack a second menu on top), and on scroll (since a fixed-position menu would otherwise drift away from the row it belongs to). This set of dismissal paths is what separates a context menu that feels reliable from one that leaves stray panels floating on screen.

Visual feedback on the target row

The row under the cursor gets an rcm-active highlight while its menu is open, so it's unambiguous which row Edit/Duplicate/Delete will affect — important once a menu is positioned near the cursor rather than anchored to the row itself. Pair this with a selectable table for multi-row bulk actions, or a row detail panel for a left-click drill-down alongside this right-click menu.