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 it

Selectable 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 rows

In 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 disabled

selectAllMode 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 them

Fetching Selected Rows

Currently selected rows can be fetched in two ways:

a. By listening to the select event which will contain the selected subset

b. By fetching the selected rows directly off the table using `ref`: this.$refs.myTable.selectedRows

Programmatic Manipulation

toggleRow(rowId) toggle a row by its unique identifier

selectRow(rowId) select a single row by its unique identifier

selectRows(rowIds) select multiple rows by their unique identifiers

unselectRow(rowId) unselect a single row by its unique identifier

unselectRows(rowIds) unselect multiple rows by their unique identifiers

selectAllRows() select all rows

All of the above methods return the up-to-date selected rows array

resetSelectedRows() reset all selected rows