Row actions

Icon buttons for the actions a reader reaches for constantly, a kebab for the rest, one shared modal instead of one per row.

What this solves

The kit shipped only the folded half: RowMenu, DataTable rowMenu, col.actions. Every consumer hand-rolled the visible half, with three different answers to what can be done to a row, and SchemaForm's own rows table rendered five open buttons the kit standard flags on sight.

Use it when

One action reached for constantlyA single visible icon button, no kebab
A mix of common and rare actionsShaded and danger actions visible, the rest in a card kebab
A row that goes somewhere and a row that previewshref plus a shared modal action
Heavy per-row content behind one actionA panel action caching by row id, one open at a time

Rendered

Fixture data; check both themes.

Minimal: one visible action, no kebab

Part
Disc Brake Rotor
Brake Pad Set
Caliper Bracket

Maximal: shade, danger, a card kebab, a shared modal, loading, bricked

Part
Disc Brake Rotor
Brake Pad Set
Caliper Bracket

Navigation rows: href plus a preview modal

Part	SKU
Disc Brake Rotor	RT-330
Brake Pad Set	BP-118
Caliper Bracket	CB-402

SchemaForm's own rows table

Checks2 rows

Check	Passed

A shared cached panel

Part
Disc Brake Rotor
Brake Pad Set
Caliper Bracket

patterns/row-actions/example.tsx

Copy this into a fresh route and it renders as above.

1"use client";
2
3import {
4  Card,
5  Kicker,
6  Modal,
7  ModalBody,
8  ModalTitle,
9  RowActions,
10  SchemaForm,
11  Table,
12  useModal,
13  type RowAction,
14  type TableColumn,
15} from "@versable-git/ui";
16import { useMemo, useState, type ReactNode } from "react";
17
18const PREVIEW_MODAL = "row-actions-preview";
19
20type Part = { id: number; name: string; sku: string; archived?: boolean };
21const PARTS: Part[] = [
22  { id: 1, name: "Disc Brake Rotor", sku: "RT-330" },
23  { id: 2, name: "Brake Pad Set", sku: "BP-118" },
24  { id: 3, name: "Caliper Bracket", sku: "CB-402", archived: true },
25];
26
27/** The one action a caller reaches for most, alone: no kebab to hide it behind. */
28function Minimal() {
29  const [opened, setOpened] = useState<string | null>(null);
30  const columns: TableColumn<Part>[] = [
31    { key: "name", header: "Part" },
32    {
33      key: "actions",
34      header: "",
35      rawHeader: true,
36      align: "right",
37      width: "48px",
38      render: (row) => <RowActions row={row} actions={[{ key: "view", label: "View", icon: "Eye", onSelect: (r) => setOpened(r.name) }]} />,
39    },
40  ];
41  return (
42    <div className="flex flex-col gap-2">
43      <Table columns={columns} rows={PARTS} rowKey={(r) => r.id} density="compact" />
44      {opened && <p className="text-base-content/65 text-xs">Opened: {opened}</p>}
45    </div>
46  );
47}
48
49/** Every shape at once: a shaded and a danger action visible, a card kebab, a shared modal, a loading action, and a bricked one. */
50function Maximal() {
51  const { modalArgs } = useModal<Part>();
52  const [approved, setApproved] = useState<ReadonlySet<number>>(new Set());
53  const [duplicating, setDuplicating] = useState<number | null>(null);
54
55  const duplicate = (row: Part) => {
56    setDuplicating(row.id);
57    setTimeout(() => setDuplicating(null), 900);
58  };
59
60  const columns: TableColumn<Part>[] = [
61    { key: "name", header: "Part" },
62    {
63      key: "actions",
64      header: "",
65      rawHeader: true,
66      align: "right",
67      width: "48px",
68      render: (row) => {
69        const actions: RowAction<Part>[] = [
70          {
71            key: "approve",
72            label: approved.has(row.id) ? "Approved" : "Approve",
73            icon: "Check",
74            shade: true,
75            color: "success",
76            active: approved.has(row.id),
77            onSelect: (r) => setApproved((prev) => new Set(prev).add(r.id)),
78          },
79          { key: "preview", label: "Preview", icon: "Eye", modal: { id: PREVIEW_MODAL, args: (r) => r } },
80          { key: "delete", label: "Delete", icon: "Trash", danger: true, onSelect: () => {}, placement: "visible" },
81          {
82            key: "duplicate",
83            label: "Duplicate",
84            icon: "Copy",
85            loading: duplicating === row.id,
86            placement: "menu",
87            onSelect: duplicate,
88          },
89          {
90            key: "archive",
91            label: "Archive",
92            icon: "Ignore",
93            placement: "menu",
94            disabled: row.archived,
95            disabledReason: row.archived ? "Already archived" : undefined,
96            onSelect: () => {},
97          },
98        ];
99        return (
100          <RowActions
101            row={row}
102            actions={actions}
103            visible={3}
104            menu={(r, folded) => (
105              <Card compact shadow="none" title={<span className="text-sm font-medium">{r.name}</span>} className="w-56">
106                <div className="flex flex-col gap-1">
107                  {folded.map((a) => (
108                    <button
109                      key={a.key}
110                      type="button"
111                      disabled={a.disabled}
112                      className="hover:bg-base-200 rounded-field flex items-center justify-between px-2 py-1.5 text-left text-sm disabled:opacity-40"
113                      onClick={() => !a.disabled && a.onSelect?.(r)}
114                    >
115                      <span>{a.label}</span>
116                      {a.disabledReason && <span className="text-base-content/65 text-xs">{a.disabledReason}</span>}
117                    </button>
118                  ))}
119                </div>
120              </Card>
121            )}
122          />
123        );
124      },
125    },
126  ];
127
128  return (
129    <div className="flex flex-col gap-2">
130      <Table columns={columns} rows={PARTS} rowKey={(r) => r.id} density="compact" />
131      <Modal elementId={PREVIEW_MODAL} size="sm">
132        <ModalTitle title={modalArgs?.name ?? "Part"} subtitle={modalArgs?.sku} Icon="Eye" />
133        <ModalBody>
134          <p className="text-base-content/70 text-sm">The shared modal reads whichever row opened it from `modalArgs`.</p>
135        </ModalBody>
136      </Modal>
137    </div>
138  );
139}
140
141/** A row that goes somewhere, and a row that opens a preview without leaving the page. */
142function NavigationRows() {
143  const { modalArgs } = useModal<Part>();
144  const columns: TableColumn<Part>[] = [
145    { key: "name", header: "Part" },
146    { key: "sku", header: "SKU", render: (row) => <span className="font-mono text-xs">{row.sku}</span> },
147    {
148      key: "actions",
149      header: "",
150      rawHeader: true,
151      align: "right",
152      width: "48px",
153      render: (row) => (
154        <RowActions
155          row={row}
156          actions={[
157            { key: "open", label: "Open", icon: "Right", href: (r) => `#part-${r.id}` },
158            { key: "preview", label: "Preview", icon: "Eye", modal: { id: `${PREVIEW_MODAL}-nav`, args: (r) => r } },
159          ]}
160        />
161      ),
162    },
163  ];
164  return (
165    <div className="flex flex-col gap-2">
166      <Table columns={columns} rows={PARTS} rowKey={(r) => r.id} density="compact" />
167      <Modal elementId={`${PREVIEW_MODAL}-nav`} size="sm">
168        <ModalTitle title={modalArgs?.name ?? "Part"} Icon="Eye" />
169        <ModalBody>
170          <p className="text-base-content/70 text-sm">Same shared-modal pattern; `Open` instead navigates via `href`.</p>
171        </ModalBody>
172      </Modal>
173    </div>
174  );
175}
176
177const REVIEW_SCHEMA = {
178  type: "object",
179  properties: {
180    checks: {
181      type: "array",
182      title: "Checks",
183      items: { type: "object", properties: { label: { type: "string", title: "Check" }, passed: { type: "boolean", title: "Passed" } } },
184    },
185  },
186};
187
188/** The kit's own SchemaForm rows table adopts RowActions: a details toggle and remove stay visible, reorder and duplicate fold. */
189function SchemaFormRows() {
190  const [value, setValue] = useState<Record<string, unknown>>({
191    checks: [
192      { label: "Torque spec", passed: true },
193      { label: "Corrosion coating", passed: false },
194    ],
195  });
196  return <SchemaForm schema={REVIEW_SCHEMA} value={value} onChange={setValue} />;
197}
198
199/** One `panel` action per row, its content cached by row id, only one open at a time. */
200function SharedCachedPanel() {
201  const cache = useMemo(() => new Map<number, { label: string; count: number }>(), []);
202  const detailsFor = (row: Part) => {
203    if (!cache.has(row.id)) cache.set(row.id, { label: `${row.name} fitment`, count: row.id * 3 });
204    return cache.get(row.id)!;
205  };
206  const columns: TableColumn<Part>[] = [
207    { key: "name", header: "Part" },
208    {
209      key: "actions",
210      header: "",
211      rawHeader: true,
212      align: "right",
213      width: "48px",
214      render: (row) => (
215        <RowActions
216          row={row}
217          actions={[
218            {
219              key: "fitment",
220              label: "Fitment",
221              icon: "Table",
222              panel: (r) => {
223                const d = detailsFor(r);
224                return (
225                  <div className="flex w-48 flex-col gap-1 p-3">
226                    <Kicker>{d.label}</Kicker>
227                    <p className="text-sm">{d.count} vehicles</p>
228                  </div>
229                );
230              },
231            },
232          ]}
233        />
234      ),
235    },
236  ];
237  return <Table columns={columns} rows={PARTS} rowKey={(r) => r.id} density="compact" />;
238}
239
240function Example({ label, children }: { label: string; children: ReactNode }) {
241  return (
242    <div className="flex flex-col gap-2">
243      <Kicker>{label}</Kicker>
244      {children}
245    </div>
246  );
247}
248
249export function RowActionsPatterns() {
250  return (
251    <div className="flex flex-col gap-6">
252      <Example label="Minimal: one visible action, no kebab">
253        <Minimal />
254      </Example>
255      <Example label="Maximal: shade, danger, a card kebab, a shared modal, loading, bricked">
256        <Maximal />
257      </Example>
258      <Example label="Navigation rows: href plus a preview modal">
259        <NavigationRows />
260      </Example>
261      <Example label="SchemaForm's own rows table">
262        <SchemaFormRows />
263      </Example>
264      <Example label="A shared cached panel">
265        <SharedCachedPanel />
266      </Example>
267    </div>
268  );
269}
270

Where it ships

packages/ui/src/table/row-actions.tsxRowActions, RowAction
versable-forge-v6/src/components/row-actions.tsxthe console's hand-rolled sibling this promotes

App-specific: Real callers own their own row shape and action handlers; this page fixes a small parts fixture so the chrome is what's on display.