Context Menu

Table Row Menu

A context menu for a table row: the row takes focus and a highlight, and the call works both with the mouse and with the menu key, which carries no cursor coordinates.

What you can change

  • the table caption through caption and its hint tail through captionHint
  • the rows through rows
  • the column headings through columnText, the commands through actions and the delete caption through deleteLabel — Russian by default

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.
AI
1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/contextmenu-006?lang=en&theme=dark

2Paste into the chat
3Get it in your project

Not sure where to paste it? Step-by-step guide

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

Loading…

For developers

The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.

Technical notes

One file, zero dependencies, the --vibeui-contextmenu-006-* palette. Client component: useState holds the current row and the coordinates. The rows get a tabIndex and aria-selected, and the highlight lives while the popover is open and goes out on the toggle event. The menu key and Shift+F10 arrive through the same contextmenu event but with zero coordinates — in that case the menu lands at the bottom left edge of the row itself rather than in the corner of the screen. The menu is an HTML popover, so Escape and outside clicks come from the browser; the header carries the row name, and the deletion is set off by a line and coloured on its text. The theme comes from the surrounding color-scheme through light-dark(), and the table has no background of its own by default.

Tags

  • contextmenu
  • table
  • row
  • keyboard
Component source

The same file your agent installs. Here in case you would rather copy it by hand.

Loading…