RowActions

One row’s actions: at most one inline primary action, the rest in an overflow menu behind a 30px “more” button. It never wraps, so the row keeps its height; destructive items sort last, behind a separator. The menu is a WAI-ARIA menu: arrows, Home/End, typeahead, Escape.

Import

import { RowActions } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/row-actions.

Usage

<RowActions
  label="Acciones de Ana Quispe"
  primary={<Button size="sm">Ver ficha</Button>}
  items={[
      { id: "delete", label: "Eliminar", tone: "danger", icon: <Trash2 />, onSelect: fn() },
      { id: "edit", label: "Editar", icon: <Pencil />, onSelect: fn() },
      { id: "copy", label: "Duplicar", icon: <Copy />, onSelect: fn(), disabled: true },
    ]}
/>

Props

Prop	Type	Default	Description
label *	string		Accessible name of the overflow trigger. Name the row: “Actions for Ana Quispe”.
primary	ReactNode		At most one inline action, typically a Button size="sm": the one thing the row is mostly for.
items *	readonly RowActionItem[]		The rest, in the overflow menu. No trigger renders when it is empty.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Primary Only
• In Clickable Row

Source

packages/ui/src/containers/row-actions/row-actions.tsx