PrimeVue Table slow if dataset >200

Question

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.

Answer 1

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.