VDataTable 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 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.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height of the table rows.
`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.
`first-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$first'
First icon.
`first-page-label`	string	'$vuetify.dataFooter.firstPage'
Label for first page.
`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
Fixed header to top of table.
`group-by`	SortItem[]	[]
Configures attributes (and sort order) to group items together. Can be customized further with `group-header` and `group-summary` slots.
`group-collapse-icon` New in v3.10.0	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$tableGroupCollapse'
Icon to display when the row group is expanded.
`group-expand-icon` New in v3.10.0	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$tableGroupExpand'
Icon to display when the row group is collapsed.
`header-props` New in v3.5.0	unknown	undefined
Pass props to the default header. See `v-data-table-headers` API for more information.
`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
Set an explicit height of table.
`hide-default-body`	boolean	false
Hides the default body.
`hide-default-footer`	boolean	false
Hides the default footer.
`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
Adds a hover effects to a table rows.
`initial-sort-order` New in v3.11.0	'asc' \| 'desc'	'asc'
Specifies the initial sort order when an unsorted column is clicked.
`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.
`items-per-page`	string \| number	10
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.
`items-per-page-options`	(number \| { title: string; value: number })[]	[ {value: 10, title: '10'}, {value: 25, title: '25'}, {value: 50, title: '50'}, {value: 100, title: '100'}, {value: -1, title: '$vuetify.dataFooter.itemsPerPageAll'} ]
Array of options to show in the items-per-page dropdown.
`items-per-page-text`	string	'$vuetify.dataFooter.itemsPerPageText'
Text for items-per-page dropdown.
`item-value`	SelectItemKey	'id'
Property on supplied `items` that contains its value.
`last-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$last'
Last icon.
`last-page-label`	string	'$vuetify.dataFooter.lastPage'
Label for last page.
`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).
`next-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$next'
Next icon.
`next-page-label`	string	'$vuetify.dataFooter.nextPage'
Label for next page.
`no-data-text`	string	'$vuetify.noDataText'
Text shown when no items are provided to the component.
`no-filter`	boolean	false
Disables all item filtering.
`page`	string \| number	1
The current displayed page number (1-indexed).
`page-by` New in v3.12.0	'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
`page-text`	string	'$vuetify.dataFooter.pageText'
Label for page number.
`prev-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$prev'
Previous icon.
`prev-page-label`	string	'$vuetify.dataFooter.prevPage'
Label for previous page.
`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-current-page`	boolean	false
Show current page number between prev/next icons.
`show-expand`	boolean	false
Shows the expand toggle in default rows.
`show-select`	boolean	false
Shows the select checkboxes in both the header and rows (if using default rows).
`sort-asc-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$sortAsc'
Icon used for ascending sort button.
`sort-by`	SortItem[]	[]
Changes which item property (or properties) should be used for sort order. Can be bound to external variable using v-model:sortBy…
`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: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`	[unknown]
Emits 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

{
  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

{
  page: number
  itemsPerPage: number
  sortBy: SortItem[]
  pageCount: number
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  setItemsPerPage: (value: number) => void
  prevPage: () => void
  nextPage: () => void
  setPage: (value: number) => void
  someSelected: boolean
  allSelected: boolean
  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: any[]
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
  headers: InternalDataTableHeader[][]
}

{
  page: number
  itemsPerPage: number
  sortBy: SortItem[]
  pageCount: number
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  setItemsPerPage: (value: number) => void
  prevPage: () => void
  nextPage: () => void
  setPage: (value: number) => void
  someSelected: boolean
  allSelected: boolean
  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: any[]
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
  headers: InternalDataTableHeader[][]
}

{
  page: number
  itemsPerPage: number
  sortBy: SortItem[]
  pageCount: number
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  setItemsPerPage: (value: number) => void
  prevPage: () => void
  nextPage: () => void
  setPage: (value: number) => void
  someSelected: boolean
  allSelected: boolean
  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: any[]
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
  headers: InternalDataTableHeader[][]
}

{
  page: number
  itemsPerPage: number
  sortBy: SortItem[]
  pageCount: number
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  setItemsPerPage: (value: number) => void
  prevPage: () => void
  nextPage: () => void
  setPage: (value: number) => void
  someSelected: boolean
  allSelected: boolean
  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: any[]
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
  headers: InternalDataTableHeader[][]
}

{
  page: number
  itemsPerPage: number
  sortBy: SortItem[]
  pageCount: number
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  setItemsPerPage: (value: number) => void
  prevPage: () => void
  nextPage: () => void
  setPage: (value: number) => void
  someSelected: boolean
  allSelected: boolean
  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: any[]
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
  headers: InternalDataTableHeader[][]
}

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

{ props: Record<string, unknown> }

{
  page: number
  itemsPerPage: number
  sortBy: SortItem[]
  pageCount: number
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  setItemsPerPage: (value: number) => void
  prevPage: () => void
  nextPage: () => void
  setPage: (value: number) => void
  someSelected: boolean
  allSelected: boolean
  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: any[]
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
  headers: InternalDataTableHeader[][]
}

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

never

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

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

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

{ color: string; isActive: boolean }

never

never

{
  page: number
  itemsPerPage: number
  sortBy: SortItem[]
  pageCount: number
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  setItemsPerPage: (value: number) => void
  prevPage: () => void
  nextPage: () => void
  setPage: (value: number) => void
  someSelected: boolean
  allSelected: boolean
  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: any[]
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
  headers: InternalDataTableHeader[][]
}

{
  page: number
  itemsPerPage: number
  sortBy: SortItem[]
  pageCount: number
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  setItemsPerPage: (value: number) => void
  prevPage: () => void
  nextPage: () => void
  setPage: (value: number) => void
  someSelected: boolean
  allSelected: boolean
  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: any[]
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
  headers: InternalDataTableHeader[][]
}

{
  page: number
  itemsPerPage: number
  sortBy: SortItem[]
  pageCount: number
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  setItemsPerPage: (value: number) => void
  prevPage: () => void
  nextPage: () => void
  setPage: (value: number) => void
  someSelected: boolean
  allSelected: boolean
  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: any[]
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
  headers: InternalDataTableHeader[][]
}

{
  page: number
  itemsPerPage: number
  sortBy: SortItem[]
  pageCount: number
  toggleSort: (
    column: InternalDataTableHeader,
    event: KeyboardEvent | PointerEvent,
    mandatory: boolean,
  ) => void
  setItemsPerPage: (value: number) => void
  prevPage: () => void
  nextPage: () => void
  setPage: (value: number) => void
  someSelected: boolean
  allSelected: boolean
  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: any[]
  internalItems: DataTableItem[]
  groupedItems: (DataTableItem | Group | GroupSummary)[]
  columns: InternalDataTableHeader[]
  headers: InternalDataTableHeader[][]
}

[`header.${string}`]
Slot for custom rendering of a header cell.
[`item.${string}`]
Slot for custom rendering of a row cell.
`body`
Slot to replace the default table `<tbody>`.
`body.append`
Appends elements to the end of the default table `<tbody>`.
`body.prepend`
Prepends elements to the start of the default table `<tbody>`.
`bottom`
Slot for custom rendering of a data table footer.
`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.
`default`
The default Vue slot.
`expanded-row`
Slot for custom rendering of an expanded row.
`footer.prepend`
Adds content to the empty space in the footer.
`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 to replace the default `v-icon` used when expanding header.
`header.data-table-select`
Slot to replace the default `v-checkbox-btn` in header.
`headers`
An array of objects that each describe a header column.
`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 `v-checkbox-btn` 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.

SASS Variables

name	default
`$data-table-footer-info-min-width`	116px
`$data-table-footer-info-padding`	0 16px
`$data-table-footer-items-per-page-padding`	8px
`$data-table-footer-padding`	8px 4px
`$data-table-footer-pagination-margin-inline-start`	16px
`$data-table-footer-select-width`	90px
`$data-table-header-mobile-chip-icon-color`	tools.theme-color('on-surface', var(--v-disabled-opacity))
`$data-table-header-mobile-chip-icon-color-active`	rgba(var(--v-theme-on-surface))
`$data-table-header-sort-badge-color`	rgba(var(--v-border-color), var(--v-border-opacity))
`$data-table-header-sort-badge-size`	20px
`$data-table-header-sort-icon-default-opacity`	.0
`$data-table-header-sort-icon-hover-opacity`	.5
`$data-table-header-sort-icon-margin-inline`	0px
`$data-table-loading-opacity`	var(--v-disabled-opacity)

#VDataTable API

VDataTable API