# Selectable Rows

{% hint style="info" %}
This feature is only available on vue-tables-2-premium and v-tables-3
{% endhint %}

{% hint style="warning" %}
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
{% endhint %}

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:

```javascript
{
  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) 

{% hint style="info" %}
Selected rows will have a `VueTables__row--selected` class, which you can use to style them
{% endhint %}

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