VDataTableRow API

Props

name	type	default
`cell-props`	\| Record<string, any> \| (( data: Pick< ItemKeySlot<unknown>, 'value' \| 'item' \| 'column' \| 'index' \| 'internalItem' >, ) => Record<string, any>)	undefined
Props to be applied to the cell.
`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.
`index`	number	undefined
Row index.
`item`	unknown	undefined
Data (key, index and column values) of the displayed item.
`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.

Events

name	type
`click`	[MouseEvent]
Event that is emitted when the component is clicked.
`contextmenu`	[MouseEvent]
The event emitted when the user clicks the context menu button.
`dblclick`	[MouseEvent]
The event emitted when the user double clicks the 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

{
  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
}

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

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

[`header.${string}`]
Slot for custom rendering of a header cell.
[`item.${string}`]
Slot for custom rendering of a row cell.
`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.data-table-expand`
Slot for the expand button in the row.
`item.data-table-select`
Slot for the select checkbox in the row.

#VDataTableRow API

VDataTableRow API