Data table

#

Allows clicks on tfoot column headers to sort (and to display the sorting status) the rows

Boolean

false

Sets css transition to table rows

Boolean

true

String

"$t:selectAllRows"

String

"$t:selectRowByIndex"

String

"$t:sortColumnBy"

Amount of rows will be rendered before and after visible part of the table (for smooth scrolling). Suitable only for the state with the virtual scrolling enabled.

Number

10

Adds attributes to a table cell using v-bind. This can be an object type (with attributes that vue supports) or a function that returns such an object. As arguments, the function receives a table cell element (any type), a row (DataTableItem type), a column (TableColumn type), and a row index

any

-

Sets whether the va-data-table should have clickable (the click events will be emitted) rows or not

Boolean

false

The property columns must be an array, that configures the columns of the table

(string | DataTableColumn)[]

[]

Sets the number of the current table page

Number

-

Sets throttling delay (ms) for the components any data change (useful for huge data).

Number

0

If a filter is provided, only rows in which at least one cell contains the specified value will be displayed. To disable filtering at runtime (clear filter), specify an empty string

String

""

A custom filtering function. The function takes the initial value of the currently checked cell (the source is a formal parameter) and should return a boolean value, indicating whether to include the row containing this cell or not

Function

-

A custom filtering function. The function takes the initial value of the currently checked cell (the source is a formal parameter) and should return a boolean value, indicating whether to include the row containing this cell or not

DataTableFilterMethod: (source: any) => boolean

Sets whether to clone the thead columns into the tfoot. Has no effect if the default thead is hidden with the hide-default-header prop

Boolean

false

Enables grid view for the component

Boolean

false

Sets the amount of columns for grid view. By default is ruled by adaptive CSS variables.

Number

0

Sets the height to the table and enables scrolling

String | Number

-

Sets whether to show the default headers for columns

Boolean

false

Allows the hover state on table rows within a tbody. The highlighting color of the hover state takes from selected-color prop

Boolean

false

Average size (width or height) of the row (can be number or string with "px"/"rem" value). Suitable only for the state with the virtual scrolling enabled.

Number | String

0

Array of objects with table data (DataTableItem type). The va-data-table automatically calculates the amount and the titles of columns (if not specified otherwise with the columns prop) based on these object's keys. When calculating the columns' names based on the item's objects' keys va-data-table uses Lodash's startCase internally. Faulty values are replaced with an empty string

DataTableItem[]

[]

The item key that is used to keep track of the selected item. Can be string (path to the key) or a function of type: (item) => item.track

String | Function

""

Sets the loading state for the table (by displaying the spinning loading-indicator)

Boolean

false

Sets the color of the spinning loading-indicator

String

"primary"

The value of the v-model bindings.

Array

-

Sets html-content for cases where there are no items found when filtering the table using the filter prop

String

"No items match the provided filtering condition"

Sets html-content for cases where there are no items passed in the items option at all

String

"No items"

Sets the maximum number of rows displayed in the table's tbody

Number

-

Named preset combination of component props.

String

-

Adds attributes to a table row using v-bind. This can be an object type (with attributes that vue supports) or a function that returns such an object. The function receives a table row element (DataTableItem type) and an index as arguments

any

-

Sets the threshold (px) for scrolling down when the scroll:bottom event is enabled.

Number

0

Sets the threshold (px) for scrolling up when the scroll:top event is enabled.

Number

0

Sets the select mode. 'single' selection allows for only a single row to be selected at a time, while 'multiple' mode allows to select multiple rows by clicking on checkboxes or using the ctrl/shift keys when clicking rows

String

"multiple"

Sets whether the va-data-table should have selectable rows or not

Boolean

false

Sets the highlighting color of the selected row

String

"primary"

Sets the select mode. 'single' selection allows for only a single row to be selected at a time, while 'multiple' mode allows to select multiple rows by clicking on checkboxes or using the ctrl/shift keys when clicking rows

DataTableSelectMode: 'single'|'multiple'

Sets the column to sort by. Works through the v-model

String

-

An array from a set of values ('asc', 'desc', null) that specifies the order and allowed sort directions.

Array

[
  "asc",
  "desc",
  null
]

Sets the sorting order. Works through the v-model

String

-

An array from a set of values ('asc', 'desc', null) that specifies the order and allowed sort directions.

DataTableSortingOrder[]

Sets the sorting order. Works through the v-model

DataTableSortingOrder: 'asc'|'desc'|null

Enables sticky footer (sticky footer is achieved through CSS with position: sticky for tfoot)

Boolean

false

Enables sticky header (sticky header is achieved through CSS with position: sticky for thead)

Boolean

false

Sets the striped style to the tbody rows (highlights each 2nd row)

Boolean

false

Enables virtual scrolling for tbody rows.

Boolean

false

Property name for row identifying. Suitable only for the state with the virtual scrolling enabled.

String | Number

"initialIndex"

Size (width or height) of the component's viewport (can be number or string with "px"/"rem" value). Suitable only for the state with the virtual scrolling enabled.

Number | String

"auto"

filtered

row-click

When row clicked the event is thrown

row-contextmenu

When the context menu is clicked on a row, an event is raised

row-dblclick

Double-clicking a row raises an event

row:click

row:contextmenu

row:dblclick

scroll-bottom

Emits when table scroll down reaches scrollBottomMargin.

scroll-top

Emits when table scroll top reaches scrollTopMargin.

scroll:bottom

Emits when table scroll down reaches scrollBottomMargin.

scroll:top

Emits when table scroll top reaches scrollTopMargin.

selection-change

The selectionChange event is thrown each time the selection changes

selectionChange

sorted

update-model-value

The event is triggered when the component needs to change the model. Is also used by v-model

update-sort-by

Emits when sort-by changed

update-sorting-order

Emits when sorting-order changed

update:sortBy

update:sortingOrder

bodyAppend

Appends rows to the table's tbody

bodyPrepend

Prepends tbody with custom rows

cell

cell(key)

colgroup

expandableRow

footer

footer(key)

footerAppend

Appends rows to the tfoot

footerPrepend

Prepends rows to the table's tfoot

header

header(key)

headerAppend

Appends custom rows inside table header (thead)

headerPrepend

Prepends custom rows in table header (thead). Isn't bound to anything