# Row Selection
# Table Row VTr
To enable row selection you need to use the VTr component. It only has one property: row
# Row object
You must provide the row property with the current Object for the row:
<VTable :data="users">
<template #head>
<th>Name</th>
...
</template>
<template #body="{ rows }">
<VTr
v-for="row in rows"
:key="row.guid"
:row="row"
>
<td>{{ row.name }}</td>
...
</VTr>
</template>
</VTable>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Selection Options
You can configure the Selection Mode and the Selected Class in the VTable component.
# Selection Mode 'single' | 'multiple'
By default, the selection mode is single, meaning only one row at a time can be selected. You can use the selectionMode property in the VTable component to set it to multiple, so multiple rows can be selected.
# Selected Class string
When a row is selected a class is added to the tr element, by default it is vt-selected but you can change it to something else with the selectedClass property in the VTable component.
# Get selected rows
VTable exposes the selected rows with the stateChanged event. Every time the selection changes the event is triggered. The stateChanged payload object includes a selectedRows property with our selected rows. You can listen to the event and store the selected rows locally for your use:
<template>
<VTable
:data="users"
@stateChanged="selectedRows = $event.selectedRows"
>
...
</VTable>
</template>
2
3
4
5
6
7
8
<script>
import users from './users.json'
export default {
data: () => ({
users,
selectedRows: []
})
}
</script>
2
3
4
5
6
7
8
9
10
You can learn more about the stateChanged event in the Table State section.
# Advanced Selection
Through scoped slots and one setting, you can have fine control over how the selection works:
# Select On Click
By default a VTr row will be selected when the user clicks on it. However, if you want to have more control over it, for instance to show a checkbox, you can set selectOnClick to false in the VTable component, this will make it so clicking a VTr will not select the row.
<template>
<VTable
:data="users"
:selectOnClick="false"
>
...
</VTable>
</template>
2
3
4
5
6
7
8
# Head Scoped Slot
The head scoped slot in the VTable component provides the following properties:
| Property | Description | Type Definition |
|---|---|---|
| selectAll | Function to select all the rows | () => void |
| deselectAll | Function to deselect all the rows | () => void |
| toggleAllRows | Function to toggle all the rows selection. If all rows are selected it deselects them all, otherwise it will select them all. | () => void |
| selectedRows | An array with all the selected rows | any[] |
| allRowsSelected | Boolean indicating whether or not all rows are selected | boolean |
<template>
<VTable
:data="users"
>
<template #head="{ allRowsSelected, selectAll, deselectAll, toggleAllRows, selectedRows }">
...
</template>
</VTable>
</template>
2
3
4
5
6
7
8
9
# Body Scoped Slot
The body scoped slot in the <VTable> provides the following properties:
| Property | Description | Type Definition |
|---|---|---|
| selectRow | Function to select one row. The row parameter should be === to one row in the table. | (row: any) => void |
| deselectRow | Function to deselect one row. The row parameter should be === to one row in the table. | (row: any) => void |
| selectedRows | An array with all the selected rows | any[] |
<template>
<VTable
:data="users"
>
<template #body="{ selectRow, deselectRow, selectedRows }">
...
</template>
</VTable>
</template>
2
3
4
5
6
7
8
9
# VTr Default Slot
The VTr component on its default slot provides the following properties:
| Property | Description | Type Definition |
|---|---|---|
| isSelected | Boolean indicating whether or not the row is selected | boolean |
| toggle | Function to toggle the selection state of the VTr | () => void |
<template>
<VTable
:data="users"
>
<template #body="{ rows }">
<VTr
v-for="row in rows"
:key="row.id"
v-slot="{ isSelected, toggle }"
>
...
</VTr>
</template>
</VTable>
</template>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Example
<template>
<div>
<VTable
ref="usersTable"
:data="users"
selectionMode="multiple"
:selectOnClick="false"
@stateChanged="selectedRows = $event.selectedRows"
>
<template #head="{ allRowsSelected, toggleAllRows }">
<th>
<input
type="checkbox"
:checked="allRowsSelected"
@change="toggleAllRows"
/>
</th>
<th>Name</th>
<th>Age</th>
<th>State</th>
<th>Registered at</th>
</template>
<template #body="{ rows }">
<VTr
v-for="row in rows"
:key="row.guid"
:row="row"
v-slot="{ isSelected, toggle}"
>
<td>
<input
type="checkbox"
:checked="isSelected"
@change="toggle"
/>
</td>
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
<td>{{ row.address.state }}</td>
<td>{{ row.registered }}</td>
</VTr>
</template>
</VTable>
<strong>Selected:</strong>
<div v-if="selectedRows.length === 0">No rows selected</div>
<ul>
<li v-for="selected in selectedRows">
{{ selected.name }}
</li>
</ul>
</div>
</template>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script>
import users from './users.json'
export default {
name: 'Selection',
data: () => ({
users: users,
selectedRows: []
})
}
</script>
2
3
4
5
6
7
8
9
10
11
| Name | Age | State | Registered at | |
|---|---|---|---|---|
| Deana Lindsay | 25 | Pennsylvania | 2015-10-30 | |
| Wyatt Kline | 39 | Maine | 2014-06-17 | |
| Harmon Huber | 29 | American Samoa | 2016-01-25 | |
| Penny Maddox | 29 | Oregon | 2016-01-08 | |
| Morgan Gomez | 39 | Connecticut | 2014-04-10 | |
| Beck Mckay | 35 | Mississippi | 2016-05-06 | |
| Massey Carlson | 39 | Hawaii | 2014-10-22 | |
| Hill Hale | 33 | Colorado | 2016-04-18 | |
| Stokes Hurst | 26 | North Dakota | 2016-01-30 | |
| Cain Knapp | 20 | Michigan | 2016-01-04 |
# Selection API
We also provide an API to perform some selection actions such as selecting all the rows. These are functions that are exposed in the VTable component. The first thing you need to do is to get a ref to the VTable component:
<template>
<VTable
:data="users",
:ref="usersTable"
>
...
</VTable>
</template>
2
3
4
5
6
7
8
Once we have a ref, we can now call a couple of functions to manipulate the table selection:
# Select All
The selectAll function will select all the rows in the table.
If you have pagination enabled we will still select all the rows even the ones that are not currently visible.
<script>
export default {
methods: {
selectAll () {
this.$refs.usersTable.selectAll()
}
}
}
</script>
2
3
4
5
6
7
8
9
# Deselect All
The deselectAll function will deselect all the rows in the table currently selected.
If you have pagination enabled we will still deselect all the rows even the ones that are not currently visible.
<script>
export default {
methods: {
deselectAll () {
this.$refs.usersTable.deselectAll()
}
}
}
</script>
2
3
4
5
6
7
8
9
# Select Rows
Clicking on a row is not the only way to select rows, you can also select them programmatically. For instance, you may want your table to have a couple of rows selected by default.
For those instances you can use the selectRows function. The function only has one parameter rows which is an array of rows to select.
<script>
import users from './users.json'
export default {
data: () => ({
users: users
}),
mounted () {
const toSelect = [users[0], users[1], users[2]]
this.$refs.usersTable.selectRows(toSelect)
}
</script>
2
3
4
5
6
7
8
9
10
11
12
WARNING
For the selectRows function to work properly, the rows parameter must contain objects that exist in the data property of the VTable components. In other words, the rows parameter must be a subset of the data property.
WARNING
If the selectionMode is single and you provide more than one object in the rows parameter, only the last object in the array will be selected.
# Example
<template>
<div>
<button @click="selectAll">Select All</button>
<button @click="deselectAll">Deselect All</button>
<VTable
ref="usersTable"
:data="users"
selectionMode="multiple"
selectedClass="selected-row"
@stateChanged="selectedRows = $event.selectedRows"
>
<template #head>
<th>Name</th>
<th>Age</th>
<th>State</th>
<th>Registered at</th>
</template>
<template #body="{ rows }">
<VTr
v-for="row in rows"
:key="row.guid"
:row="row"
>
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
<td>{{ row.address.state }}</td>
<td>{{ row.registered }}</td>
</VTr>
</template>
</VTable>
<strong>Selected:</strong>
<div v-if="selectedRows.length === 0">
No rows selected
</div>
<ul>
<li v-for="selected in selectedRows">
{{ selected.name }}
</li>
</ul>
</div>
</template>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
import users from './users.json'
export default {
data: () => ({
users: users,
selectedRows: []
}),
mounted () {
const toSelect = [users[0], users[1], users[2]]
this.$refs.usersTable.selectRows(toSelect)
},
methods: {
selectAll () {
this.$refs.usersTable.selectAll()
},
deselectAll () {
this.$refs.usersTable.deselectAll()
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| Name | Age | State | Registered at |
|---|---|---|---|
| Deana Lindsay | 25 | Pennsylvania | 2015-10-30 |
| Wyatt Kline | 39 | Maine | 2014-06-17 |
| Harmon Huber | 29 | American Samoa | 2016-01-25 |
| Penny Maddox | 29 | Oregon | 2016-01-08 |
| Morgan Gomez | 39 | Connecticut | 2014-04-10 |
| Beck Mckay | 35 | Mississippi | 2016-05-06 |
| Massey Carlson | 39 | Hawaii | 2014-10-22 |
| Hill Hale | 33 | Colorado | 2016-04-18 |
| Stokes Hurst | 26 | North Dakota | 2016-01-30 |
| Cain Knapp | 20 | Michigan | 2016-01-04 |