Adicione primeiros dados da tabela

src/routes/videos/index.vue

@@ -1,26 +1,42 @@
 <template>
   <div class="user-list q-pa-md">
     <q-card flat bordered class="q-pa-sm q-mb-lg">
-      <div class="row">
-        <div class="col-4">
-          <TextField label="Nome" required />
+      <div class="row q-pa-sm q-gutter-sm">
+        <div class="col-3">
+          <TextField label="Título" />
+        </div>
+        <div class="col-3">
+          <TextField label="URL" />
+        </div>
+        <div class="col-3">
+          <TextField label="VideoID" />
         </div>
       </div>
 
-      <div class="row">
-        <div class="col-4">
-          <Button label="Buscar" @click="handleSearch" />
+      <div class="row q-pa-sm">
+        <div class="col-6">
+          <Button
+            label="Buscar"
+            :loading="loading"
+            @click="handleSearch"
+            fullWidth
+          />
         </div>
       </div>
     </q-card>
 
-    <Table :columns="columns" :rows="rows" :pagination="pagination">
+    <Table
+      :columns="columns"
+      :rows="rows"
+      :pagination="pagination"
+      row-key="id"
+    >
       <template #no-data>
         <div
           class="full-width row flex-center q-gutter-sm"
           style="font-size: 1.3em"
         >
-          <span> Infelizmente, não há dados para serem mostrados </span>
+          <span> Não há vídeos </span>
         </div>
       </template>
     </Table>
@@ -31,42 +47,16 @@
 import Button from "@components/Button";
 import Table from "@components/Table";
 import TextField from "@components/TextField";
+
 import { API } from "@config/axios";
+import { getErrorMessage } from "@utils/axios";
 
 const columns = [
   {
-    name: "name",
-    required: true,
-    label: "Dessert (100g serving)",
+    name: "id",
+    label: "Identificador",
     align: "left",
-    field: (row) => row.name,
-    format: (val) => `${val}`,
-    sortable: true,
-  },
-  {
-    name: "calories",
-    align: "center",
-    label: "Calories",
-    field: "calories",
-    sortable: true,
-  },
-  { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
-  { name: "carbs", label: "Carbs (g)", field: "carbs" },
-  { name: "protein", label: "Protein (g)", field: "protein" },
-  { name: "sodium", label: "Sodium (mg)", field: "sodium" },
-  {
-    name: "calcium",
-    label: "Calcium (%)",
-    field: "calcium",
-    sortable: true,
-    sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
-  },
-  {
-    name: "iron",
-    label: "Iron (%)",
-    field: "iron",
-    sortable: true,
-    sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
+    field: "id",
   },
 ];
 
@@ -81,21 +71,31 @@ export default {
     return {
       columns,
       rows: [],
+      loading: false,
       pagination: {
-        currentPage: 1,
+        page: 1,
         totalPages: 1,
-        totalItems: 10,
+        total: 10,
+        perPage: 10,
       },
     };
   },
   methods: {
     async handleSearch() {
       try {
+        this.loading = true;
+
         const { data } = await API.get("/videos");
 
-        console.log(data);
+        this.rows = data.content;
+        this.pagination = data.pagination;
       } catch (error) {
-        console.log(error);
+        this.$q.notify({
+          type: "negative",
+          message: getErrorMessage(error, "Erro ao buscar vídeos"),
+        });
+      } finally {
+        this.loading = false;
       }
     },
   },