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

Usage

The standard data-table will by default render your data as simple rows.

API

v-data-table

Examples

Slots

The v-data-table provides a large number of slots for customizing the table. This example showcases each slot and what you can do with it.

Selectable rows

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 scoped slots header.column.data-table-select and item.column.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.

Expandable rows

The show-expand prop will render an expand icon on each default row. You can customize this with the item.column.data-table-expand scoped slot. You can also switch between allowing multiple expanded rows at the same time or just one with the single-expand prop. The expanded rows are available on the synced prop expanded.sync

Grouped rows

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.

Sort on multiple columns

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.

Customizing default rows

You can use the dynamic scoped slots item.column.<name> to customize only certain columns. <name> is the name of the value property in the corresponding header item sent to headers. So to customize the calories column we're using the item.column.calories slot.

The footer-props prop allows you to send props to the default footer.

Slot: progress

There is also a progress slot for when you want to customize the display for the data table's loading state. By default this is an indeterminate v-progress-linear

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

External pagination

Pagination can be controlled externally by using the individual props, or by using the options prop. Remember that you must apply the .sync modifier.

External sorting

Sorting can also be controlled externally by using the individual props, or by using the the options prop. Remember that you must apply the .sync modifier.

Paginate and sort server-side

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.

You can apply the hide-default-headers and hide-default-footer props to remove the default header and footer respectively.

Inline Editing

The v-edit-dialog component is used for inline-editing within data tables. You can block closing the dialog when clicked outside by adding the persistent prop.

CRUD Actions

v-data-table with CRUD actions using a v-dialog component for editing each row

Virtualized rows

Using the virtual-rows prop will virtualize the rendering of the rows, which can increase the performance of the data-table when you have a large number of rows. Be aware that you can not use the body, body.prepend or body.append slots with this prop.

Edit this page | language on Github