Table

A headless, native-<table> helper. controlMonoTable wraps a DataSource or a plain array and small controls (<mono-table-search>, <mono-table-paging>, <mono-table-sort>, …) drive it — bind each with :control-table. Declare every control's props in the controller's props block and each element needs only :control-table.prop="table"; props.th holds one entry per column, which you loop yourself from a state ref. Grid-as-a-document lives in Export Table.

Control

field is the identity every element matches on, which is why <mono-table-th>, <mono-table-sort field> and <mono-table-summary field> need nothing else. Pushing to table.props().th adds a column at runtime.

Setting props on the elements still works

Writing props directly on a mono-table-* element is still supported, as are the columns and summary options. Where both declare the same key, the controller wins.

Basic

Native table with search, page size, info and paging on one controller.

External control

Filtering the DataSource directly still updates the table via its changed event.

Colors

A .mono-table-{color} class on the wrapper recolors the whole table.

Search

<mono-table-search> renders mono-input's markup, so it takes the same appearance props — size, color, variant, width, validation, etc. (see Types) — and matches an input beside it in a toolbar. clearable resets the grid immediately, skipping the debounce.

Naming the searched fields

You don't have to. With no searchValue, a grid searches '*' — every top-level field — so search works out of the box. Set it to narrow that down.

searchValue names the columns a term matches. It takes an array or a comma-separated string — a comma can't appear in a path or a pattern, so the two forms are equivalent:

controlMonoTable(rows, { searchValue: ['Company.Name', 'Transaction.[*].Price', '*.[*].*'] })
controlMonoTable(rows, { searchValue: 'Company.Name,Transaction.[*].Price,*.[*].*' })

It's the same name mono-select and mono-tag-input use, so an expression is portable between all of them. The same option works on controlMonoDataDropdown, which forwards its options to the grid it wraps.

You can also declare it next to the search box instead of in the options — as an attribute, a .prop binding, or centrally through props.search:

vue

<mono-table-search :control-table.prop="table" search-value="Company.Name,*.[*].*" />

controlMonoTable(rows, { props: { search: { searchValue: ['Company.Name', '*.[*].*'] } } })

An element-level value replaces the controller option rather than merging with it, so a search box can deliberately narrow what the grid searches. table.setSearchValue(…) does the same from code, and table.searchValue() reads back the resolved list — note that returns the fields; the typed query text is table.searchTerms.

searchExpr is the same thing

The grid originally called this searchExpr, and that spelling still works everywhere — as the option (plus the kebab forms search-value / search-expr), and as table.searchExpr() / table.setSearchExpr(). Passing more than one spelling of the option merges them, de-duplicated by field. New code should use searchValue.

What the default does, exactly

'*' is a mono-side notion: it is expanded against the rows the grid holds into a list of real column names before anything is sent, so no * ever reaches an OData URL.

That expansion is type-aware. On an in-memory source every leaf is kept, so typing 2 can match a numeric Id. On a remote source only string columns are emitted — contains(Price,'x') is not valid OData and would reject the whole request — and the shape is read from the rows already loaded, so a field absent from that sample isn't covered. Give such a column an explicit entry or a { field, custom } builder.

The default also steps aside when it shouldn't apply: if the DataSource itself declares a searchExpr, the grid leaves the search to it and table.searchValue() returns undefined. searchValue: [] suppresses the default without filtering anything away — to offer no search at all, simply don't render a <mono-table-search>.

Vue SFC

Search contexts

suggestion pins the term to one column (rows auto-detected from <mono-table-th>); multi-context stacks picks as removable chips — OR within a column, AND across columns. Too many chips collapse into a See All trigger (max-chips, more-label). Keyboard: Tab toggles input/list, ↑/↓ move, Enter applies, Esc closes.

Filter builder

Slot a <mono-filter-builder slot="filter-builder"> into the search — a chevron reveals it and its Apply drives the grid. Let the grid own the controller: controlMonoTable({ filterBuilder }) exposes table.filterBuilder to bind (the field list is derived from the <mono-table-th> columns). With multi-context, Apply renders one removable Filter chip (filter-label); without it, the grid just filters. The chevron, suggestion list and chips panel are mutually exclusive; each closes on Esc / outside-click.

filterBuilder takes every controlMonoFilterBuilder option, props included — so the builder's own props are declared in the same block and read back off the grid-owned controller:

const table = controlMonoTable<Row>(null, {
  filterBuilder: {
    fields: [{ field: 'Code', caption: 'Code' }],
    props: { size: 'sm', width: '100%', maxHeight: 260 },
  },
})

table.filterBuilder?.props()                  // { size: 'sm', width: '100%', maxHeight: 260 }
table.filterBuilder?.setProps({ size: 'lg' }) // the slotted element re-applies

Wildcards and custom search clauses

'*' searches every field without listing them. Patterns read literally, segment by segment — '*.*' is an object expand, '*.[*].*' an array one.

searchValue: ['*', '*.[*].*']   // or the comma string '*,*.[*].*'

An entry can instead build its own clause, for a column contains can't search — a boolean, or a code the user never types. An explicitly named field always wins over a pattern, in either order.

searchValue: [
  '*',
  { field: 'Active', custom: ({ field, value }) => `${field} eq ${value}` },
  { field: 'Month',  custom: ({ field, value }) => [field, '=', MONTHS.indexOf(value)] },
]

The custom runs for every term — return null to opt the column out of one. A filter array works on remote and array sources; a raw OData string is remote-only; a (row) => boolean is array-only. A wildcard only emits clauses for string columns on a remote source (contains(Price,'x') is invalid OData), so give a non-text column an explicit entry. Neither is honoured in server-group mode.

Sorting

Give a column sort in props.th and an arrow appears beside its caption. The gesture decides how many keys you get:

Click the arrow — always single-key. It cycles asc → desc → none and that column becomes the entire sort, so clicking one collapses a multi-key sort back down.
Right-click the header — opens the column menu; its Sort › row cascades into Ascending / Descending / Clear / Clear all sorting. Picking a direction here appends, so Id then Name sorts by both ($orderby=Id desc,Name asc) and a <sup> marks each column's precedence. This is the only way to build a multi-key sort from the UI.

showIcon: false moves the single-sort trigger from the arrow onto the caption (right-click still reaches the menu); order seeds the direction — several columns may each seed one and they combine; index pins precedence; noClear cycles asc ↔ desc only and drops the submenu's per-column Clear row. Driving it from code, table.setSort(field, order) replaces and table.setSort(field, order, { multi: true }) appends. The standalone <mono-table-sort field> renders the control outside a <mono-table-th> and behaves identically.

Editable rows

Mark a column editable: true in props.th and author the editor in its <td> — the <tr> only needs :data-row-key. editableTrigger picks the gesture ('click' default, 'double-click' to leave single clicks free); it's a controller option, and clicks on an editor or button never open the row, so per-row Edit/Delete keep working. The caret lands in the cell you clicked (falling back to the first editable one); Tab walks from there, rolling into the next row.

Seamless editors

A <td> that contains a mono form control is auto-flattened into the cell — no border, radius, background or height of its own, so the text doesn't shift when editing starts (the focused cell gets a 2px accent underline). Nothing to switch on; re-assert the --theme-* / --mono-input-* vars on a cell to keep its boxed look. The Manager column is a <mono-dropdown-table> in the cell — render it with v-if, since one shared dropdown reflects one row at a time.

Tap Tab for the next column; hold Tab + arrow to move one cell — ←/→ in the row, ↑/↓ to the same column of the next row. Arrows never wrap. Enter opens the focused editor, Esc closes a popup then leaves edit mode. editorNavKeys: 'native' opts out for the browser's own Tab order; table.moveEditor(dir) drives a move from your own buttons.

Editing a DataSource

Staged edits against a bound DataSource — Save flushes them with store.update (OData PATCH), not per keystroke.

Row-level CRUD (`form()`)

table.form().add/edit/delete().apply() stages whole rows and commits them without a full reload; showForm: true drops an editable row into the grid to fill in place.

This grid uses editableTrigger: 'double-click' so single clicks stay free for the row's own Edit / Delete buttons — though the trigger ignores clicks on controls either way, and a showForm add-row renders its editors with no trigger at all.

The same UX bound to a DataSource — apply() reflects the change in the loaded page optimistically, no reload.

Loading overlay

Drop <mono-table-loading> inside the <table> — it shows a spinner over the rows during any query and freezes the height so the grid can't collapse mid-fetch.

Row selection

Put a type="all" checkbox in a <th> and a type="single" one per row — the <th> can't render the <td> ones, since you loop the rows yourself.

vue

<th><mono-table-checkbox type="all" :control-table.prop="table" key-value="Id" /></th>
<td><mono-table-checkbox :control-table.prop="table" :item.prop="row" /></td>

table.check().getAll() → [{ Id: 8 }, { Id: 12 }]. With mode="all" (default) the select-all drains the source in chunk (100) row requests and selects everything the active search matches, not just the page; mode="per-page" selects the loaded page with no request. Every checkbox on the grid is disabled while a drain runs, and the select-all spins. key-value is path-aware and keeps the shape ('Transaction.[*].Id' → { Transaction: [{ Id }] }); omit it for whole rows. The selection survives paging, sorting and searching — check().clear() empties it. Size, color and the rest come from mono-checkbox.

Row detail

Put <mono-table-detail> in a <td>; whatever you slot into it renders as a full-width row below that row while open. Anything works inside — interpolation, v-if, a nested grid, nested details.

vue

<mono-table-detail :control-table.prop="table" :stay-open="row.KeepOpen" @mno-click="onToggle">
  Notes: {{ row.Note }}
</mono-table-detail>

Opening a row closes the one that was open. stay-open exempts a row from that and from collapseAll() — set it on every row if you want several panels open at once. Bulk control: table.detail().expandAll() / collapseAll() / collapseOthers() / openCount() / getAll(). Shared defaults go in props: { detail }; open is per-row state and is ignored there.

Header filter

Set headerFilter: true on a column in props.th for a distinct-values filter — an OData groupby for a remote source, client-side for an array. Like sorting, the gesture decides how many columns you get:

Click the funnel — always single-column. Tick values, Apply, and this column becomes the only filtered one, so filtering another column through its funnel drops this one. Its Clear empties every column.
Right-click the header → Header Filter › — opens the same panel, but it combines: AND across columns, OR within one. This is the only way to filter two columns at once, and the panel grows a Clear all button so a multi-column filter has a one-shot way out. Clear there drops only this column.

showIcon: false hides the funnel without stranding the filter — right-click still reaches it. Pass an object to configure it (enable, title, showIcon, dataSourceOptions — see the demo source). From code, table.setColumnFilter(field, values) replaces and table.setColumnFilter(field, values, { multi: true }) combines; table.filteredColumns() lists the fields currently filtered.

dataSourceOptions is the devextreme load-options shape; by default the request carries only $select=<field> so it sees every row of that column — set take to cap a large remote table.

One menu per header

Right-click is bound on every header cell that is sortable or filterable, and both features share the one menu (separated). A column with neither keeps the browser's own context menu.

Mapping rows for display

map turns each raw row into a presentation row inside the controller, so you stop hand-rolling a computed over items:

const table = controlMonoTable(null, {
  map: (row) => ({ ...row, _status: renderStatus(row.Status), _date: formatDateTime(row.Tanggal) }),
  props: {
    th: [{ field: 'Tanggal', map: (v) => formatDateTime(v) }],   // column map: (value, row, index) => any
  },
})

table.subscribe(() => { rows.value = [...table.mapped] })   // was: [...table.items]

A column map receives the raw field value (so the body and header-filter list stay in agreement) and overwrites the grid map for that field — pick one per field. Read the results from table.mapped; items stays raw so editing, search, sort and filters read the unformatted values.

Path field expressions

A field / searchValue entry can be a path: nested (Job.Name), indexed (User.[1].Id) or wildcard (User.[*].Name) — resolved for search, sort, filter and edit.

Fixed columns

Add mono-table-sticky-left / -right to a column's <th> and <td>s to pin it on horizontal scroll.

Summary footer

Give a column a summary in props.th and read it in a <tfoot> via <mono-table-summary field="…"> or table.summary() — computed over the full set, not just the current page.

Wide / scrolling tables

Freeze the footer with mono-table-sticky-foot (plus scroll-y + a max-height) so the totals stay pinned while rows scroll under them.

Full example

Everything from a static array — stat cards, filters, selection, badges, progress and actions.

Infinite scroll

<mono-table-paging type="infinity-scroll"> in a fixed-height scroll region auto-loads the next page as you reach the bottom.

The same mode over a remote OData DataSource — each appended page is a real skip/take round-trip.

Virtual scroll

type="virtual-scroll" renders only the height-visible rows (windowed slice + spacer rows), so 10,000 rows stay light.

Virtual scroll over a remote DataSource — the DOM stays tiny and the server is paged as the window nears the loaded end; :size overrides the source's page size.

Grouping

Pass group to controlMonoTable (array or DataSource); table.displayRows is a flat keyed list to v-for (switch on kind). The main pager pages the first group layer; <mono-table-paging-group> pages rows inside a group.

Both pagers together (static array) — the footer pager moves between groups, each group pages its own rows.

Automatic server-side paging over a real DataSource — one groupby for the group list + subtotal, each group fetches only its current page.

CSS Variables

Vue SFC

Themed through --mono-table-* custom properties (they inherit and pierce the shadow boundary). The color modifier sets the accent; an explicit --mono-table-accent override wins.

Variable	Default	Controls
`--mono-table-accent`	`--theme-secondary`	Accent — header, sort, pagination, zebra base
`--mono-table-accent-rgb`	secondary rgb	Accent as `r, g, b` (alpha mixes)
`--mono-table-accent-deep`	`--theme-primary`	Deep accent (gradients / active)
`--mono-table-accent-sky`	`--theme-info`	Light accent variant
`--mono-table-text`	`--theme-text`	Cell text color
`--mono-table-border`	`--theme-border`	Grid border color
`--mono-table-border-lite`	border 48%	Soft inner border
`--mono-table-surface`	`--theme-surface`	Table / control surface
`--mono-table-soft`	accent 7%	Header / hover fill
`--mono-table-zebra`	accent 4%	Zebra-stripe fill
`--mono-table-loading-bg`	surface 64%	Loading-overlay backdrop (dim)
`--mono-table-loading-blur`	`2px`	Loading-overlay backdrop blur
`--mono-table-spinner-size`	`1.5rem`	Loading spinner diameter
`--mono-table-spinner-width`	`2.5px`	Loading spinner ring width
`--mono-table-spinner-color`	accent	Loading spinner color
`--mono-table-spinner-speed`	`0.65s`	Loading spinner rotation speed
`--mono-table-detail-size`	`1.5rem`	Row-detail chevron button size
`--mono-table-detail-radius`	`0.35rem`	Row-detail chevron corner radius
`--mono-table-detail-color`	muted	Row-detail chevron color (collapsed)
`--mono-table-detail-color-open`	accent	Row-detail chevron color (expanded / hover)
`--mono-table-detail-hover-bg`	accent 10%	Row-detail chevron hover fill
`--mono-table-detail-panel-bg`	accent 7%	Detail panel row background
`--mono-table-detail-panel-pad`	`0.85rem 1rem`	Detail panel row padding

Types

controlMonoTable is also exported as monoDataGrid, and :control-table is also accepted as :data-grid — the older spellings still work.

Import

import { TableThProps, TableInfoProps, TableSortProps, TableDetailProps, TablePagingProps, TableSearchProps, TableLoadingProps, TableSummaryProps, TableCheckboxProps, TablePageSizeProps, TablePagingGroupProps } from 'mono-helper'

Prop	Value	Default	Description
`<mono-table-th>`
`field`	`string`	—	Column field — a plain key or a path expression into nested / collection data: `"Job.Name"` (nested), `"User.[1].Id"` (index), `"User.[*].Name"` (wildcard). `.`/`[` are reserved.
`caption`	`string`	—	—
`sort`	`MonoColumnSort`	—	Bind with `.prop`: `{ order?: 'asc' \| 'desc'; noClear?: boolean; disabled?: boolean }`.
`editable`	`boolean`	—	Whether the column's cells are editable (default `false`).
`editableTrigger`	`'click' \| 'double-click'`	—	How a row's inline editor opens — `'click'` (default) or `'double-click'`. Opening a row is a table-wide behaviour, so this writes through to the shared controller and applies to every row; leave it unset to inherit `monoDataGrid(data, { editableTrigger })`. Rows need only `data-row-key` — the grid binds the listener. Clicks on an editor or on an interactive control (button / link / form field) never open the editor.
`headerFilter`	`MonoHeaderFilter \| boolean`	—	Header filter for this column (default `false`). `true` takes every default: a funnel icon left of the caption which opens a checkbox list of the column's distinct values → Apply. Right-clicking the header reaches the same panel via the menu's `Header Filter ›` row. Pass an object to set the panel `title`, hide the icon (`showIcon`) or shape the distinct-values query (`dataSourceOptions`). See {@link MonoHeaderFilter}. An object form needs `.prop` binding (or `props.th`) — an attribute can only carry the boolean.
`width`	`string \| number`	—	Column width, applied to the parent `<th>`. Number → px; string used as-is (`'10rem'`, `'40%'`).
`height`	`string \| number`	—	Header-cell height, applied to the parent `<th>`. Number → px; string used as-is.
`dataGrid`	`MonoTableController<any>`	—	—
`controlTable`	`MonoTableController<any>`	—	Renamed — `:control-table` / `:controlTable` alias `dataGrid`.
`<mono-table-info>`
`template`	`string`	—	Override the "Showing {from}–{to} of {total}" template.
`dataGrid`	`MonoTableController<any>`	—	—
`controlTable`	`MonoTableController<any>`	—	Renamed — `:control-table` / `:controlTable` alias `dataGrid`.
`<mono-table-sort>`
`field`	`string`	—	Column to sort by. Omit for a plain, non-sortable label.
`caption`	`string`	—	Header text (falls back to the element's text content).
`disabled`	`boolean`	—	—
`enable`	`boolean`	—	Whether the control is sortable at all (default `true`). `enable="false"` renders a plain label — the counterpart of `sort: { enable: false }`.
`noClear`	`boolean`	—	Cycle asc ↔ desc only, never clearing.
`showIcon`	`boolean`	—	Show the sort arrow (default `true`). The arrow is the single-sort click target, so hiding it moves that trigger onto the label. Right-click always opens the `Sort ›` menu either way — the only way to build a multi-key sort.
`dataGrid`	`MonoTableController<any>`	—	—
`controlTable`	`MonoTableController<any>`	—	Renamed — `:control-table` / `:controlTable` alias `dataGrid`.
`<mono-table-detail>`
`icon`	`string`	—	Icon class shown while collapsed (default `i-mdi-chevron-right`).
`iconExpanded`	`string`	—	Icon class shown while expanded (default `i-mdi-chevron-down`).
`open`	`boolean`	—	Whether the panel is showing (reflected as the `open` attribute).
`stayOpen`	`boolean`	—	Exempt this row from every automatic close — the accordion (opening another row) and `table.detail().collapseAll()`. Not a lock: its own chevron still closes it. Set it on every row to allow many panels open at once.
`disabled`	`boolean`	—	Disable the toggle.
`label`	`string`	—	Accessible label for the toggle button (default `Toggle details`).
`dataGrid`	`MonoTableController<any>`	—	—
`controlTable`	`MonoTableController<any>`	—	Renamed — `:control-table` / `:controlTable` alias `dataGrid`.
`<mono-table-paging>`
`type`	`'standard' \| 'infinity-scroll' \| 'virtual-scroll'`	—	Paging mode (flat tables only): - `standard` (default) — numbered buttons + prev/next arrows. - `infinity-scroll` — scrolling to the end auto-loads & appends the next page. - `virtual-scroll` — like infinity, but only the height-visible rows render (windowed slice + spacer rows) so huge datasets stay light.
`siblings`	`number`	—	How many numbered buttons to show around the current page (default 1). standard only.
`simple`	`boolean`	—	Hide the numbered buttons, keep only Prev / Next. standard only.
`size`	`number`	—	Page size (rows per page / scroll chunk). Set it to OVERRIDE the bound DataSource's configured `pageSize`; omit to use the DataSource's own pageSize.
`rowHeight`	`number`	—	Fixed row height in px used to size the virtual window + spacers (default 44).
`scrollTarget`	`string`	—	CSS selector for the scroll container; defaults to the nearest `.mono-table-scroll`.
`threshold`	`number`	—	Px from the end at which the next page auto-loads (default 200).
`overscan`	`number`	—	Extra rows rendered above/below the virtual window (default 6).
`dataGrid`	`MonoTableController<any>`	—	—
`controlTable`	`MonoTableController<any>`	—	Renamed — `:control-table` / `:controlTable` alias `dataGrid`.
`<mono-table-search>`
`placeholder`	`string`	—	—
`disabled`	`boolean`	—	—
`debounce`	`number`	—	—
`noIcon`	`boolean`	—	Hide the leading search icon.
`searchValue`	`string \| MonoSearchExprEntry[]`	—	Which fields a term matches — a comma string or an array, over the same grammar as `monoDataGrid({ searchExpr })` (paths, `*` patterns, `{ field, custom }`). Replaces the controller's own option. `searchExpr` / `search-expr` is the same prop under the grid's older name.
`searchExpr`	`string \| MonoSearchExprEntry[]`	—	—
`suggestion`	`boolean`	—	Show a suggestion dropdown under the field — an "all fields" row plus one per registered `mono-table-th` (a plain native `<th>` contributes nothing). While it is open, Enter always applies the ACTIVE suggestion.
`multiContext`	`boolean`	—	Turn each accepted suggestion into a removable chip so several terms stack. Terms group by column: OR within a column, AND across columns.
`suggestionTemplate`	`string`	—	Suggestion wording; `{caption}` and `{term}` are substituted.
`allFieldsLabel`	`string`	—	Label of the leading "every column" suggestion row.
`maxChips`	`number`	—	Max context chips shown inline inside the field; the rest collapse into a `${moreLabel}` chip that opens a panel listing them. `0` shows none inline (just the trigger chip); a large value disables the collapse.
`moreLabel`	`string`	—	Label of the chip that opens the overflow panel (default `See All`).
`filterLabel`	`string`	—	Label of the filter chip rendered when a slotted `<mono-filter-builder slot="filter-builder">` applies its filter with `multi-context` on (default `Filter`).
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'`	—	Visual size of the field.
`color`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info'`	—	Theme color applied to focus, borders and accents.
`variant`	`'underlined' \| 'outlined' \| 'filled'`	—	Visual style of the field (outlined, filled or underlined).
`readonly`	`boolean`	—	Read-only while still focusable.
`clearable`	`boolean`	—	Show a clear button once there is a search term (clears without waiting for the debounce).
`autofocus`	`boolean`	—	Focus the field on first render.
`label`	`string`	—	Label text displayed above the field.
`helperText`	`string`	—	Helper text shown below the field.
`validationState`	`'warning' \| 'default' \| 'valid' \| 'invalid'`	—	Explicit validation state for styling and messaging.
`validationMessage`	`string`	—	Validation message shown below the field.
`error`	`boolean`	—	Marks the field in an error state.
`errorMessage`	`string`	—	—
`success`	`boolean`	—	Marks the field in a success state.
`successMessage`	`string`	—	—
`name`	`string`	—	Form field name on the inner input.
`autocomplete`	`string`	—	Native autocomplete hint.
`inputmode`	`string`	—	Native inputmode hint for the on-screen keyboard.
`minLength`	`number`	—	—
`maxLength`	`number`	—	—
`ariaLabelText`	`string`	—	Accessible label for the inner input.
`aria-label`	`string`	—	—
`width`	`string \| number`	—	Explicit sizing. Each accepts a CSS length string (`"420px"`, `"80%"`) or a number (px). The field defaults to `width: 100%` with a `180px` floor.
`height`	`string \| number`	—	—
`minWidth`	`string \| number`	—	—
`maxWidth`	`string \| number`	—	—
`minHeight`	`string \| number`	—	—
`maxHeight`	`string \| number`	—	—
`cssClass`	`InputCssClass`	—	Per-part class overrides — same keys as `mono-input`'s `cssClass`.
`dataGrid`	`MonoTableController<any>`	—	—
`controlTable`	`MonoTableController<any>`	—	Renamed — `:control-table` / `:controlTable` alias `dataGrid`.
`<mono-table-loading>`
`minDuration`	`number`	—	Minimum time (ms) to keep the overlay up once shown, so a fast query still flashes a perceptible spinner (default `350`). `0` disables the hold.
`dataGrid`	`MonoTableController<any>`	—	—
`controlTable`	`MonoTableController<any>`	—	Renamed — `:control-table` / `:controlTable` alias `dataGrid`.
`<mono-table-summary>`
`field`	`string`	—	Data field to summarize (path-aware).
`type`	`'sum' \| 'avg' \| 'count' \| 'min' \| 'max' \| 'countDistinct'`	—	Pick a specific aggregate when the field has several specs.
`name`	`string`	—	Pick a specific spec by its `name` when the field has several.
`dataGrid`	`MonoTableController<any>`	—	—
`controlTable`	`MonoTableController<any>`	—	Renamed — `:control-table` / `:controlTable` alias `dataGrid`.
`<mono-table-checkbox>`
`type`	`'single' \| 'all'`	—	`'single'` (a row, the default) or `'all'` (the select-all).
`item`	`unknown`	—	The row this checkbox represents — `type="single"`. Bind with `.prop`.
`keyValue`	`string \| string[]`	—	Field(s) `check().getAll()` projects each selected row down to. Path-aware and shape-preserving — `['Company.Name', 'Transaction.[*].Id']` yields `{ Company: { Name }, Transaction: [{ Id }] }`. Omit for whole rows.
`mode`	`'all' \| 'per-page'`	—	`'all'` (default) drains the source in `chunk`-sized requests and selects every row the active search/filter matches; `'per-page'` selects the loaded page with no request.
`chunk`	`number`	—	Rows per request while draining in `mode="all"` (default 100).
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'`	—	Visual size of the box.
`color`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info'`	—	Theme color of the box.
`disabled`	`boolean`	—	—
`label`	`string`	—	Label text shown next to the box.
`description`	`string`	—	Secondary description under the label.
`ariaLabelText`	`string`	—	—
`cssClass`	`CheckboxCssClass`	—	Per-part class overrides — same keys as `mono-checkbox`'s `cssClass`.
`dataGrid`	`MonoTableController<any>`	—	—
`controlTable`	`MonoTableController<any>`	—	Renamed — `:control-table` / `:controlTable` alias `dataGrid`.
`<mono-table-page-size>`
`sizes`	`string \| number[]`	—	Options for the select (default [10, 20, 50, 100]).
`label`	`string`	—	—
`dataGrid`	`MonoTableController<any>`	—	—
`controlTable`	`MonoTableController<any>`	—	Renamed — `:control-table` / `:controlTable` alias `dataGrid`.
`<mono-table-paging-group>`
`group`	`string \| MonoGroupNode<any>`	—	The group to paginate — its node (bind with `.prop`) or its `path` string.
`pageSize`	`number`	—	Rows per group-page (default 5).
`siblings`	`number`	—	Numbered buttons shown around the current page, each side (default 1).
`simple`	`boolean`	—	Only Prev / "X / Y" / Next — no numbered buttons.
`dataGrid`	`MonoTableController<any>`	—	—
`controlTable`	`MonoTableController<any>`	—	Renamed — `:control-table` / `:controlTable` alias `dataGrid`.

Table ​

Control ​

Basic ​

External control ​

Colors ​

Search ​

Naming the searched fields ​

What the default does, exactly ​

Search contexts ​

Filter builder ​

Wildcards and custom search clauses ​

Sorting ​

Editable rows ​

Seamless editors ​

Keyboard navigation ​

Editing a DataSource ​

Row-level CRUD (form()) ​

Loading overlay ​

Row selection ​

Row detail ​

Header filter ​

Mapping rows for display ​

Path field expressions ​

Fixed columns ​

Summary footer ​

Wide / scrolling tables ​

Full example ​

Infinite scroll ​

Virtual scroll ​

Grouping ​

CSS Variables ​

Types ​