Data iterator

The v-data-iterator component is used for displaying data, and shares a majority of its functionality with the v-data-table component. Features include sorting, searching, pagination, and selection.

Utilização

The v-data-iterator allows you to customize exactly how to display your data. In this example we are using a grid list with cards. We can use the content-tag prop (along with content-class and content-props) to specify what the wrapper element around the items should look like.

API

Nome

content-class

Padrão

undefined

Tipos

string

Components.DataIterator.

Nome

content-props

Padrão

undefined

Tipos

object

Components.DataIterator.

Nome

content-tag

Padrão

'div'

Tipos

string

Components.DataIterator.

Nome

custom-filter

Padrão

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

Tipos

function

Components.DataIterator.

Nome

custom-sort

Padrão

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

Tipos

function

Components.DataIterator.

Nome

dark

Padrão

false

Tipos

boolean

Components.DataIterator.

Nome

disable-initial-sort

Padrão

false

Tipos

boolean

Components.DataIterator.

Nome

expand

Padrão

false

Tipos

boolean

Components.DataIterator.

Nome

filter

Padrão

(val: object, search: string): boolean

Tipos

function

Components.DataIterator.

Nome

hide-actions

Padrão

false

Tipos

boolean

Components.DataIterator.

Nome

item-key

Padrão

'id'

Tipos

string

Components.DataIterator.

Nome

items

Padrão

[]

Tipos

array

Components.DataIterator.

Nome

light

Padrão

false

Tipos

boolean

Components.DataIterator.

Nome

must-sort

Padrão

false

Tipos

boolean

Components.DataIterator.

Nome

next-icon

Padrão

'$vuetify.icons.next'

Tipos

string

Components.DataIterator.

Nome

no-data-text

Padrão

'$vuetify.noDataText'

Tipos

string

Components.DataIterator.

Nome

no-results-text

Padrão

'$vuetify.dataIterator.noResultsText'

Tipos

string

Components.DataIterator.

Nome

pagination.sync

Padrão

Tipos

object

Components.DataIterator.

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

Nome

prev-icon

Padrão

'$vuetify.icons.prev'

Tipos

string

Components.DataIterator.

Nome

rows-per-page-items

Padrão

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

Tipos

array

Components.DataIterator.

Nome

rows-per-page-text

Padrão

'$vuetify.dataIterator.rowsPerPageText'

Tipos

string

Components.DataIterator.

Nome

Padrão

undefined

Tipos

any

Components.DataIterator.

Nome

select-all

Padrão

undefined

Tipos

boolean | string

Components.DataIterator.

Nome

total-items

Padrão

undefined

Tipos

number

Components.DataIterator.

Nome

value

Padrão

[]

Tipos

array

Controla visibilidade

Exemplos

Slots

The v-data-iterator has both a header and footer slot for adding extra content

Expand

v-data-iterator can leverage the power of the expand prop and props.expanded inside the item slot to control the visibility of item data.

Up Next

Edit this page | language on Github

— Contribution Guide