title: how can I display total record in below table?
body: <p>I have a issue to display the total row in quasar/vue. I cannot get the totalRecord. I tired to run, but no errors, any idea to display the totalRecord??</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  import { ui } from "../ui-helpers/ui";
  import * as cu from "../_services/cu";
  import {
    required,
    decimal,
    minValue,
    maxValue,
    requiredIf
  } from "vuelidate/lib/validators"
  import moment from "moment-timezone"
  import Vue from "vue"
  import { uid, date } from "quasar"
  import MessageBox from "../components/MessageBox"
  
  export default {
    data() {
      return {
        filter: "",
        mode: "list",
        scDefinition: require("../statics/translate.json"),
        currencyColumns: [
          {
            name: "name",
            align: "left",
            label: "Name",
            field: "name",
            sortable: true
          },
          {
            name: "code",
            required: true,
            label: "Code",
            align: "left",
            field: "code",
            sortable: true
          },
          {
            name: "buyRate",
            align: "center",
            label: "Buy Rate",
            field: "buyRate",
            sortable: true
          },
          {
            name: "spotRate",
            align: "left",
            label: "Spot Rate",
            field: "spotRate",
            sortable: true
          },
          {
            name: "sellRate",
            align: "left",
            label: "Sell Rate",
            field: "sellRate",
            sortable: true
          },
          {
            name: "symbol",
            align: "left",
            labelalign: "left",
            label: "Symbol",
            field: "symbol",
            sortable: true
          },
          {
            name: "status",
            align: "center",
            label: "Status",
            field: "status",
            sortable: true
          }
        ],
        currencyData: [
          {
            name: "Malaysian Rinngit",
            code: "MYR",
            buyRate: "4.097(-2.5%)",
            spotRate: "4.19",
            sellRate: "4.238(+0.5%)",
            symbol: "RM",
            status: "Active"
          },
          {
            name: "Singapore Dollar",
            code: "SGD",
            buyRate: "xxxx(-2.5%)",
            spotRate: "x.xx",
            sellRate: "x.xxx(+0.5%)",
            symbol: "$",
            status: "Active"
          },
          {
            name: "Chinese Yuan",
            code: "CNY",
            buyRate: "xxxx(-2.5%)",
            spotRate: "x.xx",
            sellRate: "x.xxx(+0.5%)",
            symbol: "¥",
            status: "Active"
          },
          {
            name: "Malaysian Rinngit",
            code: "MYR",
            buyRate: "4.097(-2.5%)",
            spotRate: "4.19",
            sellRate: "4.238(+0.5%)",
            symbol: "RM",
            status: "Active"
          },
          {
            name: "Singapore Dollar",
            code: "SGD",
            buyRate: "xxxx(-2.5%)",
            spotRate: "x.xx",
            sellRate: "x.xxx(+0.5%)",
            symbol: "$",
            status: "Active"
          },
          {
            name: "Chinese Yuan",
            code: "CNY",
            buyRate: "xxxx(-2.5%)",
            spotRate: "x.xx",
            sellRate: "x.xxx(+0.5%)",
            symbol: "¥",
            status: "Active"
          }
        ],
        pagination: {
          page: 1,
          pageSize: Number(process.env.VUE_APP_REPORT_RECORD_PER_PAGE),
          rowsPerPage: Number(process.env.VUE_APP_REPORT_RECORD_PER_PAGE)
        },
        page: 1,
        totalRecord: 0,
        pageCount: 1,
      }
    },
  
    methods: {
      async fetchData(newSearch = false) {
        if (newSearch) {
            this.page = 1
          }
        this.totalRecord = 0
    
        var response = await cu.getValue(
          this.pagination.pageSize,
          this.page
        )
  
        if (response.Page != null) {
          this.totalRecord = response.Page.total_record
        } else {
          this.totalRecord = response.currencyData.length
        }
        this.pageCount = Math.ceil(
          response.Page.total_record / this.pagination.rowsPerPage
        )
      }
    }
  }
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;q-page padding&gt;
      &lt;q-table
        flat
        bordered
        class="statement-table"
        title="Currency"
        :data="currencyData"
        :hide-header="mode === 'grid'"
        :columns="currencyColumns"
        row-key="name"
        :grid="mode == 'grid'"
        :filter="filter"
        :pagination.sync="pagination"
      &gt;
        &lt;template v-slot:top-right="props"&gt;
          &lt;q-input
            outlined
            dense
            debounce="300"
            v-model="filter"
            placeholder="Search"
          &gt;
            &lt;template v-slot:append&gt;
              &lt;q-icon name="search" /&gt;
            &lt;/template&gt;
          &lt;/q-input&gt;
  
          &lt;q-btn
            flat
            round
            dense
            :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
            @click="props.toggleFullscreen"
            v-if="mode === 'list'"
          &gt;
            &lt;q-tooltip :disable="$q.platform.is.mobile" v-close-popup&gt;{{
              props.inFullscreen ? "Exit Fullscreen" : "Toggle Fullscreen"
            }}&lt;/q-tooltip&gt;
          &lt;/q-btn&gt;
  
          &lt;q-btn
            flat
            round
            dense
            :icon="mode === 'grid' ? 'list' : 'grid_on'"
            @click="
              mode = mode === 'grid' ? 'list' : 'grid';
              separator = mode === 'grid' ? 'none' : 'horizontal';
            "
            v-if="!props.inFullscreen"
          &gt;
            &lt;q-tooltip :disable="$q.platform.is.mobile" v-close-popup&gt;{{
              mode === "grid" ? "List" : "Grid"
            }}&lt;/q-tooltip&gt;
          &lt;/q-btn&gt;
        &lt;/template&gt;
  
        &lt;template v-slot:body-cell-status="props"&gt;
          &lt;q-td :props="props"&gt;
            &lt;q-chip
              :color="
                props.row.status == 'Active'
                  ? 'green'
                  : props.row.status == 'Inactive'
                  ? 'red'
                  : 'grey'
              "
              text-color="white"
              dense
              class="text-weight-bolder"
              square
              style="width: 85px"
              &gt;{{ props.row.status }}
            &lt;/q-chip&gt;
          &lt;/q-td&gt;
        &lt;/template&gt;
        
        &lt;template v-slot:bottom&gt;
          &lt;div class="pagination-total q-mt-sm flex flex-center"&gt;
            &lt;div class="text-medium-regular"&gt;
              Total {{ totalRecord }}
              &lt;span v-if="totalRecord &gt; 1"&gt;results&lt;/span&gt;
              &lt;span v-else&gt;result&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="pagination-container q-my-sm flex flex-center"&gt;
            &lt;q-pagination
              v-model="page"
              color="secondary"
              :input="true"
              :max="pageCount"
              :max-pages="6"
              @input="fetchData(false)"
              :boundary-numbers="true"
            /&gt;
          &lt;/div&gt;
        &lt;/template&gt;
      &lt;/q-table&gt;
    &lt;/q-page&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The output of image show the total Record still 0
  [1]: <a href="https://i.stack.imgur.com/EbYzw.png" rel="nofollow noreferrer">https://i.stack.imgur.com/EbYzw.png</a></p>
  <p>This is the Codepen:
  [Codepen]:<a href="https://codepen.io/Adriantango/pen/MWymeEQ" rel="nofollow noreferrer">https://codepen.io/Adriantango/pen/MWymeEQ</a></p>