gustavo/organiza-jogos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mais colunas e primeiro filtro

Browse source
This commit is contained in:
Gustavo Barbosa 2025-08-12 00:45:53 -03:00
parent 6cf77fecba
commit 55a4a90edb
1 changed files with 27 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/frontend/src/components/TabelaDeJogos.vue
View file

@ -1,18 +1,39 @@
<script setup lang="ts"> <script setup lang="ts">
import type Jogo from '@/modelo/Jogo'; import type Jogo from '@/modelo/Jogo';
import { Column, DataTable } from 'primevue'; import { Column, DataTable, InputText, type DataTableFilterMeta } from 'primevue';
import { ref } from 'vue';
defineProps<{ defineProps<{
jogos: Jogo[] jogos: Jogo[]
}>(); }>();
const filtros = ref({
global: { value: null, matchMode: 'contains' },
nome: { value: null, matchMode: 'contains' },
loja: { value: null, matchMode: 'in' },
estado: { value: null, matchMode: 'contains'}
} as DataTableFilterMeta );
</script> </script>
<template> <template>
<DataTable :value="jogos" sort-mode="multiple"> <DataTable v-model:filters="filtros" :value="jogos" sort-mode="multiple" data-key="id"
<Column field="id" sortable header="ID" /> filter-display="row" :globalFilterFields="['nome', 'estado', 'loja', 'preco']">
<Column field="nome" sortable header="Nome" />
<Column field="estado" sortable header="Estado" /> <Column field="nome" sortable header="Nome">
<Column field="preco" sortable header="Preço" /> <template #filter="{ filterModel, filterCallback }">
<InputText type="text" v-model="filterModel.value" @input="filterCallback()" />
</template>
</Column>
<Column field="estado" sortable header="Estado">
</Column>
<Column field="loja" sortable header="Loja">
</Column>
<Column field="preco" sortable header="Preço">
</Column>
</DataTable> </DataTable>
</template> </template>