VDataTableHeaders API

Props

name	type	default
`color`	string	undefined
Applies a color to checkboxes, page size dropdown and sort badges in the table header.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disable-sort`	boolean	false
MISSING DESCRIPTION (edit in github)
`fixed-header`	boolean	false
Sticks the header to the top of the table.
`header-props`	unknown	undefined
Additional props to be be passed to the default header
`initial-sort-order`	'asc' \| 'desc'	undefined
MISSING DESCRIPTION (edit in github)
`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.
`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.
`multi-sort`	boolean	false
MISSING DESCRIPTION (edit in github)
`sort-asc-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$sortAsc'
Icon used for ascending sort button.
`sort-desc-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$sortDesc'
Icon used for descending sort button.
`sort-icon`	\| 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.

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
}

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

{ color: string; isActive: boolean }

[`header.${string}`]
Slot for custom rendering of a header cell.
`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.
`loader`
Slot for custom loader (displayed when loading prop is equal to true).

#VDataTableHeaders API

VDataTableHeaders API