VDataTableRows 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`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$collapse'
Icon to display when the expandable row is expanded.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`expand-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$expand'
Icon to display when the expandable row is collapsed.
`group-collapse-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$tableGroupCollapse'
MISSING DESCRIPTION (edit in github)
`group-expand-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$tableGroupExpand'
MISSING DESCRIPTION (edit in github)
`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.
`items`	(DataTableItem \| Group \| GroupSummary)[]	[]
An array of strings or objects used for automatically generating children components.
`loading`	string \| boolean	false
Displays `loading` slot if set to `true`
`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.
`no-data-text`	string	'$vuetify.noDataText'
Text shown when no items are provided to the component.
`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.

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

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

{ props: Record<string, unknown> }

{
  index: number
  item: unknown
  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
}

{
  index: number
  item: unknown
  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> }

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

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

never

never

[`header.${string}`]
Slot for custom rendering of a header cell.
[`item.${string}`]
Slot for custom rendering of a column.
`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`
Slot for custom rendering of a group summary.
`header.data-table-expand`
Slot to replace the default `v-icon` used when expanding header.
`header.data-table-select`
Slot to replace the default `v-checkbox-btn` in header.
`item`
Define a custom item appearance.
`item.data-table-expand`
Slot for custom rendering of a row cell with the expand icon.
`item.data-table-select`
Slot for custom rendering of a row cell with the select checkbox.
`loading`
Slot for custom rendering of the loading state.
`no-data`
Defines content for when no items are provided.

#VDataTableRows API

VDataTableRows API