Data View API

Full surface of oge-data-view: its inputs and models, methods, outputs, the three structural template slots plus the toolbar attribute slot, and the config provider.

Properties Methods Events Types

OgeDataView

oge-data-view

Properties 25

Data

Name	Type	Default	Description
`items`	`readonly T[]`	`[]`	The items in their own order. With `remoteOperations`: the current page.
`keyExpr`	`OgeDataViewKeyExpr<T>`	`'id'`	Field (dot paths allowed) or function giving each item’s key — the identity in `selectedKeys` and every event.
`displayExpr`	`OgeDataViewDisplayExpr<T> \| undefined`	—	The text an item shows without a template; falls back to its `title`, `name`, `text` or `label` field.
`remoteOperations`	`boolean`	`false`	The app sorts, searches and pages: listen to `optionsChanged`, pass the page as `items` and the total as `itemCount`.
`itemCount`	`number \| undefined`	—	Total item count under `remoteOperations`; defaults to the processed items’ length.
`loading`	`boolean`	`false`	Marks the items `aria-busy`; with nothing to show yet it draws skeleton tiles and a visually hidden “Loading…”.
`locale`	`string \| undefined`	`config ?? LOCALE_ID`	BCP 47 locale of the sort comparison (numeric collation, so “Item 9” sorts before “Item 10”).
`ariaLabel`	`string \| undefined`	—	Accessible name of the items; a listbox falls back to the `dataView` message.

Layout

Name	Type	Default	Description
`layout`	`'grid' \| 'list' (model)`	`config ?? 'grid'`	Responsive columns or one item per row — two-way.
`showLayoutSwitch`	`boolean`	`false`	Renders the grid / list toggle-button group (`aria-pressed`) in the header.
`minItemWidth`	`number \| undefined`	`config ?? 240`	Narrowest grid cell in px before another column fits. Resolved by a container query on the view’s own inline size, never the window.
`columns`	`number \| undefined`	—	A fixed column count for the grid layout; collapses to one column in a container under 480px.
`gap`	`number \| string \| undefined`	`16px`	Gap between items — px number or any CSS length.

Paging

Name	Type	Default	Description
`pageSize`	`number \| undefined`	`config ?? 0`	Items per page; `0` shows every item.
`pageIndex`	`number (model)`	`0`	0-based current page — two-way, clamped into the page range when rendered.
`showPager`	`boolean`	`true`	Renders the built-in pager when there is more than one page. Set it to `false` and bind an `oge-pagination` to `[(pageIndex)]` for the full bar (the layout package does not depend on navigation).
`showPageInfo`	`boolean`	`true`	Renders the `{from}–{to} of {itemCount}` text beside the pager.

Sorting, search & filtering

Name	Type	Default	Description
`sortOptions`	`readonly OgeDataViewSortOption[]`	`[]`	Choices of the built-in sort select (plus a direction toggle); empty hides both.
`sort`	`OgeDataViewSort \| null (model)`	`null`	The active sort — two-way. Text compares with the locale’s collator, numbers / dates / booleans numerically, empty values last.
`filter`	`((item: T) => boolean) \| null`	`null`	A predicate the items must pass (client-side only).
`searchEnabled`	`boolean`	`false`	Renders the search field in the header.
`searchValue`	`string (model)`	`''`	The search text — two-way. Every word must occur, compared case-, accent- and locale-insensitively.
`searchExpr`	`OgeDataViewSearchExpr<T> \| undefined`	—	Field(s) or function the search matches; default every primitive field.

Selection

Name	Type	Default	Description
`selectionMode`	`'none' \| 'single' \| 'multiple'`	`'none'`	Selection turns the list into an APG listbox: one roving tab stop, arrows in reading order (mirrored in RTL), Up / Down by the measured column count, PageUp / PageDown turn the page, Space / Enter toggle, Ctrl+A selects all. Options are leaves, so the template must not hold controls.
`selectedKeys`	`readonly OgeDataViewKey[] (model)`	`[]`	Keys of the selected items — two-way.

Methods 5

Name	Type	Description
`focus(index?)`	`(index?: number) => void`	Focuses the item at `index` of the page (default: the tab stop); without selection the first focusable control inside the items.
`goToPage(index)`	`(index: number) => void`	Shows page `index` (clamped) and emits `pageChanged` when it changed.
`setLayout(layout)`	`(layout: OgeDataViewLayout) => void`	Switches the layout and emits `layoutChanged` when it changed.
`clearSelection()`	`() => void`	Deselects everything (emits `selectionChanged`).
`selectAll()`	`() => void`	Selects every item that passes the filter and search — multiple selection only.

Events 11

Name	Type	Description
`layoutChange`	`OgeDataViewLayout`	The banana half of `[(layout)]`.
`pageIndexChange`	`number`	The banana half of `[(pageIndex)]`.
`sortChange`	`OgeDataViewSort \| null`	The banana half of `[(sort)]`.
`searchValueChange`	`string`	The banana half of `[(searchValue)]`.
`selectedKeysChange`	`readonly OgeDataViewKey[]`	The banana half of `[(selectedKeys)]`.
`layoutChanged`	`OgeDataViewLayoutChangedEvent`	The layout changed through the switch or `setLayout()`.
`pageChanged`	`OgeDataViewPageChangedEvent`	The page changed through the pager, PageUp / PageDown or `goToPage()`; the new page is announced politely.
`sortChanged`	`OgeDataViewSortChangedEvent`	The sort changed through the built-in select or direction toggle (the page resets to 0).
`selectionChanged`	`OgeDataViewSelectionChangedEvent<T>`	The selection changed through a click, Space / Enter, Ctrl+A or a method.
`itemClick`	`OgeDataViewItemClickEvent<T>`	An item was clicked (or activated with Enter / Space in a listbox).
`optionsChanged`	`OgeDataViewOptionsChangedEvent`	Sort, search or page changed — the request to answer under `remoteOperations`.

Types 21

Slots

Name	Type	Description
`OgeDataViewItemTemplate`	`[ogeDataViewItemTemplate]`	Structural directive rendering each item in both layouts (non-interactive in a selectable view).
`OgeDataViewListItemTemplate`	`[ogeDataViewListItemTemplate]`	Renders each item in the `list` layout; falls back to the item template.
`OgeDataViewEmptyTemplate`	`[ogeDataViewEmptyTemplate]`	Replaces the empty state; `$implicit` says whether a search or filter caused it.
`[ogeDataViewToolbar]`	`attribute slot`	Projects your own controls into the header, before the built-in search, sort and layout switch.
`OgeDataViewItemTemplateContext`	`{ $implicit: T; index: number; layout: OgeDataViewLayout; selected: boolean }`	Context of the two item templates.
`OgeDataViewEmptyTemplateContext`	`{ $implicit: boolean; text: string }`	Context of the empty template.

Vocabulary

Name	Type	Description
`OgeDataViewLayout`	`'grid' \| 'list'`	Responsive columns, or one item per row.
`OgeDataViewSelectionMode`	`'none' \| 'single' \| 'multiple'`	`none` renders a `list`; `single` / `multiple` an APG `listbox`.
`OgeDataViewKey`	`string \| number`	An item identity, from `keyExpr`.
`OgeDataViewKeyExpr`	`string \| ((item: T) => OgeDataViewKey)`	Field (dot paths allowed) or function; an item without a usable key falls back to its index.
`OgeDataViewDisplayExpr`	`string \| ((item: T) => string)`	Where the fallback text of a template-less item comes from.
`OgeDataViewSearchExpr`	`string \| readonly string[] \| ((item: T) => string)`	The text the search matches.
`OgeDataViewSort`	`{ field: string; direction: 'asc' \| 'desc' }`	The active sort.
`OgeDataViewSortDirection`	`'asc' \| 'desc'`	Direction of a sort.
`OgeDataViewSortOption`	`{ field: string; label: string }`	One choice of the built-in sort select.
`OgeDataViewLayoutChangedEvent`	`{ layout; previousLayout; event? }`	Payload of the layout change.
`OgeDataViewPageChangedEvent`	`{ pageIndex; previousPageIndex; pageSize; event? }`	Payload of the page change (0-based pages).
`OgeDataViewSortChangedEvent`	`{ sort: OgeDataViewSort \| null; previousSort; event? }`	Payload of the sort change.
`OgeDataViewSelectionChangedEvent`	`{ selectedKeys; previousKeys; item?; event? }`	Payload of the selection change; `item` is absent for Ctrl+A and the methods.
`OgeDataViewItemClickEvent`	`{ item: T; index; key; event }`	Payload of an item click / activation.
`OgeDataViewOptionsChangedEvent`	`{ sort; searchValue; pageIndex; pageSize }`	The request a `remoteOperations` app answers with the next page.

Configuration

Properties 2

Name	Type	Description
`provideOgeDataViewConfig(config)`	`(config: OgeDataViewConfigInput \| (() => OgeDataViewConfigInput)) => Provider`	Application- or component-scoped defaults for `layout`, `pageSize`, `minItemWidth`, `locale` and the `messages` (a function makes it live).
`OGE_DATA_VIEW_CONFIG`	`InjectionToken<OgeDataViewConfig>`	The token behind `provideOgeDataViewConfig()`, with `OGE_DEFAULT_DATA_VIEW_CONFIG` as its factory default.

Types 5

Name	Type	Description
`OgeDataViewConfig`	`interface`	The resolved config (`messages`, `layout?`, `pageSize?`, `minItemWidth?`, `locale?`).
`OgeDataViewConfigInput`	`interface`	The partial input both providers accept (messages merged one level deep).
`OGE_DEFAULT_DATA_VIEW_CONFIG`	`OgeDataViewConfig`	The resolved defaults.
`OgeDataViewMessages`	`interface`	Every user-facing string, aria labels included: `dataView`, `layoutSwitch`, `gridLayout`, `listLayout`, `sortBy`, `sortNone`, `ascending`, `descending`, `search`, `searchPlaceholder`, `pager`, `previousPage`, `nextPage`, `page` (`{page}`), `pageInfo` (`{from}` `{to}` `{itemCount}`), `pageAnnouncement`, `noData`, `noResults`, `results` (ICU plural over `{count}`) and `loading`. Translated in every `@oge-ui/locales` pack (`layout.dataView`).
`OGE_DEFAULT_DATA_VIEW_MESSAGES`	`OgeDataViewMessages`	The English catalog.