I use PrimeVue 3.52.0 for different components. Now i have big problems with DataTables from PrimeVue. They got really slow if the dataset grow. A Datatable load 2 seconds for 2000 rows. If i use an simple vue native table, it loads in ms even with a simple global array filter, so it doesnt depend on the filter. I read, that sometimes it depends on some attributes which should set, so here is my code:
<template>
<DataTable
v-model:filters="filters"
:value="addresses"
:globalFilterFields="['street', 'city']"
stripedRows
scrollable
tableStyle="min-width: 50rem"
scrollHeight="20em"
>
<InputText v-model="filters['global'].value" placeholder="Global Search" />
<Column field="street" header="Straße" sortable>
</Column>
<Column field="city" header="Stadt" sortable></Column>
</DataTable>
</template>
<script setup>
import { FilterMatchMode } from 'primevue/api';
import { ref, onBeforeMount } from 'vue';
import getFromApi from '../service/Api.js';
const filters = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS }
});
const addresses = ref([]);
async function getAddresses() {
try {
const data = await getFromApi('/address', '?id=all');
addresses.value = data.address.slice(0, 200);
} catch (error) {
console.error('Error fetching addresses:', error);
}
}
onBeforeMount(() => {
getAddresses();
});
</script>
<style scoped>
</style>
Maybe someone have an idea or a alternative.
If i use an simple vue native table, it loads in ms even with a simple global array filter.
I do not see any pagination in your code. 2k is a lot and hard to process for the end-user. Introduce pagination with max. 20 entries and the performance will go up too. See the official Primevue/DataTable/Pagination documentation for more.