"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VContainer",
"source": {
"module": "./src/components/index.ts",
"symbol": "VContainer"
},
"description": "Represents page section that is usually centered and has predictable width (responds to screen width breakpoints).",
"doc-url": "https://vuetifyjs.com/api/v-container",
"attributes": [
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string | (new () => any) | FunctionalComponent"
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxHeight",
"description": "Sets the maximum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxWidth",
"description": "Sets the maximum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minHeight",
"description": "Sets the minimum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minWidth",
"description": "Sets the minimum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "fluid",
"description": "Removes viewport maximum-width size breakpoints.",
"doc-url": "https://vuetifyjs.com/api/VContainer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-container#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VCounter",
"source": {
"module": "./src/components/index.ts",
"symbol": "VCounter"
},
"description": "Represents characters count under the `v-text-field` and `v-textarea`. Not meant to be used as standalone component.",
"doc-url": "https://vuetifyjs.com/api/v-counter",
"attributes": [
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VCounter#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "max",
"description": "Sets the maximum allowed value.",
"doc-url": "https://vuetifyjs.com/api/VCounter#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "value",
"description": "Sets the current counter value.",
"doc-url": "https://vuetifyjs.com/api/VCounter#props",
"default": "0",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "active",
"description": "Determines whether the counter is visible or not.",
"doc-url": "https://vuetifyjs.com/api/VCounter#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "transition",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.",
"doc-url": "https://vuetifyjs.com/api/VCounter#props",
"default": "{component: {name: 'slide-y-transition'}}",
"value": {
"kind": "expression",
"type": "| string\n | boolean\n | (TransitionProps & { component: Component })\n | { component: Component }"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-counter#slots",
"vue-properties": [
{
"name": "counter",
"type": "string"
},
{
"name": "max",
"type": "string | number"
},
{
"name": "value",
"type": "string | number"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataIterator",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataIterator"
},
"description": "Used for displaying arbitrary data, and shares a majority of its functionality with the `v-data-table` component.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator",
"attributes": [
{
"name": "search",
"description": "Text input used to filter items.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string | (new () => any) | FunctionalComponent"
}
},
{
"name": "items",
"description": "An array of strings or objects used for automatically generating children components.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "unknown[]"
}
},
{
"name": "loading",
"description": "If `true` and no items are provided, then a loading text will be shown.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "any[]"
}
},
{
"name": "transition",
"description": "Sets the component transition. Can be one of the [built in](/styles/transitions/) or custom transition.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "{component: {name: 'fade-transition'}, hideOnLeave: true}",
"value": {
"kind": "expression",
"type": "| string\n | boolean\n | (TransitionProps & { component: Component })\n | { component: Component; hideOnLeave: boolean }"
}
},
{
"name": "valueComparator",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "(a: any, b: any) => boolean"
}
},
{
"name": "page",
"description": "The current displayed page number (1-indexed).",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "1",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "expanded",
"description": "Array of expanded items. Can be bound to external variable using **v-model:expanded**.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string[]"
}
},
{
"name": "selectStrategy",
"description": "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).",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "'page'",
"value": {
"kind": "expression",
"type": "'all' | 'page' | 'single'"
}
},
{
"name": "itemValue",
"description": "Property on supplied `items` that contains its value.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "'id'",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "returnObject",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "filterMode",
"description": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "'intersection'",
"value": {
"kind": "expression",
"type": "'every' | 'some' | 'union' | 'intersection'"
}
},
{
"name": "noFilter",
"description": "Disables all item filtering.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customFilter",
"description": "Function to filter items.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "FilterFunction"
}
},
{
"name": "customKeyFilter",
"description": "Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "filterKeys",
"description": "Array of specific keys to filter on the item.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "string | string[]"
}
},
{
"name": "itemsLength",
"description": "The total number of items. Useful when using server-side pagination to correctly compute page counts.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "itemSelectable",
"description": "Property on supplied `items` that contains the boolean value indicating if the item is selectable.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "null",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "showSelect",
"description": "Shows the column with checkboxes for selecting items in the list.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "initialSortOrder",
"description": "Specifies the initial sort order when an **toggleSort** is called for unsorted property.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "'asc'",
"value": {
"kind": "expression",
"type": "'asc' | 'desc'"
}
},
{
"name": "sortBy",
"description": "Array of column keys and sort orders that determines the sort order of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "multiSort",
"description": "Let user sort by multiple properties/columns.\n\n- **key**: (optional) when set to `ctrl`, user is required to hold a keyboard key (Ctrl on PC and Command on Mac)\n- **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`\n- **modifier**: (optional) allows user to use both multi-sort modes (`append` and `prepend`) simultaneously",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "| boolean\n | { key: 'ctrl'; mode: 'append' | 'prepend'; modifier: 'shift' | 'alt' }"
}
},
{
"name": "mustSort",
"description": "Forces sorting on the column(s).",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customKeySort",
"description": "Function used on specific keys within the item object. `customSort` is skipped for columns with `customKeySort` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "itemsPerPage",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "5",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "pageBy",
"description": "Controls how pagination counts items.\n- **item** paginates by individual items,\n- **auto** paginates by top-level groups and falls back to regular items if **group-by** is empty,\n- **any** paginates by both items and groups combined",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "'any'",
"value": {
"kind": "expression",
"type": "'item' | 'auto' | 'any'"
}
},
{
"name": "expandOnClick",
"description": "Expands item when the row is clicked.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showExpand",
"description": "Shows the expand icon.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "groupBy",
"description": "Configures attributes (and sort order) to group items together.",
"doc-url": "https://vuetifyjs.com/api/VDataIterator#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
}
],
"events": [
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[any[]]\n"
}
]
},
{
"name": "update:expanded",
"description": "Emits when the **expanded** items are updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:groupBy",
"description": "Emits when the **group-by** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:page",
"description": "Emits when the **page** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:itemsPerPage",
"description": "Emits when the **items-per-page** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:sortBy",
"description": "Emits when the **sortBy** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:options",
"description": "Emits when pagination related properties (page, itemsPerPage, sortBy, groupBy, search) is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:currentItems",
"description": "Emits with the items currently being displayed.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
}
],
"slots": [
{
"name": "default",
"description": "The default slot. Use this to render your items.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "DataIteratorItem[]"
},
{
"name": "itemsCount",
"type": "number"
},
{
"name": "groupedItems",
"type": "(DataIteratorItem | Group | GroupSummary)[]"
}
]
},
{
"name": "header",
"description": "Defines a header above the items.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "DataIteratorItem[]"
},
{
"name": "itemsCount",
"type": "number"
},
{
"name": "groupedItems",
"type": "(DataIteratorItem | Group | GroupSummary)[]"
}
]
},
{
"name": "footer",
"description": "Defines a footer below the items.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "DataIteratorItem[]"
},
{
"name": "itemsCount",
"type": "number"
},
{
"name": "groupedItems",
"type": "(DataIteratorItem | Group | GroupSummary)[]"
}
]
},
{
"name": "loader",
"description": "Slot for custom loader (displayed when [loading](#props-loading) prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#slots",
"vue-properties": [
{
"name": "color",
"type": "string"
},
{
"name": "isActive",
"type": "boolean"
}
]
},
{
"name": "no-data",
"description": "Defines content for when no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-iterator#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTable",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTable"
},
"description": "Used for displaying tabular data. Supports searching, grouping, sorting and pagination.",
"doc-url": "https://vuetifyjs.com/api/v-data-table",
"attributes": [
{
"name": "search",
"description": "Text input used to filter items.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string | (new () => any) | FunctionalComponent"
}
},
{
"name": "height",
"description": "Set an explicit height of table.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "items",
"description": "An array of strings or objects used for automatically generating children components.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "any[]"
}
},
{
"name": "density",
"description": "Adjusts the vertical height of the table rows.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "loading",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "sticky",
"description": "Deprecated, use `fixed-header` instead.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "color",
"description": "Applies a color to checkboxes, page size dropdown and sort badges in the table header.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "mobile",
"description": "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",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mobileBreakpoint",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
}
},
{
"name": "hover",
"description": "Adds a hover effects to a table rows.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "nextIcon",
"description": "Next icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$next'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "prevIcon",
"description": "Previous icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$prev'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "valueComparator",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "(a: any, b: any) => boolean"
}
},
{
"name": "page",
"description": "The current displayed page number (1-indexed).",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "1",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "expanded",
"description": "Array of expanded items. Can be bound to external variable using **v-model:expanded**.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string[]"
}
},
{
"name": "noDataText",
"description": "Text shown when no items are provided to the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.noDataText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "expandIcon",
"description": "Icon to display when the expandable row is collapsed.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$expand'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "collapseIcon",
"description": "Icon to display when the expandable row is expanded.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$collapse'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "selectStrategy",
"description": "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).",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'page'",
"value": {
"kind": "expression",
"type": "'all' | 'page' | 'single'"
}
},
{
"name": "itemValue",
"description": "Property on supplied `items` that contains its value.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'id'",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "returnObject",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "filterMode",
"description": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'intersection'",
"value": {
"kind": "expression",
"type": "'every' | 'some' | 'union' | 'intersection'"
}
},
{
"name": "noFilter",
"description": "Disables all item filtering.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customFilter",
"description": "Function to filter items.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "FilterFunction"
}
},
{
"name": "customKeyFilter",
"description": "Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "filterKeys",
"description": "Array of specific keys to filter on the item.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "string | string[]"
}
},
{
"name": "itemSelectable",
"description": "Property on supplied `items` that indicates whether the item is selectable.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "null",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "showSelect",
"description": "Shows the select checkboxes in both the header and rows (if using default rows).",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "initialSortOrder",
"description": "Specifies the initial sort order when an unsorted column is clicked.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'asc'",
"value": {
"kind": "expression",
"type": "'asc' | 'desc'"
}
},
{
"name": "sortBy",
"description": "Changes which item property (or properties) should be used for sort order. Can be bound to external variable using **v-model:sortBy**..",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "multiSort",
"description": "Let user sort by multiple properties/columns.\n\n- **key**: (optional) when set to `ctrl`, user is required to hold a keyboard key (Ctrl on PC and Command on Mac)\n- **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`\n- **modifier**: (optional) allows user to use both multi-sort modes (`append` and `prepend`) simultaneously",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "| boolean\n | { key: 'ctrl'; mode: 'append' | 'prepend'; modifier: 'shift' | 'alt' }"
}
},
{
"name": "mustSort",
"description": "Forces sorting on the column(s).",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customKeySort",
"description": "Function used on specific keys within the item object. `customSort` is skipped for columns with `customKeySort` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "itemsPerPage",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "10",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "pageBy",
"description": "Controls how pagination counts items.\n- **item** paginates by individual items,\n- **auto** paginates by top-level groups and falls back to regular items if **group-by** is empty,\n- **any** paginates by both items and groups combined",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'any'",
"value": {
"kind": "expression",
"type": "'item' | 'auto' | 'any'"
}
},
{
"name": "expandOnClick",
"description": "Expands item when the row is clicked.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showExpand",
"description": "Shows the expand toggle in default rows.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "groupBy",
"description": "Configures attributes (and sort order) to group items together. Can be customized further with `group-header` and `group-summary` slots.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "headerProps",
"description": "Pass props to the default header. See [`v-data-table-headers` API](/api/v-data-table-headers) for more information.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "cellProps",
"description": "An object of additional props to be passed to each `` 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.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'column' | 'index' | 'internalItem'\n >,\n ) => Record)"
}
},
{
"name": "disableSort",
"description": "Toggles rendering of sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "headers",
"description": "An array of objects that each describe a header column.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "{\n readonly key?:\n | (string & {})\n | 'data-table-group'\n | 'data-table-select'\n | 'data-table-expand'\n | undefined\n readonly value?: SelectItemKey\n readonly title?: string | undefined\n readonly fixed?: boolean | 'start' | 'end' | undefined\n readonly align?: 'start' | 'end' | 'center' | undefined\n readonly width?: string | number | undefined\n readonly minWidth?: string | number | undefined\n readonly maxWidth?: string | number | undefined\n readonly nowrap?: boolean | undefined\n readonly indent?: number | undefined\n readonly headerProps?: { readonly [x: string]: any } | undefined\n readonly cellProps?:\n | { readonly [x: string]: any }\n | HeaderCellPropsFunction\n | undefined\n readonly sortable?: boolean | undefined\n readonly sort?: DataTableCompareFunction | undefined\n readonly sortRaw?: DataTableCompareFunction | undefined\n readonly filter?: FilterFunction | undefined\n readonly children?: readonly any[] | undefined\n}[]"
}
},
{
"name": "loadingText",
"description": "Text shown when the data is loading.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataIterator.loadingText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "hideNoData",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "groupCollapseIcon",
"description": "Icon to display when the row group is expanded.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$tableGroupCollapse'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "groupExpandIcon",
"description": "Icon to display when the row group is collapsed.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$tableGroupExpand'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "rowProps",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each row.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick, 'item' | 'index' | 'internalItem'>,\n ) => Record)"
}
},
{
"name": "hideDefaultBody",
"description": "Hides the default body.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideDefaultFooter",
"description": "Hides the default footer.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideDefaultHeader",
"description": "Hides the default header.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "fixedHeader",
"description": "Fixed header to top of table.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "sortIcon",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "sortAscIcon",
"description": "Icon used for ascending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$sortAsc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "sortDescIcon",
"description": "Icon used for descending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$sortDesc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "fixedFooter",
"description": "Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "striped",
"description": "Applies a background to either **even** or **odd** rows.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "null",
"value": {
"kind": "expression",
"type": "'odd' | 'even'"
}
},
{
"name": "firstIcon",
"description": "First icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$first'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "lastIcon",
"description": "Last icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$last'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "itemsPerPageText",
"description": "Text for items-per-page dropdown.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataFooter.itemsPerPageText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "pageText",
"description": "Label for page number.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataFooter.pageText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "firstPageLabel",
"description": "Label for first page.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataFooter.firstPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "prevPageLabel",
"description": "Label for previous page.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataFooter.prevPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "nextPageLabel",
"description": "Label for next page.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataFooter.nextPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "lastPageLabel",
"description": "Label for last page.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "'$vuetify.dataFooter.lastPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "itemsPerPageOptions",
"description": "Array of options to show in the items-per-page dropdown.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "[\n {value: 10, title: '10'},\n {value: 25, title: '25'},\n {value: 50, title: '50'},\n {value: 100, title: '100'},\n {value: -1, title: '$vuetify.dataFooter.itemsPerPageAll'}\n]",
"value": {
"kind": "expression",
"type": "(number | { title: string; value: number })[]"
}
},
{
"name": "showCurrentPage",
"description": "Show current page number between prev/next icons.",
"doc-url": "https://vuetifyjs.com/api/VDataTable#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": [
{
"name": "update:modelValue",
"description": "Emits when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[unknown]\n"
}
]
},
{
"name": "update:expanded",
"description": "Emits when the **expanded** items are updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:groupBy",
"description": "Emits when the **group-by** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:page",
"description": "Emits when the **page** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:itemsPerPage",
"description": "Emits when the **items-per-page** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:sortBy",
"description": "Emits when the **sortBy** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:options",
"description": "Emits when pagination related properties (page, itemsPerPage, sortBy, groupBy, search) is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:currentItems",
"description": "Emits with the items currently being displayed.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
}
],
"slots": [
{
"name": "data-table-group",
"description": "Slot for custom rendering of a group.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "item",
"type": "Group"
},
{
"name": "count",
"type": "number"
},
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "data-table-select",
"description": "Slot for custom rendering of a header cell with the select checkbox.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "item.data-table-select",
"description": "Slot to replace the default `v-checkbox-btn` used when selecting rows.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "item.data-table-expand",
"description": "Slot to replace the default `v-icon` used when expanding rows.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "header.data-table-select",
"description": "Slot to replace the default `v-checkbox-btn` in header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "header.data-table-expand",
"description": "Slot to replace the default `v-icon` used when expanding header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "item",
"description": "Slot to replace the default rendering of a row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "loading",
"description": "Defines content for when `loading` is true and no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "group-header",
"description": "Slot for custom rendering of a group header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "index",
"type": "number"
},
{
"name": "item",
"type": "Group"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
}
]
},
{
"name": "group-summary",
"description": "Slot for custom rendering of a group summary.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "index",
"type": "number"
},
{
"name": "item",
"type": "GroupSummary"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
}
]
},
{
"name": "no-data",
"description": "Defines content for when no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "expanded-row",
"description": "Slot for custom rendering of an expanded row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "headers",
"description": "An array of objects that each describe a header column.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
}
]
},
{
"name": "loader",
"description": "Slot for custom loader (displayed when [loading](#props-loading) prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "color",
"type": "string"
},
{
"name": "isActive",
"type": "boolean"
}
]
},
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "colgroup",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "top",
"description": "Slot to add content above the table.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "body",
"description": "Slot to replace the default table ``.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "tbody",
"description": "Slot to replace the default table ``.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "thead",
"description": "Slot to replace the default table ``.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "tfoot",
"description": "Slot to replace the default table ``.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "bottom",
"description": "Slot for custom rendering of a data table footer.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "body.prepend",
"description": "Prepends elements to the start of the default table ``.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "body.append",
"description": "Appends elements to the end of the default table ``.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "footer.prepend",
"description": "Adds content to the empty space in the footer.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "[`item.${string}`]",
"description": "Slot for custom rendering of a row cell.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots"
},
{
"name": "[`header.${string}`]",
"description": "Slot for custom rendering of a header cell.",
"doc-url": "https://vuetifyjs.com/api/v-data-table#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTableFooter",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTableFooter"
},
"description": "Pre-defined pagination component for `v-data-table`.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-footer",
"attributes": [
{
"name": "color",
"description": "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](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "nextIcon",
"description": "Next icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"default": "'$next'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "prevIcon",
"description": "Previous icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"default": "'$prev'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "firstIcon",
"description": "First icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"default": "'$first'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "lastIcon",
"description": "Last icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"default": "'$last'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "itemsPerPageText",
"description": "Text for items-per-page dropdown.",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"default": "'$vuetify.dataFooter.itemsPerPageText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "pageText",
"description": "Label for page number.",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"default": "'$vuetify.dataFooter.pageText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "firstPageLabel",
"description": "Label for first page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"default": "'$vuetify.dataFooter.firstPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "prevPageLabel",
"description": "Label for previous page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"default": "'$vuetify.dataFooter.prevPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "nextPageLabel",
"description": "Label for next page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"default": "'$vuetify.dataFooter.nextPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "lastPageLabel",
"description": "Label for last page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"default": "'$vuetify.dataFooter.lastPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "itemsPerPageOptions",
"description": "Array of options to show in the items-per-page dropdown.",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"default": "[\n {value: 10, title: '10'},\n {value: 25, title: '25'},\n {value: 50, title: '50'},\n {value: 100, title: '100'},\n {value: -1, title: '$vuetify.dataFooter.itemsPerPageAll'}\n]",
"value": {
"kind": "expression",
"type": "(number | { title: string; value: number })[]"
}
},
{
"name": "showCurrentPage",
"description": "Show current page number between prev/next icons.",
"doc-url": "https://vuetifyjs.com/api/VDataTableFooter#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": [],
"slots": [
{
"name": "prepend",
"description": "Extra content placed before the default pagination.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-footer#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTableHeaders",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTableHeaders"
},
"description": "Used to define the headers for a `v-data-table`.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-headers",
"attributes": [
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "loading",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "sticky",
"description": "Deprecated, use `fixed-header` instead.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "color",
"description": "Applies a color to checkboxes, page size dropdown and sort badges in the table header.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "mobile",
"description": "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",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mobileBreakpoint",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"value": {
"kind": "expression",
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
}
},
{
"name": "initialSortOrder",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"value": {
"kind": "expression",
"type": "'asc' | 'desc'"
}
},
{
"name": "multiSort",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "headerProps",
"description": "Additional props to be be passed to the default header",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "disableSort",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableHeaders.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "fixedHeader",
"description": "Sticks the header to the top of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "sortIcon",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "sortAscIcon",
"description": "Icon used for ascending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "'$sortAsc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "sortDescIcon",
"description": "Icon used for descending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableHeaders#props",
"default": "'$sortDesc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
}
],
"events": [],
"slots": [
{
"name": "headers",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-headers#slots",
"vue-properties": [
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
}
]
},
{
"name": "loader",
"description": "Slot for custom loader (displayed when [loading](#props-loading) prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-data-table-headers#slots",
"vue-properties": [
{
"name": "color",
"type": "string"
},
{
"name": "isActive",
"type": "boolean"
}
]
},
{
"name": "header.data-table-select",
"description": "Slot for the select-all checkbox in the header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-headers#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "header.data-table-expand",
"description": "Slot for the expand button in the header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-headers#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "[`header.${string}`]",
"description": "Slot for custom rendering of a header cell.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-headers#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTableRow",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTableRow"
},
"description": "Used to define a row for a `v-data-table`.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row",
"attributes": [
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "color",
"description": "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](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "item",
"description": "Data (key, index and column values) of the displayed item.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "mobile",
"description": "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",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mobileBreakpoint",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"value": {
"kind": "expression",
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
}
},
{
"name": "expandIcon",
"description": "Icon to display when the expandable row is collapsed.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"default": "'$expand'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "collapseIcon",
"description": "Icon to display when the expandable row is expanded.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"default": "'$collapse'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "index",
"description": "Row index.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "cellProps",
"description": "Props to be applied to the cell.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRow#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'column' | 'index' | 'internalItem'\n >,\n ) => Record)"
}
}
],
"events": [
{
"name": "click",
"description": "Event that is emitted when the component is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "contextmenu",
"description": "The event emitted when the user clicks the context menu button.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "dblclick",
"description": "The event emitted when the user double clicks the row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
}
],
"slots": [
{
"name": "item.data-table-select",
"description": "Slot for the select checkbox in the row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#slots"
},
{
"name": "item.data-table-expand",
"description": "Slot for the expand button in the row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#slots"
},
{
"name": "header.data-table-select",
"description": "Slot to replace the default `v-checkbox-btn` in header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "header.data-table-expand",
"description": "Slot to replace the default `v-icon` used when expanding header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "[`item.${string}`]",
"description": "Slot for custom rendering of a row cell.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#slots"
},
{
"name": "[`header.${string}`]",
"description": "Slot for custom rendering of a header cell.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-row#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTableRows",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTableRows"
},
"description": "Used to define the rows for a `v-data-table`.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows",
"attributes": [
{
"name": "items",
"description": "An array of strings or objects used for automatically generating children components.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "(DataTableItem | Group | GroupSummary)[]"
}
},
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "loading",
"description": "Displays `loading` slot if set to `true`",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "color",
"description": "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](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "mobile",
"description": "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",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mobileBreakpoint",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"value": {
"kind": "expression",
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
}
},
{
"name": "noDataText",
"description": "Text shown when no items are provided to the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "'$vuetify.noDataText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "expandIcon",
"description": "Icon to display when the expandable row is collapsed.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "'$expand'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "collapseIcon",
"description": "Icon to display when the expandable row is expanded.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "'$collapse'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "cellProps",
"description": "An object of additional props to be passed to each `` 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.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'column' | 'index' | 'internalItem'\n >,\n ) => Record)"
}
},
{
"name": "loadingText",
"description": "Text shown when the data is loading.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "'$vuetify.dataIterator.loadingText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "hideNoData",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "groupCollapseIcon",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableGroupHeaderRow.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "'$tableGroupCollapse'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "groupExpandIcon",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableGroupHeaderRow.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"default": "'$tableGroupExpand'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "rowProps",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each row.",
"doc-url": "https://vuetifyjs.com/api/VDataTableRows#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick, 'item' | 'index' | 'internalItem'>,\n ) => Record)"
}
}
],
"events": [],
"slots": [
{
"name": "data-table-group",
"description": "Slot for custom rendering of a group.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "item",
"type": "Group"
},
{
"name": "count",
"type": "number"
},
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "data-table-select",
"description": "Slot for custom rendering of a header cell with the select checkbox.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "item.data-table-select",
"description": "Slot for custom rendering of a row cell with the select checkbox.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "item.data-table-expand",
"description": "Slot for custom rendering of a row cell with the expand icon.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "header.data-table-select",
"description": "Slot to replace the default `v-checkbox-btn` in header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "header.data-table-expand",
"description": "Slot to replace the default `v-icon` used when expanding header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "item",
"description": "Define a custom item appearance.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "loading",
"description": "Slot for custom rendering of the loading state.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "group-header",
"description": "Slot for custom rendering of a group header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "index",
"type": "number"
},
{
"name": "item",
"type": "Group"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
}
]
},
{
"name": "group-summary",
"description": "Slot for custom rendering of a group summary.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "index",
"type": "number"
},
{
"name": "item",
"type": "GroupSummary"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
}
]
},
{
"name": "no-data",
"description": "Defines content for when no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "expanded-row",
"description": "Slot for custom rendering of an expanded row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "[`item.${string}`]",
"description": "Slot for custom rendering of a column.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots"
},
{
"name": "[`header.${string}`]",
"description": "Slot for custom rendering of a header cell.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-rows#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTableServer",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTableServer"
},
"description": "Specialized `v-data-table` to be combined with backend API that responds with single rows page to display.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server",
"attributes": [
{
"name": "search",
"description": "Text input used to filter items.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string | (new () => any) | FunctionalComponent"
}
},
{
"name": "height",
"description": "Use the height prop to set the height of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "items",
"description": "An array of strings or objects used for automatically generating children components.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "any[]"
}
},
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "loading",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "sticky",
"description": "Deprecated, use `fixed-header` instead.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "color",
"description": "Applies a color to checkboxes, page size dropdown and sort badges in the table header.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "mobile",
"description": "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",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mobileBreakpoint",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
}
},
{
"name": "hover",
"description": "Will add a hover effect to a table's row when the mouse is over it.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "nextIcon",
"description": "Next icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$next'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "prevIcon",
"description": "Previous icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$prev'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "valueComparator",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "(a: any, b: any) => boolean"
}
},
{
"name": "page",
"description": "The current displayed page number (1-indexed).",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "1",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "expanded",
"description": "Array of expanded items. Can be bound to external variable using **v-model:expanded**.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string[]"
}
},
{
"name": "noDataText",
"description": "Text shown when no items are provided to the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.noDataText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "expandIcon",
"description": "Icon to display when the expandable row is collapsed.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$expand'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "collapseIcon",
"description": "Icon to display when the expandable row is expanded.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$collapse'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "selectStrategy",
"description": "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).",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'page'",
"value": {
"kind": "expression",
"type": "'all' | 'page' | 'single'"
}
},
{
"name": "itemValue",
"description": "Property on supplied `items` that contains its value.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'id'",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "returnObject",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "itemsLength",
"description": "Number of all items.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "itemSelectable",
"description": "Property on supplied `items` that indicates whether the item is selectable.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "null",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "showSelect",
"description": "Shows the column with checkboxes for selecting items in the list.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "initialSortOrder",
"description": "Specifies the initial sort order when an unsorted column is clicked.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'asc'",
"value": {
"kind": "expression",
"type": "'asc' | 'desc'"
}
},
{
"name": "sortBy",
"description": "Array of column keys and sort orders that determines the sort order of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "multiSort",
"description": "Let user sort by multiple properties/columns.\n\n- **key**: (optional) when set to `ctrl`, user is required to hold a keyboard key (Ctrl on PC and Command on Mac)\n- **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`\n- **modifier**: (optional) allows user to use both multi-sort modes (`append` and `prepend`) simultaneously",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "| boolean\n | { key: 'ctrl'; mode: 'append' | 'prepend'; modifier: 'shift' | 'alt' }"
}
},
{
"name": "mustSort",
"description": "Forces sorting on the column(s).",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customKeySort",
"description": "Function used on specific keys within the item object. `customSort` is skipped for columns with `customKeySort` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "itemsPerPage",
"description": "The number of items to display on each page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "10",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "pageBy",
"description": "Controls how pagination counts items.\n- **item** paginates by individual items,\n- **auto** paginates by top-level groups and falls back to regular items if **group-by** is empty,\n- **any** paginates by both items and groups combined",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'any'",
"value": {
"kind": "expression",
"type": "'item' | 'auto' | 'any'"
}
},
{
"name": "expandOnClick",
"description": "Expands item when the row is clicked.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showExpand",
"description": "Shows the expand icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "groupBy",
"description": "Defines the grouping of the table items.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "headerProps",
"description": "Pass props to the default header. See [`v-data-table-server` API](/api/v-data-table-server) for more information.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "cellProps",
"description": "An object of additional props to be passed to each `` 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.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'column' | 'index' | 'internalItem'\n >,\n ) => Record)"
}
},
{
"name": "disableSort",
"description": "Toggles rendering of sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "headers",
"description": "An array of objects that each describe a header column.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "{\n readonly key?:\n | (string & {})\n | 'data-table-group'\n | 'data-table-select'\n | 'data-table-expand'\n | undefined\n readonly value?: SelectItemKey\n readonly title?: string | undefined\n readonly fixed?: boolean | 'start' | 'end' | undefined\n readonly align?: 'start' | 'end' | 'center' | undefined\n readonly width?: string | number | undefined\n readonly minWidth?: string | number | undefined\n readonly maxWidth?: string | number | undefined\n readonly nowrap?: boolean | undefined\n readonly indent?: number | undefined\n readonly headerProps?: { readonly [x: string]: any } | undefined\n readonly cellProps?:\n | { readonly [x: string]: any }\n | HeaderCellPropsFunction\n | undefined\n readonly sortable?: boolean | undefined\n readonly sort?: DataTableCompareFunction | undefined\n readonly sortRaw?: DataTableCompareFunction | undefined\n readonly filter?: FilterFunction | undefined\n readonly children?: readonly any[] | undefined\n}[]"
}
},
{
"name": "loadingText",
"description": "Text shown when the data is loading.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataIterator.loadingText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "hideNoData",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "groupCollapseIcon",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableGroupHeaderRow.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$tableGroupCollapse'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "groupExpandIcon",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableGroupHeaderRow.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$tableGroupExpand'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "rowProps",
"description": "An object of additional props to be passed to each `` in the table body. Also accepts a function that will be called for each row.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick, 'item' | 'index' | 'internalItem'>,\n ) => Record)"
}
},
{
"name": "hideDefaultBody",
"description": "Hides the default body.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideDefaultFooter",
"description": "Hides the default footer.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "hideDefaultHeader",
"description": "Hides the default header.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "fixedHeader",
"description": "Use the fixed-header prop together with the height prop to fix the header to the top of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "sortIcon",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "sortAscIcon",
"description": "Icon used for ascending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$sortAsc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "sortDescIcon",
"description": "Icon used for descending sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$sortDesc'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "fixedFooter",
"description": "Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "striped",
"description": "Applies a background to either **even** or **odd** rows.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "null",
"value": {
"kind": "expression",
"type": "'odd' | 'even'"
}
},
{
"name": "firstIcon",
"description": "First icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$first'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "lastIcon",
"description": "Last icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$last'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "itemsPerPageText",
"description": "Text for items-per-page dropdown.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataFooter.itemsPerPageText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "pageText",
"description": "Label for page number.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataFooter.pageText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "firstPageLabel",
"description": "Label for first page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataFooter.firstPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "prevPageLabel",
"description": "Label for previous page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataFooter.prevPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "nextPageLabel",
"description": "Label for next page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataFooter.nextPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "lastPageLabel",
"description": "Label for last page.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "'$vuetify.dataFooter.lastPage'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "itemsPerPageOptions",
"description": "Array of options to show in the items-per-page dropdown.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "[\n {value: 10, title: '10'},\n {value: 25, title: '25'},\n {value: 50, title: '50'},\n {value: 100, title: '100'},\n {value: -1, title: '$vuetify.dataFooter.itemsPerPageAll'}\n]",
"value": {
"kind": "expression",
"type": "(number | { title: string; value: number })[]"
}
},
{
"name": "showCurrentPage",
"description": "Show current page number between prev/next icons.",
"doc-url": "https://vuetifyjs.com/api/VDataTableServer#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": [
{
"name": "update:modelValue",
"description": "Emits when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[unknown]\n"
}
]
},
{
"name": "update:expanded",
"description": "Emits when the **expanded** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:groupBy",
"description": "Emits when the **group-by** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:page",
"description": "Emits when the **page** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:itemsPerPage",
"description": "Emits when the **items-per-page** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[number]\n"
}
]
},
{
"name": "update:sortBy",
"description": "Emits when the **sortBy** prop is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
},
{
"name": "update:options",
"description": "Emits when pagination related properties (page, itemsPerPage, sortBy, groupBy, search) is updated.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#events",
"arguments": [
{
"name": "argument",
"type": "[any]\n"
}
]
}
],
"slots": [
{
"name": "data-table-group",
"description": "Slot for custom rendering of a group.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "item",
"type": "Group"
},
{
"name": "count",
"type": "number"
},
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "data-table-select",
"description": "Slot for custom rendering of a header cell with the select checkbox.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "props",
"type": "Record"
}
]
},
{
"name": "item.data-table-select",
"description": "Slot to replace the default checkbox used when selecting rows.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "item.data-table-expand",
"description": "Slot to replace the default `v-icon` used when expanding rows.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "header.data-table-select",
"description": "Slot for the select-all checkbox in the header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "header.data-table-expand",
"description": "Slot for the expand button in the header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
},
{
"name": "item",
"description": "Slot to replace the default rendering of a row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "loading",
"description": "Defines content for when `loading` is true and no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "group-header",
"description": "Slot for custom rendering of a group header.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "index",
"type": "number"
},
{
"name": "item",
"type": "Group"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
}
]
},
{
"name": "group-summary",
"description": "Slot for custom rendering of a group summary.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "index",
"type": "number"
},
{
"name": "item",
"type": "GroupSummary"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
}
]
},
{
"name": "no-data",
"description": "Defines content for when no items are provided.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "expanded-row",
"description": "Slot for custom rendering of an expanded row.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "headers",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
}
]
},
{
"name": "loader",
"description": "Slot for custom loader (displayed when [loading](#props-loading) prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "color",
"type": "string"
},
{
"name": "isActive",
"type": "boolean"
}
]
},
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "colgroup",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "top",
"description": "Slot to add content above the table.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "body",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "tbody",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "thead",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "tfoot",
"description": "Slot to replace the default rendering of the `` element.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "bottom",
"description": "Slot to add content below the table.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "body.prepend",
"description": "Adds content to the empty space in the body.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "body.append",
"description": "Adds content to the empty space in the body.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "page",
"type": "number"
},
{
"name": "itemsPerPage",
"type": "number"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "pageCount",
"type": "number"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "setItemsPerPage",
"type": "(value: number) => void"
},
{
"name": "prevPage",
"type": "() => void"
},
{
"name": "nextPage",
"type": "() => void"
},
{
"name": "setPage",
"type": "(value: number) => void"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "isSelected",
"type": "(items: SelectableItem | SelectableItem[]) => boolean"
},
{
"name": "select",
"type": "(items: SelectableItem[], value: boolean) => void"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "toggleSelect",
"type": "(item: SelectableItem, index: number, event: MouseEvent) => void"
},
{
"name": "isExpanded",
"type": "(item: DataTableItem) => boolean"
},
{
"name": "toggleExpand",
"type": "(item: DataTableItem) => void"
},
{
"name": "isGroupOpen",
"type": "(group: Group) => boolean"
},
{
"name": "toggleGroup",
"type": "(group: Group) => void"
},
{
"name": "items",
"type": "any[]"
},
{
"name": "internalItems",
"type": "DataTableItem[]"
},
{
"name": "groupedItems",
"type": "(DataTableItem | Group | GroupSummary)[]"
},
{
"name": "columns",
"type": "InternalDataTableHeader[]"
},
{
"name": "headers",
"type": "InternalDataTableHeader[][]"
}
]
},
{
"name": "footer.prepend",
"description": "Adds content to the empty space in the footer.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "[`item.${string}`]",
"description": "Slot for custom rendering of a row cell.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots"
},
{
"name": "[`header.${string}`]",
"description": "Slot for a specific header. See [`v-data-table-server` API](/api/v-data-table-server) for more information.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-server#slots",
"vue-properties": [
{
"name": "column",
"type": "InternalDataTableHeader"
},
{
"name": "selectAll",
"type": "(value: boolean) => void"
},
{
"name": "isSorted",
"type": "(column: InternalDataTableHeader) => boolean"
},
{
"name": "toggleSort",
"type": "(column: InternalDataTableHeader, event: KeyboardEvent | PointerEvent, mandatory: boolean) => void"
},
{
"name": "sortBy",
"type": "SortItem[]"
},
{
"name": "someSelected",
"type": "boolean"
},
{
"name": "allSelected",
"type": "boolean"
},
{
"name": "getSortIcon",
"type": "(column: InternalDataTableHeader) => string | (string | [string, number])[] | (new () => any) | FunctionalComponent"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VDataTableVirtual",
"source": {
"module": "./src/components/index.ts",
"symbol": "VDataTableVirtual"
},
"description": "Specialized `v-data-table` with built-in row virtualization to handle thousands of rows with minimal performance impact.",
"doc-url": "https://vuetifyjs.com/api/v-data-table-virtual",
"attributes": [
{
"name": "search",
"description": "Text input used to filter items.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string | (new () => any) | FunctionalComponent"
}
},
{
"name": "height",
"description": "Use the height prop to set the height of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "items",
"description": "An array of strings or objects used for automatically generating children components.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "any[]"
}
},
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "loading",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "sticky",
"description": "Deprecated, use `fixed-header` instead.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "color",
"description": "Applies a color to checkboxes, page size dropdown and sort badges in the table header.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "mobile",
"description": "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",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "mobileBreakpoint",
"description": "Overrides the display configuration default screen size that the component should be considered in mobile.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "number | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
}
},
{
"name": "hover",
"description": "Will add a hover effect to a table's row when the mouse is over it.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "valueComparator",
"description": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "(a: any, b: any) => boolean"
}
},
{
"name": "expanded",
"description": "Array of expanded items. Can be bound to external variable using **v-model:expanded**.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string[]"
}
},
{
"name": "noDataText",
"description": "Text shown when no items are provided to the component.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'$vuetify.noDataText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "expandIcon",
"description": "Icon to display when the expandable row is collapsed.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'$expand'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "collapseIcon",
"description": "Icon to display when the expandable row is expanded.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'$collapse'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "selectStrategy",
"description": "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).",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'page'",
"value": {
"kind": "expression",
"type": "'all' | 'page' | 'single'"
}
},
{
"name": "itemValue",
"description": "Property on supplied `items` that contains its value.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'id'",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "returnObject",
"description": "Changes the selection behavior to return the object directly rather than the value specified with **item-value**.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "filterMode",
"description": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'intersection'",
"value": {
"kind": "expression",
"type": "'every' | 'some' | 'union' | 'intersection'"
}
},
{
"name": "noFilter",
"description": "Disables all item filtering.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customFilter",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "FilterFunction"
}
},
{
"name": "customKeyFilter",
"description": "Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "filterKeys",
"description": "Array of specific keys to filter on the item.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "string | string[]"
}
},
{
"name": "itemSelectable",
"description": "Property on supplied `items` that indicates whether the item is selectable.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "null",
"value": {
"kind": "expression",
"type": "SelectItemKey"
}
},
{
"name": "showSelect",
"description": "Shows the column with checkboxes for selecting items in the list.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "initialSortOrder",
"description": "Specifies the initial sort order when an unsorted column is clicked.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'asc'",
"value": {
"kind": "expression",
"type": "'asc' | 'desc'"
}
},
{
"name": "sortBy",
"description": "Array of column keys and sort orders that determines the sort order of the table.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "multiSort",
"description": "Let user sort by multiple properties/columns.\n\n- **key**: (optional) when set to `ctrl`, user is required to hold a keyboard key (Ctrl on PC and Command on Mac)\n- **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`\n- **modifier**: (optional) allows user to use both multi-sort modes (`append` and `prepend`) simultaneously",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "| boolean\n | { key: 'ctrl'; mode: 'append' | 'prepend'; modifier: 'shift' | 'alt' }"
}
},
{
"name": "mustSort",
"description": "Forces sorting on the column(s).",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customKeySort",
"description": "Function used on specific keys within the item object. `customSort` is skipped for columns with `customKeySort` specified.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "expandOnClick",
"description": "Expands item when the row is clicked.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "showExpand",
"description": "Shows the expand icon.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "groupBy",
"description": "Defines the grouping of the table items.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "SortItem[]"
}
},
{
"name": "headerProps",
"description": "Pass props to the default header.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "unknown"
}
},
{
"name": "cellProps",
"description": "An object of additional props to be passed to each `| ` 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.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "| Record\n | ((\n data: Pick<\n ItemKeySlot,\n 'value' | 'item' | 'column' | 'index' | 'internalItem'\n >,\n ) => Record)"
}
},
{
"name": "disableSort",
"description": "Toggles rendering of sort button.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "headers",
"description": "An array of objects that each describe a header column.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"value": {
"kind": "expression",
"type": "{\n readonly key?:\n | (string & {})\n | 'data-table-group'\n | 'data-table-select'\n | 'data-table-expand'\n | undefined\n readonly value?: SelectItemKey\n readonly title?: string | undefined\n readonly fixed?: boolean | 'start' | 'end' | undefined\n readonly align?: 'start' | 'end' | 'center' | undefined\n readonly width?: string | number | undefined\n readonly minWidth?: string | number | undefined\n readonly maxWidth?: string | number | undefined\n readonly nowrap?: boolean | undefined\n readonly indent?: number | undefined\n readonly headerProps?: { readonly [x: string]: any } | undefined\n readonly cellProps?:\n | { readonly [x: string]: any }\n | HeaderCellPropsFunction\n | undefined\n readonly sortable?: boolean | undefined\n readonly sort?: DataTableCompareFunction | undefined\n readonly sortRaw?: DataTableCompareFunction | undefined\n readonly filter?: FilterFunction | undefined\n readonly children?: readonly any[] | undefined\n}[]"
}
},
{
"name": "loadingText",
"description": "Text shown when the data is loading.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'$vuetify.dataIterator.loadingText'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "hideNoData",
"description": "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.",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "groupCollapseIcon",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableGroupHeaderRow.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'$tableGroupCollapse'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "groupExpandIcon",
"description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree//packages/api-generator/src/locale/en/VDataTableGroupHeaderRow.json))",
"doc-url": "https://vuetifyjs.com/api/VDataTableVirtual#props",
"default": "'$tableGroupExpand'",
"value": {
"kind": "expression",
"type": "| string\n | (string | [string, number])[]\n | (new () => any)\n | FunctionalComponent"
}
},
{
"name": "rowProps",
"description": "An object of additional props to be passed to each ` | | | |