PageUserList

User directory with a detail drawer. Slots: header, stats, filters, toolbar, table, drawer.

Jump to API reference

Import

Vue
import { UiPageUserList } from '@ziyarago/ui/vue'

Default

Users

1 204 accounts

Stats slot
Filters slot
Table slot
Drawer slot
Vue
<UiPageUserList title="Users" subtitle="1 204 accounts">
  <template #stats>Stats slot</template>
  <template #filters>Filters slot</template>
  <template #table>Table slot</template>
  <template #drawer>Drawer slot</template>
</UiPageUserList>

API reference

User or customer list template: stats, filters, toolbar, table and a right-hand add/edit drawer.

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).
statsFigures above the table; StatStrip.
filtersFilter selects in a card; Select.
toolbarPage size, search, export and Add button; Select, SearchInput, Button.
tableUsers table with checkboxes and actions; DataTable with UserCell, Chip, IconButton.
drawerSide panel rendered in the side column; Drawer with TextField, Select, Button.

Notes

  • Place inside AppShell; fill only the slots you need.