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

v-data-table
Name
custom-filter
Default
(items: object[], search: string, filter: Filter): object[]
Type
function

Custom search filter

Name
custom-sort
Default
(items: object[], index: number, isDescending: boolean): object[]
Type
function

Custom sort filter

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
disable-initial-sort
Default
false
Type
boolean

Disable default sorting on initial render

Name
expand
Default
false
Type
boolean

Designates the table as containing rows that are expandable

Name
filter
Default
(val: object, search: string): boolean
Type
function

The function used for filtering items

Name
header-key
Default
undefined
Type
string
Name
header-text
Default
'text'
Type
string

If using an object, the text value for the header

Name
headers
Default
[]
Type
array

An array of objects that each describe a header column. See the example below for a definition of all properties.

{
  text: string
  value: string
  align: 'left' | 'center' | 'right'
  sortable: boolean
  class: string[] | string
  width: string
}
Name
headers-length
Default
undefined
Type
number

Can be used in combination with hide-headers to specify the number of columns in the table to allow expansion rows and loading bar to function properly

Name
hide-actions
Default
false
Type
boolean

Hide the table actions

Name
hide-headers
Default
false
Type
boolean

Hide the table headers

Name
item-key
Default
'id'
Type
string

The field in the item object that designates a unique key

Name
items
Default
[]
Type
array

The array of table rows

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
loading
Default
false
Type
boolean | string

Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color

Name
must-sort
Default
false
Type
boolean

Forces at least one column to always be sorted instead of toggling between sorted ascending / sorted descending / unsorted states

Name
next-icon
Default
'$vuetify.icons.next'
Type
string

The displayed icon for forcing pagination to the next page

Name
no-data-text
Default
'$vuetify.noDataText'
Type
string

Display text when there is no data

Name
no-results-text
Default
'$vuetify.dataIterator.noResultsText'
Type
string

Display text when there are no filtered results

Name
pagination.sync
Default
Type
object

Used to control pagination and sorting from outside the data table. Can also be used to set default sorted column

{
  descending: boolean
  page: number
  rowsPerPage: number // -1 for All
  sortBy: string
  totalItems: number
}
Name
prev-icon
Default
'$vuetify.icons.prev'
Type
string

The displayed icon for forcing pagination to the previous page

Name
rows-per-page-items
Default
[ 5, 10, 25, { "text": "$vuetify.dataIterator.rowsPerPageAll", "value": -1 } ]
Type
array

The default values for the rows-per-page dropdown

Name
rows-per-page-text
Default
'$vuetify.dataTable.rowsPerPageText'
Type
string

The default rows per page text

Name
search
Default
undefined
Type
any

The search model for filtering results

Name
select-all
Default
undefined
Type
boolean | string

Adds header row select all checkbox. Can either be a String which specifies which color is applied to the button, or a Boolean (which uses the default color)

Name
sort-icon
Default
'$vuetify.icons.sort'
Type
string

Use a custom sort icon, uses the same syntax as v-icon

Name
total-items
Default
undefined
Type
number

Manually sets total number of row items, which disables built-in sort and pagination. Used together with pagination prop to enable server-side sort and pagination

Name
value
Default
[]
Type
array

Selected row items

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.


Remove default header and footer

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