quasar

{ "mixins": [ "mixins/fullscreen" ], "meta": { "docsUrl": "https://v1.quasar.dev/vue-components/table" }, "props": { "data": { "type": "Array", "desc": "Rows of data to display", "examples": [ ":data=\"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", "examples": [ "row-key=\"name\"", ":row-key=\"row => row.name\"" ], "category": "general" }, "virtual-scroll": { "type": "Boolean", "desc": "Display data using QVirtualScroll (for non-grid mode only)", "category": "virtual-scroll", "addedIn": "v1.2.0" }, "virtual-scroll-slice-size": { "type": [ "Number", "String" ], "desc": "Minimum number of rows to render in the virtual list", "default": "30", "examples": [ "virtual-scroll-slice-size=\"60\"" ], "category": "virtual-scroll", "addedIn": "v1.2.0" }, "virtual-scroll-slice-ratio-before": { "type": [ "Number", "String" ], "desc": "Ratio of number of rows in visible zone to render before it", "default": "1", "examples": [ "virtual-scroll-slice-ratio-before=\"0.3\"" ], "category": "virtual-scroll", "addedIn": "v1.14.7" }, "virtual-scroll-slice-ratio-after": { "type": [ "Number", "String" ], "desc": "Ratio of number of rows in visible zone to render after it", "default": "1", "examples": [ "virtual-scroll-slice-ratio-after=\"2\"" ], "category": "virtual-scroll", "addedIn": "v1.14.7" }, "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": "48 (24 if dense)", "examples": [ "virtual-scroll-item-size=\"48\"" ], "category": "virtual-scroll", "addedIn": "v1.2.0" }, "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", "default": "0", "examples": [ "virtual-scroll-sticky-size-start=\"48\"" ], "category": "virtual-scroll", "addedIn": "v1.2.0" }, "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", "examples": [ "virtual-scroll-sticky-size-end=\"48\"" ], "category": "virtual-scroll", "addedIn": "v1.2.0" }, "table-colspan": { "type": [ "Number", "String" ], "desc": "The number of columns in the table (you need this if you use table-layout: fixed)", "examples": [ "table-colspan=\"12\"" ], "category": "virtual-scroll|content", "addedIn": "v1.13.0" }, "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", "addedIn": "v1.12.0" }, "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", "addedIn": "v1.12.0" }, "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", "addedIn": "v1.12.0" }, "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", "addedIn": "v1.12.0" }, "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", "desc": "Unique id, identifies column, (used by pagination.sortBy, 'body-cell-[name]' slot, ...)", "required": true, "examples": [ "desc" ] }, "label": { "type": "String", "desc": "Label for header", "required": true, "examples": [ "Dessert (100g serving)" ] }, "field": { "type": [ "String", "Function" ], "desc": "Row Object property to determine value for this column or function which maps to the required property", "required": true, "examples": [ "name", "row => row.some.nested.prop" ] }, "required": { "type": "Boolean", "desc": "If we use visible-columns, this col will always be visible", "default": false }, "align": { "type": "String", "desc": "Horizontal alignment of cells in this column", "default": "right", "examples": [ "left", "right", "center" ] }, "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", "examples": ["(a, b, rowA, rowB) => parseInt(a, 10) - parseInt(b, 10)"], "params": { "a": { "type": "Any", "desc": "Value of the first comparison term", "examples": [ 123, "abc" ] }, "b": { "type": "Any", "desc": "Value of the second comparison term", "examples": [ 123, "abc" ] }, "rowA": { "type": "Object", "desc": "Full Row object in which is contained the first term", "examples": [ "{ name: 'Potassium', value: 'K' }" ] }, "rowB": { "type": "Object", "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" ] } }, "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", "addedIn": "v1.15.11" }, "format": { "type": "Function", "desc": "Function you can apply to format your data", "examples": [ "(val, row) => `${val}%`", "val => val ? /* Unicode checkmark checked */ '\u2611' : /* Unicode checkmark unchecked */ '\u2610'" ], "params": { "val": { "type": "Any", "desc": "Value of the cell", "examples": [ 123, "abc" ] }, "row": { "type": "Object", "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; The Function form requires v1.15.15+", "examples": [ "width: 500px", "row => (row.calories % 2 === 0 ? 'width:10px' : 'font-size:2em')" ] }, "classes": { "type": [ "String", "Function" ], "desc": "Classes to add on normal cells of the column; The Function form requires v1.15.15+", "examples": [ "my-special-class", "row => (row.calories % 2 === 0 ? 'bg-green' : 'bg-yellow')" ] }, "headerStyle": { "type": "String", "desc": "Style to apply on header cells of the column", "examples": [ "width: 500px" ], "addedIn": "v1.3.0" }, "headerClasses": { "type": "String", "desc": "Classes to add on header cells of the column", "examples": [ "my-special-class" ], "addedIn": "v1.3.0" } } }, "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": [ ":visible-columns=\"myCols\"", "[ 'desc', 'carbs', 'protein' ]" ], "category": "column" }, "loading": { "type": "Boolean", "desc": "Put Table into 'loading' state; Notify the user something is happening behind the covers", "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", "addedIn": "v1.12.0" }, "hide-no-data": { "type": "Boolean", "desc": "Hide the default no data bottom layer", "category": "content", "addedIn": "v1.12.0" }, "hide-pagination": { "type": "Boolean", "desc": "Hide the pagination controls at the bottom", "category": "content", "addedIn": "v1.12.0" }, "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" ], "examples": [ "cell" ], "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", "addedIn": "v1.15.11" }, "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", "examples": [ 12 ] } }, "returns": { "type": "String", "desc": "Label to display", "examples": [ "5 rows are selected" ] }, "examples": [ ":selected-rows-label=\"getSelectedString\"" ], "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", "examples": [ 1 ] }, "endRowIndex": { "type": "Number", "desc": "Index of last displayed row", "examples": [ 10 ] }, "totalRowsNumber": { "type": "Number", "desc": "Number of total rows available in data", "examples": [ 132 ] } }, "returns": { "type": "String", "desc": "Label to display", "examples": [ "1-10 of 132" ] }, "examples": [ ":pagination-label=\"getPaginationLabel\"" ], "category": "pagination" }, "table-style": { "type": [ "String", "Array", "Object" ], "desc": "CSS style to apply to native HTML <table> element's wrapper (which is a DIV)", "examples": [ "background-color: #ff0000", ":table-style=\"{ backgroundColor: '#ff0000' }\"" ], "category": "style" }, "table-class": { "type": [ "String", "Array", "Object" ], "desc": "CSS classes to apply to native HTML <table> element's wrapper (which is a DIV)", "examples": [ "my-special-class", ":table-class=\"{ 'my-special-class': [Boolean condition] }\"" ], "category": "style" }, "table-header-style": { "type": [ "String", "Array", "Object" ], "desc": "CSS style to apply to header of native HTML <table> (which is a TR)", "examples": [ "background-color: #ff0000", ":table-header-style=\"{ backgroundColor: '#ff0000' }\"" ], "category": "style" }, "table-header-class": { "type": [ "String", "Array", "Object" ], "desc": "CSS classes to apply to header of native HTML <table> (which is a TR)", "examples": [ "my-special-class", ":table-header-class=\"{ 'my-special-class': [Boolean condition] }\"" ], "category": "style" }, "card-container-style": { "type": [ "String", "Array", "Object" ], "desc": "CSS style to apply to the cards container (when in grid mode)", "examples": [ "background-color: #ff0000", ":card-container-style=\"{ backgroundColor: '#ff0000' }\"" ], "category": "style", "addedIn": "v1.4.0" }, "card-container-class": { "type": [ "String", "Array", "Object" ], "desc": "CSS classes to apply to the cards container (when in grid mode)", "examples": [ "my-special-class", "justify-center", ":card-container-class=\"{ 'my-special-class': [Boolean condition] }\"" ], "category": "style", "addedIn": "v1.4.0" }, "card-style": { "type": [ "String", "Array", "Object" ], "desc": "CSS style to apply to the card (when in grid mode) or container card (when not in grid mode)", "examples": [ "background-color: #ff0000", ":card-style=\"{ backgroundColor: '#ff0000' }\"" ], "category": "style" }, "card-class": { "type": [ "String", "Array", "Object" ], "desc": "CSS classes to apply to the card (when in grid mode) or container card (when not in grid mode)", "examples": [ "my-special-class", ":card-class=\"{ 'my-special-class': [Boolean condition] }\"" ], "category": "style" }, "title-class": { "type": [ "String", "Array", "Object" ], "desc": "CSS classes to apply to the title (if using 'title' prop)", "examples": [ "my-special-class", "text-h1", ":title-class=\"{ 'text-h1': [Boolean condition] }\"" ], "category": "style", "addedIn": "v1.13.2" }, "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": [ ":filter=\"myFilterInput\"" ], "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", "required": true, "__exemption": [ "examples" ] }, "terms": { "type": [ "String", "Object" ], "desc": "Terms to filter with (is essentially the 'filter' prop value)", "required": true, "__exemption": [ "examples" ] }, "cols": { "type": "Array", "desc": "Optional column definitions", "__exemption": [ "examples" ] }, "getCellValue": { "type": "Function", "desc": "Optional function to get a cell value", "params": { "col": { "type": "Object", "desc": "Column name from column definitions", "__exemption": [ "examples" ] }, "row": { "type": "Object", "desc": "The row object", "__exemption": [ "examples" ] } }, "returns": { "type": "Any", "desc": "Parsed/Processed cell value", "examples": [ "Ice Cream Sandwich" ] } } }, "returns": { "type": "Array", "desc": "Filtered rows", "__exemption": [ "examples" ] }, "default": "(see source code)", "examples": [ "(see source code)" ], "category": "filter" }, "pagination": { "type": "Object", "desc": "Pagination object; You can use the '.sync' modifier on it if you want to have access on the current pagination in your components; When not using the .sync modifier it simply initializes the pagination on first render", "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)", "examples": [ 3 ] }, "rowsPerPage": { "type": "Number", "desc": "How many rows per page? 0 means Infinite", "examples": [ 10 ] }, "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.", "examples": [ 100, 200 ] } }, "examples": [ ":pagination.sync=\"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": "[ 3, 5, 7, 10, 15, 20, 25, 50, 0 ]", "examples": [ ":rows-per-page-options=\"[10, 20]\"" ], "category": "pagination" }, "selection": { "type": "String", "desc": "Selection type", "default": "none", "values": [ "single", "multiple", "none" ], "examples": [ "multiple" ], "category": "selection" }, "selected": { "type": "Array", "desc": "Keeps the user selection array", "sync": true, "default": "[]", "examples": [ ":selected.sync=\"selection\"" ], "category": "selection" }, "expanded": { "type": "Array", "desc": "Keeps the array with expanded rows keys", "sync": true, "default": "[]", "examples": [ ":expanded.sync=\"expanded\"" ], "category": "expansion", "addedIn": "v1.8.3" }, "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", "__exemption": [ "examples" ] }, "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", "__exemption": [ "examples" ] }, "default": "(see source code)", "examples": [ "(see source code)" ], "category": "sorting" } }, "slots": { "loading": { "desc": "Override default effect when table is in loading state; Suggestion: QInnerLoading", "addedIn": "v1.8.0" } }, "scopedSlots": { "item": { "desc": "Slot to use for defining an item when in 'grid' mode; Suggestion: QCard", "scope": { "key": { "type": "Any", "desc": "Row/Item's key", "__exemption": [ "examples" ] }, "row": { "type": "Object", "desc": "Row/Item object", "__exemption": [ "examples" ] }, "rowIndex": { "type": "Number", "desc": "Row/Item's index (0 based) in the filtered and sorted table", "__exemption": [ "examples" ] }, "pageIndex": { "type": "Number", "desc": "Row/Item's index (0 based) in the current page of the filtered and sorted table", "__exemption": [ "examples" ] }, "cols": { "type": "Object", "desc": "Column definitions", "__exemption": [ "examples" ] }, "colsMap": { "type": "Object", "desc": "Column mapping (key is column name, value is column object)", "__exemption": [ "examples" ] }, "sort": { "type": "Function", "desc": "Trigger a table sort", "params": { "col": { "type": [ "String", "Object" ], "desc": "Column name or column definition object", "required": true, "examples": [ "calories" ] } }, "returns": null, "addedIn": "v1.14.0" }, "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": { "extends": "color", "default": "grey-8", "addedIn": "v1.14.0" }, "dark": { "extends": "dark", "addedIn": "v1.14.0" }, "dense": { "extends": "dense", "addedIn": "v1.14.0" } } }, "body": { "desc": "Slot to define how a body row looks like; Suggestion: QTr + Td", "scope": { "key": { "type": "Any", "desc": "Row's key", "__exemption": [ "examples" ] }, "row": { "type": "Object", "desc": "Row object", "__exemption": [ "examples" ] }, "rowIndex": { "type": "Number", "desc": "Row's index (0 based) in the filtered and sorted table", "__exemption": [ "examples" ] }, "pageIndex": { "type": "Number", "desc": "Row's index (0 based) in the current page of the filtered and sorted table", "__exemption": [ "examples" ] }, "cols": { "type": "Object", "desc": "Column definitions", "__exemption": [ "examples" ] }, "colsMap": { "type": "Object", "desc": "Column mapping (key is column name, value is column object)", "__exemption": [ "examples" ] }, "sort": { "type": "Function", "desc": "Trigger a table sort", "params": { "col": { "type": [ "String", "Object" ], "desc": "Column name or column definition object", "required": true, "examples": [ "calories" ] } }, "returns": null, "addedIn": "v1.14.0" }, "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": { "extends": "color", "default": "grey-8", "addedIn": "v1.14.0" }, "dark": { "extends": "dark", "addedIn": "v1.14.0" }, "dense": { "extends": "dense", "addedIn": "v1.14.0" }, "__trClass": { "type": "String", "desc": "Internal prop passed down to QTr (if used)", "__exemption": [ "examples" ] } } }, "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", "__exemption": [ "examples" ] }, "value": { "type": "Any", "desc": "Parsed/Formatted value of table cell", "__exemption": [ "examples" ] }, "key": { "type": "Any", "desc": "Row's key", "__exemption": [ "examples" ], "addedIn": "v1.14.0" }, "row": { "type": "Object", "desc": "Row object", "__exemption": [ "examples" ] }, "rowIndex": { "type": "Number", "desc": "Row's index (0 based) in the filtered and sorted table", "__exemption": [ "examples" ] }, "pageIndex": { "type": "Number", "desc": "Row's index (0 based) in the current page of the filtered and sorted table", "__exemption": [ "examples" ] }, "cols": { "type": "Object", "desc": "Column definitions", "__exemption": [ "examples" ], "addedIn": "v1.14.0" }, "colsMap": { "type": "Object", "desc": "Column mapping (key is column name, value is column object)", "__exemption": [ "examples" ], "addedIn": "v1.14.0" }, "sort": { "type": "Function", "desc": "Trigger a table sort", "params": { "col": { "type": [ "String", "Object" ], "desc": "Column name or column definition object", "required": true, "examples": [ "calories" ] } }, "returns": null, "addedIn": "v1.14.0" }, "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": { "extends": "color", "default": "grey-8", "addedIn": "v1.14.0" }, "dark": { "extends": "dark", "addedIn": "v1.14.0" }, "dense": { "extends": "dense", "addedIn": "v1.14.0" } } }, "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", "__exemption": [ "examples" ] }, "value": { "type": "Any", "desc": "Parsed/Formatted value of table cell", "__exemption": [ "examples" ] }, "key": { "type": "Any", "desc": "Row's key", "__exemption": [ "examples" ], "addedIn": "v1.14.0" }, "row": { "type": "Object", "desc": "Row object", "__exemption": [ "examples" ] }, "rowIndex": { "type": "Number", "desc": "Row's index (0 based) in the filtered and sorted table", "__exemption": [ "examples" ] }, "pageIndex": { "type": "Number", "desc": "Row's index (0 based) in the current page of the filtered and sorted table", "__exemption": [ "examples" ] }, "cols": { "type": "Object", "desc": "Column definitions", "__exemption": [ "examples" ], "addedIn": "v1.14.0" }, "colsMap": { "type": "Object", "desc": "Column mapping (key is column name, value is column object)", "__exemption": [ "examples" ], "addedIn": "v1.14.0" }, "sort": { "type": "Function", "desc": "Trigger a table sort", "params": { "col": { "type": [ "String", "Object" ], "desc": "Column name or column definition object", "required": true, "examples": [ "calories" ] } }, "returns": null, "addedIn": "v1.14.0" }, "selected": { "type": "Boolean", "desc": "(Only if using selection) Is row selected? Can directly be assigned new Boolean value which changes selection state", "reactive": true, "addedIn": "v1.14.0" }, "expand": { "type": "Boolean", "desc": "Is row expanded? Can directly be assigned new Boolean value which changes expanded state", "reactive": true, "addedIn": "v1.14.0" }, "color": { "extends": "color", "default": "grey-8", "addedIn": "v1.14.0" }, "dark": { "extends": "dark", "addedIn": "v1.14.0" }, "dense": { "extends": "dense", "addedIn": "v1.14.0" } } }, "header": { "desc": "Slot to define how header looks like; Suggestion: QTr + QTh", "scope": { "cols": { "type": "Object", "desc": "Column definitions", "__exemption": [ "examples" ] }, "colsMap": { "type": "Object", "desc": "Column mapping (key is column name, value is column object)", "__exemption": [ "examples" ] }, "sort": { "type": "Function", "desc": "Trigger a table sort", "params": { "col": { "type": [ "String", "Object" ], "desc": "Column name or column definition object", "required": true, "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, "addedIn": "v1.14.0" }, "expand": { "type": "Boolean", "desc": "Is row expanded? Can directly be assigned new Boolean value which changes expanded state", "reactive": true, "addedIn": "v1.14.0" }, "color": { "extends": "color", "default": "grey-8", "addedIn": "v1.14.0" }, "dark": { "extends": "dark", "addedIn": "v1.14.0" }, "dense": { "extends": "dense", "addedIn": "v1.14.0" }, "__trClass": { "type": "String", "desc": "Internal prop passed down to QTr (if used)", "__exemption": [ "examples" ] }, "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", "__exemption": [ "examples" ] }, "cols": { "type": "Object", "desc": "Column definitions", "__exemption": [ "examples" ] }, "colsMap": { "type": "Object", "desc": "Column mapping (key is column name, value is column object)", "__exemption": [ "examples" ] }, "sort": { "type": "Function", "desc": "Trigger a table sort", "params": { "col": { "type": [ "String", "Object" ], "desc": "Column name or column definition object", "required": true, "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, "addedIn": "v1.14.0" }, "expand": { "type": "Boolean", "desc": "Is row expanded? Can directly be assigned new Boolean value which changes expanded state", "reactive": true, "addedIn": "v1.14.0" }, "color": { "extends": "color", "default": "grey-8", "addedIn": "v1.14.0" }, "dark": { "extends": "dark", "addedIn": "v1.14.0" }, "dense": { "extends": "dense", "addedIn": "v1.14.0" } } }, "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", "__exemption": [ "examples" ] }, "cols": { "type": "Object", "desc": "Column definitions", "__exemption": [ "examples" ] }, "colsMap": { "type": "Object", "desc": "Column mapping (key is column name, value is column object)", "__exemption": [ "examples" ] }, "sort": { "type": "Function", "desc": "Trigger a table sort", "params": { "col": { "type": [ "String", "Object" ], "desc": "Column name or column definition object", "required": true, "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, "addedIn": "v1.14.0" }, "expand": { "type": "Boolean", "desc": "Is row expanded? Can directly be assigned new Boolean value which changes expanded state", "reactive": true, "addedIn": "v1.14.0" }, "color": { "extends": "color", "default": "grey-8", "addedIn": "v1.14.0" }, "dark": { "extends": "dark", "addedIn": "v1.14.0" }, "dense": { "extends": "dense", "addedIn": "v1.14.0" } }, "addedIn": "v1.1.1" }, "body-selection": { "desc": "Slot to define how body selection column looks like; Suggestion: QCheckbox", "scope": { "key": { "type": "Any", "desc": "Row's key", "__exemption": [ "examples" ] }, "row": { "type": "Object", "desc": "Row object", "__exemption": [ "examples" ] }, "rowIndex": { "type": "Number", "desc": "Row's index (0 based) in the filtered and sorted table", "__exemption": [ "examples" ] }, "pageIndex": { "type": "Number", "desc": "Row's index (0 based) in the current page of the filtered and sorted table", "__exemption": [ "examples" ] }, "cols": { "type": "Object", "desc": "Column definitions", "__exemption": [ "examples" ] }, "colsMap": { "type": "Object", "desc": "Column mapping (key is column name, value is column object)", "__exemption": [ "examples" ] }, "sort": { "type": "Function", "desc": "Trigger a table sort", "params": { "col": { "type": [ "String", "Object" ], "desc": "Column name or column definition object", "required": true, "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": { "extends": "color", "default": "grey-8" }, "dark": { "extends": "dark" }, "dense": { "extends": "dense" } }, "addedIn": "v1.14.0" }, "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", "__exemption": [ "examples" ] }, "colsMap": { "type": "Object", "desc": "Column mapping (key is column name, value is column object)", "__exemption": [ "examples" ] }, "sort": { "type": "Function", "desc": "Trigger a table sort", "params": { "col": { "type": [ "String", "Object" ], "desc": "Column name or column definition object", "required": true, "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": { "extends": "color", "default": "grey-8" }, "dark": { "extends": "dark" }, "dense": { "extends": "dense" } }, "addedIn": "v1.14.0" }, "top-row": { "desc": "Slot to define how top extra row looks like", "scope": { "cols": { "type": "Object", "desc": "Column definitions", "__exemption": [ "examples" ] } } }, "bottom-row": { "desc": "Slot to define how bottom extra row looks like", "scope": { "cols": { "type": "Object", "desc": "Column definitions", "__exemption": [ "examples" ] } } }, "top": { "desc": "Slot to define how table top looks like", "scope": { "pagination": { "type": "Object", "desc": "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)", "examples": [ 3 ] }, "rowsPerPage": { "type": "Number", "desc": "How many rows per page? 0 means Infinite", "examples": [ 10 ] } } }, "pagesNumber": { "type": "Number", "desc": "Number of pages available", "examples": [ 5 ] }, "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, "addedIn": "v1.12.0" }, "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, "addedIn": "v1.12.0" }, "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", "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)", "examples": [ 3 ] }, "rowsPerPage": { "type": "Number", "desc": "How many rows per page? 0 means Infinite", "examples": [ 10 ] } } }, "pagesNumber": { "type": "Number", "desc": "Number of pages available", "examples": [ 5 ] }, "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, "addedIn": "v1.12.0" }, "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, "addedIn": "v1.12.0" }, "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", "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)", "examples": [ 3 ] }, "rowsPerPage": { "type": "Number", "desc": "How many rows per page? 0 means Infinite", "examples": [ 10 ] } } }, "pagesNumber": { "type": "Number", "desc": "Number of pages available", "examples": [ 5 ] }, "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, "addedIn": "v1.12.0" }, "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, "addedIn": "v1.12.0" }, "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", "de