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 #
Basic usage #
The standard va-data-table
will by default render your data as simple rows.
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 |
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.
Slot names that are not in columns
prop will be omitted.
Id | Name | Username | Email | Phone | Website | Street | Company Name |
---|---|---|---|---|---|---|---|
1 | Leanne Graham | Bret | Sincere@april.biz | 1-770-736-8031 x56442 | hildegard.org | Kulas Light | Romaguera-Crona |
2 | Ervin Howell | Antonette | Shanna@melissa.tv | 010-692-6593 x09125 | anastasia.net | Victor Plains | Deckow-Crist |
3 | Clementine Bauch | Samantha | Nathan@yesenia.net | 1-463-123-4447 | ramiro.info | Douglas Extension | Romaguera-Jacobson |
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 |
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 |
Filtering #
va-data-table
allows to apply a single filter for the entire table with the filter
prop. To use a custom filtering function provide the va-data-table
with the filter-method
prop.
The following example shows the use of a custom filtering function (which looks for the exact match rather than the standard one which checks for substring-inclusion) when the respective checkbox is checked.
Idunfold_more | Usernameunfold_more | Nameunfold_more | Emailunfold_more | 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 |
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
.
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
.
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 |
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
.
Idunfold_more | Usernameunfold_more | Nameunfold_more | Emailunfold_more | Phoneunfold_more | |
---|---|---|---|---|---|
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 |
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.
Idunfold_more | Usernameunfold_more | Nameunfold_more | Emailunfold_more | Phoneunfold_more | |
---|---|---|---|---|---|
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 |
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.
Idunfold_more | Usernameunfold_more | Nameunfold_more | Emailunfold_more | 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 | |
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 |
Row and cell attrs binding #
Row and cell customization can be achieved by binding attributes for items using row-bind
and cell-bind
.
Idunfold_more | Usernameunfold_more | Nameunfold_more | Emailunfold_more | Phoneunfold_more | |
---|---|---|---|---|---|
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 |
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 |
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 |
Other #
The component has many different properties, some of them are shown below with an example.
Idunfold_more | Usernameunfold_more | Nameunfold_more | Emailunfold_more | Phoneunfold_more | |
---|---|---|---|---|---|
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 | |
Idunfold_more | Usernameunfold_more | Nameunfold_more | Emailunfold_more | Phoneunfold_more |
CRUD actions #
Example of va-data-table
with CRUD actions using a va-modal
component for editing each row:
Nameunfold_more | Usernameunfold_more | Emailunfold_more | 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 |
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 |
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.
Nameunfold_more | Usernameunfold_more | Emailunfold_more |
---|---|---|
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 |
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
allowFooterSorting |
|
| |
animated |
|
| |
ariaSelectAllRowsLabel |
|
| |
ariaSelectRowLabel |
|
| |
ariaSortColumnByLabel |
|
| |
bench |
|
| |
cellBind |
| - | |
clickable |
|
| |
columns |
|
| |
columns | The property |
| |
currentPage |
| - | |
delay |
|
| |
filter |
|
| |
filterMethod |
| - | |
filterMethod | A custom filtering function. The function takes the initial value of the currently checked cell (the |
| |
footerClone |
|
| |
grid |
|
| |
gridColumns |
|
| |
height |
| - | |
hideDefaultHeader |
|
| |
hoverable |
|
| |
items |
|
| |
items | Array of objects with table data ( |
| |
itemSize |
|
| |
itemsTrackBy |
|
| |
loading |
|
| |
loadingColor |
|
| |
modelValue |
| - | |
noDataFilteredHtml |
|
| |
noDataHtml |
|
| |
perPage |
| - | |
preset |
| - | |
rowBind |
| - | |
scrollBottomMargin |
|
| |
scrollTopMargin |
|
| |
selectable |
|
| |
selectedColor |
|
| |
selectMode |
|
| |
selectMode | Sets the select mode. |
| |
sortBy |
| - | |
sortingOptions |
|
| |
sortingOptions | An array from a set of values ( |
| |
sortingOrder |
| - | |
sortingOrder | Sets the sorting order. Works through the |
| |
stickyFooter |
|
| |
stickyHeader |
|
| |
striped |
|
| |
virtualScroller |
|
| |
virtualTrackBy |
|
| |
wrapperSize |
|
|
Events #
Name | Description |
---|---|
filtered |
|
row:click | When row clicked the event is thrown. The event argument is:
|
row:contextmenu | When the context menu is clicked on a row, an event is raised. The event argument is:
|
row:dblclick | Double-clicking a row raises an event. The event argument is:
|
scroll:bottom | Emits when table scroll down reaches |
scroll:top | Emits when table scroll top reaches |
selectionChange | The
|
sorted | Each time the table's sorting changes, the
|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
update:sortBy | Emits when
|
update:sortingOrder | Emits when
|
Slots #
Name | Description |
---|---|
bodyAppend | Appends rows to the table's |
bodyPrepend | Prepends |
cell | Targets all the cells. Is bound to the current cell (to it internal representation). Slot scope available:
|
cell(key) | Allows to target only cells of a specified by the given
|
colgroup | The contents of this slot is wrapped (if provided) inside the
|
expandableRow | Targets all the row. Adds an expandable row underneath. To trigger expansion use
|
footer | Targets all the headers inside
|
footer(key) | A specific header in
|
footerAppend | Appends rows to the |
footerPrepend | Prepends rows to the table's |
header | Targets all the table headings. Is bound to columns (to their internal representation). Slot scope available:
|
header(key) | Targets a specific table header by the column's
|
headerAppend | Appends custom rows inside table header ( |
headerPrepend | Prepends custom rows in table header ( |
Css Variables #
Name | Default 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-thead-border-top-shadow | inset 0 1px 0 0 var(--va-background-border) |
--va-data-table-thead-border-bottom-shadow | inset 0 -1px 0 0 var(--va-background-border) |
--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) |