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">
import type Jogo from '@/modelo/Jogo';
import { Column, DataTable } from 'primevue';
import { Column, DataTable, InputText, type DataTableFilterMeta } from 'primevue';
import { ref } from 'vue';
defineProps<{
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>
<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" />
<Column field="preco" sortable header="Preço" />
<DataTable v-model:filters="filtros" :value="jogos" sort-mode="multiple" data-key="id"
filter-display="row" :globalFilterFields="['nome', 'estado', 'loja', 'preco']">
<Column field="nome" sortable header="Nome">
<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>
</template>