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.

Usage

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

props
slots
scoped Slots
events
v-data-iterator
Name
content-class
Default
undefined
Type
string

Applies a custom class to the wrapper element around items

Name
content-props
Default
undefined
Type
object

Applies custom props to the wrapper element around items

Name
content-tag
Default
'div'
Type
string

Specified what tag should be used for the wrapper element around items

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
hide-actions
Default
false
Type
boolean

Hide the table actions

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
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.dataIterator.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
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

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.

Edit this page | language on Github
 — Contribution Guide
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore