QTable is a Component that allows you to display data in a tabular manner. Features:
Filtering
Sorting
Single / Multiple rows selection with custom selection actions
Pagination (including server-side if required)
Total customization of rows and cells through scoped slots
Ability to add additional row(s) at top or bottom of data rows
Column picker (through QTableColumns component described in one of the sections)
Custom top and/or bottom Table controls
Responsive design (“dense” mode for narrow windows)
Installation
Edit /quasar.conf.js:
Basic Usage
This is the most basic QTable:
Internationalization
The default values of the different QTable labels are taken care of by default through Quasar I18n. If your desired language pack is missing, please provide a PR for it.
QTable Vue Properties
Vue Property
Type
Description
grid
Boolean
(v0.17+) Use “grid mode”. See example below.
data
Array of Objects
Data containing Array of rows to display.
columns
Array of Objects
(Required) Defining each column’s properties.
row-key
String
(Required) Property name of each row defining a unique data key for the respective rows.
pagination
Object
Use with .sync. Control of the pagination and sorting. Can enable Table “server-mode” by containing rowsNumber property. See next sections for details.
rows-per-page-options
Array
Array of Numbers representing options for user to select how many rows per page should be shown. Example: ‘[3, 5, 7, 0]’. Notice value 0 means “All” and empty array hides the selection.
selection
String
Set selection mode. One of ‘single’, ‘multiple’ or (default) ‘none’.
selected
Array
Use with .sync. Array of unique keys for selected row(s).
visible-columns
Array
Array of Strings containing the ‘name’ column property value of the visible columns.
loading
Boolean
Show a background process is in progress (like fetching data and so on).
color
String
Color of the default Table controls (pagination, checkboxes, …).
dark
Boolean
When using Table on a dark background.
dense
Boolean
Dense Table, when you want to display more data using the same real estate on window. Gets activated by default on narrow windows.
Sets separator for rows/columns/cell. One of ‘horizontal’, ‘vertical’, ‘cell’, ‘none’.
table-style
String/Array/Object
Style for the <table> tag itself.
table-class
String/Array/Object
Classes for the <table> tag itself.
filter
String
Filter String for Table used by filter-method().
filter-method
Function
When you want a custom filtering method. See next sections for details.
sort-method
Function
When you want a custom sorting method. See next sections for details.
binary-state-sort
Boolean
(v0.17.11+) By default, sorting a column has 3 states (no sort, ascending, descending). By using this property it only allows 2 states (ascending, descending).
Label properties are by default defined in Quasar’s i18n, but you can override them:
Vue Property
Type
Description
no-data-label
String
Message to display when no rows are available.
no-results-label
String
Message to display when no rows match the filter.
loading-label
String
Message to display when Table currently has no rows but is in the process of fetching them.
selected-rows-label(rowsNumber)
Function
Function that returns a message (String) to display how many rows are selected. Takes a Number parameter which is the actual rows number that are selected.
rows-per-page-label
String
Override ‘Rows per page:’ message.
pagination-label(start,end,total)
Function
Override default ‘x-y of z’ pagination label.
IMPORTANT Initial sorted column, sorting direction & page is configured through the pagination prop. Check the Pagination section below.
QTableColumns Vue Properties
Supports v-model which should be the String for single selection and Array for multiple selection.
Vue Property
Type
Description
columns
Array of Objects
(Required) Defining each column’s properties.
label
String
Overrides text displayed in input frame. See “Working with Display Value” section below.
color
String
One from Quasar Color Palette.
dark
Boolean
Is it rendered on a dark background?
Defining the Columns
Let’s take an example of configuring the columns property. Let’s assume we are telling QTable that row-key is ‘name’.
IMPORTANT If your data is nested and you need to fill a column with a certain value in the nested objects, you can grab a property value within the nested objects like so: field: obj => obj.some.nested.prop
When you want to control Table’s pagination, use pagination prop, but don’t forget to add the .sync modifier:
When pagination has a property named rowsNumber, then this means that you’ll be configuring Table for server-side pagination (& sorting & filtering).
Custom Filter Method
Custom Sort Method
Popup Edit
Quasar v0.17.10+
Below is an example with the user being able to edit “in place” with the help of QPopupEdit component. Please note that we are using the “body” scoped slot. QPopupEdit won’t work with cell scoped slots.
QTable Vue Events
Vue Event
Parameters
Description
@request
Object { pagination, filter, getCellValue }
Gets triggered when using server-side pagination (pagination property Object contains rowsNumber)
@fullscreen
Boolean (true/false)
(v0.17.7+) Emitted when Fullscreen state gets toggled.
Server-side Pagination, Filtering, Sorting
When your database contains a big number of rows for a Table, obviously it’s not feasible to load them all for multiple reasons (memory, UI rendering performance, …). Instead, you can load only a Table page. Whenever the user wants to navigate to another Table page, or wants to sort by a column or wants to filter the Table, a request is sent to the server to fetch the partial data.
First step to enable this behavior is to specify pagination prop, which MUST contain rowsNumber. QTable needs to know the total number of rows available in order to correctly render the pagination links.
Second step is to listen for @request event on QTable. This event is triggered when data needs to be fetched from the server because either page number or sorting or filtering changed.
It’s best that you also specify the loading prop in order to notify the user that a background process is in progress.
Notice we’ll be using a Vue scoped slot called item to define how each record (the equivalent of a row in non-grid mode) should look. This allows you total freedom.
The code below is the equivalent of the demo. Feel free to tweak however you want as all the QTable features are available in grid mode too. In the example below, we hide the header, but you can show it should you want – the user will be able to sort the data by columns etc.
Row selection, Extra top/bottom rows, Loading state
Controlling pagination, custom controls & watching for page navigation
Row selection actions
Hide header & bottom
Display a nested property or format a column
You can display the value of a nested property. For example:
Then you can go even further and format the value for a specific column in your column definition. Example:
The value returned by field is used for sorting rows, while the format value is specifically meant for displaying a value to the user. This is very useful for cases where you need to sort by the initial value of your data. You can (if you want to), however, avoid the format and use custom scoped slots (row, column cell) for defining how Quasar should format the cell(s).
Examples - Customization
Custom table top & bottom
Custom column cell
Custom rows
Alternative custom rows
Custom header (has tooltips)
Alternative custom header
Custom header & rows with selection & expandable rows
Address: Suite 592 642 Pfannerstill Island, South Keila, LA 74970-3076
Phone: +9617721773649
Job: Marketing Producer
Hobby: Skydiving, Flag Football, Knitting, Running, Lego building, Hunting, Juggling
Introduction: My name is Tuan Roob DDS, I am a friendly, good, energetic, faithful, fantastic, gentle, enchanting person who loves writing and wants to share my knowledge and understanding with you.
We notice you're using an ad blocker
Without advertising income, we can't keep making this site awesome for you.