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