DataGroup

Table whose rows are split into collapsible groups with a header per group. The size prop (xs, sm, md, lg, xl) sets the row density and font size.

Jump to API reference

Import

Vue

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

Grouped by city

Hotel	Stars	Rooms

Hilton Makkah	5	120
Pullman Zamzam	5	200

Anwar Al Madinah	4	90
Dar Al Taqwa	4	60

Vue

<UiDataGroup
  :columns="[{ key: 'hotel', label: 'Hotel' }, { key: 'stars', label: 'Stars', num: true }, { key: 'rooms', label: 'Rooms', num: true }]"
  :groups="[{ label: 'Makkah', rows: [{ id: 'a', hotel: 'Hilton Makkah', stars: 5, rooms: 120 }, { id: 'b', hotel: 'Pullman Zamzam', stars: 5, rooms: 200 }] }, { label: 'Madinah', rows: [{ id: 'c', hotel: 'Anwar Al Madinah', stars: 4, rooms: 90 }, { id: 'd', hotel: 'Dar Al Taqwa', stars: 4, rooms: 60 }] }]"
 />

Sizes

Hotel	Rooms

Hilton Makkah	120
Pullman Zamzam	200

Hotel	Rooms

Hilton Makkah	120
Pullman Zamzam	200

Hotel	Rooms

Hilton Makkah	120
Pullman Zamzam	200

Hotel	Rooms

Hilton Makkah	120
Pullman Zamzam	200

Hotel	Rooms

Hilton Makkah	120
Pullman Zamzam	200

Vue

<UiDataGroup
  :columns="[{ key: 'hotel', label: 'Hotel' }, { key: 'rooms', label: 'Rooms', num: true }]"
  :groups="[{ label: 'Makkah', rows: [{ id: 'a', hotel: 'Hilton Makkah', rooms: 120 }, { id: 'b', hotel: 'Pullman Zamzam', rooms: 200 }] }]"
  size="xs"
 />

<UiDataGroup
  :columns="[{ key: 'hotel', label: 'Hotel' }, { key: 'rooms', label: 'Rooms', num: true }]"
  :groups="[{ label: 'Makkah', rows: [{ id: 'a', hotel: 'Hilton Makkah', rooms: 120 }, { id: 'b', hotel: 'Pullman Zamzam', rooms: 200 }] }]"
  size="sm"
 />

<UiDataGroup
  :columns="[{ key: 'hotel', label: 'Hotel' }, { key: 'rooms', label: 'Rooms', num: true }]"
  :groups="[{ label: 'Makkah', rows: [{ id: 'a', hotel: 'Hilton Makkah', rooms: 120 }, { id: 'b', hotel: 'Pullman Zamzam', rooms: 200 }] }]"
  size="md"
 />

<UiDataGroup
  :columns="[{ key: 'hotel', label: 'Hotel' }, { key: 'rooms', label: 'Rooms', num: true }]"
  :groups="[{ label: 'Makkah', rows: [{ id: 'a', hotel: 'Hilton Makkah', rooms: 120 }, { id: 'b', hotel: 'Pullman Zamzam', rooms: 200 }] }]"
  size="lg"
 />

<UiDataGroup
  :columns="[{ key: 'hotel', label: 'Hotel' }, { key: 'rooms', label: 'Rooms', num: true }]"
  :groups="[{ label: 'Makkah', rows: [{ id: 'a', hotel: 'Hilton Makkah', rooms: 120 }, { id: 'b', hotel: 'Pullman Zamzam', rooms: 200 }] }]"
  size="xl"
 />

API reference

Table whose rows are collapsed into labeled groups, with optional per-row expandable details.

Props

PropType and valuesDefaultDescription

columnsrequired{ key: string; label: string; num?: boolean; render?: (value, row) => VNode | string }[][]Column definitions, same shape as DataTable without sorting.

groupsrequired{ label: string; rows: ({ id: string | number; [key: string]: any })[] }[][]Groups shown as collapsible header rows with a row count. Group labels must be unique.

expand(row) => VNode | string—Renders the detail panel under a row. When set, an expand chevron column appears.

sizexssmmdlgxl'md'Row density and font size.

Notes

Open/collapsed state is internal; groups start expanded.