Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

template · list-data-page

List/data page

A Mado page recipe composing native filtering, data-table, empty-state and pagination contracts.

Install with npx @madojs/ui@latest add list-data-page.

Template

List/data page

Composition

  • Adapt the collection route into page header, native GET filter form, explicit empty state, captioned data table and URL-backed pagination.
  • Replace fixtures, routes, filtering and pagination policy at copy time without discarding shareable query parameters.

Public API

export default Page
Route page with title/head metadata and URL-reactive view.
export listDataPageView()
Directly previewable collection view.
attribute query / page search parameters
Shareable filter and pagination state read with queryParam().

Accessibility contract

  • The visible result count is the table caption; scoped column/row headers retain native relationships.
  • Empty results replace the table with a labelled recovery state, and pagination exposes one current page and real URLs.

Keyboard

  • The template adds no page-wide keyboard model; native links, forms and controls keep their browser-defined behavior.

Focus

  • Route navigation uses the owning layout target. Make the overflow shell keyboard-focusable only while the real table overflows.

Fallback

  • The GET form and destination URLs remain navigable without delegated routing; replace client-only fixtures with a server-capable data boundary when required.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.