Row Context Menu Table

One declarative row menu that powers both the "…" dropdown and the right-click context menu.

Give every row a native right-click context menu that mirrors its “…” (kebab) actions — defined once and rendered into both surfaces. Right-click a row, or open the ⋯ menu; both run the same actions.

Overview

Open in

1
"use client"
2

3
import * as React from "react"
4
import { DataTableRoot } from "@/components/niko-table/core/data-table-root"
5
import { DataTable } from "@/components/niko-table/core/data-table"
6
import {
7
  DataTableHeader,
8
  DataTableBody,
9
} from "@/components/niko-table/core/data-table-structure"
10
import { DataTableColumnHeader } from "@/components/niko-table/components/data-table-column-header"
11
import { DataTableColumnTitle } from "@/components/niko-table/components/data-table-column-title"
12
import {
13
  DataTableRowMenuScope,
14
  RowMenuItem,
15
  RowMenuSeparator,
16
  useDataTableRow,
17
} from "@/components/niko-table/components/data-table-row-menu"
18
import { DataTableRowContextMenuSlot } from "@/components/niko-table/components/data-table-row-context-menu-slot"
19
import type { DataTableColumnDef } from "@/components/niko-table/types"
20
import {
21
  DropdownMenu,
22
  DropdownMenuContent,
23
  DropdownMenuTrigger,
24
} from "@/components/ui/dropdown-menu"
25
import { Button } from "@/components/ui/button"
26
import { MoreHorizontal } from "lucide-react"
27

28
type Player = {
29
  id: string
30
  name: string
31
  team: string
32
  status: "Active" | "Injured"
33
}
34

35
const data: Player[] = [
36
  { id: "1", name: "Alex Morgan", team: "Thunder", status: "Active" },
37
  { id: "2", name: "Jordan Lee", team: "Phoenix", status: "Injured" },
38
  { id: "3", name: "Sam Rivera", team: "Dragons", status: "Active" },
39
  { id: "4", name: "Casey Kim", team: "Wolves", status: "Active" },
40
]
41

42
/**
43
 * The row actions, defined ONCE. It reads its row from context via
44
 * `useDataTableRow` and its `RowMenu*` pieces render as a DROPDOWN menu or a
45
 * CONTEXT menu depending on the surface they're mounted in — so the exact same
46
 * `<PlayerRowMenu />` powers both the "⋯" kebab and the right-click menu.
47
 */
48
function PlayerRowMenu({
49
  onView,
50
  onRemove,
51
}: {
52
  onView: (player: Player) => void
53
  onRemove: (player: Player) => void
54
}) {
55
  const player = useDataTableRow<Player>()
56
  return (
57
    <>
58
      <RowMenuItem onClick={() => onView(player)}>View profile</RowMenuItem>
59
      <RowMenuSeparator />
60
      <RowMenuItem variant="destructive" onClick={() => onRemove(player)}>
61
        Remove player
62
      </RowMenuItem>
63
    </>
64
  )
65
}
66

67
export default function RowContextMenuExample() {
68
  const [lastAction, setLastAction] = React.useState(
69
    "Right-click a row, or use the ⋯ menu.",
70
  )
71

72
  const onView = React.useCallback(
73
    (player: Player) => setLastAction(`Viewing ${player.name}`),
74
    [],
75
  )
76
  const onRemove = React.useCallback(
77
    (player: Player) => setLastAction(`Removed ${player.name}`),
78
    [],
79
  )
80

81
  // Declared once — dropped into BOTH the kebab cell and the body's slot.
82
  const rowMenu = <PlayerRowMenu onView={onView} onRemove={onRemove} />
83

84
  const columns = React.useMemo<DataTableColumnDef<Player>[]>(
85
    () => [
86
      {
87
        accessorKey: "name",
88
        meta: { label: "Name" },
89
        header: () => (
90
          <DataTableColumnHeader>
91
            <DataTableColumnTitle />
92
          </DataTableColumnHeader>
93
        ),
94
        cell: ({ row }) => (
95
          <span className="font-medium">{row.original.name}</span>
96
        ),
97
      },
98
      {
99
        accessorKey: "team",
100
        meta: { label: "Team" },
101
        header: () => (
102
          <DataTableColumnHeader>
103
            <DataTableColumnTitle />
104
          </DataTableColumnHeader>
105
        ),
106
        cell: ({ row }) => row.original.team,
107
      },
108
      {
109
        accessorKey: "status",
110
        meta: { label: "Status" },
111
        header: () => (
112
          <DataTableColumnHeader>
113
            <DataTableColumnTitle />
114
          </DataTableColumnHeader>
115
        ),
116
        cell: ({ row }) => row.original.status,
117
      },
118
      {
119
        id: "actions",
120
        size: 56,
121
        enableSorting: false,
122
        enableHiding: false,
123
        cell: ({ row }) => (
124
          <div className="flex justify-end">
125
            <DropdownMenu>
126
              <DropdownMenuTrigger asChild>
127
                <Button
128
                  variant="ghost"
129
                  size="icon"
130
                  className="size-8"
131
                  aria-label={`Open actions for ${row.original.name}`}
132
                >
133
                  <MoreHorizontal className="size-4" />
134
                </Button>
135
              </DropdownMenuTrigger>
136
              <DropdownMenuContent align="end">
137
                {/* Same menu as right-click, rendered as a dropdown. */}
138
                <DataTableRowMenuScope row={row.original} surface="dropdown">
139
                  {rowMenu}
140
                </DataTableRowMenuScope>
141
              </DropdownMenuContent>
142
            </DropdownMenu>
143
          </div>
144
        ),
145
      },
146
    ],
147
    [rowMenu],
148
  )
149

150
  return (
151
    <DataTableRoot data={data} columns={columns} getRowId={row => row.id}>
152
      <div className="space-y-2">
153
        <p className="text-sm text-muted-foreground">{lastAction}</p>
154
        <DataTable>
155
          <DataTableHeader />
156
          <DataTableBody>
157
            {/* Same menu as the ⋯ dropdown, rendered on right-click. */}
158
            <DataTableRowContextMenuSlot>{rowMenu}</DataTableRowContextMenuSlot>
159
          </DataTableBody>
160
        </DataTable>
161
      </div>
162
    </DataTableRoot>
163
  )
164
}

Name	Team	Status
Alex Morgan	Thunder	Active
Jordan Lee	Phoenix	Injured
Sam Rivera	Dragons	Active
Casey Kim	Wolves	Active

Introduction

The composable, shadcn-style way to do row actions: write them once as a small component, then drop that same component into the kebab cell and the body’s context-menu slot. No duplicated item lists, and no (row) => … render function at the call site.

Three pieces make it work:

DataTableRowContextMenuSlot — nest it inside a DataTableBody / DataTableVirtualizedBody. It renders nothing itself; the body detects it and attaches a right-click menu to every row, wrapped in a scope that carries the row.
DataTableRowMenuScope — provides the current row and the surface ("dropdown" or "context") to the pieces nested inside. The context-menu body sets this up automatically; you wrap it around your DropdownMenuContent children for the kebab.
Polymorphic RowMenuItem / RowMenuSeparator / RowMenuSub / … — each renders as the dropdown primitive or the context-menu primitive depending on the surface it reads from context. Compose them like DropdownMenuItems.

Read the row inside your menu component with useDataTableRow<T>(), so the same element works for every row.

Anatomy

1
// 1. Define the actions ONCE — reads its row from context.
2
function PlayerRowMenu({ onView, onRemove }: PlayerRowMenuProps) {
3
  const player = useDataTableRow<Player>()
4
  return (
5
    <>
6
      <RowMenuItem onClick={() => onView(player)}>View profile</RowMenuItem>
7
      <RowMenuSeparator />
8
      <RowMenuItem variant="destructive" onClick={() => onRemove(player)}>
9
        Remove player
10
      </RowMenuItem>
11
    </>
12
  )
13
}
14

15
const rowMenu = <PlayerRowMenu onView={onView} onRemove={onRemove} />
16

17
// 2. Kebab cell — same element, rendered as a dropdown.
18
<DropdownMenuContent align="end">
19
  <DataTableRowMenuScope row={row.original} surface="dropdown">
20
    {rowMenu}
21
  </DataTableRowMenuScope>
22
</DropdownMenuContent>
23

24
// 3. Right-click — same element, rendered as a context menu.
25
<DataTableBody>
26
  <DataTableRowContextMenuSlot>{rowMenu}</DataTableRowContextMenuSlot>
27
</DataTableBody>

Per-row opt-out

To hide the menu for specific rows (locked, read-only, etc.), pass an enabledFor predicate to the slot — return false and that row gets no menu:

1
<DataTableRowContextMenuSlot enabledFor={(row) => !row.isLocked}>
2
  {rowMenu}
3
</DataTableRowContextMenuSlot>

For table-level gating (e.g. no manage permission), simply don’t render the slot.

Installation

The row menu ships with the DataTable core:

pnpm dlx shadcn@latest add @niko-table/data-table

First time using @niko-table? See the Installation Guide to set up the registry.

Row Context Menu Table

Overview

Introduction

Anatomy

Per-row opt-out

Installation

Getting Started

Niko Table

Examples

Contributing