🏠 Home / Hub

🔷 Quasar Lesson 05 — QTable & Data Display

← Back to Quasar Menu  |  🏠 Hub

1. QTable — Basic Setup

<template>
  <q-table
    title="Students"
    :rows="rows"
    :columns="columns"
    row-key="id"
  />
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { name: 'id',    label: 'ID',    field: 'id',    sortable: true },
        { name: 'name',  label: 'Name',  field: 'name',  sortable: true, align: 'left' },
        { name: 'city',  label: 'City',  field: 'city' },
        { name: 'score', label: 'Score', field: 'score', sortable: true,
          format: (val) => `${val}%` }
      ],
      rows: [
        { id: 1, name: 'Ko Min',  city: 'Yangon',   score: 95 },
        { id: 2, name: 'Ma Aye',  city: 'Mandalay', score: 87 },
        { id: 3, name: 'Ko Kyaw', city: 'Bago',     score: 73 }
      ]
    }
  }
}
</script>

2. Search, Pagination & Selection

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  :filter="filter"
  selection="multiple"
  v-model:selected="selected"
  :pagination="pagination"
>
  <template v-slot:top-right>
    <q-input
      dense debounce="300"
      v-model="filter"
      placeholder="Search..."
    >
      <template v-slot:append>
        <q-icon name="search" />
      </template>
    </q-input>
  </template>
</q-table>

// data()
filter: '',
selected: [],
pagination: { rowsPerPage: 10 }

3. Custom Cell Slots

<q-table :rows="rows" :columns="columns" row-key="id">

  <!-- Custom cell for "active" column -->
  <template v-slot:body-cell-active="props">
    <q-td :props="props">
      <q-badge :color="props.value ? 'positive' : 'negative'">
        {{ props.value ? 'Active' : 'Inactive' }}
      </q-badge>
    </q-td>
  </template>

  <!-- Actions column -->
  <template v-slot:body-cell-actions="props">
    <q-td :props="props">
      <q-btn flat round icon="edit"   @click="editRow(props.row)"   />
      <q-btn flat round icon="delete" color="negative"
        @click="deleteRow(props.row.id)" />
    </q-td>
  </template>

</q-table>
v-slot:body-cell-[fieldname] — ထိုင် column အတွက် custom HTML ထည့်
props.row = တစ်ကြောင်း row data အကုန်  |  props.value = ထို cell တန်ဖိုး

4. QList — List Display

<q-list bordered separator>
  <q-item v-for="user in users" :key="user.id" clickable>
    <q-item-section avatar>
      <q-avatar color="primary" text-color="white">
        {{ user.name[0] }}
      </q-avatar>
    </q-item-section>

    <q-item-section>
      <q-item-label>{{ user.name }}</q-item-label>
      <q-item-label caption>{{ user.city }}</q-item-label>
    </q-item-section>

    <q-item-section side>
      <q-badge color="teal">{{ user.score }}</q-badge>
    </q-item-section>
  </q-item>
</q-list>

← Quasar 04  |  Next: Quasar 06 → Plugins →

📌 Study Checklist