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.

Go to api


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.

The no-data and no-results slots can display custom HTML when theres no data or no filtered data in the table

The items and headers slots can accept either a collection of td/th tags, or if you want control of the entire row, a tr tag.

If you only want to apply some common markup or effect on each of the header cells, you can use the slot headerCell. In this example is has been used to apply a tooltip to each header.

There is also a footer slot for when you want to add some extra functionality to tables, for example per column filtering or search.

The v-data-table component also supports expandable rows using the expand slot. You can use the prop expand to prevent expanded rows from closing when clicking on another row.

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

The data table exposes a search prop that allows you to filter your data.

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

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.

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.

The v-data-table component supports the application dark theme.

Setting the hide-headers prop creates a headerless table.