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

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