Mobile layout

mobileMode picks what the mobile breakpoint switches to — 'card' for stacked cards, or 'list' for a collapsed row per item that expands to reveal its body fields. Both read the exact same AdaptiveField configuration:

<AdaptiveTable :table="table" :fields="fields" item-key="id" mobile-mode="list" />

Try both below — the switch forces the breakpoint so you can compare without resizing the window:

View

Desktop Mobile

Mobile layout

Cards Expandable list

What's shared, what isn't

mobile.role, mobile.order, mobile.showLabel and mobile.block all behave identically in both modes — there's nothing to duplicate or adjust when switching mobileMode:

• role decides what goes where: title/subtitle become the summary, body becomes the part that's hidden until expanded (in card mode, body is just always visible instead).
• order, showLabel and block (own line vs. sharing a wrapped line with other body fields) apply the same way to the body fields once a row is open.

The only actual difference between the two is the summary itself: in card mode title and subtitle stack as a heading and a secondary line above the body; in list mode they sit side by side on a single collapsed row, since that row also needs room for the expand toggle.

Pick list when a reviewer wants to scan a summary line per row without losing the table's density, and only open the ones they need to check in detail.

Forcing the breakpoint

mobileBreakpoint accepts a BreakpointName ('sm' by default) or a plain number compared against the viewport width. Passing a number is how the demo above forces mobile rendering regardless of your actual window size — set it far above any real viewport (99999) to force mobile, or at 0 to force desktop. It's a regular reactive prop, so it can be driven by application state, not just a fixed value.