Common props

common props can be used both in client-side mode and server-side mode.

NameRequiredTypeDefaultDescription
v-model: itemsSelectedfalseItem[]
(Record<string, any>[])
nullItems selected
alternatingfalsebooleanfalseSet true to color alternating (even and odd) rows.
table-font-sizefalsenumber12Font size of table header, body, footer. The unit is px.
buttons-paginationfalsebooleanfalseBy default, you can only use prev and next buttons to navigate. But if you set the value to true, Seven visible page buttons will be generated automatically to help you navigate much easier
densefalsebooleanfalseSet true to decrease the height of rows
empty-messagefalsestring'No Available Data'Message to display when there is no data in table
fixed-headerfalsebooleantrueFixed header to top of table. NOTE: Does not work in IE11
headerstrueHeader[]
(Header: {
    text: string,
    value: string,
    sortable?: boolean,})
[]Table header items
itemstrueItem[]
(Item: Record<string, any>)
[]Table body items
loadingfalsebooleanfalseIf true and no items are provided, then a loading bar and loading message will be shown
max-heightfalsenumber | nullnullMax height of table (table header and table body, not including footer pagination)
rows-itemsfalsenumber[][25, 50, 100]A number array of rows-per-page, working as the options of rows per page selector
rows-per-pagefalsenumber25Rows of items to display in per page
show-indexfalsebooleanfalseSet true to show index of item.
Last Updated:
Contributors: HC200ok