Data Table Row Actions

Contextual row action menu with links, async actions, permissions, and toast feedback.

Installation

bash

pnpm dlx shadcn@latest add @cs/data-table-row-actions

Usage

tsx

import { DataTableRowActions } from "@/components/cs/data-table-row-actions"

tsx

<DataTableRowActions row={{ id: "1" }} actions={[{ label: "edit", link: "/items/1/edit" }]} onRedirect={(url) => router.push(url)} />

API Reference

DataTableRowAction

Configuration for an action in a data-table row action menu.

tsx

type DataTableRowAction = {
	/** Translation key used as the action label. */
	label: string
	/** Internal Next.js link opened by the action. */
	link?: string
	/** External link, including a URL that uses a custom protocol. */
	rpLink?: string
	/** Omits the action from the menu when true. */
	hidden?: boolean
	/** Icon displayed before the action label. */
	icon?: ReactNode
	/** Indicates that the action is available only to agents. */
	agentOnly?: boolean
	/** Runs after a successful asynchronous action. */
	callback?: () => void
	/** Asynchronous action that returns toast and optional redirect data. */
	action?: () => Promise<ActionResult>
}

DataTableRowActions

Renders a contextual action menu for a data-table row.

Props

Name	Type	Default	Description
actions *	TRowAction[]	-	Actions displayed in the menu, excluding actions marked as hidden.
className	string	-	Adds classes to the action-menu trigger button.
disabled	boolean	-	Disables the menu trigger and all menu actions.
link	(props: { children: ReactNode; href: string; className?: string }) => ReactNode	-	-
onPermission	(action: TRowAction) => boolean	-	Returns whether an action should be shown as disabled.
onRedirect *	(url: string) => void	-	Handles a redirect URL returned by an asynchronous action.
row *	{ id: string }	-	Data-table row that owns the action menu.
translationsRootKey	string	"table"	Namespace used to resolve each `actions.<action.label>` key. Action labels should start with a lowercase letter.

Dependencies

cn lucide-react next next-intl @cs/action-result @cs/toast @shadcn/button @shadcn/dropdown-menu