Data table

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

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.


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


Slot: expand

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.


Slot: page-text

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


Selectable rows

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


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.


Headerless tables

Setting the hide-headers prop creates a headerless table.


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