One ellipsis trigger per table row listing every action by name, with hover intent, a danger separator, and busy and flash states for work that outlives the closed menu.
DefaultBusyFlashDanger
| Unit | ||
|---|---|---|
| Requests | /s | |
| Response time | ms | |
| CPU load | % |
Open a row menu — only one stays open
<RowActionsMenu items={[ { key: 'view', icon: 'eye', label: 'View details', onclick: () => open(row) }, { key: 'delete', icon: 'trash', label: 'Delete', onclick: () => remove(row), danger: true }]} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { RowActionsMenu } from '@chanrg/4ui';<RowActionsMenu items={[ { key: 'view', icon: 'eye', label: 'View details', onclick: () => open(row) }, { key: 'delete', icon: 'trash', label: 'Delete', onclick: () => remove(row), danger: true }]} />Busy
Set busy while row work runs — the menu has already closed, so the trigger reports progress.
worker-07
The trigger keeps reporting progress after the menu has closed
<RowActionsMenu {items} busy />Flash
Set flash after an action resolves to tint the trigger green or red.
api-gateway
flash="success" tints the trigger once, then settles
<RowActionsMenu {items} flash="success" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array<RowAction | false | null> | [] | Falsy entries are ignored, so call sites can inline `cond && {…}`. |
item.key / label / icon | string | — | Stable key (the list is keyed), visible text, optional glyph. |
item.danger / disabled / hidden / title | boolean / string | false | Red text plus a divider, gating, removal, and a reason tooltip. |
busy / flash | boolean / 'success' | 'error' | false / null | Trigger spinner and post-action tint — the row reports back after the menu has closed. |
hover | boolean | true | Hover-to-open; turn off for costly actions. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Arrow keys skip disabled rows; Enter, Space, Home, End and Escape all behave as in a menu.
- Only one row menu is open at a time — opening one closes its neighbour.
- A hover-opened menu never steals focus, so typing in a filter box is uninterrupted.