std-pagination

Level: Atom | Entity: PagedItem | Persistence: runtime

1 states, 2 events, 2 transitions

Live Preview

orbital PagedItemOrbital {
  entity PagedItem [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
  }
  trait PagedItemPagination -> PagedItem [interaction] {
    state idle {
      INIT -> idle
        (fetch PagedItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "list", size: "lg" }, { type: "typography", content: "PagedItems", variant: "h2" }] }] }, { type: "divider" }, { type: "data-grid", entity: "PagedItem", emptyIcon: "inbox", emptyTitle: "No pageditems yet", emptyDescription: "Add pageditems to see them here.", columns: [{ name: "name", label: "Name", variant: "h4" }, { name: "description", label: "Description", variant: "caption" }, { name: "status", label: "Status", variant: "badge" }] }, { type: "pagination", currentPage: 1, totalPages: 10, onPageChange: "PAGE", showPageSize: false }, { type: "infinite-scroll-sentinel", loadMoreEvent: "PAGE" }] })
      PAGE -> idle
        (fetch PagedItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "list", size: "lg" }, { type: "typography", content: "PagedItems", variant: "h2" }] }] }, { type: "divider" }, { type: "data-grid", entity: "PagedItem", emptyIcon: "inbox", emptyTitle: "No pageditems yet", emptyDescription: "Add pageditems to see them here.", columns: [{ name: "name", label: "Name", variant: "h4" }, { name: "description", label: "Description", variant: "caption" }, { name: "status", label: "Status", variant: "badge" }] }, { type: "pagination", currentPage: "@payload.page", totalPages: 10, onPageChange: "PAGE", showPageSize: false }] })
    }
  }
  page "/pageditems/paginated" -> PagedItemPagination
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-

States

State	Type
idle	Initial

Events

Event	Payload
INIT	-
PAGE	page: number, pageSize: number

Transitions

From	Event	To	Effects
idle	INIT	idle	2 effects
idle	PAGE	idle	2 effects