Data Iterator
The DataIterator component is used for displaying data, and shares a majority of its functionality with the DataTable component. Features include sorting, searching, pagination, and selection.
info
For more details about Vuetify’s usage of DataIterator component, click DataIterator page.
For more prop explanations, click Vuetify DataIterator API page.
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| class | Allows custom properties to take. effect. | string | undefined |
| disabled | Disables component. | boolean | false |
| disableFiltering | Disables filtering completely. | boolean | false |
| disablePagination | Disables pagination completely. | boolean | false |
| disableSort | Disables sorting completely. | boolean | false |
| expanded | Array of expanded items. | array | [] |
| footerProps | See the DataFooter API for more information. | object | {showFirstLastPage = true,firstIcon = 'mdi-arrow-collapse-left',lastIcon = 'mdi-arrow-collapse-right',prevIcon = 'mdi-minus',nextIcon = 'mdi-plus'} |
| groupBy | 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. | string-array | [] |
| groupDesc | Changes which direction grouping is done. | boolean-array | [] |
| items | The array of items to display. | array | [] |
| itemsPerPage | Changes how many items per page should be visible.Setting this prop to -1 will display all items on the page. | number | 5 |
| loading | If true and no items are provided, then a loading text will be shown. | boolean-string | undefined |
| locale | Sets the locale used for sorting. | string | 'en-US' |
| mobileBreakpoint | Used to set when to toggle between regular table and mobile view. | number-string | 600 |
| multiSort | If true then one can sort on multiple properties. | boolean | false |
| mustSort | If true then one can not disable sorting, it will always switch between ascending and descending. | boolean | false |
| noDataText | Text shown when no items are provided to the component. | string | undefined |
| noResultsText | Text shown when search prop is used and there are no results. | string | undefined |
| options | Data options. | object | undefined |
| page | The value of the showing page. | number | 1 |
| search | Text input used to filter items. | string | undefined |
| selectableKey | The property on each item that is used to determine if it is selectable or not | string | 'isSelectable' |
| serverItemsLength | 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. | number | -1 |
| singleExpand | Changes expansion mode to single expand. | boolean | false |
| singleSelect | Changes selection mode to single select. | boolean | false |
| sortBy | Changes which item property (or properties) should be used for sort order. | string-array | undefined |
| sortDesc | Changes which direction sorting is done. | boolean-array | undefined |
| tabindex | Allows component to give and receive focus. | number | |
| value | Used for controlling selected rows. | array | [] |
| visible | Visibility of DataIterator component. | boolean | true |
Events
| Attribute | Description |
|---|---|
| click:row(index,row) | Event emitted when clicked on a row |
| item-selected(rowObj) | Event emitted when an item is selected or deselected |
| update:items-per-page(number) | Emits when the items-per-page property of the options prop is updated |
| update:options(updateOptions) | Emits when one of the options properties is updated |
| page-count(number) | Emits when the pageCount property of the pagination prop is updated |
| item-expanded(rowObj) | Event emitted when an item is expanded or closed |
| update:expanded(value) | The .sync event for expanded prop |
| pagination(value) | Emits when something changed to the pagination which can be provided via the pagination prop |
| toggle-select-all(value) | Emits when the select-all checkbox in table header is clicked. This checkbox is enabled by the show-select prop |