Composable for Client-Side Filtering and Sorting Data

// composables/useFilteredAndSortedData.js
import { ref, computed } from 'vue';

export function useFilteredAndSortedData(initialData) {
  const data = ref(initialData);
  const searchTerm = ref('');
  const sortKey = ref(null);
  const sortOrder = ref(1); // 1 for ascending, -1 for descending

  const filteredData = computed(() => {
    if (!searchTerm.value) {
      return data.value;
    }
    const searchLower = searchTerm.value.toLowerCase();
    return data.value.filter(item =>
      Object.values(item).some(value =>
        String(value).toLowerCase().includes(searchLower)
      )
    );
  });

  const sortedAndFilteredData = computed(() => {
    let currentData = [...filteredData.value];
    if (sortKey.value) {
      currentData.sort((a, b) => {
        const valA = a[sortKey.value];
        const valB = b[sortKey.value];

        if (typeof valA === 'string' && typeof valB === 'string') {
          return valA.localeCompare(valB) * sortOrder.value;
        }
        return (valA - valB) * sortOrder.value;
      });
    }
    return currentData;
  });

  const setSort = (key) => {
    if (sortKey.value === key) {
      sortOrder.value *= -1; // Toggle order if same key
    } else {
      sortKey.value = key;
      sortOrder.value = 1; // Default to ascending for new key
    }
  };

  return {
    data, // Original data (can be updated)
    searchTerm,
    sortKey,
    sortOrder,
    sortedAndFilteredData,
    setSort
  };
}

// MyDataTable.vue
<template>
  <div>
    <input v-model="searchTerm" placeholder="Search..." />
    <button @click="setSort('name')">Sort by Name</button>
    <button @click="setSort('age')">Sort by Age</button>

    <ul>
      <li v-for="item in sortedAndFilteredData" :key="item.id">
        {{ item.name }} ({{ item.age }})
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useFilteredAndSortedData } from '@/composables/useFilteredAndSortedData'; // Adjust path

const initialUsers = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 24 },
  { id: 3, name: 'Charlie', age: 35 },
  { id: 4, name: 'David', age: 24 },
];

const { searchTerm, setSort, sortedAndFilteredData } = useFilteredAndSortedData(initialUsers);
</script>