quasar/dist/api/QTable.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{"type":"component","meta":{"docsUrl":"https://v2.quasar.dev/vue-components/table"},"props":{"fullscreen":{"type":"Boolean","sync":true,"desc":"Fullscreen mode","examples":["# v-model:fullscreen=\"isFullscreen\""],"category":"behavior","syncable":true},"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","required":false},"virtual-scroll":{"type":"Boolean","desc":"Display data using QVirtualScroll (for non-grid mode only)","category":"virtual-scroll"},"virtual-scroll-target":{"type":["Element","String"],"desc":"CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one","examples":[".scroll-target-class","#scroll-target-id","$refs.scrollTarget","document.body"],"category":"behavior"},"virtual-scroll-slice-size":{"type":["Number","String","null"],"desc":"Minimum number of rows to render in the virtual list","default":"10","category":"virtual-scroll","required":false},"virtual-scroll-slice-ratio-before":{"type":["Number","String"],"desc":"Ratio of number of rows in visible zone to render before it","default":"1","category":"virtual-scroll","required":false},"virtual-scroll-slice-ratio-after":{"type":["Number","String"],"desc":"Ratio of number of rows in visible zone to render after it","default":"1","category":"virtual-scroll","required":false},"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","category":"virtual-scroll","required":false},"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","category":"virtual-scroll|behavior","required":false},"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","category":"virtual-scroll","required":false},"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"},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style","default":"'grey-8'","required":false},"icon-first-page":{"type":"String","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","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"icon-prev-page":{"type":"String","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","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"icon-next-page":{"type":"String","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","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"icon-last-page":{"type":"String","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","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"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":{"type":"Boolean","desc":"Dense mode; Connect with $q.screen for responsive behavior","category":"style"},"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'","required":false},"sortable":{"type":"Boolean","desc":"Tell QTable you want this column sortable","default":"false","required":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'","required":false},"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"},"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"},"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":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"flat":{"type":"Boolean","desc":"Applies a 'flat' design (no default shadow)","category":"style"},"bordered":{"type":"Boolean","desc":"Applies a default border to the component","category":"style"},"square":{"type":"Boolean","desc":"Removes border-radius so borders are squared","category":"style"},"separator":{"type":"String","desc":"Use a separator/border between rows, columns or all cells","default":"'horizontal'","values":["'horizontal'","'vertical'","'cell'","'none'"],"category":"content","required":false},"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","required":false},"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"},"table-row-style-fn":{"type":"Function","desc":"CSS style to apply to the table rows (which are TR elements); For best performance, reference it from your scope and do not define it inline","params":{"row":{"type":"Object","desc":"The current row being processed","examples":["{ name: 'Frozen Yogurt', calories: 159 }"]}},"returns":{"type":"String","desc":"CSS style to apply to the row","examples":["'color: blue'","'background-color: #ff0000; color: green'"]},"category":"style","addedIn":"v2.18"},"table-row-class-fn":{"type":"Function","desc":"CSS class(es) to apply the table rows (which are TR elements); For best performance, reference it from your scope and do not define it inline","params":{"row":{"type":"Object","desc":"The current row being processed","examples":["{ name: 'Frozen Yogurt', calories: 159 }"]}},"returns":{"type":"String","desc":"CSS class(es) to apply to the row, space separated","examples":["'my-special-class'","'my-class my-second-class'"]},"category":"style","addedIn":"v2.18"},"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"},"card-style-fn":{"type":"Function","desc":"(Grid mode only) CSS style to apply to the row/record card; Has no effect when the 'item' slot is used; For best performance, reference it from your scope and do not define it inline","params":{"row":{"type":"Object","desc":"The current row/record being processed","examples":["{ name: 'Frozen Yogurt', calories: 159 }"]}},"returns":{"type":"String","desc":"CSS style to apply to the row/record","examples":["'color: blue'","'background-color: #ff0000; color: green'"]},"category":"style","addedIn":"v2.18"},"card-class-fn":{"type":"Function","desc":"(Grid mode only) CSS class(es) to apply the row/record card; Has no effect when the 'item' slot is used; For best performance, reference it from your scope and do not define it inline","params":{"row":{"type":"Object","desc":"The current row/record being processed","examples":["{ name: 'Frozen Yogurt', calories: 159 }"]}},"returns":{"type":"String","desc":"CSS class(es) to apply to the row, space separated","examples":["'my-special-class'","'my-class my-second-class'"]},"category":"style","addedIn":"v2.18"},"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","required":false},"selection":{"type":"String","desc":"Selection type","default":"'none'","values":["'single'","'multiple'","'none'"],"category":"selection","required":false},"selected":{"type":"Array","desc":"Keeps the user selection array","default":"[]","syncable":true,"examples":["# v-model:selected=\"selection\""],"category":"selection","required":false},"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"}},"slots":{"loading":{"desc":"Override default effect when table is in loading state; Suggestion: QInnerLoading"},"item":{"desc":"Slot to use for defining an item when in 'grid' mode; Suggestion: QCard","scope":{"key":{"type":"Any","desc":"Row/Item's key"},"row":{"type":"Object","desc":"Row/Item object"},"rowIndex":{"type":"Number","desc":"Row/Item's index (0 based) in the filtered and sorted table"},"pageIndex":{"type":"Number","desc":"Row/Item's index (0 based) in the current page of the filtered and sorted table"},"cols":{"type":"Object","desc":"Column definitions"},"colsMap":{"type":"Object","desc":"Column mapping (key is column name, value is column object)"},"sort":{"type":"Function","desc":"Trigger a table sort","params":{"col":{"type":["String","Object"],"required":true,"desc":"Column name or column definition object","examples":["'calories'"]}},"returns":null},"selected":{"type":"Boolean","desc":"(Only if using selection) Is row/item selected? Can directly be assigned new Boolean value which changes selection state","reactive":true},"expand":{"type":"Boolean","desc":"Is row/item expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style"}}},"body":{"desc":"Slot to define how a body row looks like; Suggestion: QTr + Td","scope":{"key":{"type":"Any","desc":"Row's key"},"row":{"type":"Object","desc":"Row object"},"rowIndex":{"type":"Number","desc":"Row's index (0 based) in the filtered and sorted table"},"pageIndex":{"type":"Number","desc":"Row's index (0 based) in the current page of the filtered and sorted table"},"cols":{"type":"Object","desc":"Column definitions"},"colsMap":{"type":"Object","desc":"Column mapping (key is column name, value is column object)"},"sort":{"type":"Function","desc":"Trigger a table sort","params":{"col":{"type":["String","Object"],"required":true,"desc":"Column name or column definition object","examples":["'calories'"]}},"returns":null},"selected":{"type":"Boolean","desc":"(Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state","reactive":true},"expand":{"type":"Boolean","desc":"Is row expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style"},"__trClass":{"type":"String","desc":"Internal prop passed down to QTr (if used)"},"__trStyle":{"type":"String","required":false,"desc":"Internal prop passed down to QTr (if used)","addedIn":"v2.18"}}},"body-cell":{"desc":"Slot to define how all body cells look like; Suggestion: QTd","scope":{"col":{"type":"Object","desc":"Column definition for column associated with table cell"},"value":{"type":"Any","desc":"Parsed/Formatted value of table cell"},"key":{"type":"Any","desc":"Row's key"},"row":{"type":"Object","desc":"Row object"},"rowIndex":{"type":"Number","desc":"Row's index (0 based) in the filtered and sorted table"},"pageIndex":{"type":"Number","desc":"Row's index (0 based) in the current page of the filtered and sorted table"},"cols":{"type":"Object","desc":"Column definitions"},"colsMap":{"type":"Object","desc":"Column mapping (key is column name, value is column object)"},"sort":{"type":"Function","desc":"Trigger a table sort","params":{"col":{"type":["String","Object"],"required":true,"desc":"Column name or column definition object","examples":["'calories'"]}},"returns":null},"selected":{"type":"Boolean","desc":"(Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state","reactive":true},"expand":{"type":"Boolean","desc":"Is row expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style"}}},"body-cell-[name]":{"desc":"Slot to define how a specific column cell looks like; replace '[name]' with column name (from columns definition object)","scope":{"col":{"type":"Object","desc":"Column definition for column associated with table cell"},"value":{"type":"Any","desc":"Parsed/Formatted value of table cell"},"key":{"type":"Any","desc":"Row's key"},"row":{"type":"Object","desc":"Row object"},"rowIndex":{"type":"Number","desc":"Row's index (0 based) in the filtered and sorted table"},"pageIndex":{"type":"Number","desc":"Row's index (0 based) in the current page of the filtered and sorted table"},"cols":{"type":"Object","desc":"Column definitions"},"colsMap":{"type":"Object","desc":"Column mapping (key is column name, value is column object)"},"sort":{"type":"Function","desc":"Trigger a table sort","params":{"col":{"type":["String","Object"],"required":true,"desc":"Column name or column definition object","examples":["'calories'"]}},"returns":null},"selected":{"type":"Boolean","desc":"(Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state","reactive":true},"expand":{"type":"Boolean","desc":"Is row expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style"}}},"header":{"desc":"Slot to define how header looks like; Suggestion: QTr + QTh","scope":{"cols":{"type":"Object","desc":"Column definitions"},"colsMap":{"type":"Object","desc":"Column mapping (key is column name, value is column object)"},"sort":{"type":"Function","desc":"Trigger a table sort","params":{"col":{"type":["String","Object"],"required":true,"desc":"Column name or column definition object","examples":["'calories'"]}},"returns":null},"selected":{"type":"Boolean","desc":"(Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state","reactive":true},"expand":{"type":"Boolean","desc":"Is row expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style"},"__trClass":{"type":"String","desc":"Internal prop passed down to QTr (if used)"},"header":{"type":"Boolean","desc":"Internal prop passed down to QTh (if used); Always 'true'"}}},"header-cell":{"desc":"Slot to define how each header cell looks like; Suggestion: QTh","scope":{"col":{"type":"Object","desc":"Column definition associated to header cell"},"cols":{"type":"Object","desc":"Column definitions"},"colsMap":{"type":"Object","desc":"Column mapping (key is column name, value is column object)"},"sort":{"type":"Function","desc":"Trigger a table sort","params":{"col":{"type":["String","Object"],"required":true,"desc":"Column name or column definition object","examples":["'calories'"]}},"returns":null},"selected":{"type":"Boolean","desc":"(Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state","reactive":true},"expand":{"type":"Boolean","desc":"Is row expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style"}}},"header-cell-[name]":{"desc":"Slot to define how a specific header cell looks like; replace '[name]' with column name (from columns definition object)","scope":{"col":{"type":"Object","desc":"Column definition associated to header cell"},"cols":{"type":"Object","desc":"Column definitions"},"colsMap":{"type":"Object","desc":"Column mapping (key is column name, value is column object)"},"sort":{"type":"Function","desc":"Trigger a table sort","params":{"col":{"type":["String","Object"],"required":true,"desc":"Column name or column definition object","examples":["'calories'"]}},"returns":null},"selected":{"type":"Boolean","desc":"(Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state","reactive":true},"expand":{"type":"Boolean","desc":"Is row expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style"}}},"body-selection":{"desc":"Slot to define how body selection column looks like; Suggestion: QCheckbox","scope":{"key":{"type":"Any","desc":"Row's key"},"row":{"type":"Object","desc":"Row object"},"rowIndex":{"type":"Number","desc":"Row's index (0 based) in the filtered and sorted table"},"pageIndex":{"type":"Number","desc":"Row's index (0 based) in the current page of the filtered and sorted table"},"cols":{"type":"Object","desc":"Column definitions"},"colsMap":{"type":"Object","desc":"Column mapping (key is column name, value is column object)"},"sort":{"type":"Function","desc":"Trigger a table sort","params":{"col":{"type":["String","Object"],"required":true,"desc":"Column name or column definition object","examples":["'calories'"]}},"returns":null},"selected":{"type":"Boolean","desc":"(Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state","reactive":true},"expand":{"type":"Boolean","desc":"Is row expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style"}}},"header-selection":{"desc":"Slot to define how header selection column looks like (available only for multiple selection mode); Suggestion: QCheckbox","scope":{"cols":{"type":"Object","desc":"Column definitions"},"colsMap":{"type":"Object","desc":"Column mapping (key is column name, value is column object)"},"sort":{"type":"Function","desc":"Trigger a table sort","params":{"col":{"type":["String","Object"],"required":true,"desc":"Column name or column definition object","examples":["'calories'"]}},"returns":null},"selected":{"type":"Boolean","desc":"(Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state","reactive":true},"expand":{"type":"Boolean","desc":"Is row expanded? Can directly be assigned new Boolean value which changes expanded state","reactive":true},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style"}}},"top-row":{"desc":"Slot to define how top extra row looks like","scope":{"cols":{"type":"Object","desc":"Column definitions"}}},"bottom-row":{"desc":"Slot to define how bottom extra row looks like","scope":{"cols":{"type":"Object","desc":"Column definitions"}}},"top":{"desc":"Slot to define how table top looks like","scope":{"pagination":{"type":"Object","desc":"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."}}},"pagesNumber":{"type":"Number","desc":"Number of pages available"},"isFirstPage":{"type":"Boolean","desc":"Are we on first page?"},"isLastPage":{"type":"Boolean","desc":"Are we on last page?"},"firstPage":{"type":"Function","desc":"Navigates to first page","params":null,"returns":null},"prevPage":{"type":"Function","desc":"Navigates to previous page, if available","params":null,"returns":null},"nextPage":{"type":"Function","desc":"Navigates to next page, if available","params":null,"returns":null},"lastPage":{"type":"Function","desc":"Navigates to last page","params":null,"returns":null},"inFullscreen":{"type":"Boolean","desc":"Is table in fullscreen mode?"},"toggleFullscreen":{"type":"Function","desc":"Toggles fullscreen mode","params":null,"returns":null}}},"bottom":{"desc":"Slot to define how table bottom looks like","scope":{"pagination":{"type":"Object","desc":"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."}}},"pagesNumber":{"type":"Number","desc":"Number of pages available"},"isFirstPage":{"type":"Boolean","desc":"Are we on first page?"},"isLastPage":{"type":"Boolean","desc":"Are we on last page?"},"firstPage":{"type":"Function","desc":"Navigates to first page","params":null,"returns":null},"prevPage":{"type":"Function","desc":"Navigates to previous page, if available","params":null,"returns":null},"nextPage":{"type":"Function","desc":"Navigates to next page, if available","params":null,"returns":null},"lastPage":{"type":"Function","desc":"Navigates to last page","params":null,"returns":null},"inFullscreen":{"type":"Boolean","desc":"Is table in fullscreen mode?"},"toggleFullscreen":{"type":"Function","desc":"Toggles fullscreen mode","params":null,"returns":null}}},"pagination":{"desc":"Slot to override default pagination label and buttons","scope":{"pagination":{"type":"Object","desc":"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."}}},"pagesNumber":{"type":"Number","desc":"Number of pages available"},"isFirstPage":{"type":"Boolean","desc":"Are we on first page?"},"isLastPage":{"type":"Boolean","desc":"Are we on last page?"},"firstPage":{"type":"Function","desc":"Navigates to first page","params":null,"returns":null},"prevPage":{"type":"Function","desc":"Navigates to previous page, if available","params":null,"returns":null},"nextPage":{"type":"Function","desc":"Navigates to next page, if available","params":null,"returns":null},"lastPage":{"type":"Function","desc":"Navigates to last page","params":null,"returns":null},"inFullscreen":{"type":"Boolean","desc":"Is table in fullscreen mode?"},"toggleFullscreen":{"type":"Function","desc":"Toggles fullscreen mode","params":null,"returns":null}}},"top-left":{"desc":"Slot to define how left part of the table top looks like","scope":{"pagination":{"type":"Object","desc":"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."}}},"pagesNumber":{"type":"Number","desc":"Number of pages available"},"isFirstPage":{"type":"Boolean","desc":"Are we on first page?"},"isLastPage":{"type":"Boolean","desc":"Are we on last page?"},"firstPage":{"type":"Function","desc":"Navigates to first page","params":null,"returns":null},"prevPage":{"type":"Function","desc":"Navigates to previous page, if available","params":null,"returns":null},"nextPage":{"type":"Function","desc":"Navigates to next page, if available","params":null,"returns":null},"lastPage":{"type":"Function","desc":"Navigates to last page","params":null,"returns":null},"inFullscreen":{"type":"Boolean","desc":"Is table in fullscreen mode?"},"toggleFullscreen":{"type":"Function","desc":"Toggles fullscreen mode","params":null,"returns":null}}},"top-right":{"desc":"Slot to define how right part of the table top looks like","scope":{"pagination":{"type":"Object","desc":"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."}}},"pagesNumber":{"type":"Number","desc":"Number of pages available"},"isFirstPage":{"type":"Boolean","desc":"Are we on first page?"},"isLastPage":{"type":"Boolean","desc":"Are we on last page?"},"firstPage":{"type":"Function","desc":"Navigates to first page","params":null,"returns":null},"prevPage":{"type":"Function","desc":"Navigates to previous page, if available","params":null,"returns":null},"nextPage":{"type":"Function","desc":"Navigates to next page, if available","params":null,"returns":null},"lastPage":{"type":"Function","desc":"Navigates to last page","params":null,"returns":null},"inFullscreen":{"type":"Boolean","desc":"Is table in fullscreen mode?"},"toggleFullscreen":{"type":"Function","desc":"Toggles fullscreen mode","params":null,"returns":null}}},"top-selection":{"desc":"Slot to define how top table section looks like when user has selected at least one row","scope":{"pagination":{"type":"Object","desc":"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."}}},"pagesNumber":{"type":"Number","desc":"Number of pages available"},"isFirstPage":{"type":"Boolean","desc":"Are we on first page?"},"isLastPage":{"type":"Boolean","desc":"Are we on last page?"},"firstPage":{"type":"Function","desc":"Navigates to first page","params":null,"returns":null},"prevPage":{"type":"Function","desc":"Navigates to previous page, if available","params":null,"returns":null},"nextPage":{"type":"Function","desc":"Navigates to next page, if available","params":null,"returns":null},"lastPage":{"type":"Function","desc":"Navigates to last page","params":null,"returns":null},"inFullscreen":{"type":"Boolean","desc":"Is table in fullscreen mode?"},"toggleFullscreen":{"type":"Function","desc":"Toggles fullscreen mode","params":null,"returns":null}}},"no-data":{"desc":"Slot to define how the bottom will look like when is nothing to display","scope":{"message":{"type":"String","desc":"The suggested message","examples":["'No data available'"]},"icon":{"type":"String","desc":"The suggested icon name (following Quasar convention)","examples":["'warning'"]},"filter":{"type":["String","Object"],"desc":"String/Object to filter table with (the 'filter' prop)"}}}},"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":{"type":"Event","desc":"JS event object"},"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":{"type":"Event","desc":"JS event object"},"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":{"type":"Event","desc":"JS event object"},"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"},"rowsNumber":{"type":"Number","required":false,"desc":"For server-side fetching only. How many total database rows are there to be added to the table."}}},"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":{"type":"Event","desc":"JS event object","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":{"toggleFullscr