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-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-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.
API
| Component | Description |
|---|---|
| v-data-table | Primary Component |
| v-data-table-server | Specialized Data-table for displaying results from a server |
| v-data-table-virtual | Data-table with built in row virtualization |
| v-data-table-header | Functional Component used to display Data-table headers |
| v-data-footer | Functional Component used to display Data-table headers |
| v-simple-checkbox | Reusable lightweight v-checkbox |
Examples
Props
Density
Using the dense prop you are able to give your data tables an alternate style.
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.
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.
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.
Misc
CRUD Actions
v-data-table with CRUD actions using a v-dialog component for editing each row
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.