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.

Utilização

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

Nome

custom-filter

Padrão

(items: object[], search: string, filter: Filter): object[]

Tipos

function

Components.DataTables.

Nome

custom-sort

Padrão

(items: object[], index: number, isDescending: boolean): object[]

Tipos

function

Components.DataTables.

Nome

dark

Padrão

false

Tipos

boolean

Components.DataTables.

Nome

disable-initial-sort

Padrão

false

Tipos

boolean

Components.DataTables.

Nome

expand

Padrão

false

Tipos

boolean

Components.DataTables.

Nome

filter

Padrão

(val: object, search: string): boolean

Tipos

function

Components.DataTables.

Nome

header-key New in — v1.2

Padrão

undefined

Tipos

string

Components.DataTables.

Nome

header-text

Padrão

'text'

Tipos

string

Components.DataTables.

Nome

headers

Padrão

[]

Tipos

array

Components.DataTables.

{
  text: string",
  value: string",
  align: 'left' | 'center' | 'right'",
  sortable: boolean",
  class: string[] | string",
  width: string"
}

Nome

headers-length

Padrão

undefined

Tipos

number

Components.DataTables.

Nome

hide-actions

Padrão

false

Tipos

boolean

Components.DataTables.

Nome

hide-headers

Padrão

false

Tipos

boolean

Components.DataTables.

Nome

item-key

Padrão

'id'

Tipos

string

Components.DataTables.

Nome

items

Padrão

[]

Tipos

array

Components.DataTables.

Nome

light

Padrão

false

Tipos

boolean

Components.DataTables.

Nome

Padrão

false

Tipos

boolean | string

Components.DataTables.

Nome

must-sort

Padrão

false

Tipos

boolean

Components.DataTables.

Nome

next-icon

Padrão

'$vuetify.icons.next'

Tipos

string

Components.DataTables.

Nome

no-data-text

Padrão

'$vuetify.noDataText'

Tipos

string

Components.DataTables.

Nome

no-results-text

Padrão

'$vuetify.dataIterator.noResultsText'

Tipos

string

Components.DataTables.

Nome

pagination.sync

Padrão

Tipos

object

Components.DataTables.

{
  descending: boolean",
  page: number",
  rowsPerPage: number // -1 for All",
  sortBy: string",
  totalItems: number"
}

Nome

prev-icon

Padrão

'$vuetify.icons.prev'

Tipos

string

Components.DataTables.

Nome

rows-per-page-items

Padrão

[5,10,25,{"text":"$vuetify.dataIterator.rowsPerPageAll","value":-1}]

Tipos

array

Components.DataTables.

Nome

rows-per-page-text

Padrão

'$vuetify.dataTable.rowsPerPageText'

Tipos

string

Components.DataTables.

Nome

Padrão

undefined

Tipos

any

Components.DataTables.

Nome

select-all

Padrão

undefined

Tipos

boolean | string

Components.DataTables.

Nome

sort-icon

Padrão

'$vuetify.icons.sort'

Tipos

string

Components.DataTables.

Nome

total-items

Padrão

undefined

Tipos

number

Components.DataTables.

Nome

value

Padrão

[]

Tipos

array

Controla visibilidade

Exemplos

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.

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.