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