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.
The v-data-iterator allows you to customize exactly how to display your data. In this example we are using a grid with cards.
Select your desired component from below and see the available props, slots, events and functions.
Function to filter items
Function used to group items
Function used to sort items
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Disables filtering completely
Disables pagination completely
Disables sorting completely
Array of expanded items. Can be used with .sync modifier
See the v-data-footer API for more information
Changes which item property should be used for grouping items. Currently only supports a single grouping in the format: group or ['group']. When using an array, only the first element is considered. Can be used with .sync modifier
Changes which direction grouping is done. Can be used with .sync modifier
Hides default footer
The property on each item that is used as a unique key
The array of items to display
Changes how many items per page should be visible. Can be used with .sync modifier
Applies the light theme variant to the component.
If true and no items are provided, then a loading text will be shown
Text shown when loading is true and no items are provided
Sets the locale of component. Used for translating internal text strings.
If true then one can sort on multiple properties
If true then one can not disable sorting, it will always switch between ascending and descending
Text shown when no items are provided to the component
Text shown when search prop is used and there are no results
A combined object for options. See example below for definition. Can be used with .sync modifier
{
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
}Changes which page of items is displayed. Can be used with .sync modifier
Text input used to filter items
The property on each item that is used to determine if it is selectable or not
Used only when data is provided by a server. Should be set to the total amount of items available on server so that pagination works correctly
Changes expansion mode to single expand
Changes selection mode to single select
Changes which item property (or properties) should be used for sort order. Can be used with .sync modifier
Changes which direction sorting is done. Can be used with .sync modifier
Used for controlling selected rows
The default slot. Use this to render your items
{
items: any[]
pagination: {
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
},
options: {
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
},
groupedItems: Record<string, any[]>
updateOptions: (obj: any) => void
sort: (value: string) => void
group: (value: string) => void
isSelected: (item: any) => boolean
select: (item: any, value: boolean) => void
isExpanded: (item: any) => boolean
expand: (item: any, value: boolean) => void
}Defines a footer below the items
{
items: any[]
pagination: {
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
},
options: {
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
},
groupedItems: Record<string, any[]>
updateOptions: (obj: any) => void
sort: (value: string) => void
group: (value: string) => void
}This slot is forwarded to the default footer. See the v-data-footer API for more information
{
pageStart: number
pageStop: number
itemsLength: number
}{
items: any[]
pagination: {
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
},
options: {
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
},
groupedItems: Record<string, any[]>
updateOptions: (obj: any) => void
sort: (value: string) => void
group: (value: string) => void
}Slot for each item
{
expand: (v: boolean) => void
item: any
isExpanded: boolean
isMobile: boolean
isSelected: boolean
select: (v: boolean) => void
}Defines content for when loading is true and no items are provided
Defines content for when no items are provided
Defines content for when search is provided but no results are found
The items on the current page
any[]Array of selected items
any[]Event emitted when an item is expanded or closed
{ item: any, value: boolean }Event emitted when an item is selected or deselected
{ item: any, value: boolean }The total number of pages
numberInformation about the current pagination
{
page: number
itemsPerPage: number
pageStart: number
pageStop: number
pageCount: number
itemsLength: number
}{ items: any[], value: boolean }The .sync event for expanded prop
any[]The .sync event for group-by prop
string | string[]The .sync event for group-desc prop
boolean | boolean[]The .sync event for items-per-page prop
numberThe .sync event for multi-sort prop
booleanThe .sync event for must-sort prop
booleanInformation about the current options
{
page: number
itemsPerPage: number
sortBy: string[]
sortDesc: boolean[]
groupBy: string[]
groupDesc: boolean[]
multiSort: boolean
mustSort: boolean
}The .sync event for page prop
numberThe .sync event for sort-by prop
string | string[]The .sync event for sort-desc prop
boolean | boolean[]map-deep-get($headings, 'caption', 'size') !default;7px !default;7px !default;0 8px !default;32px !default;24px !default;14px !default;34px !default;13px !default;map-deep-get($headings, 'caption', 'size') !default;Below is a collection of simple to complex examples.
The v-data-iterator has both a header and footer slot for adding extra content.
The v-data-iterator has internal state for both selection and expansion, just like v-data-table. In this example we use the methods isExpanded and expand available on the default slot.
Order, filters and pagination can be controlled externally by using the individual props
Ready for more? Continue reading with: