Data table
#

The va-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, row selection, ability to add additional row(s) to table header (thead), body (tbody) or footer (tfoot) and other functions.

Also, we provide styles for HTML Table and have own theme for AG-Grid:

Examples
#

Id
Name
Username
Email
Phone
Website
1 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
2 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
3 Clementine Bauch Samantha Nathan@yesenia.net 1-463-123-4447 ramiro.info
4 Patricia Lebsack Karianne Julianne.OConner@kory.org 493-170-9623 x156 kale.biz
5 Chelsey Dietrich Kamren Lucio_Hettinger@annie.ca (254)954-1289 demarco.info
Open in GitHub

Slots
#

Slots allow you to control the display of data and their views in different parts of the table. The examples below demonstrate some of these slots and what you can do with each of them.

Using custom slots. Custom slots (username, street) display certain data.

Id
Name
Username
Email
Phone
Website
Street
Company Name
1 Leanne GrahamBret Sincere@april.biz 1-770-736-8031 x56442 hildegard.orgKulas Light Romaguera-Crona
2 Ervin HowellAntonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.netVictor Plains Deckow-Crist
3 Clementine BauchSamantha Nathan@yesenia.net 1-463-123-4447 ramiro.infoDouglas Extension Romaguera-Jacobson
Open in GitHub

Showing header, body and footer's prepend and append static rows. For added (prepended and appended) static rows an additional className with a background color is set.

#headerPrepend slot
Id
Name
Username
Email
Phone
Website
#headerAppend slot
#bodyPrepend slot
1 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
2 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
3 Clementine Bauch Samantha Nathan@yesenia.net 1-463-123-4447 ramiro.info
#bodyAppend slot
#footerPrepend slot
Id
Name
Username
Email
Phone
Website
#footerAppend slot
Open in GitHub

Using colgroup slot to set specific attributes to columns. For last column an additional className with a background color is set.

Id
Name
Username
Email
Phone
Website
1 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
2 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
3 Clementine Bauch Samantha Nathan@yesenia.net 1-463-123-4447 ramiro.info
Open in GitHub

Custom Filtering
#

The va-data-table offers a simple yet powerful filtering feature. Users can filter the displayed data using an input field. This feature reacts to input changes, updating the table view to match the query.

Enable filtering by binding a Vue ref to the filter prop. Options like custom filtering functions and debounce input enhance the experience. Basic filtering allows users to search across all data, while custom functions provide more control over the filtering logic. Debounce input improves performance for large datasets.

Idswap_vert
Usernameswap_vert
Nameswap_vert
Emailswap_vert
Zipcode
1 Bret Leanne Graham Sincere@april.biz 92998-3874
2 Antonette Ervin Howell Shanna@melissa.tv 90566-7771
3 Samantha Clementine Bauch Nathan@yesenia.net 59590-4157
4 Karianne Patricia Lebsack Julianne.OConner@kory.org 53919-4257
5 Kamren Chelsey Dietrich Lucio_Hettinger@annie.ca 33263
Open in GitHub

Advanced Filtering
#

Advanced filtering extends basic capabilities by allowing users to specify fields for filtering. This targeted approach enables more precise searches.

Implement this feature by combining a filter query text input with a multi-select dropdown to select fields. Users can focus their search on specific fields (e.g., 'Username', 'Email', 'Zipcode'), and custom filtering logic can be applied considering both the query and selected fields.

Idswap_vert
Usernameswap_vert
Nameswap_vert
Emailswap_vert
Zipcode
1 Bret Leanne Graham Sincere@april.biz 92998-3874
2 Antonette Ervin Howell Shanna@melissa.tv 90566-7771
3 Samantha Clementine Bauch Nathan@yesenia.net 59590-4157
4 Karianne Patricia Lebsack Julianne.OConner@kory.org 53919-4257
5 Kamren Chelsey Dietrich Lucio_Hettinger@annie.ca 33263
Open in GitHub

Sorting
#

You can specify which columns should be sortable by providing a column definition object (see the columns prop below) with the sortable: true field. Making a column sortable means allowing to click the column's header to toggle the sorting by that column's values.

You can use the sortingOptions property to set the sort order for the table as a whole, as well as for each column individually in the columns object.

You can also provide a custom sorting function for a given column using the sortingFn field on the column definition object: sortingFn: (a: any, b: any) => number. The function takes two cells' initial values (a, b) (note: initial values (i.e. in the form the user provided them, rather than stringified)) and must return a number (-1, 0, +1) indicating whether the two rows should be swapped the places or not. See the standard JS's Array.prototype.sort for details. If you want to runtime-disable the custom function and start making use of the built-in one, pass the undefined to the sortingFn.

You can also provide a custom display format function for a given column using the displayFormatFn field on the column definition object: displayFormatFn: () => 'Overridden string',The function takes in any value of any type and will allow full control over the displayed value.`

va-data-table also optionally accepts the sort-by and the sorting-order modeled props, which allow users to change sorting settings from-outside and to model the changes introduced to the table's sorting by interacting with the table itself. They also allow to provide initial sorting values. Properties work through the v-model.

By default, va-data-table utilizes client-side sorting. However, when using server-side sorting use the disableClientSideSorting prop to prevent dual re-ordering.

Idexpand_less
Usernameexpand_less
Nameexpand_less
Cityexpand_less
Phone
2 Antonette Ervin Howell Wisokyburgh 010-692-6593 x09125
1 Bret Leanne Graham Gwenborough 1-770-736-8031 x56442
5 Kamren Chelsey Dietrich Roscoeview (254)954-1289
4 Karianne Patricia Lebsack South Elvis 493-170-9623 x156
3 Samantha Clementine Bauch McKenziehaven 1-463-123-4447
Open in GitHub

Selection
#

Use the selectable prop to indicate whether the va-data-table should have selectable rows or not. The highlighting color of the selected row might be changed with the selected-color prop.

The selection may optionally be attached to a model with the standard v-model (using the :model-value prop and the update:modelValue event). This also allows to set the initial selection on the va-data-table.

Idswap_vert
Usernameswap_vert
Nameswap_vert
Emailswap_vert
Phoneswap_vert
1 Bret Leanne Graham Sincere@april.biz 1-770-736-8031 x56442
2 Antonette Ervin Howell Shanna@melissa.tv 010-692-6593 x09125
3 Samantha Clementine Bauch Nathan@yesenia.net 1-463-123-4447
4 Karianne Patricia Lebsack Julianne.OConner@kory.org 493-170-9623 x156
5 Kamren Chelsey Dietrich Lucio_Hettinger@annie.ca (254)954-1289
Open in GitHub

If you have items that can be updated (from the backend, for example), you must set the items-track-by prop to track your selected items properly.

Idswap_vert
Usernameswap_vert
Nameswap_vert
Emailswap_vert
Phoneswap_vert
1 Bret Leanne Graham Sincere@april.biz 1-770-736-8031 x56442
2 Antonette Ervin Howell Shanna@melissa.tv 010-692-6593 x09125
3 Samantha Clementine Bauch Nathan@yesenia.net 1-463-123-4447
4 Karianne Patricia Lebsack Julianne.OConner@kory.org 493-170-9623 x156
5 Kamren Chelsey Dietrich Lucio_Hettinger@annie.ca (254)954-1289
Open in GitHub

Pagination

Use the per-page and current-page props to enable pagination.

The va-data-table component is paginator-agnostic. I.e. it can work with any pagination component you'd like. In the example below, it uses both standard inputs and the va-pagination component.

Idswap_vert
Usernameswap_vert
Nameswap_vert
Emailswap_vert
Phone
1 Bret Leanne Graham Sincere@april.biz 1-770-736-8031 x56442
2 Antonette Ervin Howell Shanna@melissa.tv 010-692-6593 x09125
3 Samantha Clementine Bauch Nathan@yesenia.net 1-463-123-4447
Open in GitHub

Column styling
#

Should be specified on columns (see the columns prop below). Allows to provide different values (text-align, vertical-align and width css properties, custom class and style) for headers and for columns' cells.

#
Props
Description
1 thAlign, thVerticalAlign, thClass, thStyle Set css rules "align" and "vertical-align", "class" and "style" for header and footer cells
2 tdAlign, tdVerticalAlign, tdClass, tdStyle Set css rules "align" and "vertical-align", "class" and "style" for body cells
3 width Set "width" for a column
Open in GitHub

Row and cell attrs binding
#

Row and cell customization can be achieved by binding attributes for items using row-bind and cell-bind.

Idswap_vert
Usernameswap_vert
Nameswap_vert
Emailswap_vert
Phoneswap_vert
1 Bret Leanne Graham Sincere@april.biz 1-770-736-8031 x56442
2 Antonette Ervin Howell Shanna@melissa.tv 010-692-6593 x09125
3 Samantha Clementine Bauch Nathan@yesenia.net 1-463-123-4447
4 Karianne Patricia Lebsack Julianne.OConner@kory.org 493-170-9623 x156
5 Kamren Chelsey Dietrich Lucio_Hettinger@annie.ca (254)954-1289
Open in GitHub

Virtual scroll
#

The virtual-scroller prop enables virtual scroll for tbody rows (read more). Pay your attention, that CSS transition is disabled here because of possible performance problems.

Id
Name
Username
Email
Phone
Website
0 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
1 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
2 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
3 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
4 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
5 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
6 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
7 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
8 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
9 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
10 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
11 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
12 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
13 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
14 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
15 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
16 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
17 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
18 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
19 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
20 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
21 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
22 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
23 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
24 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
25 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
26 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
27 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
28 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
Open in GitHub

Sticky header and footer
#

The sticky header and footer are set by the sticky-header and sticky-footer properties. Sticky behavior is achieved through CSS with position: sticky. This is NOT supported on all browsers. Check caniuse.com before using this technique.

To work correctly, it is important to limit the height (set the value in the height property of the component or using the CSS height or max-height properties) of the table and assign a background color (set the CSS value background-color) of the table header.

Id
Name
Username
Email
Phone
Website
1 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
2 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
3 Clementine Bauch Samantha Nathan@yesenia.net 1-463-123-4447 ramiro.info
4 Patricia Lebsack Karianne Julianne.OConner@kory.org 493-170-9623 x156 kale.biz
5 Chelsey Dietrich Kamren Lucio_Hettinger@annie.ca (254)954-1289 demarco.info
6 Lindsey Hopkins Lindsey lindseyhopkins@nebulean.com (254)954-1589 nebulean.info
7 Head Lloyd Head headlloyd@nebulean.com (254)954-1279 nebulean.info
8 Fisher Bradford Bradford fisherbradford@nebulean.com (254)954-5289 nebulean.info
Id
Name
Username
Email
Phone
Website
Id
Name
Username
Email
Phone
Website
1 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
2 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
3 Clementine Bauch Samantha Nathan@yesenia.net 1-463-123-4447 ramiro.info
4 Patricia Lebsack Karianne Julianne.OConner@kory.org 493-170-9623 x156 kale.biz
5 Chelsey Dietrich Kamren Lucio_Hettinger@annie.ca (254)954-1289 demarco.info
6 Lindsey Hopkins Lindsey lindseyhopkins@nebulean.com (254)954-1589 nebulean.info
7 Head Lloyd Head headlloyd@nebulean.com (254)954-1279 nebulean.info
8 Fisher Bradford Bradford fisherbradford@nebulean.com (254)954-5289 nebulean.info
Id
Name
Username
Email
Phone
Website
With scroll events
Id
Name
Username
Email
Phone
Website
1 Leanne Graham Bret Sincere@april.biz 1-770-736-8031 x56442 hildegard.org
2 Ervin Howell Antonette Shanna@melissa.tv 010-692-6593 x09125 anastasia.net
3 Clementine Bauch Samantha Nathan@yesenia.net 1-463-123-4447 ramiro.info
4 Patricia Lebsack Karianne Julianne.OConner@kory.org 493-170-9623 x156 kale.biz
5 Chelsey Dietrich Kamren Lucio_Hettinger@annie.ca (254)954-1289 demarco.info
6 Lindsey Hopkins Lindsey lindseyhopkins@nebulean.com (254)954-1589 nebulean.info
7 Head Lloyd Head headlloyd@nebulean.com (254)954-1279 nebulean.info
8 Fisher Bradford Bradford fisherbradford@nebulean.com (254)954-5289 nebulean.info
Id
Name
Username
Email
Phone
Website
Open in GitHub

Other
#

The component has many different properties, some of them are shown below with an example.

Striped

Animated

Clickable
Loading

Prepend slots

Append slots
Hide header

Clone footer

Foot sorting
Idswap_vert
Usernameswap_vert
Nameswap_vert
Emailswap_vert
Phoneswap_vert
1 Bret Leanne Graham Sincere@april.biz 1-770-736-8031 x56442
2 Antonette Ervin Howell Shanna@melissa.tv 010-692-6593 x09125
3 Samantha Clementine Bauch Nathan@yesenia.net 1-463-123-4447
4 Karianne Patricia Lebsack Julianne.OConner@kory.org 493-170-9623 x156
5 Kamren Chelsey Dietrich Lucio_Hettinger@annie.ca (254)954-1289
Idswap_vert
Usernameswap_vert
Nameswap_vert
Emailswap_vert
Phoneswap_vert
Open in GitHub

CRUD actions
#

Example of va-data-table with CRUD actions using a va-modal component for editing each row:

Nameswap_vert
Usernameswap_vert
Emailswap_vert
Actions
Leanne Graham Bret Sincere@april.biz
Ervin Howell Antonette Shanna@melissa.tv
Clementine Bauch Samantha Nathan@yesenia.net
Patricia Lebsack Karianne Julianne.OConner@kory.org
Open in GitHub

Expandable rows
#

Each row could can be additionally expanded by providing expandableRow slot. Slot expansion is triggered by row.toggleRowDetails slot property

Name
Username
Email
Actions
Leanne Graham Bret Sincere@april.biz
Ervin Howell Antonette Shanna@melissa.tv
Clementine Bauch Samantha Nathan@yesenia.net
Patricia Lebsack Karianne Julianne.OConner@kory.org
Chelsey Dietrich Kamren Lucio_Hettinger@annie.ca
Open in GitHub

Inline Editing
#

Inline cell editing example. We provide a #cell slot for each column. The VaValue component provides a boolean variable, which we can use to show/hide input. To change cell data we need access it by reference using row.rowData[item.key] - this way vue can track reactivity. Additional CSS is used to make the table look better. This way you can use VaInput, VaSelect or any other component to edit data inline.

Nameswap_vert
Usernameswap_vert
Emailswap_vert
Leanne Graham
Bret
Sincere@april.biz
Ervin Howell
Antonette
Shanna@melissa.tv
Clementine Bauch
Samantha
Nathan@yesenia.net
Patricia Lebsack
Karianne
Julianne.OConner@kory.org
Open in GitHub

Column width
#

You can freeze column width with width property in column. You can use it with virtual-scroller to prevent column size shifting on different data.

50px
100px
200px
400px
1 Leanne Bret Sincere@april.biz
2 Ervin Antonette Shanna@melissa.tv
3 Clementine Samantha Nathan@yesenia.net
4 Patricia Karianne Julianne.OConner@kory.org
5 Chelsey Kamren Lucio_Hettinger@annie.ca
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
allowFooterSorting

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

Boolean

false

animated

Sets css transition to table rows

Boolean

true

ariaSelectAllRowsLabel

String

"$t:selectAllRows"

ariaSelectRowLabel

String

"$t:selectRowByIndex"

ariaSortColumnByLabel

String

"$t:sortColumnBy"

bench

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 | String

10

cellBind

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

-

clickable

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

Boolean

false

columns

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

(string | DataTableColumn)[]

[]

columnSorted

Object

-

currentPage

Sets the number of the current table page

Number

-

delay

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

Number

0

disableClientSideSorting

Boolean

false

filter

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

""

filterMethod

A custom filtering function that enhances the data table's filtering capabilities. This function receives two parameters: the initial value of the currently checked cell (source) and the cell object itself. It should return a boolean value indicating whether to include the row containing this cell. This approach allows for more sophisticated and context-aware filtering logic.

DataTableFilterMethod: (source: any, cell: DataTableCell) => boolean

-

footerClone

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

grid

Enables grid view for the component

Boolean

false

gridColumns

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

Number | String

0

height

Sets the height to the table and enables scrolling

String | Number

-

hideDefaultHeader

Sets whether to show the default headers for columns

Boolean

false

hoverable

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

Boolean

false

items

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[]

[]

itemSize

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

itemsTrackBy

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

""

loading

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

Boolean

false

loadingColor

Sets the color of the spinning loading-indicator

String

"primary"

modelValue

The value of the v-model bindings.

Array

-

noDataFilteredHtml

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"

noDataHtml

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

String

"No items"

perPage

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

Number

-

preset

Named preset combination of component props.

String | Array

-

rowBind

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

-

scrollBottomMargin

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

Number | String

0

scrollTopMargin

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

Number | String

0

selectable

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

Boolean

false

selectedColor

Sets the highlighting color of the selected row

String

"primary"

selectMode

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'

"multiple"

sortBy

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

String

-

sortingOptions

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

DataTableSortingOrder[]

[
  "asc",
  "desc",
  null
]
sortingOrder

Sets the sorting order. Works through the v-model

DataTableSortingOrder: 'asc'|'desc'|null

-

stickyFooter

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

Boolean

false

stickyHeader

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

Boolean

false

striped

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

Boolean

false

virtualScroller

Enables virtual scrolling for tbody rows.

Boolean

false

virtualTrackBy

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

String | Number

"initialIndex"

wrapperSize

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"

Events #

NameDescription

columnSorted

Emits when sort is clicked. Returns all column data, the column name, and the sort direction. The event argument is:

{
  columnName: string,
  value: DataTableSortingOrder,
  column: DataTableColumnInternal
}

filtered

va-data-table emits the filtered event each time filtering is applied (and when the filter is cleared). The event argument is:

{
  items: DataTableItem[],
  itemsIndexes: number[],
}

row:click

When row clicked the event is thrown. The event argument is:

// type RowClickEvent
{
  event: Event, // native mouse event
  item: DataTableItem,
  itemIndex: number,
}

row:contextmenu

When the context menu is clicked on a row, an event is raised. The event argument is:

type RowClickEvent

row:dblclick

Double-clicking a row raises an event. The event argument is:

type RowClickEvent

scroll:bottom

Emits when table scroll down reaches scrollBottomMargin.

scroll:top

Emits when table scroll top reaches scrollTopMargin.

selectionChange

The selectionChange event is thrown each time the selection changes. The event argument is:

{
  currentSelectedItems: (DataTableItem | DataTableItemKey)[],
  previousSelectedItems: (DataTableItem | DataTableItemKey)[],
}

sorted

Each time the table's sorting changes, the sorted event is thrown. The event argument is:

{
  sortBy: string,
  sortingOrder: DataTableSortingOrder,
  items: DataTableItem[],
  itemsIndexes: number[],
}

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model

update:sortBy

Emits when sort-by changed. The event argument is:

type String

update:sortingOrder

Emits when sorting-order changed. The event argument is:

type DataTableSortingOrder

Slots #

NameDescription

bodyAppend

Appends rows to the table's tbody

bodyPrepend

Prepends tbody with custom rows

cell

Targets all the cells. Is bound to the current cell (to it internal representation). Slot scope available:

{
  cell: DataTableCellScope,
  row: DataTableRowScope,
}

// types description

type DataTableCellScope {
  rowIndex: number, // the same as "initialIndex" in "DataTableRowScope" type
  rowKey: any,
  rowData: DataTableItem,
  column: DataTableColumnScope,
  source: any,
  value: string,
}

type DataTableRowScope {
  initialIndex: number,
  itemKey: any,
  cells: DataTableCellScope[],
  /** Same rowData as in DataTableCellScope */
  rowData: DataTableItem,
}

type DataTableColumnScope {
  source: DataTableColumn | string,
  initialIndex: number,
  key: string,
  name: string,
  label: string,
}

type DataTableItem = Record<string, any>

cell(key)

Allows to target only cells of a specified by the given key column. Is bound to the current cell. Slot scope available:

{
  rowIndex: number,
  rowKey: any,
  rowData: DataTableItem, // the same as in the "cell" slot
  column: DataTableColumnScope, // the same as in the "cell" slot
  source: any,
  value: string,
  row: DataTableRowScope, // the same as in the "cell" slot
  isExpanded: boolean,
}

colgroup

The contents of this slot is wrapped (if provided) inside the colgroup tag, allowing to specify certain column options. Bound to columns (not the prop, but their internal representation). Slot scope available:

type DataTableColumnScope[]

expandableRow

Targets all the row. Adds an expandable row underneath. To trigger expansion use row.toggleRowDetails. Slot scope available:

{
  initialIndex: number,
  itemKey: any,
  cells: DataTableRowScope[], // the same as in the "cell" slot
  /** Same rowData as in DataTableRowScope */
  rowData: DataTableItem, // the same as in the "cell" slot
  toggleRowDetails: (show?: boolean) => void,
  isExpandableRowVisible: boolean,
}

footer

Targets all the headers inside tfoot. Works if there's a footer-clone prop set to true. Slot scope available:

{
  key: string,
  label: string,
}

footer(key)

A specific header in tfoot. Is bound to the column (to it internal representation) with the given key. Works if there's a footer-clone prop set to true. Slot scope available:

{
  key: string,
  label: string,
}

footerAppend

Appends rows to the tfoot

footerPrepend

Prepends rows to the table's tfoot

header

Targets all the table headings. Is bound to columns (to their internal representation). Slot scope available:

{
  key: string,
  label: string,
}

header(key)

Targets a specific table header by the column's key. Is bound to column. Slot scope available:

{
  key: string,
  label: string,
}

headerAppend

Appends custom rows inside table header (thead)

headerPrepend

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

Css Variables #

NameDefault Value
--va-data-table-cell-padding 0.625rem
--va-data-table-thead-line-height 1.6
--va-data-table-thead-font-size 0.625rem
--va-data-table-thead-font-weight 700
--va-data-table-thead-text-transform uppercase
--va-data-table-thead-letter-spacing 0.6px
--va-data-table-thead-border 1px solid var(--va-background-border)
--va-data-table-tfoot-border unset
--va-data-table-height unset
--va-data-table-max-height unset
--va-data-table-thead-color currentColor
--va-data-table-tfoot-color currentColor
--va-data-table-header-background var(--va-background-primary)
--va-data-table-hover-th-opacity 0.3
--va-data-table-striped-tr-background-color var(--va-background-element)
--va-data-table-striped-tr-opacity 1
--va-data-table-selectable-tr-cursor pointer
--va-data-table-selectable-cell-width 55px
--va-data-table-selectable-cell-vertical-align middle
--va-data-table-selectable-cell-text-align center
--va-data-table-no-data-text-align center
--va-data-table-no-data-vertical-align middle
--va-data-table-transition var(--va-transition)
--va-data-table-grid-tbody-gap 0.5rem
--va-data-table-grid-tbody-margin-top 1rem
--va-data-table-grid-tr-padding 1rem
--va-data-table-grid-tr-border-radius 0.5rem
--va-data-table-grid-tr-border 1px solid var(--va-background-border)
--va-data-table-grid-tr-header-font-weight 600
--va-data-table-grid-tr-header-color var(--va-text-primary)

Change log #

v1.9.3
  • Default sorting function now correctly sorts numbers

v1.9.0
  • Add slot types

v1.8.0
  • New fabrics for Typescript users type DataTableItems, type DataTableColumns, defineVaDataTableColumns and defineVaDataTableItems