Common props
common props can be used both in client-side mode and server-side mode.
Name Required Type Default Description
Item[]
v-model:
false (Record<string, null Items selected
itemsSelected
any>[])
Set true to color
alternating false boolean false alternating (even and
odd) rows.
Function that returns
(item: Item, custom class names for a
body-expand-
rowNumber: body expanding row, or a
row-class- false ''
number) => string string assigning class
name
or string names for every body
expanding row
Function that returns
(item: Item,
custom class names for a
body-row- rowNumber:
false '' body row, or a string
class-name number) => string
assigning class names for
or string
every body row
Function that returns
(column: string, custom class names for a
body-item- index: rowNumber) body row item, the
false ''
class-name => string or second parameter means
string the row number in
current page
body-text- 'left' | 'center' | Text direction of body
false 'left'
direction 'right' item
Set true to show
border-cell false boolean false borderof header item
and body item
buttons- false boolean false By default, you can only
pagination use prev and next
buttons to navigate. But
if you set the value to
true , Seven visible
page buttons will be
generated automatically
Name Required Type Default Description
to help you navigate
much easier
Width of checkbox
checkbox-
false number null column. Click here for
column-width
more information
current-page false number 1 Initial current page
'No
empty- Message to display when
false string Available
message there is no data in table
Data'
Width of expand column.
expand-
false number 36 Click here for more
column-width
information
Fixed checkbox column
to the left side of table.
fixed-checkbox false boolean false
Click here for more
information
Fixed expand column to
the left side of table. Click
fixed-expand false boolean false
here for more
information
Fixed header to top of
fixed-header false boolean true table. NOTE: Does not
work in IE11
Fixed index column to
the left side of table. Click
fixed-index false boolean false
here for more
information
Click here for more
filter-options false FilterOption[] null
information
Header[]
(Header: {
text: string,
value: string,
headers true sortable?: [] Table header items
boolean,
width?: number,
fixed?:
boolean,})
Set true to hide native
hide-footer false boolean false footer of vue3-easy-
data-table .
Name Required Type Default Description
hide-rows-per- Set to true to hide
false boolean false
page rows per page
header-class- String assigning class
false string ''
name names for table header
Function that returns
(item: Header,
custom class names for a
header-item- columnNumber:
false '' header item, or a string
class-name number) => string
assigning class names for
or string
every header item
header-text- 'left' | 'center' | Text direction of header
false 'left'
direction 'right' item
Width of index column.
index-column-
false number 60 Click here for more
width
information
Item[]
(Item:
items true [] Table body items
Record<string,
any>)
If true and no items are
provided, then a loading
loading false boolean false
animation and will be
shown
If true then one can
not disable sorting, it will
must-sort false boolean false always switch between
ascending and
descending
Set to true to
no-hover false boolean false forbidden change color
when hovering table row
rows-of-page-
Rows of page separator
separator- false string 'of'
message. e.g. 1-5 of 5
message
A number array of rows-
[25, 50, per-page, working as the
rows-items false number[]
100] options of rows per
page selector
Rows of items to display
rows-per-page false number 25
in per page
rows-per- false string 'rows per Rows per page message
Name Required Type Default Description
page-message page:'
Set true to show index
show-index false boolean false
of item
Text of index column
show-index-
false string '#' header when show-
symbol
index is true
table-class- String assigning class
false string ''
name names for table
Height of table (table
table-height false number | null null header and table body,
without footer)
Min height of table (table
table-min-
false number 180 header and table body,
height
without footer)
Fill color of checkbox,
background color of
active option of rows
theme-color false string '#42b883' selector, loading color
and background color of
active button of buttons
pagination
Edit this page
Last Updated: 11/9/2022, 8:44:17 PM
Contributors: HC200ok
