v-data-table component is used for
displaying tabular data. Features include sorting, searching,
pagination, inline-editing, header tooltips, and row selection.
See documentation.
The show-select prop will render a checkbox in the
default header to toggle all rows, and a checkbox for each default
row. You can customize these with the slots
header.data-table-select and
item.data-table-select respectively. You can also
switch between allowing multiple selected rows at the same time or
just one with the single-select prop.
Using the group-by and group-desc props
you can group rows on an item property. The
show-group-by prop will show a group button in the
default header.
Using the multi-sort prop will enable you to sort on
multiple columns at the same time. When enabled, you can pass
arrays to both sort-by and sort-desc to
programmatically control the sorting, instead of single values.
The data table exposes a search prop that allows you
to filter your data.