BlogPlaygroundOne

VDataIterator API

ads via vuetify

Props
name
type
default
custom-filter
FilterFunction

undefined

Function to filter items.

custom-key-filter
unknown

undefined

Function used on specific keys within the item object. customFilter is skipped for columns with customKeyFilter specified.

custom-key-sort
unknown

undefined

Function used on specific keys within the item object. customSort is skipped for columns with customKeySort specified.

expanded
string[]

[]

Array of expanded items. Can be bound to external variable using v-model:expanded.

expand-on-click
boolean

false

Expands item when the row is clicked.

filter-keys
string | string[]

undefined

Array of specific keys to filter on the item.

filter-mode
'every' | 'some' | 'union' | 'intersection'

'intersection'

Controls how the results of customFilter and customKeyFilter are combined. All modes only apply customFilter to columns not specified in customKeyFilter.

  • some: There is at least one match from either the custom filter or the custom key filter.
  • every: All columns match either the custom filter or the custom key filter.
  • union: There is at least one match from the custom filter, or all columns match the custom key filters.
  • intersection: There is at least one match from the custom filter, and all columns match the custom key filters.
group-by
SortItem[]

[]

Configures attributes (and sort order) to group items together.

initial-sort-order
New in v3.11.0
'asc' | 'desc'

'asc'

Specifies the initial sort order when an toggleSort is called for unsorted property.

items
unknown[]

[]

An array of strings or objects used for automatically generating children components.

item-selectable
SelectItemKey

null

Property on supplied items that contains the boolean value indicating if the item is selectable.

items-length
string | number

undefined

The total number of items. Useful when using server-side pagination to correctly compute page counts.

items-per-page
string | number

5

Changes how many items per page should be visible. Can be bound to external variable using v-model:itemsPerPage… Setting this prop to -1 will display all items on the page.

item-value
SelectItemKey

'id'

Property on supplied items that contains its value.

loading
boolean

false

If true and no items are provided, then a loading text will be shown.

model-value
any[]

[]

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

multi-sort
  | boolean
  | { key: 'ctrl'; mode: 'prepend' | 'append'; modifier: 'shift' | 'alt' }

false

Let user sort by multiple properties/columns.

  • key: (optional) when set to ctrl, user is required to hold a keyboard key (Ctrl on PC and Command on Mac)
  • mode: when user selects a new column to sort by, it will be set first (prepend) or last (append) in the sort priority. Defaults to append
  • modifier: (optional) allows user to use both multi-sort modes (append and prepend) simultaneously
must-sort
boolean

false

Forces sorting on the column(s).

no-filter
boolean

false

Disables all item filtering.

page
string | number

1

The current displayed page number (1-indexed).

page-by
'item' | 'auto' | 'any'

'any'

Controls how pagination counts items.

  • item paginates by individual items,
  • auto paginates by top-level groups and falls back to regular items if group-by is empty,
  • any paginates by both items and groups combined
return-object
boolean

false

Changes the selection behavior to return the object directly rather than the value specified with item-value.

string

undefined

Text input used to filter items.

select-strategy
'all' | 'page' | 'single'

'page'

Defines the strategy of selecting items in the list. Possible values are: ‘single’ (only one item can be selected at a time), ‘page’ (‘Select all’ button will select only items on the current page), ‘all’ (‘Select all’ button will select all items in the list).

show-expand
boolean

false

Shows the expand icon.

show-select
boolean

false

Shows the column with checkboxes for selecting items in the list.

sort-by
SortItem[]

[]

Array of column keys and sort orders that determines the sort order of the table.

tag
string | (new () => any) | FunctionalComponent

'div'

Specify a custom tag used on the root element.

transition
  | string
  | boolean
  | (TransitionProps & { component: Component })
  | { component: Component; hideOnLeave: boolean }

{component: {name: 'fade-transition'}, hideOnLeave: true}

Sets the component transition. Can be one of the built in or custom transition.

value-comparator
(a: any, b: any) => boolean

undefined

Apply a custom comparison algorithm to compare model-value and values contains in the items prop.

Events
name
type
update:currentItems
[any]

Emits with the items currently being displayed.

update:expanded
[any]

Emits when the expanded items are updated.

update:groupBy
[any]

Emits when the group-by prop is updated.

update:itemsPerPage
[number]

Emits when the items-per-page prop is updated.

update:modelValue
[any[]]

Event that is emitted when the component’s model changes.

update:options
[any]

Emits when pagination related properties (page, itemsPerPage, sortBy, groupBy, search) is updated.

update:page
[number]

Emits when the page prop is updated.

update:sortBy
[any]

Emits when the sortBy prop is updated.

Slots
{ page: number itemsPerPage: number sortBy: SortItem[] pageCount: number toggleSort: ( column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean, ) => void prevPage: () => void nextPage: () => void setPage: (value: number) => void setItemsPerPage: (value: number) => void isSelected: (items: SelectableItem | SelectableItem[]) => boolean select: (items: SelectableItem[], value: boolean) => void selectAll: (value: boolean) => void toggleSelect: (item: SelectableItem, index: number, event: MouseEvent) => void isExpanded: (item: DataTableItem) => boolean toggleExpand: (item: DataTableItem) => void isGroupOpen: (group: Group) => boolean toggleGroup: (group: Group) => void items: DataIteratorItem[] itemsCount: number groupedItems: (DataIteratorItem | Group | GroupSummary)[] }
{ page: number itemsPerPage: number sortBy: SortItem[] pageCount: number toggleSort: ( column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean, ) => void prevPage: () => void nextPage: () => void setPage: (value: number) => void setItemsPerPage: (value: number) => void isSelected: (items: SelectableItem | SelectableItem[]) => boolean select: (items: SelectableItem[], value: boolean) => void selectAll: (value: boolean) => void toggleSelect: (item: SelectableItem, index: number, event: MouseEvent) => void isExpanded: (item: DataTableItem) => boolean toggleExpand: (item: DataTableItem) => void isGroupOpen: (group: Group) => boolean toggleGroup: (group: Group) => void items: DataIteratorItem[] itemsCount: number groupedItems: (DataIteratorItem | Group | GroupSummary)[] }
{ page: number itemsPerPage: number sortBy: SortItem[] pageCount: number toggleSort: ( column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean, ) => void prevPage: () => void nextPage: () => void setPage: (value: number) => void setItemsPerPage: (value: number) => void isSelected: (items: SelectableItem | SelectableItem[]) => boolean select: (items: SelectableItem[], value: boolean) => void selectAll: (value: boolean) => void toggleSelect: (item: SelectableItem, index: number, event: MouseEvent) => void isExpanded: (item: DataTableItem) => boolean toggleExpand: (item: DataTableItem) => void isGroupOpen: (group: Group) => boolean toggleGroup: (group: Group) => void items: DataIteratorItem[] itemsCount: number groupedItems: (DataIteratorItem | Group | GroupSummary)[] }
{ color: string; isActive: boolean }
never
default

The default slot. Use this to render your items.

Defines a footer below the items.

header

Defines a header above the items.

loader

Slot for custom loader (displayed when loading prop is equal to true).

no-data

Defines content for when no items are provided.