Table

A headless, native-<table> helper. monoDataGrid wraps a devextreme DataSource — or a plain array, which it pages, searches and sorts in memory (pass the array straight in; monoArraySource stays exported for advanced control) — and small controls — <mono-table-search>, <mono-table-paging>, <mono-table-page-size>, <mono-table-info>, <mono-table-sort> — drive search, paging, sorting and info while your <table> stays native. Bind the controller to each control with :data-grid.prop.

Basic

Native table with search, page size, info and paging wired through 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 — header, zebra rows, hover, search and pagination.

Sorting

Put <mono-table-sort field="…"> inside a native <th> for a sortable header — click to cycle asc → desc → none.

Fixed columns

Add mono-table-sticky-left / -right to a column's header <th> and its body <td>s to pin it on horizontal scroll — CSS only, no JS. A single pinned column per side needs nothing else. For two or more on the same side, give them fixed widths and set --mt-sticky-left / --mt-sticky-right on the later column(s) to the combined width of the ones before it, so they stack edge-to-edge.

Full example

Everything from a static array (monoArraySource): stat cards, filters, row selection, badges, progress and actions.

Grouping

Pass group to monoDataGrid along with a plain array or a DataSource — it handles the rest. table.displayRows gives a flat, keyed list to v-for over (each item is { kind: 'group' | 'row' | 'footer', key, level, node?, row? }), so your template just switches on kind — no tree walking, no key juggling. The main <mono-table-paging> pages the first layer of groups (and <mono-table-info> / <mono-table-page-size> count groups). Headers are collapsible via table.toggleGroup / expandAllGroups / collapseAllGroups.

To page the rows inside a group, set groupRowPageSize and render a <mono-table-paging-group :group.prop="item.node.path"> in the footer row; it slices that group to one page and navigates it.

<mono-table-page-size> takes an array of sizes that may include 'all' (:sizes.prop="[10, 20, 50, 'all']"). Choosing All shows everything at once — all groups, fully expanded — and for a remote source it loads the rows in chunkSize (default 100) requests, so a backend capped at 100 rows still returns the full set.

• Plain array or multi-level group → client (grouped + paged in memory; good for small/medium data).
• Single-field group + remote DataSource → automatic server-side paging. Nothing loads until shown: one cheap groupby gives the group list, counts, and any groupSummary aggregate (e.g. a subtotal); each visible group fetches only its current page of rows via $filter/$skip/$top. No loadGroups/loadRows to write — monoDataGrid drives the DataSource's store itself.

Multi-level grouping (Nama → Code) over a small DataSource — grouped and paged in memory; the main pager pages the first layer:

Both pagers together (offline, static array) — the footer pager moves between groups, while each group's own <mono-table-paging-group> pages its rows:

Automatic server-side paging over a real DataSource (1200+ rows) — just monoDataGrid(dataSource, { group: ['DeptNama'], groupRowPageSize: 5, groupSummary: { TotalBudget: 'sum' } }). The main pager pages departments, each department lazily fetches only its current 5 rows, and the header count + subtotal come from one groupby. Open the Network tab: one groupby plus a few $top=5 calls — never a full load:

Types

Importimport { TableInfoProps, TableSortProps, TablePagingProps, TableSearchProps, TablePageSizeProps } from 'mono-helper'

Prop	Value	Default	Description
<mono-table-info>
template	string	'Showing {from}–{to} of {total}'	Override the "Showing {from}–{to} of {total}" template.
dataGrid	MonoTableController<any>	—	—
<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	false	—
noClear	boolean	false	Cycle asc ↔ desc only, never clearing.
dataGrid	MonoTableController<any>	—	—
<mono-table-paging>
siblings	number	1	How many numbered buttons to show around the current page (default 1).
simple	boolean	false	Hide the numbered buttons, keep only Prev / Next.
dataGrid	MonoTableController<any>	—	—
<mono-table-search>
placeholder	string	'Search…'	—
disabled	boolean	false	—
debounce	number	300	—
noIcon	boolean	false	Hide the leading search icon.
dataGrid	MonoTableController<any>	—	—
<mono-table-page-size>
sizes	string | number[]	[10, 20, 50, 100]	Options for the select (default [10, 20, 50, 100]).
label	string	''	—
dataGrid	MonoTableController<any>	—	—