Tabela básica

src/frontend/src/App.vue

@@ -1,47 +1,20 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+import { ref, type Ref } from 'vue';
+import TabelaDeJogos from './components/TabelaDeJogos.vue';
+import type Jogo from './modelo/Jogo';
+import { Button } from 'primevue';
+
+const jogos: Ref<Jogo[]> = ref([]);
+
+async function atualizar() {
+  const response = await fetch('http://localhost:8080/jogos');
+  jogos.value = await response.json() as Jogo[];
+}
+
+atualizar();
+
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <TabelaDeJogos :jogos="jogos" />
 </template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>

src/frontend/src/components/TabelaDeJogos.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type Jogo from '@/modelo/Jogo';
+import { Column, DataTable } from 'primevue';
+
+defineProps<{
+  jogos: Jogo[]
+}>();
+</script>
+
+<template>
+  <DataTable :value="jogos" sort-mode="multiple">
+    <Column field="id" sortable header="ID" />
+    <Column field="nome" sortable header="Nome" />
+    <Column field="estado" sortable header="Estado" />
+  </DataTable>
+
+</template>

src/frontend/src/main.ts

@@ -2,5 +2,9 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'
+import PrimeVue from 'primevue/config'
+import Aura from '@primeuix/themes/aura'
 
-createApp(App).mount('#app')
+createApp(App)
+  .use(PrimeVue, { theme: { preset: Aura } })
+  .mount('#app');