Data Table Remota: Paginación, Ordenamiento y Búsqueda Debounced

En aplicaciones empresariales con miles o millones de registros, cargar todo el conjunto de datos en el navegador del cliente es inviable. Esta receta demuestra la arquitectura recomendada para implementar paginación server-side, ordenamiento remoto y búsqueda en tiempo real con debounce utilizando PxDataTable.

---

Demostración Interactiva

Interactúa con la tabla a continuación. Los datos se consultan con un retardo simulado de 400ms mostrando el estado de carga (loading), conservando los parámetros de consulta y recalculando el total de páginas dinámicamente.

Tabla Remota con Búsqueda y Paginación Asíncrona

Registros filtrados: 12

Usuario	Rol / Puesto	Departamento	Estado	Ventas ($)
No data available

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { PxDataTable, PxBadge } from 'praxis-vue-ui'

interface UserItem {
  id: number
  name: string
  role: string
  department: string
  status: 'Active' | 'Away' | 'Inactive'
  sales: number
}

const columns = [
  { field: 'name', header: 'Usuario', sortable: true },
  { field: 'role', header: 'Rol / Puesto', sortable: true },
  { field: 'department', header: 'Departamento', sortable: true },
  { field: 'status', header: 'Estado', sortable: false },
  { field: 'sales', header: 'Ventas ($)', sortable: true },
]

// Estado remoto
const items = ref<UserItem[]>([])
const totalRecords = ref(0)
const isLoading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const searchQuery = ref('')
const sortField = ref('name')
const sortOrder = ref(1)

let debounceTimer: ReturnType<typeof setTimeout> | null = null

// Función de consulta a tu backend (API REST / GraphQL)
async function fetchFromApi(params: {
  page: number
  limit: number
  search: string
  sort: string
  order: number
}) {
  isLoading.value = true
  try {
    const query = new URLSearchParams({
      page: String(params.page),
      limit: String(params.limit),
      q: params.search,
      sortBy: params.sort,
      order: params.order === 1 ? 'asc' : 'desc'
    })
    const res = await fetch(`/api/users?${query}`)
    const json = await res.json()
    items.value = json.data
    totalRecords.value = json.total
  } finally {
    isLoading.value = false
  }
}

function loadData() {
  fetchFromApi({
    page: currentPage.value,
    limit: pageSize.value,
    search: searchQuery.value,
    sort: sortField.value,
    order: sortOrder.value
  })
}

function handlePageChange(event: { page: number; rows: number }) {
  currentPage.value = event.page
  pageSize.value = event.rows
  loadData()
}

function handleSort(event: { field: string; order: number }) {
  sortField.value = event.field
  sortOrder.value = event.order
  currentPage.value = 1
  loadData()
}

function handleSearch(e: Event) {
  if (debounceTimer) clearTimeout(debounceTimer)
  searchQuery.value = (e.target as HTMLInputElement).value
  debounceTimer = setTimeout(() => {
    currentPage.value = 1
    loadData()
  }, 300)
}

onMounted(() => {
  loadData()
})
</script>

<template>
  <div class="space-y-4">
    <!-- Barra de Búsqueda -->
    <div class="flex justify-between items-center">
      <input
        type="search"
        :value="searchQuery"
        placeholder="Buscar usuarios..."
        class="px-3 py-1.5 text-sm rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900"
        @input="handleSearch"
      />
      <span class="text-xs text-slate-500">
        Total: {{ totalRecords }} registros
      </span>
    </div>

    <!-- Data Table Reactiva -->
    <PxDataTable
      :items="items"
      :columns="columns"
      :loading="isLoading"
      :rows="pageSize"
      :rows-per-page-options="[10, 25, 50]"
      :sort-field="sortField"
      :sort-order="sortOrder"
      @page="handlePageChange"
      @sort="handleSort"
    >
      <!-- Renderizado Personalizado con Slots -->
      <template #status="{ row }">
        <PxBadge :variant="row.status === 'Active' ? 'success' : 'neutral'">
          {{ row.status }}
        </PxBadge>
      </template>

      <template #sales="{ row }">
        <span class="font-mono font-semibold text-emerald-600 dark:text-emerald-400">
          ${{ row.sales.toLocaleString() }}
        </span>
      </template>
    </PxDataTable>
  </div>
</template>

---

Paso a Paso: Implementación

1. Definición del Contrato de Estado

Para sincronizar la vista con el servidor, mantén variables reactivas dedicadas:

• currentPage: Página activa (1-indexed).
• pageSize: Cantidad de filas por página (10, 25, 50).
• sortField y sortOrder: Columna y dirección (1 para ascendente, -1 para descendente).
• isLoading: Para mostrar el estado visual esqueleto de PxDataTable.

2. Evitar peticiones redundantes con Debounce

Al escribir en el campo de búsqueda, nunca dispares una solicitud HTTP por cada tecla pulsada. Utiliza un temporizador o useDebounceFn de @vueuse/core con un retraso estándar de 300ms:

import { useDebounceFn } from '@vueuse/core'

const debouncedSearch = useDebounceFn((term: string) => {
  searchQuery.value = term
  currentPage.value = 1 // Reinicia a la primera página tras filtrar
  loadData()
}, 300)

3. Escuchar los Eventos @page y @sort

PxDataTable emite eventos limpios con el nuevo payload cada vez que el usuario interactúa:

• @page="{ page, rows }": Cuando cambia de página o altera el selector de filas.
• @sort="{ field, order }": Al pulsar sobre cualquier cabecera con sortable: true.

Cancelación de Solicitudes Anteriores (AbortController)

Si el usuario escribe rápidamente o cambia de página varias veces seguidas, es una buena práctica utilizar AbortController para abortar cualquier petición en vuelo y evitar condiciones de carrera (race conditions).