You are viewing the documentation for Vuetify 3
Go to Vuetify 2

Data iterators

The v-data-iterator component is used for displaying arbitrary 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 with cards.

API

ComponentDescription
v-data-iteratorPrimary Component

Anatomy

The recommended placement of elements inside of a v-data-iterator are:

  • Place a v-toolbaror similar component above the main content
  • Place content after the header
  • Place a v-paginationbelow the main content

Element / AreaDescription
1. ContainerThe container is the root element of the component
2. Header (optional)The header is used to display a title and actions
3. Footer (optional)The footer is used to display pagination

Guide

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 following code snippet is an example of a basic v-data-iterator component:

<v-data-iterator :items="[1, 2, 3, 4, 5]">
  <template v-slot:default="{ items }">
    <v-list-item
      v-for="(item, i) in items"
      :key="i"
      :title="`Item ${i}`"
    ></v-list-item>
  </template>
</v-data-iterator>

Examples

Slots

Default

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 toggleExpand available on the default slot.

Misc

Controllable props

Sorting, filters and pagination can be controlled externally by using the individual props

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub