DataTable

Sortable table with optional row selection and an empty state. The size prop (xs, sm, md, lg, xl) sets the row density and font size.

Jump to API reference

Import

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

Basic

BookingGuestHotelNightsTotal (SAR)
ZG-1042Ahmed KhanHilton Makkah54,250
ZG-1043Fatima NoorPullman Zamzam76,120
ZG-1044Yusuf AliAnwar Al Madinah42,380
ZG-1045Maryam SaidSwissotel Makkah109,900
Vue
<UiDataTable
  :columns="[{ key: 'code', label: 'Booking' }, { key: 'guest', label: 'Guest' }, { key: 'hotel', label: 'Hotel' }, { key: 'nights', label: 'Nights', num: true }, { key: 'total', label: 'Total (SAR)', num: true }]"
  :rows="[{ id: 1, code: 'ZG-1042', guest: 'Ahmed Khan', hotel: 'Hilton Makkah', nights: 5, total: '4,250' }, { id: 2, code: 'ZG-1043', guest: 'Fatima Noor', hotel: 'Pullman Zamzam', nights: 7, total: '6,120' }, { id: 3, code: 'ZG-1044', guest: 'Yusuf Ali', hotel: 'Anwar Al Madinah', nights: 4, total: '2,380' }, { id: 4, code: 'ZG-1045', guest: 'Maryam Said', hotel: 'Swissotel Makkah', nights: 10, total: '9,900' }]"
 />

Sorted

BookingGuestHotel
ZG-1042Ahmed KhanHilton Makkah54,250
ZG-1043Fatima NoorPullman Zamzam76,120
ZG-1044Yusuf AliAnwar Al Madinah42,380
ZG-1045Maryam SaidSwissotel Makkah109,900
Vue
<UiDataTable
  :columns="[{ key: 'code', label: 'Booking' }, { key: 'guest', label: 'Guest' }, { key: 'hotel', label: 'Hotel' }, { key: 'nights', label: 'Nights', num: true, sortable: true }, { key: 'total', label: 'Total (SAR)', num: true, sortable: true }]"
  :rows="[{ id: 1, code: 'ZG-1042', guest: 'Ahmed Khan', hotel: 'Hilton Makkah', nights: 5, total: '4,250' }, { id: 2, code: 'ZG-1043', guest: 'Fatima Noor', hotel: 'Pullman Zamzam', nights: 7, total: '6,120' }, { id: 3, code: 'ZG-1044', guest: 'Yusuf Ali', hotel: 'Anwar Al Madinah', nights: 4, total: '2,380' }, { id: 4, code: 'ZG-1045', guest: 'Maryam Said', hotel: 'Swissotel Makkah', nights: 10, total: '9,900' }]"
  sort-key="nights"
  sort-dir="desc"
 />

Empty

BookingGuestHotelNightsTotal (SAR)
No bookings yet
Vue
<UiDataTable
  :columns="[{ key: 'code', label: 'Booking' }, { key: 'guest', label: 'Guest' }, { key: 'hotel', label: 'Hotel' }, { key: 'nights', label: 'Nights', num: true }, { key: 'total', label: 'Total (SAR)', num: true }]"
  :rows="[]"
  empty="No bookings yet"
 />

Sizes

BookingGuestHotelNightsTotal (SAR)
ZG-1042Ahmed KhanHilton Makkah54,250
ZG-1043Fatima NoorPullman Zamzam76,120
ZG-1044Yusuf AliAnwar Al Madinah42,380
BookingGuestHotelNightsTotal (SAR)
ZG-1042Ahmed KhanHilton Makkah54,250
ZG-1043Fatima NoorPullman Zamzam76,120
ZG-1044Yusuf AliAnwar Al Madinah42,380
BookingGuestHotelNightsTotal (SAR)
ZG-1042Ahmed KhanHilton Makkah54,250
ZG-1043Fatima NoorPullman Zamzam76,120
ZG-1044Yusuf AliAnwar Al Madinah42,380
BookingGuestHotelNightsTotal (SAR)
ZG-1042Ahmed KhanHilton Makkah54,250
ZG-1043Fatima NoorPullman Zamzam76,120
ZG-1044Yusuf AliAnwar Al Madinah42,380
BookingGuestHotelNightsTotal (SAR)
ZG-1042Ahmed KhanHilton Makkah54,250
ZG-1043Fatima NoorPullman Zamzam76,120
ZG-1044Yusuf AliAnwar Al Madinah42,380
Vue
<UiDataTable
  :columns="[{ key: 'code', label: 'Booking' }, { key: 'guest', label: 'Guest' }, { key: 'hotel', label: 'Hotel' }, { key: 'nights', label: 'Nights', num: true }, { key: 'total', label: 'Total (SAR)', num: true }]"
  :rows="[{ id: 1, code: 'ZG-1042', guest: 'Ahmed Khan', hotel: 'Hilton Makkah', nights: 5, total: '4,250' }, { id: 2, code: 'ZG-1043', guest: 'Fatima Noor', hotel: 'Pullman Zamzam', nights: 7, total: '6,120' }, { id: 3, code: 'ZG-1044', guest: 'Yusuf Ali', hotel: 'Anwar Al Madinah', nights: 4, total: '2,380' }]"
  size="xs"
 />

<UiDataTable
  :columns="[{ key: 'code', label: 'Booking' }, { key: 'guest', label: 'Guest' }, { key: 'hotel', label: 'Hotel' }, { key: 'nights', label: 'Nights', num: true }, { key: 'total', label: 'Total (SAR)', num: true }]"
  :rows="[{ id: 1, code: 'ZG-1042', guest: 'Ahmed Khan', hotel: 'Hilton Makkah', nights: 5, total: '4,250' }, { id: 2, code: 'ZG-1043', guest: 'Fatima Noor', hotel: 'Pullman Zamzam', nights: 7, total: '6,120' }, { id: 3, code: 'ZG-1044', guest: 'Yusuf Ali', hotel: 'Anwar Al Madinah', nights: 4, total: '2,380' }]"
  size="sm"
 />

<UiDataTable
  :columns="[{ key: 'code', label: 'Booking' }, { key: 'guest', label: 'Guest' }, { key: 'hotel', label: 'Hotel' }, { key: 'nights', label: 'Nights', num: true }, { key: 'total', label: 'Total (SAR)', num: true }]"
  :rows="[{ id: 1, code: 'ZG-1042', guest: 'Ahmed Khan', hotel: 'Hilton Makkah', nights: 5, total: '4,250' }, { id: 2, code: 'ZG-1043', guest: 'Fatima Noor', hotel: 'Pullman Zamzam', nights: 7, total: '6,120' }, { id: 3, code: 'ZG-1044', guest: 'Yusuf Ali', hotel: 'Anwar Al Madinah', nights: 4, total: '2,380' }]"
  size="md"
 />

<UiDataTable
  :columns="[{ key: 'code', label: 'Booking' }, { key: 'guest', label: 'Guest' }, { key: 'hotel', label: 'Hotel' }, { key: 'nights', label: 'Nights', num: true }, { key: 'total', label: 'Total (SAR)', num: true }]"
  :rows="[{ id: 1, code: 'ZG-1042', guest: 'Ahmed Khan', hotel: 'Hilton Makkah', nights: 5, total: '4,250' }, { id: 2, code: 'ZG-1043', guest: 'Fatima Noor', hotel: 'Pullman Zamzam', nights: 7, total: '6,120' }, { id: 3, code: 'ZG-1044', guest: 'Yusuf Ali', hotel: 'Anwar Al Madinah', nights: 4, total: '2,380' }]"
  size="lg"
 />

<UiDataTable
  :columns="[{ key: 'code', label: 'Booking' }, { key: 'guest', label: 'Guest' }, { key: 'hotel', label: 'Hotel' }, { key: 'nights', label: 'Nights', num: true }, { key: 'total', label: 'Total (SAR)', num: true }]"
  :rows="[{ id: 1, code: 'ZG-1042', guest: 'Ahmed Khan', hotel: 'Hilton Makkah', nights: 5, total: '4,250' }, { id: 2, code: 'ZG-1043', guest: 'Fatima Noor', hotel: 'Pullman Zamzam', nights: 7, total: '6,120' }, { id: 3, code: 'ZG-1044', guest: 'Yusuf Ali', hotel: 'Anwar Al Madinah', nights: 4, total: '2,380' }]"
  size="xl"
 />

API reference

Table with sortable columns, custom cell rendering and optional row selection checkboxes.

Props

PropType and valuesDefaultDescription
columnsrequired{ key: string; label: string; sortable?: boolean; num?: boolean; align?: "left" | "center" | "right"; width?: string; render?: (value, row, h) => VNode | string }[][]Column definitions. key reads row[key]; num right-aligns numbers; render customizes the cell; sortable shows a sort button in the header.
rowsrequired({ id: string | number; [key: string]: any })[][]Row objects. Every row needs a unique id; missing cell values render as an em dash.
selected(string | number)[][]Ids of selected rows. Checkboxes show only when the select event is handled.
sortKeystring—Key of the column currently sorted. The component does not sort rows itself.
sortDirascdesc'asc'Direction of the current sort, shown by the header arrow and aria-sort.
emptystring'—'Text shown when rows is empty.
labels{ selectAll?: string; selectRow?: string }'{ selectAll: 'Select all', selectRow: 'Select row' }'Accessible names of the selection checkboxes.
sizexssmmdlgxl'md'Row density and font size.

Slots

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

emptyReplaces the empty text with custom content when rows is empty.

Events

Vue: @name. React: onName.

rowClickCalled with (row, index) when a body row is clicked. Rows get a pointer cursor.
selectCalled with the new array of selected row ids. Handling it enables the checkbox column and select-all.
sortCalled with (key, dir) where dir is "asc" or "desc". Sort the rows yourself and pass sortKey/sortDir back.

Notes

  • Sorting and selection are fully controlled: the table never reorders rows or stores selection.
  • render receives (value, row) and, in React/Vue, the h function as third argument.