Comment on page
Selectable Rows
This feature is only available on vue-tables-2-premium and v-tables-3
This feature requires a unique id for each row. By default the key is set to
id
. If you are using a different key use the uniqueKey
option to set itSelectable rows allow you to add a checkbox before each row, thus letting the user select rows.
In your options object declare it like so:
{
selectable:{
mode: 'single', // or 'multiple'
only: function(row) {
return true // any condition
},
selectAllMode: 'all' // or 'page',
programmatic: false
}
}
mode
determines whether a single row can be selected or multiple rowsIn
multiple
mode there will be an extra checkbox in the headings row, which is used to toggle all rows in the table. In addition, the user can select multiple rows at once using Shift+Click
only
is an optional callback used to determine which rows are selectable based on the content of the row. The checkbox of non-selectable rows will be disabledselectAllMode
applies only to multiple
select mode on the client component. By default it is set to all
, which means that when checking the checkbox on top of the table all filtered rows will be selected. Set to page
in order to select only the visible rows on the current page. The above applies to the client table, which has all of the data available. On the server component, only the currently visible dataset will be selected.programmatic
when set to true
the plugin will not add the UI for selecting rows (i.e the checkbox/radio button). In this mode, you handle row selection by listening to the row click event and calling the appropriate method yourself (see Programmatic Manipulation below) Selected rows will have a
VueTables__row--selected
class, which you can use to style themCurrently selected rows can be fetched in two ways:
a. By listening to the
select
event which will contain the selected subsetb. By fetching the selected rows directly off the table using `ref`:
this.$refs.myTable.selectedRows
toggleRow(rowId)
toggle a row by its unique identifierselectRow(rowId)
select a single row by its unique identifierselectRows(rowIds)
select multiple rows by their unique identifiersunselectRow(rowId)
unselect a single row by its unique identifierunselectRows(rowIds)
unselect multiple rows by their unique identifiersselectAllRows()
select all rowsAll of the above methods return the up-to-date selected rows array
resetSelectedRows()
reset all selected rows Last modified 2yr ago