@oro.ad/ui

Lists & Tables

Paginated data management with sparse loading, filtering, search, and dual view modes. Ported from @aina/helpers.

useListData Composable

Core composable for paginated data management. Handles sparse page loading (only fetches visible pages), debounced search, filter state with URL sync, and dual view modes (table/cards). Feed it a fetchFn and it manages everything — pagination metadata, loading states, error handling, and chunk caching.

NameStatusCPURAMRegionEarnings ($)Uptime
No data
API Reference

useListData(options)

Creates a reactive paginated data manager.

Usage
const listData = useListData<NodeItem, Filter>({
fetchFn: (params) => $fetch('/api/nodes', { params }),
defaultFilter: { page: 1, per_page: 10, search: '' },
syncWithUrl: true,
})

Returns

itemsComputedRef — sparse array with placeholders
paginationRef — server pagination metadata
loadPage(n)Load specific page into cache
setFilter(params)Apply filters, reset to page 1
onSearchInput(q)Debounced search (300ms)
viewModeRef<'table' | 'cards'>
OroInfiniteList Component

Universal list component supporting table and card layouts with infinite scroll. Responsive — desktop renders UTable, mobile renders card slots. Handles loading, error, and empty states. Works with useListData return value as the listData prop.

Template
<OroInfiniteList
:list-data="listData"
:columns="columns"
>
<template #card-item="{ item }">
<div>{{ item.name }}</div>
</template>
</OroInfiniteList>
OroInfiniteList — Loading state #skeleton slot

Initial loading state — shown when pagination === null and a fetch is pending. Override the default pulse skeleton via the #skeleton slot. This demo holds the fetch until you click Resolve.

Click to finish the pending load
OroInfiniteList — Error state #error slot

When fetchFn throws on the first page, the error slot fires with { error, retry }. The retry handler calls listData.refresh() under the hood.

OroInfiniteList — Empty state #empty slot

Fires when totalItems === 0 after the first successful fetch. Use the #empty slot for friendly zero-state messaging and a CTA to clear filters or create the first item.

OroListPagination Component

Smart pagination controls with intelligent page range display. Shows first/last pages with ellipsis, window around current page, loading animations, and responsive layout (fixed bottom bar on mobile).

Props: listData (UseListDataReturn), scroller (UseListScrollerReturn), maxVisible (default 7)
Features: Previous/Next buttons, active page highlight, loading state per page, aria labels