QTable Vue Events

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.

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).

Custom header (has tooltips)

<q-table:data="tableData":columns="columns"row-key="name"><trslot="header"slot-scope="props"><q-thkey="desc":props="props"> Dessert<q-tooltip>Pick a desert</q-tooltip></q-th><q-thkey="calories":props="props"> Calories<q-tooltip>These are the calories</q-tooltip></q-th><q-thkey="fat":props="props"> Fat<q-tooltip>This is the fat</q-tooltip></q-th><q-thkey="carbs":props="props"> Carbs<q-tooltip>These are the carbohydrates</q-tooltip></q-th><q-thkey="protein":props="props"> Protein<q-tooltip>These are the proteins</q-tooltip></q-th><q-thkey="sodium":props="props"> Sodium<q-tooltip>This is the sodium</q-tooltip></q-th><q-thkey="calcium":props="props"> Calcium<q-tooltip>This is the calcium</q-tooltip></q-th><q-thkey="iron":props="props"> Iron<q-tooltip>This is the iron</q-tooltip></q-th></tr></q-table>