Dropdown table

A dropdown that opens a native <table> for picking row(s). controlMonoDataDropdown wraps controlMonoTable (exposed as dd.grid), so the panel's table controls bind with :control-table.prop="dd.grid". Bind the field with :control-data-dropdown.prop="dd".

Control

controlMonoDataDropdown owns selection/value (it wraps a controlMonoTable, exposed as dd.grid); bind the field with :control-data-dropdown and read dd.modelValue from outside.

Because the options are forwarded to the wrapped grid, every controlMonoTable option works here too — including searchValue, which names the searched columns and takes an array or a comma string. Omit it and the panel searches '*', every top-level field, like any other grid. The panel searches through a slotted <mono-table-search>, so its element-level search-value applies here as well.

controlMonoDataDropdown(data, { props }) declares every element's props in one place — the same shape controlMonoTable and controlMonoForm use — so the field is wired with only :control-data-dropdown.prop="dd". props.dropdownTable targets the field itself (label, placeholder, clearable, panel size…); every other key targets the panel and is forwarded verbatim to the wrapped grid. The panel's mono-table-* still bind :control-table.prop="dd.grid" — the panel really is a grid.

Basic

Single-select over a local array, with everything declared centrally.

Opening the panel puts the caret straight into the <mono-table-search slot="search">; closing it hands focus back to the field. Set :auto-focus-search="false" to keep focus on the field — useful on touch, where focusing an input raises the virtual keyboard over the rows.

Keyboard

The panel has two zones — search box and row list. Tab moves between them; ↑/↓ move the highlight (scrolling it in), Enter selects it, Esc closes. The highlighted row shows a leading bar (--mono-dropdown-table-cursor-width / -color); searching or paging moves it onto the new first row.

Sizes

xs–xxl, the same scale as <mono-select> and <mono-tag-input>.

Variants

outlined (default), filled and underlined.

underlined focuses with a soft glow under the line rather than a ring around the field — tune it with --mono-dropdown-table-underline-glow (default 0 5px 6px -6px).

Colors

Every built-in color tints the focus ring, open state and selected-row highlight.

States

disabled, readonly (opens but can't change) and required.

Validation

validation-state (valid / invalid / warning) with a validation-message.

Clearable

clearable shows a ✕ that resets the selection (emitting mno-change with an empty value).

Appearance

Same size / variant / color / validation-state / label props as <mono-select>, so the two look identical.

Field & panel size

The field width is a css-size prop; the panel is sized separately by :dropdown.prop="{ width, height }" — so a narrow field can open a wide grid.

Placement

The panel stays inside the viewport on its own, so a field low on the page — or in a grid row below the fold — is never clipped:

• flip (default true) opens the panel upward when there isn't room below.
• shift (default true) slides it along the cross axis so it doesn't overflow a screen edge.
• When neither side has room for the full panel, it opens on the roomier side and shrinks to fit, scrolling the table internally rather than running off-screen.

placement sets the preferred side + alignment (default bottom-start); with flip on it's a preference, not a guarantee. offset (default 6) is the gap between the field and the panel.

The resolved side is reflected on the root as is-top / is-bottom, so you can style a flipped panel.

Multiple

Multi-select with chips + a "+N more" overflow, a checkbox column and a select-all header checkbox.

Custom keys

keyExpr picks the value field; displayExpr (field name or (row) => string) picks the text.

Customized

cssClass appends a class to each field part (root / label / value / message / trigger / …).

CSS variables

Themed through --mono-dropdown-table-* custom properties (they inherit and pierce the shadow boundary).

Variable	Default	Controls
--mono-dropdown-table-cursor-width	3px	Keyboard-cursor bar on the highlighted panel row
--mono-dropdown-table-cursor-color	focus color	Colour of that bar

Event: change

mno-change carries modelValue, value and the resolved selectedItems ({ key, text, data }[]).

Event log

A live log of mno-change as rows are picked and cleared — clearing emits mno-change with an empty value (there is no separate mno-clear).

Remote DataSource

Bound to a remote OData source; selected keys resolve to display text with a filter … in load, and search runs server-side.

Scroll paging

Swap the numbered pager for a scrolling one on a flat grid — bind <mono-table-paging type="…"> to dd.grid, place it in the body slot right after the <table>, and give the panel a bounded :dropdown.prop="{ height }".

Infinity scroll

type="infinity-scroll" appends the next page onto dd.grid.items as you near the bottom — render it as a plain v-for.

Against a remote source each scroll fetches the next server page.

Virtual scroll

type="virtual-scroll" keeps only the visible rows in the DOM; render spacer <tr>s from virtualPadTop / virtualPadBottom and pin a fixed :row-height.

The same windowing over a remote source.

Types

controlMonoDataDropdown is also exported as monoDataDropdown, and :control-data-dropdown is also accepted as :data-dropdown — the older spellings still work.

Importimport { DropdownTableProps } from 'mono-helper'

Prop	Value	Default	Description
dataDropdown	MonoDropdownController<any>	—	The dropdown controller. Bind with `.prop`: `:data-dropdown.prop="dd"`.
controlDataDropdown	MonoDropdownController<any>	—	Renamed — `:control-data-dropdown` / `:controlDataDropdown` alias `dataDropdown`.
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	—	Visual size of the field.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'	—	Color theme applied to the field (focus ring / accent).
variant	'underlined' | 'outlined' | 'filled'	—	Field style variant.
label	string	—	Text label shown above the field.
placeholder	string	—	Placeholder shown in the field when nothing is selected.
helperText	string	—	Helper text shown below the field.
validationState	'warning' | 'default' | 'valid' | 'invalid'	—	Validation state controlling the field's appearance.
validationMessage	string	—	Validation message shown below the field.
errorMessage	string	—	Error message shown below the field (forces the invalid state).
successMessage	string	—	Success message shown below the field (forces the valid state).
required	boolean	—	Mark the field required (shows a `*` next to the label).
disabled	boolean	—	Disable the control (no open, no selection).
readonly	boolean	—	Read-only — the panel opens but selection can't change.
clearable	boolean	—	Show a clear (✕) button in the field when there is a value.
multiple	boolean	—	Multi-select — array value + chips. Falls back to the controller's `multiple`.
max	number	—	Max chips shown inline before a "+N more" overflow (multi). Default `5`.
modelValue	unknown	—	v-model value — scalar (single) or array (multi). Bind `:model-value` + `@mno-change`.
width	string | number	—	Field sizing (the trigger + wrapper). A CSS length string (`"320px"`, `"80%"`) or a number (px). Distinct from `dropdown`, which sizes the popup panel.
height	string | number	—	—
minWidth	string | number	—	—
maxWidth	string | number	—	—
minHeight	string | number	—	—
maxHeight	string | number	—	—
dropdown	DropdownPanelOptions	—	Sizes the popup panel only (independent of the field). Bind with `.prop`.
placement	'left' | 'right' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'	—	Preferred side + cross-axis alignment of the panel, e.g. `"bottom-start"` (default) or `"top-end"`. Same 12 values as `<mono-dropdown>`. With `flip` left on this is only a *preference* — the panel still moves out of the way of a viewport edge.
flip	boolean	—	Open on the opposite side when the preferred one lacks room — e.g. a field near the bottom of the viewport drops UPWARD instead of being clipped. Default `true`.
shift	boolean	—	Slide the panel along the cross axis so it stays inside the viewport — e.g. a field near the right edge keeps its full width instead of overflowing. Default `true`.
offset	number	—	Gap between the field and the panel, in px. Default `6`.
autoFocusSearch	boolean	—	Focus the panel's search box (a `<mono-table-search slot="search">`) as soon as the panel opens, so the user can type straight away. Default `true`. Turn it off when the focus would be unwelcome — e.g. on touch devices, where focusing an input pops the virtual keyboard over the rows.
stayOpen	boolean	—	Exempt this dropdown from every automatic close — clicking or focusing anything outside it, which includes opening another one. Not a lock: its own trigger, Escape and picking a row still close it.
cssClass	DropdownTableCssClass	—	Per-part class overrides. Object, or a JSON string via the `css-class` attribute.
cssClassName	string	—	A single class added to the root (the string form of `css-class`).
visible	boolean	—	Whether the control is shown. Defaults to `true`.
visibleType	'invisible' | 'none'	—	How it hides when `visible` is `false`. Defaults to `'none'`.