Data table

Row and row actions

Each row opens its record on click; the end of the row holds a quiet Edit (opens quick edit) and the ⋯ menu for the rest. Rows can expand to show detail.

Live specimen

Lifted from the approved family page at build time; interact with it.

Row and row actions

The whole row is the target for the product name; the actions sit at the right edge.

default
Navy birdseye two-piece suitnavy-birdseye-two-piece
HS 81045Crystal Springs
Availablev4
£1,150€1,320$1,450
2 Oct
hover
Navy birdseye two-piece suitnavy-birdseye-two-piece
HS 81045Crystal Springs
Availablev4
£1,150€1,320$1,450
2 Oct
focus
Navy birdseye two-piece suitnavy-birdseye-two-piece
HS 81045Crystal Springs
Availablev4
£1,150€1,320$1,450
2 Oct
selected
Navy birdseye two-piece suitnavy-birdseye-two-piece
HS 81045Crystal Springs
Availablev4
£1,150€1,320$1,450
2 Oct
disabled
Stone linen jacketstone-linen-jacket
HS 30612Irish Linen
Draftv1
£690€795$870
Yesterday
Saving…
error
Charcoal herringbone jacketcharcoal-herringbone-jacket
VBC 218.1003Perennial
Availablev2v3 ready
£780€895$985
29 Sep
Status not saved.

Charcoal herringbone jacket has no EUR price, so it cannot be Available. Add the price, then try again.

Row actions

Quick edit (pencil) opens the side sheet; the menu holds the rest. Destructive items sit last, under a divider.

Usesshadcn TableRowDropdownMenudata-state=selected.dt-ra.mi--motion-pop-in

from families/data-table/#rows