Data table - Selection

Item value

For the selection feature to work, the data table must be able to differentiate each row in the data set. This is done using the item-value prop. It designates a property on the item that should contain a unique value. By default the property it looks for is id.

You can also supply a function, if for example the unique value needs to be a composite of several properties. The function receives each item as its first argument.

Selected values

The current selection of the data-table can be accessed through the v-model prop. The array will consist of the unique values found in the property you set using the item-value prop (or the value returned by the function you passed). You can use return-object prop if you want the array to consist of the actual objects instead.


Examples

Selectable rows

Use the item-selectable prop to designate a property on your items that controls if the item should be selectable or not.

Select strategies

Data-tables support three different select strategies.

StrategyDescription
'single'Only a single row can be selected. The select all checkbox in the header is not shown
'page'Multiple rows can be selected. Clicking on the select all checkbox in the header selects all (selectable) rows on the current page
'all'Multiple rows can be selected. Clicking on the select all checkbox in the header selects all (selectable) rows in the entire data set

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub