Building a Search, Sort, Filter & Pagination Feature in Vue 3 with a Node.js Backend using Composition API

<!-- src/App.vue -->
<template>
  <div class="app">
    <h1>User Management</h1>
    <SearchBar :setSearchTerm="setSearchTerm" />
    <UserTable :users="currentUsers" />
    <Pagination 
      :usersPerPage="usersPerPage" 
      :totalUsers="filteredUsers.length" 
      :paginate="paginate" 
      :currentPage="currentPage" 
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'; // Import ref, onMounted, and computed from Vue
import axios from 'axios'; // Import Axios for data fetching
import SearchBar from './components/SearchBar.vue'; // Import SearchBar component
import UserTable from './components/UserTable.vue'; // Import UserTable component
import Pagination from './components/Pagination.vue'; // Import Pagination component

const users = ref([]); // Ref to hold all user data
const filteredUsers = ref([]); // Ref to hold filtered user data
const searchTerm = ref(''); // Ref to hold search term
const currentPage = ref(1); // Ref to hold current page number
const usersPerPage = ref(10); // Ref to hold number of users per page

// Fetch data from Node.js backend
const fetchUsers = async () => {
  try {
    const response = await axios.get('http://localhost:5000/users'); // Fetch users from Node.js backend
    users.value = response.data; // Set users ref with fetched data
    filteredUsers.value = response.data; // Set filtered users ref with fetched data
  } catch (error) {
    console.error('Error fetching data', error); // Log any error that occurs during data fetching
  }
};

// Call fetchUsers function on component mount
onMounted(fetchUsers);

// Watch searchTerm and users for changes and filter users
const setSearchTerm = (term) => {
  searchTerm.value = term; // Set search term
  const results = users.value.filter(user =>
    user.name.toLowerCase().includes(searchTerm.value.toLowerCase()) || // Check if name includes search term
    user.email.toLowerCase().includes(searchTerm.value.toLowerCase()) || // Check if email includes search term
    user.phone.includes(searchTerm.value) || // Check if phone includes search term
    user.address.toLowerCase().includes(searchTerm.value.toLowerCase()) // Check if address includes search term
  );
  filteredUsers.value = results; // Set filtered users ref with results
};

// Get current users for pagination
const indexOfLastUser = computed(() => currentPage.value * usersPerPage.value); // Calculate index of last user on current page
const indexOfFirstUser = computed(() => indexOfLastUser.value - usersPerPage.value); // Calculate index of first user on current page
const currentUsers = computed(() => filteredUsers.value.slice(indexOfFirstUser.value, indexOfLastUser.value)); // Slice filtered users array to get current users

// Change page
const paginate = (pageNumber) => currentPage.value = pageNumber; // Function to set current page
</script>

<style>
/* Add your CSS styles here */
</style>