PageBookings

Bookings list page. Slots: header, stats, toolbar, bulk, table, pager.

Import

Vue

import { UiPageBookings } from '@ziyarago/ui/vue'

Default

Bookings

248 reservations this month

Stats slot

Toolbar slot

Table slot

Pager slot

Vue

<UiPageBookings title="Bookings" subtitle="248 reservations this month">
  <template #stats>Stats slot</template>
  <template #toolbar>Toolbar slot</template>
  <template #table>Table slot</template>
  <template #pager>Pager slot</template>
</UiPageBookings>

API reference

Bookings list template: stats, toolbar, bulk-action bar, table and pagination.

Props

PropType and valuesDefaultDescription

titlestring—Page heading. The built-in header renders only when title is set and the header slot is empty.

subtitlestring—Caption under the heading.

crumbs{ label: string; href?: string }[]—Breadcrumb trail above the title.

Slots

Vue: named slots. React: a prop with the same name; default is children.

headerCustom page header; replaces the built-in title/subtitle/crumbs header.

actionsButtons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).

statsBooking figures for the period; StatsCard.

toolbarSearch, quick filters and export menu above the table; SearchInput, FilterChips, Dropdown.

bulkSelection bar shown when rows are selected; Alert with Buttons. Render it conditionally.

tableSortable, selectable table; DataTable.

pagerPage numbers below the table; Pagination.

Notes

Place inside AppShell; fill only the slots you need.