Remote Data Table: Server-Side Pagination, Sorting & Debounced Search

In enterprise applications with thousands or millions of records, loading the entire dataset into the client browser is unfeasible. This recipe demonstrates the recommended architecture for implementing server-side pagination, remote sorting, and real-time debounced search using PxDataTable.

---

Interactive Demonstration

Interact with the table below. The data is fetched with a simulated 400ms network delay, displaying the loading skeleton state (loading), preserving query parameters, and dynamically updating total count and pages.

Remote Table with Async Search and Pagination

Filtered records: 12

User	Role / Position	Department	Status	Sales ($)
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: 'User', sortable: true },
  { field: 'role', header: 'Role / Position', sortable: true },
  { field: 'department', header: 'Department', sortable: true },
  { field: 'status', header: 'Status', sortable: false },
  { field: 'sales', header: 'Sales ($)', sortable: true },
]

// Remote state
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

// Backend fetcher (REST API / 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">
    <!-- Search Bar -->
    <div class="flex justify-between items-center">
      <input
        type="search"
        :value="searchQuery"
        placeholder="Search users..."
        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 }} records
      </span>
    </div>

    <!-- Reactive Data Table -->
    <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"
    >
      <!-- Custom Slot Renderers -->
      <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>

---

Step-by-Step Implementation

1. State Contract Definition

To synchronize the table view with the server, maintain dedicated reactive variables:

• currentPage: Current active page (1-indexed).
• pageSize: Number of rows per page (10, 25, 50).
• sortField & sortOrder: Active sorting column and direction (1 for ascending, -1 for descending).
• isLoading: Triggers the built-in skeleton loading state of PxDataTable.

2. Avoid Redundant Queries with Debounce

When typing in the search input, never dispatch an HTTP request on every keystroke. Use a timer or useDebounceFn from @vueuse/core with a standard 300ms delay:

import { useDebounceFn } from '@vueuse/core'

const debouncedSearch = useDebounceFn((term: string) => {
  searchQuery.value = term
  currentPage.value = 1 // Reset to first page when query changes
  loadData()
}, 300)

3. Listening to @page and @sort Events

PxDataTable emits clean payloads whenever the user interacts:

• @page="{ page, rows }": When changing page number or changing rows per page.
• @sort="{ field, order }": When clicking any header with sortable: true.

Request Cancellation (AbortController)

If users rapidly type or switch pages, utilize an AbortController to abort any pending in-flight HTTP request to prevent race conditions.