Data tables

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

Usage

There are three variants of the data table available depending on your requirements.

v-data-table

The standard data table presumes that the entire data set is available locally. Sorting, pagination, and filtering is supported and done internally by the component itself.

v-data-table/usage.vue

v-data-table-server

This variant of the data table is meant to be used when the data set you are displaying comes directly from a server, and you don’t want to load all rows at mount. Sorting, pagination, and filtering is supported, but none of it is handled by the component. Instead it is meant to be handled by the server.

You can find more information and examples here.

v-data-table/server.vue

v-data-table-virtual

The virtual variant of the data table relies, like the standard variant, on all data being available locally. But unlike the standard variant it uses virtualization to only render a small portion of the rows. This makes it well suited for display large data sets. It supports sorting and filtering, but not pagination.

You can find more information and examples here.

v-data-table/virtual.vue

API

ComponentDescription
v-data-tablePrimary Component
v-data-table-serverSpecialized Data-table for displaying results from a server
v-data-table-virtualData-table with built in row virtualization
v-data-table-headerFunctional Component used to display Data-table headers
v-data-footerFunctional Component used to display Data-table headers
v-simple-checkboxReusable lightweight v-checkbox

Examples

Props

Density

Using the dense prop you are able to give your data tables an alternate style.

v-data-table/prop-dense.vue

Row selection

The show-select prop will render a checkbox in the default header to toggle all rows, and a checkbox for each row. If you need to, you can render your own checkboxes using the column.data-table-select and item.data-table-select slots respectively.

v-data-table/prop-row-selection.vue

Item

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

v-data-table/slot-item.vue

Simple checkbox

When wanting to use a checkbox component inside of a slot template in your data tables, use the v-checkbox-btn component rather than the v-checkbox component. The v-checkbox-btn component is used internally and will respect header alignment.

v-data-table/slot-simple-checkbox.vue

Misc

CRUD Actions

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

v-data-table/misc-crud.vue

Expandable rows

The show-expand prop will render an expand icon on each row. You can customize this with the item.data-table-expand slot. The position of this slot can be changed by adding a column with key: 'data-table-expand' to the headers array.

Just like selection, row items require a unique property on each item for expansion to work. The default is id, but you can use the item-value prop to specify a different item property.

v-data-table/misc-expand.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub