Quasar's QTable: The ULTIMATE Component (3/6) - Loading State, Pagination, and Sorting (2024)

#quasar #vue #javascript #webdev

{ data: [ { id: 1, created_at: "2021-08-17T01:29:29.000000Z", updated_at: "2021-08-17T01:29:29.000000Z", name: "Hollie", email: "nshields@yahoo.com", age: 9 }, { id: 2, created_at: "2021-08-17T01:29:29.000000Z", updated_at: "2021-08-17T01:29:29.000000Z", name: "Sonya", email: "shields.gonzalo@douglas.info", age: 19 } ], links: { first: "http://table.quasarcomponents.com/dogs?page=1", last: "http://table.quasarcomponents.com/dogs?page=34", prev: null, next: "http://table.quasarcomponents.com/dogs?page=2" }, meta: { current_page: 1, from: 1, last_page: 34, links: [ { url: null, label: "« Previous", active: false }, { url: "http://table.quasarcomponents.com/dogs?page=1", label: "1", active: true } ], path: "http://table.quasarcomponents.com/dogs", per_page: 15, to: 15, total: 500 }}

yarn add axios

<script>import { defineComponent, ref } from 'vue'import axios from 'axios'export default defineComponent({ setup () { const loading = ref(true) const dogs = ref([]) const columns = [ { name: 'name', label: 'Name', field: 'name', align: 'left' }, { name: 'age', label: 'Age', field: 'age', align: 'center' }, { name: 'email', label: 'Email', field: 'email' } ] // Fetch dogs axios.get('https://table.quasarcomponents.com/dogs') .then(response => { dogs.value = response.data.data }) .finally(() => { loading.value = false }) return { columns, loading, dogs } }})</script>

<q-table color="secondary" :loading="loading" :rows="dogs" :columns="columns"/>

<q-table :loading="loading" :rows="dogs" color="primary"> <template #loading> <q-inner-loading showing color="primary" /> </template></q-table>

export default defineComponent({ setup () { // ... const pagination = ref({ sortBy: 'name', descending: false, page: 1, rowsPerPage: 3 }) return { // ... pagination } }}

<q-table v-model:pagination="pagination" color="secondary" :loading="loading" :rows="dogs" :columns="columns"/>

<q-table v-model:pagination="pagination" :rows-per-page-options="[3, 5, 10, 0]" color="secondary" :loading="loading" :rows="dogs" :columns="columns"/>

<template> <!-- Why hello there! Meet me at the "script" section. That's where the magic happens 🪄 --> <q-page padding class="flex justify-center" > <div class="full-width q-gutter-xl" > <!-- Two things to notice here 1. "rows-per-page-options" has been emptied. We're going to let the server decide how many "rows per page" 2. @request is fired whenever a pagination is clicked! Handy 🙂 --> <q-table v-model:pagination="pagination" :rows-per-page-options="[]" color="secondary" :loading="loading" :rows="dogs" :columns="columns" @request="onRequest" /> </div> </q-page></template><script>import { defineComponent, ref } from 'vue'import axios from 'axios'export default defineComponent({ setup () { // And here we are! // I'll only comment on the parts that are different 😉 const loading = ref(true) const dogs = ref([]) const pagination = ref({ // No longer using sort. if needed, this can now be done using the backend! // sortBy: 'name', // descending: false, page: 1, rowsPerPage: 15, // When using server side pagination, QTable needs // to know the "rows number" (total number of rows). // Why? // Because Quasar has no way of knowing what the last page // will be without this information! // Therefore, we now need to supply it with a "rowsNumber" ourself. rowsNumber: 0 }) const columns = [ { name: 'name', label: 'Name', field: 'name', align: 'left', sortable: true }, { name: 'age', label: 'Age', field: 'age', align: 'center' }, { name: 'email', label: 'Email', field: 'email' } ] // Fetch dogs const fetchDogs = (page = 0) => { // we can specify the "page" to jump to loading.value = true return axios.get('https://table.quasarcomponents.com/dogs', { params: { page: page } // here, we tell the api what "page" to jump to }) .then(response => { dogs.value = response.data.data // The api gives us "meta data". // this meta data gives us everything we // need to get pagination working! const meta = response.data.meta // We now update "pagination" with our meta data // from the server. This is where the magic happens 🪄 pagination.value.page = meta.current_page pagination.value.rowsPerPage = meta.per_page pagination.value.rowsNumber = meta.total }) .finally(() => { loading.value = false }) } // QTable exposes a @request method (see the <template>) // This will be called when one of the pagination buttons are clicked. // it gives us everything we need, including the new page number! const onRequest = (props) => { fetchDogs(props.pagination.page) } // The initial fetch fetchDogs() return { onRequest, columns, loading, dogs, pagination } }})</script>

const columns = [ { name: 'name', label: 'Name', field: 'name', align: 'left', sortable: true }, { name: 'age', label: 'Age', field: 'age', align: 'center', sortable: true }, { name: 'email', label: 'Email', field: 'email', sortable: true }]

const columns = [ { name: 'name', label: 'Name', field: 'name', align: 'left', sortable: true }, { name: 'age', label: 'Age', field: 'age', align: 'center', sortable: true }, { name: 'email', label: 'Email', field: 'email', sortable: true, sort: (a, b) => { const domainA = a.split('@')[1] const domainB = b.split('@')[1] return domainA.localeCompare(domainB) } }]