Data tables
The v-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, inline-editing, header tooltips, and row selection.

Examples

#1 Standard
edit
The standard data-table contains data with no additional functionality. You can opt out of displaying table actions that allow you to control the pagination of information with the hide-actions prop.

#2 Selectable rows
edit
Selectable rows allow you to perform an action on specific and all rows.

#3 Search
edit
The data table exposes a search prop that allows you to filter your data.

#4 External pagination
edit
Pagination can be controlled externally by using the pagination prop. Remember that you must apply the .sync modifier.

#5 External sorting
edit
Sorting can also be controlled externally by using the pagination prop. Remember that you must apply the .sync modifier. You can also use the prop to set the default sorted column.

#6 Paginate and sort server-side
edit
If you're loading data from a backend and want to paginate and sort the results before displaying them, you can use the total-items prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the pagination prop to listen for changes. Use the loading prop to display a progress bar while fetching data.

API

chevron_leftchevron_right