Q-table custom loading state not working



  • Hi, im trying to display a loading state while i fetch my data but everytime i see the triangle icon in black saying loading instead of showing the actual loading template.
    Does anybody have an idea ?

    <template>
      <q-page>
        <div class="q-pa-md">
          <q-table
            title="CloudCenter Tenants"
            dense
            :data="data"
            :columns="columns"
            :loading="loading"
            :filter="filter"
            color="primary"
            virtual-scroll
            row-key="id"
            :pagination.sync="pagination"
            :rows-per-page-options="[0]"
          >
            <template v-slot:top-right>
              <q-btn
                color="primary"
                icon-right="archive"
                label="Export to csv"
                no-caps
                @click="exportTable"
              />
            </template>
            <template v-slot:loading>
              <q-inner-loading showing color="primary" />
            </template>
          </q-table>
        </div>
      </q-page>
    </template>
    
    <script>
    import { exportFile } from 'quasar'
    
    function wrapCsvValue (val, formatFn) {
      let formatted = formatFn !== undefined
        ? formatFn(val)
        : val
    
      formatted = formatted === undefined || formatted === null
        ? ''
        : String(formatted)
    
      formatted = formatted.split('"').join('""')
      /**
       * Excel accepts \n and \r in strings, but some other CSV parsers do not
       * Uncomment the next two lines to escape new lines
       */
      // .split('\n').join('\\n')
      // .split('\r').join('\\r')
    
      return `"${formatted}"`
    }
    export default {
      name: 'ccinfo',
      data () {
        return {
          loading: false,
          data: [],
          columns: [
            {
              name: 'desc',
              required: true,
              label: 'Tenant Name',
              align: 'left',
              field: row => row.tenant_name,
              sortable: true
            },
            { name: 'url', align: 'left', label: 'Url', field: 'url' },
            { name: 'owner', align: 'left', label: 'Owner', field: 'owner', sortable: true },
            { name: 'email', align: 'left', label: 'Email', field: 'email', sortable: true },
            { name: 'technical_contact', align: 'left', label: 'Technical Contact', field: 'technical_contact', sortable: true },
            { name: 'admin_url', align: 'left', label: 'Admin Url', field: 'admin_url', sortable: true },
            { name: 'admin_username', align: 'left', label: 'Admin Username', field: 'admin_username', sortable: true },
            { name: 'secondary_approver', align: 'left', label: 'Secondary Approver', field: 'secondary_approver', sortable: true },
            { name: 'tenant_fqdn', align: 'left', label: 'Tenant FQDN', field: 'tenant_fqdn' },
            { name: 'cc_tenant_id', align: 'center', label: 'Tenant ID', field: 'cc_tenant_id', sortable: true },
            { name: 'last_update', align: 'center', label: 'Last Updated', field: 'last_update', sortable: true },
            { name: 'creation_date', align: 'center', label: 'Creation Date', field: 'creation_date', sortable: true },
            { name: 'cost_center', align: 'center', label: 'Cost Center', field: 'cost_center', sortable: true }
          ],
          pagination: {
            rowsPerPage: 0
          }
        }
      },
    
      created () {
        this.getCloudcenterInfo({
          filter: this.filter
        })
      },
    
      methods: {
        exportTable () {
          // naive encoding to csv format
          const content = [this.columns.map(col => wrapCsvValue(col.label))].concat(
            this.data.map(row => this.columns.map(col => wrapCsvValue(
              typeof col.field === 'function'
                ? col.field(row)
                : row[col.field === undefined ? col.name : col.field],
              col.format
            )).join(','))
          ).join('\r\n')
    
          const status = exportFile(
            'CloudCenter_Tenants.csv',
            content,
            'text/csv'
          )
    
          if (status !== true) {
            this.$q.notify({
              message: 'Browser denied file download...',
              color: 'negative',
              icon: 'warning'
            })
          }
        },
    
        getCloudcenterInfo ({ filter }) {
          this.loading = true
          this.$axios
            .get('/api/info/cloudcenter/')
            .then(response => {
              this.data = response.data
              this.loading = false
            })
            .catch(err => {
              this.$q.notify({
                color: 'negative',
                position: 'top',
                message: err.message,
                icon: 'report_problem'
              })
              this.loading = false
            })
        }
      }
    }
    </script>
    

    If I remove all the “this.loading = false”, it works. It seems like since its happening so quick. It doesn’t have time to show the loading state but why do i see the “no data messsage” saying “loading” ??

    Anybody has an idea ?



  • @lesourcil your code looks fine, so there’s something somewhere I suggest you put some console logs to see where it fails.



  • @metalsadman Ok, but im not sure what im looking to output here ?



  • Ho! and to add a bit of info, if I add a v-if=“loading” on the q-table, then the table will dissapear just fine is there is no data loaded.



  • @lesourcil like I said there’s nothing wrong in your code as far as I can tell in your snippet above, what you could do is set some logs and check your dev tools for errors, or. Log the data if it’s in correct form and etc…



  • Thx. I’ll try that.


Log in to reply