common-intellisense
Version:
1,489 lines • 126 kB
JSON
{
"mixins": [
{
"props": {
"fullscreen": {
"type": "Boolean",
"sync": true,
"desc": "Fullscreen mode",
"examples": [
"# v-model:fullscreen=\"isFullscreen\""
],
"category": "behavior"
},
"no-route-fullscreen-exit": {
"type": "Boolean",
"desc": "Changing route app won't exit fullscreen",
"category": "behavior"
},
"rows": {
"type": "Array",
"desc": "Rows of data to display",
"required": true,
"examples": [
"# :rows=\"myData\""
],
"category": "general"
},
"row-key": {
"type": [
"String",
"Function"
],
"desc": "Property of each row that defines the unique key of each row (the result must be a primitive, not Object, Array, etc); The value of property must be string or a function taking a row and returning the desired (nested) key in the row; If supplying a function then for best performance, reference it from your scope and do not define it inline",
"default": "'id'",
"params": {
"row": {
"type": "Object",
"desc": "The current row being processed",
"examples": [
"{ name: 'Lorem Ipsum', price: 19 }"
]
}
},
"returns": {
"type": "Any",
"desc": "Current row's key",
"examples": [
"'34f39dda-6206-4071-a9df-4393aabe49ac'",
"34"
]
},
"examples": [
"'name'",
"row => row.name"
],
"category": "general"
},
"virtual-scroll": {
"type": "Boolean",
"desc": "Display data using QVirtualScroll (for non-grid mode only)",
"category": "virtual-scroll"
},
"virtual-scroll-target": {
"extends": "scroll-target",
"passthrough": "child"
},
"virtual-scroll-slice-size": {
"type": [
"Number",
"String",
"null"
],
"desc": "Minimum number of rows to render in the virtual list",
"default": "10",
"passthrough": "child",
"category": "virtual-scroll"
},
"virtual-scroll-slice-ratio-before": {
"type": [
"Number",
"String"
],
"desc": "Ratio of number of rows in visible zone to render before it",
"default": "1",
"passthrough": "child",
"category": "virtual-scroll"
},
"virtual-scroll-slice-ratio-after": {
"type": [
"Number",
"String"
],
"desc": "Ratio of number of rows in visible zone to render after it",
"default": "1",
"passthrough": "child",
"category": "virtual-scroll"
},
"virtual-scroll-item-size": {
"type": [
"Number",
"String"
],
"desc": "Default size in pixels of a row; This value is used for rendering the initial table; Try to use a value close to the minimum size of a row; Default value: 48 (24 if dense)",
"default": "# 48/24",
"passthrough": "child",
"category": "virtual-scroll"
},
"virtual-scroll-sticky-size-start": {
"type": [
"Number",
"String"
],
"desc": "Size in pixels of the sticky header (if using one); A correct value will improve scroll precision; Will be also used for non-virtual-scroll tables for fixing top alignment when using scrollTo method",
"default": "0",
"passthrough": "child",
"category": "virtual-scroll|behavior"
},
"virtual-scroll-sticky-size-end": {
"type": [
"Number",
"String"
],
"desc": "Size in pixels of the sticky footer part (if using one); A correct value will improve scroll precision",
"default": "0",
"passthrough": "child",
"category": "virtual-scroll"
},
"table-colspan": {
"type": [
"Number",
"String"
],
"desc": "The number of columns in the table (you need this if you use table-layout: fixed)",
"category": "virtual-scroll|content",
"passthrough": "child"
},
"color": {
"extends": "color",
"default": "'grey-8'"
},
"icon-first-page": {
"extends": "icon",
"desc": "Icon name following Quasar convention for stepping to first page; Make sure you have the icon library installed unless you are using 'img:' prefix"
},
"icon-prev-page": {
"extends": "icon",
"desc": "Icon name following Quasar convention for stepping to previous page; Make sure you have the icon library installed unless you are using 'img:' prefix"
},
"icon-next-page": {
"extends": "icon",
"desc": "Icon name following Quasar convention for stepping to next page; Make sure you have the icon library installed unless you are using 'img:' prefix"
},
"icon-last-page": {
"extends": "icon",
"desc": "Icon name following Quasar convention for stepping to last page; Make sure you have the icon library installed unless you are using 'img:' prefix"
},
"grid": {
"type": "Boolean",
"desc": "Display data as a grid instead of the default table",
"category": "behavior"
},
"grid-header": {
"type": "Boolean",
"desc": "Display header for grid-mode also",
"category": "behavior|content"
},
"dense": {
"extends": "dense",
"desc": "Dense mode; Connect with $q.screen for responsive behavior"
},
"columns": {
"type": "Array",
"desc": "The column definitions (Array of Objects)",
"examples": [
"# :columns=\"tableColumns\""
],
"category": "column",
"definition": {
"name": {
"type": "String",
"required": true,
"desc": "Unique id, identifies column, (used by pagination.sortBy, 'body-cell-[name]' slot, ...)",
"examples": [
"'desc'"
]
},
"label": {
"type": "String",
"required": true,
"desc": "Label for header",
"examples": [
"'Dessert (100g serving)'"
]
},
"field": {
"type": [
"String",
"Function"
],
"required": true,
"desc": "Row Object property to determine value for this column or function which maps to the required property",
"params": {
"row": {
"type": "Object",
"required": true,
"desc": "The current row being processed",
"examples": [
"{ name: 'Lorem Ipsum', prices: { active: 19, old: 25, list: 29 } }"
]
}
},
"returns": {
"type": "Any",
"desc": "Value for this column",
"examples": [
"'19'",
"19"
]
},
"examples": [
"'name'",
"row => row.prices.active"
]
},
"required": {
"type": "Boolean",
"desc": "If we use visible-columns, this col will always be visible"
},
"align": {
"type": "String",
"desc": "Horizontal alignment of cells in this column",
"values": [
"'left'",
"'right'",
"'center'"
],
"default": "'right'"
},
"sortable": {
"type": "Boolean",
"desc": "Tell QTable you want this column sortable",
"default": "false"
},
"sort": {
"type": "Function",
"desc": "Compare function if you have some custom data or want a specific way to compare two rows; rows with null/undefined values will get sorted without triggering this method (use 'rawSort' instead if you want to handle those values too)",
"examples": [
"(a, b, _rowA, _rowB) => parseInt(a, 10) - parseInt(b, 10)"
],
"params": {
"a": {
"type": "Any",
"required": true,
"desc": "Value of the first comparison term",
"examples": [
"123",
"'abc'"
]
},
"b": {
"type": "Any",
"required": true,
"desc": "Value of the second comparison term",
"examples": [
"123",
"'abc'"
]
},
"rowA": {
"type": "Object",
"required": true,
"desc": "Full Row object in which is contained the first term",
"examples": [
"{ name: 'Potassium', value: 'K' }"
]
},
"rowB": {
"type": "Object",
"required": true,
"desc": "Full Row object in which is contained the second term",
"examples": [
"{ name: 'Fluorine', value: 'F' }"
]
}
},
"returns": {
"type": "Number",
"desc": "Comparison result of term 'a' with term 'b'. Less than 0 when 'a' should come first; greater than 0 if 'b' should come first; equal to 0 if their position must not be changed with respect to each other",
"examples": [
"-1",
"0",
"1"
]
}
},
"rawSort": {
"type": "Function",
"desc": "Compare function if you have some custom data or want a specific way to compare two rows; includes rows with null/undefined values (use 'sort' instead if you don't want that)",
"examples": [
"(a, b, _rowA, _rowB) => parseInt(a, 10) - parseInt(b, 10)"
],
"params": {
"a": {
"type": "Any",
"required": true,
"desc": "Value of the first comparison term",
"examples": [
"123",
"'abc'"
]
},
"b": {
"type": "Any",
"required": true,
"desc": "Value of the second comparison term",
"examples": [
"123",
"'abc'"
]
},
"rowA": {
"type": "Object",
"required": true,
"desc": "Full Row object in which is contained the first term",
"examples": [
"{ name: 'Potassium', value: 'K' }"
]
},
"rowB": {
"type": "Object",
"required": true,
"desc": "Full Row object in which is contained the second term",
"examples": [
"{ name: 'Fluorine', value: 'F' }"
]
}
},
"returns": {
"type": "Number",
"desc": "Comparison result of term 'a' with term 'b'. Less than 0 when 'a' should come first; greater than 0 if 'b' should come first; equal to 0 if their position must not be changed with respect to each other",
"examples": [
"-1",
"0",
"1"
]
},
"addedIn": "v2.13"
},
"sortOrder": {
"type": "String",
"desc": "Set column sort order: 'ad' (ascending-descending) or 'da' (descending-ascending); Overrides the 'column-sort-order' prop",
"values": [
"'ad'",
"'da'"
],
"default": "'ad'"
},
"format": {
"type": "Function",
"desc": "Function you can apply to format your data",
"examples": [
"(val, _row) => `${ val }%`",
"val => val ? /* Unicode checkmark checked */ '☑' : /* Unicode checkmark unchecked */ '☐'"
],
"params": {
"val": {
"type": "Any",
"required": true,
"desc": "Value of the cell",
"examples": [
"123",
"'abc'"
]
},
"row": {
"type": "Object",
"required": true,
"desc": "Full Row object in which the cell is contained",
"examples": [
"{ name: 'Potassium', value: 'K' }"
]
}
},
"returns": {
"type": "Any",
"desc": "The resulting formatted value",
"examples": [
"'20%'"
]
}
},
"style": {
"type": [
"String",
"Function"
],
"desc": "Style to apply on normal cells of the column",
"params": {
"row": {
"type": "Object",
"required": true,
"desc": "The current row being processed",
"examples": [
"{ name: 'Frozen Yogurt', calories: 159 }"
]
}
},
"returns": {
"type": "String",
"__exemption": [
"desc"
]
},
"examples": [
"'width: 500px'",
"row => (row.calories % 2 === 0 ? 'width: 10px' : 'font-size: 2em; font-weight: bold')"
]
},
"classes": {
"type": [
"String",
"Function"
],
"desc": "Classes to add on normal cells of the column",
"params": {
"row": {
"type": "Object",
"required": true,
"desc": "The current row being processed",
"examples": [
"{ name: 'Frozen Yogurt', calories: 159 }"
]
}
},
"returns": {
"type": "String",
"__exemption": [
"desc"
]
},
"examples": [
"'my-special-class bg-primary'",
"row => (row.calories % 2 === 0 ? 'bg-green text-white' : 'bg-yellow')"
]
},
"headerStyle": {
"type": "String",
"desc": "Style to apply on header cells of the column",
"examples": [
"'width: 500px'"
]
},
"headerClasses": {
"type": "String",
"desc": "Classes to add on header cells of the column",
"examples": [
"'my-special-class'"
]
}
}
},
"visible-columns": {
"type": "Array",
"desc": "Array of Strings defining column names ('name' property of each column from 'columns' prop definitions); Columns marked as 'required' are not affected by this property",
"examples": [
"[ 'desc', 'carbs', 'protein' ]",
"# :visible-columns=\"myCols\""
],
"category": "column"
},
"loading": {
"type": "Boolean",
"desc": "Put Table into 'loading' state; Notify the user something is happening behind the scenes",
"category": "behavior|content"
},
"title": {
"type": "String",
"desc": "Table title",
"examples": [
"'Device list'"
],
"category": "content"
},
"hide-header": {
"type": "Boolean",
"desc": "Hide table header layer",
"category": "content"
},
"hide-bottom": {
"type": "Boolean",
"desc": "Hide table bottom layer regardless of what it has to display",
"category": "content"
},
"hide-selected-banner": {
"type": "Boolean",
"desc": "Hide the selected rows banner (if any)",
"category": "content"
},
"hide-no-data": {
"type": "Boolean",
"desc": "Hide the default no data bottom layer",
"category": "content"
},
"hide-pagination": {
"type": "Boolean",
"desc": "Hide the pagination controls at the bottom",
"category": "content"
},
"dark": {
"extends": "dark"
},
"flat": {
"extends": "flat"
},
"bordered": {
"extends": "bordered"
},
"square": {
"extends": "square"
},
"separator": {
"type": "String",
"desc": "Use a separator/border between rows, columns or all cells",
"default": "'horizontal'",
"values": [
"'horizontal'",
"'vertical'",
"'cell'",
"'none'"
],
"category": "content"
},
"wrap-cells": {
"type": "Boolean",
"desc": "Wrap text within table cells",
"category": "content"
},
"binary-state-sort": {
"type": "Boolean",
"desc": "Skip the third state (unsorted) when user toggles column sort direction",
"category": "sorting"
},
"column-sort-order": {
"type": "String",
"desc": "Set column sort order: 'ad' (ascending-descending) or 'da' (descending-ascending); It gets applied to all columns unless a column has its own sortOrder specified in the 'columns' definition prop",
"values": [
"'ad'",
"'da'"
],
"default": "'ad'",
"category": "sorting"
},
"no-data-label": {
"type": "String",
"desc": "Override default text to display when no data is available",
"examples": [
"'No devices available'"
],
"category": "content"
},
"no-results-label": {
"type": "String",
"desc": "Override default text to display when user filters the table and no matched results are found",
"examples": [
"'No matched records'"
],
"category": "content"
},
"loading-label": {
"type": "String",
"desc": "Override default text to display when table is in loading state (see 'loading' prop)",
"examples": [
"'Loading devices...'"
],
"category": "content"
},
"selected-rows-label": {
"type": "Function",
"desc": "Text to display when user selected at least one row; For best performance, reference it from your scope and do not define it inline",
"params": {
"numberOfRows": {
"type": "Number",
"desc": "Number of rows available"
}
},
"returns": {
"type": "String",
"desc": "Label to display",
"examples": [
"'5 rows are selected'"
]
},
"examples": [
"(numberOfRows) => `Selected: ${ numberOfRows } entries`"
],
"category": "selection"
},
"rows-per-page-label": {
"type": "String",
"desc": "Text to override default rows per page label at bottom of table",
"examples": [
"'Records per page:'"
],
"category": "pagination"
},
"pagination-label": {
"type": "Function",
"desc": "Text to override default pagination label at bottom of table (unless 'pagination' scoped slot is used); For best performance, reference it from your scope and do not define it inline",
"params": {
"firstRowIndex": {
"type": "Number",
"desc": "Index of first displayed row"
},
"endRowIndex": {
"type": "Number",
"desc": "Index of last displayed row"
},
"totalRowsNumber": {
"type": "Number",
"desc": "Number of total rows available in data"
}
},
"returns": {
"type": "String",
"desc": "Label to display",
"examples": [
"'1-10 of 132'"
]
},
"examples": [
"(start, end, total) => `${ start }-${ end } of ${ total }`"
],
"category": "pagination"
},
"table-style": {
"type": [
"String",
"Array",
"Object"
],
"tsType": "VueStyleProp",
"desc": "CSS style to apply to native HTML <table> element's wrapper (which is a DIV)",
"examples": [
"'background-color: #ff0000'",
"{ backgroundColor: '#ff0000' }"
],
"category": "style"
},
"table-class": {
"type": [
"String",
"Array",
"Object"
],
"tsType": "VueClassProp",
"desc": "CSS classes to apply to native HTML <table> element's wrapper (which is a DIV)",
"examples": [
"'my-special-class'",
"{ 'my-special-class': true }"
],
"category": "style"
},
"table-header-style": {
"type": [
"String",
"Array",
"Object"
],
"tsType": "VueStyleProp",
"desc": "CSS style to apply to header of native HTML <table> (which is a TR)",
"examples": [
"'background-color: #ff0000'",
"{ backgroundColor: '#ff0000' }"
],
"category": "style"
},
"table-header-class": {
"type": [
"String",
"Array",
"Object"
],
"tsType": "VueClassProp",
"desc": "CSS classes to apply to header of native HTML <table> (which is a TR)",
"examples": [
"'my-special-class'",
"{ 'my-special-class': true }"
],
"category": "style"
},
"card-container-style": {
"type": [
"String",
"Array",
"Object"
],
"tsType": "VueStyleProp",
"desc": "CSS style to apply to the cards container (when in grid mode)",
"examples": [
"'background-color: #ff0000'",
"{ backgroundColor: '#ff0000' }"
],
"category": "style"
},
"card-container-class": {
"type": [
"String",
"Array",
"Object"
],
"tsType": "VueClassProp",
"desc": "CSS classes to apply to the cards container (when in grid mode)",
"examples": [
"'my-special-class'",
"'justify-center'",
"{ 'my-special-class': true }"
],
"category": "style"
},
"card-style": {
"type": [
"String",
"Array",
"Object"
],
"tsType": "VueStyleProp",
"desc": "CSS style to apply to the card (when in grid mode) or container card (when not in grid mode)",
"examples": [
"'background-color: #ff0000'",
"{ backgroundColor: '#ff0000' }"
],
"category": "style"
},
"card-class": {
"type": [
"String",
"Array",
"Object"
],
"tsType": "VueClassProp",
"desc": "CSS classes to apply to the card (when in grid mode) or container card (when not in grid mode)",
"examples": [
"'my-special-class'",
"{ 'my-special-class': true }"
],
"category": "style"
},
"title-class": {
"type": [
"String",
"Array",
"Object"
],
"tsType": "VueClassProp",
"desc": "CSS classes to apply to the title (if using 'title' prop)",
"examples": [
"'my-special-class'",
"'text-h1'",
"{ 'text-h1': true }"
],
"category": "style"
},
"filter": {
"type": [
"String",
"Object"
],
"desc": "String/Object to filter table with; When using an Object it requires 'filter-method' to also be specified since it will be a custom filtering",
"examples": [
"'car'"
],
"category": "filter"
},
"filter-method": {
"type": "Function",
"desc": "The actual filtering mechanism; For best performance, reference it from your scope and do not define it inline",
"params": {
"rows": {
"type": "Array",
"desc": "Array of rows"
},
"terms": {
"type": [
"String",
"Object"
],
"desc": "Terms to filter with (is essentially the 'filter' prop value)"
},
"cols": {
"type": "Array",
"desc": "Column definitions"
},
"getCellValue": {
"type": "Function",
"desc": "Optional function to get a cell value",
"params": {
"col": {
"type": "Object",
"required": true,
"desc": "Column name from column definitions"
},
"row": {
"type": "Object",
"required": true,
"desc": "The row object"
}
},
"returns": {
"type": "Any",
"desc": "Parsed/Processed cell value",
"examples": [
"'Ice Cream Sandwich'"
]
}
}
},
"returns": {
"type": "Array",
"desc": "Filtered rows"
},
"examples": [
"# see source code"
],
"category": "filter"
},
"pagination": {
"type": "Object",
"desc": "Pagination object; You can also use the 'v-model:pagination' for synching; When not synching it simply initializes the pagination on first render",
"definition": {
"sortBy": {
"type": [
"String",
"null"
],
"desc": "Column name (from column definition)",
"examples": [
"'calories'"
]
},
"descending": {
"type": "Boolean",
"desc": "Is sorting in descending order?"
},
"page": {
"type": "Number",
"desc": "Page number (1-based)"
},
"rowsPerPage": {
"type": "Number",
"desc": "How many rows per page? 0 means Infinite"
},
"rowsNumber": {
"type": "Number",
"desc": "For server-side fetching only. How many total database rows are there to be added to the table. If set, causes the QTable to emit @request when data is required."
}
},
"syncable": true,
"examples": [
"# :pagination=\"myInitialPagination\"",
"# v-model:pagination=\"myPagination\""
],
"category": "pagination"
},
"rows-per-page-options": {
"type": "Array",
"desc": "Options for user to pick (Numbers); Number 0 means 'Show all rows in one page'",
"default": "[ 5, 7, 10, 15, 20, 25, 50, 0 ]",
"examples": [
"[ 10, 20 ]"
],
"category": "pagination"
},
"selection": {
"type": "String",
"desc": "Selection type",
"default": "'none'",
"values": [
"'single'",
"'multiple'",
"'none'"
],
"category": "selection"
},
"selected": {
"type": "Array",
"desc": "Keeps the user selection array",
"default": "[]",
"syncable": true,
"examples": [
"# v-model:selected=\"selection\""
],
"category": "selection"
},
"expanded": {
"type": "Array",
"desc": "Keeps the array with expanded rows keys",
"syncable": true,
"examples": [
"# v-model:expanded=\"expanded\""
],
"category": "expansion"
},
"sort-method": {
"type": "Function",
"desc": "The actual sort mechanism. Function (rows, sortBy, descending) => sorted rows; For best performance, reference it from your scope and do not define it inline",
"params": {
"rows": {
"type": "Array",
"desc": "Array with rows"
},
"sortBy": {
"type": "String",
"desc": "Column name (from column definition)",
"examples": [
"'calories'"
]
},
"descending": {
"type": "Boolean",
"desc": "Is sorting in descending order?"
}
},
"returns": {
"type": "Array",
"desc": "Sorted rows"
},
"examples": [
"# see source code"
],
"category": "sorting"
}
},
"events": {
"fullscreen": {
"desc": "Emitted when fullscreen state changes",
"params": {
"value": {
"type": "Boolean",
"desc": "Fullscreen state (showing/hidden)"
}
}
},
"update:fullscreen": {
"desc": "Used by Vue on 'v-model:fullscreen' prop for updating its value",
"params": {
"value": {
"type": "Boolean",
"desc": "Fullscreen state (showing/hidden)"
}
}
},
"row-click": {
"desc": "Emitted when user clicks/taps on a row; Is not emitted when using body/row/item scoped slots",
"params": {
"evt": {
"extends": "evt"
},
"row": {
"type": "Object",
"desc": "The row upon which user has clicked/tapped"
},
"index": {
"type": "Number",
"desc": "Index of the row in the current page"
}
}
},
"row-dblclick": {
"desc": "Emitted when user quickly double clicks/taps on a row; Is not emitted when using body/row/item scoped slots; Please check JS dblclick event support before using",
"params": {
"evt": {
"extends": "evt"
},
"row": {
"type": "Object",
"desc": "The row upon which user has double clicked/tapped"
},
"index": {
"type": "Number",
"desc": "Index of the row in the current page"
}
}
},
"row-contextmenu": {
"desc": "Emitted when user right clicks/long taps on a row; Is not emitted when using body/row/item scoped slots",
"params": {
"evt": {
"extends": "evt"
},
"row": {
"type": "Object",
"desc": "The row upon which user has right clicked/long tapped"
},
"index": {
"type": "Number",
"desc": "Index of the row in the current page"
}
}
},
"request": {
"desc": "Emitted when a server request is triggered",
"params": {
"requestProp": {
"type": "Object",
"desc": "Props of the request",
"definition": {
"pagination": {
"type": "Object",
"required": true,
"desc": "Pagination object",
"definition": {
"sortBy": {
"type": "String",
"required": true,
"desc": "Column name (from column definition)",
"examples": [
"'calories'"
]
},
"descending": {
"type": "Boolean",
"required": true,
"desc": "Is sorting in descending order?"
},
"page": {
"type": "Number",
"required": true,
"desc": "Page number (1-based)"
},
"rowsPerPage": {
"type": "Number",
"required": true,
"desc": "How many rows per page? 0 means Infinite"
}
}
},
"filter": {
"type": [
"String",
"Object"
],
"desc": "String/Object to filter table with (the 'filter' prop)"
},
"getCellValue": {
"type": "Function",
"required": true,
"desc": "Function to get a cell value",
"params": {
"col": {
"type": "Object",
"required": true,
"desc": "Column name from column definitions"
},
"row": {
"type": "Object",
"required": true,
"desc": "The row object"
}
},
"returns": {
"type": "Any",
"desc": "Parsed/Processed cell value",
"examples": [
"'Ice Cream Sandwich'"
]
}
}
}
}
}
},
"selection": {
"desc": "Emitted when user selects/unselects row(s)",
"params": {
"details": {
"type": "Object",
"desc": "Selection details",
"definition": {
"rows": {
"type": "Array",
"required": true,
"desc": "Array of row objects that were selected/unselected"
},
"keys": {
"type": "Array",
"required": true,
"desc": "Array of the keys of rows that were selected/unselected"
},
"added": {
"type": "Boolean",
"required": true,
"desc": "Were the rows added to selection (true) or removed from selection (false)"
},
"evt": {
"extends": "evt",
"required": true
}
}
}
}
},
"update:pagination": {
"desc": "Used by Vue on 'v-model:pagination' for updating its value",
"params": {
"newPagination": {
"type": "Object",
"desc": "The updated pagination object",
"definition": {
"sortBy": {
"type": [
"String",
"null"
],
"required": true,
"desc": "Column name (from column definition)",
"examples": [
"'calories'"
]
},
"descending": {
"type": "Boolean",
"required": true,
"desc": "Is sorting in descending order?"
},
"page": {
"type": "Number",
"required": true,
"desc": "Page number (1-based)"
},
"rowsPerPage": {
"type": "Number",
"required": true,
"desc": "How many rows per page? 0 means Infinite"
},
"rowsNumber": {
"type": "Number",
"required": false,
"desc": "For server-side fetching only. How many total database rows are there to be added to the table."
}
}
}
}
},
"update:selected": {
"desc": "Used by Vue on 'v-model:selected' prop for updating its value",
"params": {
"newSelected": {
"type": "Array",
"desc": "The updated selected array",
"examples": [
"[ { name: 'Frozen Yogurt', calories: 159, fat: 6 } ]"
]
}
}
},
"update:expanded": {
"desc": "Used by Vue on 'v-model:expanded' prop for updating its value",
"params": {
"newExpanded": {
"type": "Array",
"desc": "The updated expanded array",
"examples": [
"[ 'row-a', 'row-b' ]"
]
}
}
},
"virtual-scroll": {
"desc": "Emitted when the virtual scroll occurs, if using virtual scroll",
"params": {
"details": {
"type": "Object",
"desc": "Object of properties on the new scroll position",
"definition": {
"index": {
"type": "Number",
"required": true,
"desc": "Index of the list item that was scrolled into view (0 based)"
},
"from": {
"type": "Number",
"required": true,
"desc": "The index of the first list item that is rendered (0 based)"
},
"to": {
"type": "Number",
"required": true,
"desc": "The index of the last list item that is rendered (0 based)"
},
"direction": {
"type": "String",
"required": true,
"desc": "Direction of change",
"values": [
"'increase'",
"'decrease'"
]
},
"ref": {
"type": "Component",
"required": true,
"desc": "Vue reference to the underlying QVirtualScroll instance"
}
}
}
}
}
},
"methods": {
"toggleFullscreen": {
"desc": "Toggles fullscreen mode",
"params": null,
"returns": null
},
"setFullscreen": {
"desc": "Enter the fullscreen view",
"params": null,
"returns": null
},
"exitFullscreen": {
"desc": "Leave the fullscreen view",
"params": null,
"returns": null
},
"requestServerInteraction": {
"desc": "Trigger a server request (emits 'request' event)",
"params": {
"props": {
"type": "Object",
"required": false,
"desc": "Request details",
"definition": {
"pagination": {
"type": "Object",
"required": false,
"desc": "Optional pagination object",
"definition": {
"sortBy": {
"type": "String",
"desc": "Column name (from column definition)",
"examples": [
"'calories'"
]
},
"descending": {
"type": "Boolean",
"desc": "Is sorting in descending order?"
},
"page": {
"type": "Number",
"desc": "Page number (1-based)"
},
"rowsPerPage": {
"type": "Number",
"desc": "How many rows per page? 0 means Infinite"
},
"rowsNumber": {
"type": "Number",
"desc": "For server-side fetching only. How many total database rows are there to be added to the table."
}
}
},
"filter": {
"type": "Function",
"desc": "Filtering method (the 'filter-method' prop)",
"params": {
"rows": {
"type": "Array",
"required": true,
"desc": "Array of rows"
},
"terms": {
"type": [
"String",
"Object"
],
"required": true,
"desc": "Terms to filter with (is essentially the 'filter' prop value)"
},
"cols": {
"type": "Array",
"desc": "Optional column definitions"
},
"getCellValue": {
"type": "Function",
"desc": "Optional function to get a cell value",
"params": {
"col": {
"type": "Object",
"desc": "Column name from column definitions"
},
"row": {
"type": "Object",
"desc": "The row object"
}
},
"returns": {
"type": "Any",
"desc": "Parsed/Processed cell value",
"examples": [
"'Ice Cream Sandwich'"
]
}
}
},
"returns": {
"type": "Array",
"desc": "Filtered rows"
}
}
}
}
},
"returns": null
},
"setPagination": {
"desc": "Unless using an external pagination Object (through 'v-model:pagination' prop), you can use this method and force the internal pagination to change",
"params": {
"pagination": {
"type": "Object",
"required": true,
"desc": "Pagination object",
"definition": {
"sortBy": {
"type": [
"String",
"null"
],
"desc": "Column name (from column definition)",
"examples": [
"'calories'"
]
},
"descending": {
"type": "Boolean",
"desc": "Is sorting in descending order?"
},
"page": {
"type": "Number",
"desc": "Page number (1-based)"
},
"rowsPerPage": {
"type": "Number",
"desc": "How many rows per page? 0 means Infinite"
}
}
},
"forceServerRequest": {
"type": "Boolean",
"desc": "Also force a server request"
}
},
"returns": null
},
"firstPage": {
"desc": "Navigates to first page",
"params": null,
"returns": null
},
"prevPage": {
"desc": "Navigates to previous page, if available",
"params": null,
"returns": null
},
"nextPage": {
"desc": "Navigates to next page, if available",
"params": null,
"returns": null
},
"lastPage": {
"desc": "Navigates to last page",
"params": null,
"returns": null
},
"isRowSelected": {
"desc": "Determine if a row has been selected by user",
"params": {
"key": {
"type": "Any",
"required": true,
"desc": "Row key value",
"examples": [
"'calories'"
]
}
},
"returns": {
"type": "Boolean",
"desc": "Is row selected or not?"
}
},
"clearSelection": {
"desc": "Clears user selection (emits 'update:selected' with empty array)",
"params": null,
"returns": null
},
"isRowExpanded": {
"desc": "Determine if a row is expanded or not",
"params": {
"key": {
"type": "Any",
"required": true,
"desc": "Row key value",
"examples": [
"'calories'"
]
}
},
"returns": {
"type": "Boolean",
"desc": "Is row expanded or not?"
}
},
"setExpanded": {
"desc": "Sets the expanded rows keys array; Especially useful if not using an external 'expanded' state otherwise just emits 'update:expanded' with the value",
"params": {
"expanded": {
"type": "Array",
"required": true,
"desc": "Array containing keys of the expanded rows",
"examples": [
"[ 'row-a', 'row-b' ]"
]
}
},
"returns": null
},
"sort": {
"desc": "Trigger a table sort",
"params": {
"col": {
"type": [
"String",
"Object"
],
"required": true,
"desc": "Column name or column definition object",
"examples": [
"'calories'"
]
}
},
"returns": null
},
"resetVirtualScroll": {
"desc": "Resets the virtual scroll (if using it) computations; Needed for custom edge-cases",
"params": null,
"returns": null
},
"scrollTo": {
"desc": "Scroll the table to the row with the specified index in page (0 based)",
"params": {
"index": {
"type": [
"Number",
"String"
],
"required": true,
"desc": "The index of the row in page (0 based)"
},
"edge": {
"type": "String",
"desc": "Only for virtual scroll - the edge to align to if the row is not visible already; If the '-force' version is used then it always aligns; Default value: end (if scrolling towards the end) / start (if scrolling towards the start)",
"values": [
"'start'",
"'center'",
"'end'",
"'start-force'",
"'center-force'",
"'end-force'"
],
"default": "# end/start"
}
},
"returns": null
}
}
}
],
"meta": {
"docsUrl": "https://v2.quasar.dev/vue-components/table"
},
"props": {
"fullscreen": {
"type": "Boolean",
"sync": true,
"desc": "Fullscreen mode",
"examples": [
"# v-model:fullscreen=\"isFullscr