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 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.

API

v-data-table

Examples

Slot no-data

The no-data slot can display custom HTML when there's no data.

Slot: items and headers

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. In the latter case, you have to manually specify a key on the row regardless of the item-key value.

Slot: headerCell

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.

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.

Slot: expand

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

Slot: pageText

You can customize the page text displaying the range and total items by using the pageText slot.

Selectable rows

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

Search with custom no-results slot

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

Custom icons

Previous/next pagination icons and sort icon can be customized with prev-icon, next-icon and sort-icon props.

External pagination

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

External sorting

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.

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-headers and hide-actions 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

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

Edit this page | language on Github