VDataTableVirtual API

Props

name	type	default
`cell-props`	\| Record<string, any> \| (( data: Pick< ItemKeySlot<any>, 'value' \| 'item' \| 'column' \| 'index' \| 'internalItem' >, ) => Record<string, any>)	undefined
An object of additional props to be passed to each `<td>` in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in `cellProps` in a headers object, the value from the headers object will be used.
`collapse-icon` New in v3.10.0	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$collapse'
Icon to display when the expandable row is expanded.
`color`	string	undefined
Applies a color to checkboxes, page size dropdown and sort badges in the table header.
`custom-filter`	FilterFunction	undefined
Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted.
`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.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disable-sort`	boolean	false
Toggles rendering of sort button.
`expanded`	string[]	[]
Array of expanded items. Can be bound to external variable using v-model:expanded.
`expand-icon` New in v3.10.0	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$expand'
Icon to display when the expandable row is collapsed.
`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.
`fixed-footer`	boolean	false
Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.
`fixed-header`	boolean	false
Sticks the header to the top of the table.
`group-by`	SortItem[]	[]
Defines the grouping of the table items.
`group-collapse-icon` New in v3.10.0	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$tableGroupCollapse'
MISSING DESCRIPTION (edit in github)
`group-expand-icon` New in v3.10.0	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$tableGroupExpand'
MISSING DESCRIPTION (edit in github)
`header-props`	unknown	undefined
Pass props to the default header.
`headers`	{ readonly key?: \| (string & {}) \| 'data-table-group' \| 'data-table-select' \| 'data-table-expand' \| undefined readonly value?: SelectItemKey<any> readonly title?: string \| undefined readonly fixed?: boolean \| 'end' \| 'start' \| undefined readonly align?: 'end' \| 'start' \| 'center' \| undefined readonly width?: string \| number \| undefined readonly minWidth?: string \| number \| undefined readonly maxWidth?: string \| number \| undefined readonly nowrap?: boolean \| undefined readonly indent?: number \| undefined readonly headerProps?: { readonly [x: string]: any } \| undefined readonly cellProps?: \| { readonly [x: string]: any } \| HeaderCellPropsFunction \| undefined readonly sortable?: boolean \| undefined readonly sort?: DataTableCompareFunction<any> \| undefined readonly sortRaw?: DataTableCompareFunction<any> \| undefined readonly filter?: FilterFunction \| undefined readonly children?: readonly any[] \| undefined }[]	undefined
An array of objects that each describe a header column.
`height`	string \| number	undefined
Use the height prop to set the height of the table.
`hide-default-body`	boolean	false
Hides the default body.
`hide-default-header`	boolean	false
Hides the default header.
`hide-no-data`	boolean	false
Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open.
`hover`	boolean	false
Will add a hover effect to a table’s row when the mouse is over it.
`initial-sort-order` New in v3.11.0	'asc' \| 'desc'	'asc'
Specifies the initial sort order when an unsorted column is clicked.
`item-height`	string \| number	null
Height in pixels of each item to display.
`item-key`	SelectItemKey	null
The property on each item that is used as a unique key.
`items`	any[]	[]
An array of strings or objects used for automatically generating children components.
`item-selectable`	SelectItemKey	null
Property on supplied `items` that indicates whether the item is selectable.
`item-value`	SelectItemKey	'id'
Property on supplied `items` that contains its value.
`loading`	string \| boolean	false
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.
`loading-text`	string	'$vuetify.dataIterator.loadingText'
Text shown when the data is loading.
`mobile`	boolean	false
Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint
`mobile-breakpoint`	number \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'	undefined
Overrides the display configuration default screen size that the component should be considered in mobile.
`model-value`	unknown	[]
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-data-text`	string	'$vuetify.noDataText'
Text shown when no items are provided to the component.
`no-filter`	boolean	false
Disables all item filtering.
`return-object`	boolean	false
Changes the selection behavior to return the object directly rather than the value specified with item-value.
`row-props`	\| Record<string, any> \| (( data: Pick<ItemKeySlot<any>, 'item' \| 'index' \| 'internalItem'>, ) => Record<string, any>)	undefined
An object of additional props to be passed to each `<tr>` in the table body. Also accepts a function that will be called for each row.
`search`	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-asc-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$sortAsc'
Icon used for ascending sort button.
`sort-by`	SortItem[]	[]
Array of column keys and sort orders that determines the sort order of the table.
`sort-desc-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$sortDesc'
Icon used for descending sort button.
`sort-icon` New in v3.12.0	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Icon used for unsorted columns. By default it uses either sortAscIcon or sortDescIcon depending on initialSortOrder, but can be customized to show a neutral icon instead.
`sticky`	boolean	false
Deprecated, use `fixed-header` instead.
`striped`	'odd' \| 'even'	null
Applies a background to either even or odd rows.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`value-comparator`	(a: any, b: any) => boolean	undefined
Apply a custom comparison algorithm to compare model-value and values contains in the items prop.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`update:expanded`	[any]
Emits when the expanded prop is updated.
`update:groupBy`	[any]
Emits when the group-by prop is updated.
`update:modelValue`	[unknown]
Emits when the component’s model changes.
`update:options`	[any]
Emits when pagination related properties (page, itemsPerPage, sortBy, groupBy, search) is updated.
`update:sortBy`	[any]
Emits when the sortBy prop is updated.

Slots

{
  column: InternalDataTableHeader
  selectAll: (value: boolean) => void
  isSorted: (column: InternalDataTableHeader) => boolean
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  sortBy: SortItem[]
  someSelected: boolean
  allSelected: boolean
  getSortIcon: (
    column: InternalDataTableHeader,
  ) =>
    | string
    | (string | [string, number])[]
    | (new () => any)
    | FunctionalComponent
}

ItemKeySlot

{
  select: (items: SelectableItem[], value: boolean) => void
  items: any[]
  isSelected: (items: SelectableItem | SelectableItem[]) => boolean
  sortBy: SortItem[]
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: 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
  headers: InternalDataTableHeader[][]
  someSelected: boolean
  allSelected: boolean
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
}

{
  select: (items: SelectableItem[], value: boolean) => void
  items: any[]
  isSelected: (items: SelectableItem | SelectableItem[]) => boolean
  sortBy: SortItem[]
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: 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
  headers: InternalDataTableHeader[][]
  someSelected: boolean
  allSelected: boolean
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
}

{
  select: (items: SelectableItem[], value: boolean) => void
  items: any[]
  isSelected: (items: SelectableItem | SelectableItem[]) => boolean
  sortBy: SortItem[]
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: 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
  headers: InternalDataTableHeader[][]
  someSelected: boolean
  allSelected: boolean
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
}

{
  select: (items: SelectableItem[], value: boolean) => void
  items: any[]
  isSelected: (items: SelectableItem | SelectableItem[]) => boolean
  sortBy: SortItem[]
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: 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
  headers: InternalDataTableHeader[][]
  someSelected: boolean
  allSelected: boolean
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
}

{ item: Group; count: number; props: Record<string, unknown> }

{ props: Record<string, unknown> }

{
  index: number
  item: any
  internalItem: DataTableItem
  isExpanded: (item: DataTableItem) => boolean
  toggleExpand: (item: DataTableItem) => void
  isSelected: (items: SelectableItem | SelectableItem[]) => boolean
  toggleSelect: (item: SelectableItem, index: number, event: MouseEvent) => void
} & { columns: InternalDataTableHeader[] }

{
  index: number
  item: Group
  columns: InternalDataTableHeader[]
  isExpanded: (item: DataTableItem) => boolean
  toggleExpand: (item: DataTableItem) => void
  isSelected: (items: SelectableItem | SelectableItem[]) => boolean
  toggleSelect: (item: SelectableItem, index: number, event: MouseEvent) => void
  toggleGroup: (group: Group) => void
  isGroupOpen: (group: Group) => boolean
}

{
  index: number
  item: GroupSummary
  columns: InternalDataTableHeader[]
  toggleGroup: (group: Group) => void
}

{
  column: InternalDataTableHeader
  selectAll: (value: boolean) => void
  isSorted: (column: InternalDataTableHeader) => boolean
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  sortBy: SortItem[]
  someSelected: boolean
  allSelected: boolean
  getSortIcon: (
    column: InternalDataTableHeader,
  ) =>
    | string
    | (string | [string, number])[]
    | (new () => any)
    | FunctionalComponent
}

{
  column: InternalDataTableHeader
  selectAll: (value: boolean) => void
  isSorted: (column: InternalDataTableHeader) => boolean
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  sortBy: SortItem[]
  someSelected: boolean
  allSelected: boolean
  getSortIcon: (
    column: InternalDataTableHeader,
  ) =>
    | string
    | (string | [string, number])[]
    | (new () => any)
    | FunctionalComponent
}

{
  headers: InternalDataTableHeader[][]
  columns: InternalDataTableHeader[]
  sortBy: SortItem[]
  someSelected: boolean
  allSelected: boolean
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  selectAll: (value: boolean) => void
  getSortIcon: (
    column: InternalDataTableHeader,
  ) =>
    | string
    | (string | [string, number])[]
    | (new () => any)
    | FunctionalComponent
  isSorted: (column: InternalDataTableHeader) => boolean
}

{
  index: number
  item: any
  internalItem: DataTableItem
  isExpanded: (item: DataTableItem) => boolean
  toggleExpand: (item: DataTableItem) => void
  isSelected: (items: SelectableItem | SelectableItem[]) => boolean
  toggleSelect: (item: SelectableItem, index: number, event: MouseEvent) => void
} & { columns: InternalDataTableHeader[] } & { props: Record<string, any> } & {
  itemRef: TemplateRef
}

Omit<ItemKeySlot<any>, 'value'> & { props: Record<string, unknown> }

Omit<ItemKeySlot<any>, 'value'> & { props: Record<string, unknown> }

{ color: string; isActive: boolean }

never

never

{
  select: (items: SelectableItem[], value: boolean) => void
  items: any[]
  isSelected: (items: SelectableItem | SelectableItem[]) => boolean
  sortBy: SortItem[]
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: 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
  headers: InternalDataTableHeader[][]
  someSelected: boolean
  allSelected: boolean
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
}

{
  select: (items: SelectableItem[], value: boolean) => void
  items: any[]
  isSelected: (items: SelectableItem | SelectableItem[]) => boolean
  sortBy: SortItem[]
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: 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
  headers: InternalDataTableHeader[][]
  someSelected: boolean
  allSelected: boolean
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
}

{
  select: (items: SelectableItem[], value: boolean) => void
  items: any[]
  isSelected: (items: SelectableItem | SelectableItem[]) => boolean
  sortBy: SortItem[]
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: 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
  headers: InternalDataTableHeader[][]
  someSelected: boolean
  allSelected: boolean
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
}

{
  select: (items: SelectableItem[], value: boolean) => void
  items: any[]
  isSelected: (items: SelectableItem | SelectableItem[]) => boolean
  sortBy: SortItem[]
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: 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
  headers: InternalDataTableHeader[][]
  someSelected: boolean
  allSelected: boolean
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
}

[`header.${string}`]
Slot for a specific header. See `v-data-table-virtual` API for more information.
[`item.${string}`]
Slot for custom rendering of a row cell.
`body.append`
Slot to add content below the table.
`body.prepend`
Slot to add content above the table.
`bottom`
Slot to add content below the table.
`colgroup`
Slot to replace the default rendering of the `<colgroup>` element.
`data-table-group`
Slot for custom rendering of a group.
`data-table-select`
Slot for custom rendering of a header cell with the select checkbox.
`expanded-row`
Slot for custom rendering of an expanded row.
`group-header`
Slot for custom rendering of a group header.
`group-summary` New in v3.10.0
Slot for custom rendering of a group summary.
`header.data-table-expand`
Slot for the expand button in the header.
`header.data-table-select`
Slot for the select-all checkbox in the header.
`headers`
Slot to replace the default rendering of the `<thead>` element.
`item`
Slot to replace the default rendering of a row.
`item.data-table-expand`
Slot to replace the default `v-icon` used when expanding rows.
`item.data-table-select`
Slot to replace the default checkbox used when selecting rows.
`loader`
Slot for custom loader (displayed when loading prop is equal to true).
`loading`
Defines content for when `loading` is true and no items are provided.
`no-data`
Defines content for when no items are provided.
`tbody`
Slot to replace the default table `<tbody>`.
`tfoot`
Slot to replace the default table `<tfoot>`.
`thead`
Slot to replace the default table `<thead>`.
`top`
Slot to add content above the table

Exposed

() => void

(index: number) => void

`calculateVisibleItems`
Trigger updating the currently rendered items based on scroll position.
`scrollToIndex`
Scrolls to the item at a given index.

#VDataTableVirtual API

VDataTableVirtual API