Add sorting functionality to DataTable component with visual indicators for column headers

src/components/DataTable.jsx

@@ -6,6 +6,7 @@ const DataTable = () => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
 
   // Mock data for demonstration - replace with actual MongoDB data
   const mockData = [
@@ -24,6 +25,48 @@ const DataTable = () => {
     }, 1000);
   }, []);
 
+  // Sorting function
+  const sortData = (key) => {
+    let direction = 'asc';
+    
+    // If clicking the same column, toggle direction
+    if (sortConfig.key === key && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    
+    setSortConfig({ key, direction });
+  };
+
+  // Get sorted data
+  const getSortedData = () => {
+    if (!sortConfig.key) return data;
+
+    return [...data].sort((a, b) => {
+      let aValue = a[sortConfig.key];
+      let bValue = b[sortConfig.key];
+
+      // Handle string comparison (case-insensitive)
+      if (typeof aValue === 'string') {
+        aValue = aValue.toLowerCase();
+        bValue = bValue.toLowerCase();
+      }
+
+      if (aValue < bValue) {
+        return sortConfig.direction === 'asc' ? -1 : 1;
+      }
+      if (aValue > bValue) {
+        return sortConfig.direction === 'asc' ? 1 : -1;
+      }
+      return 0;
+    });
+  };
+
+  // Get sort indicator for column headers
+  const getSortIndicator = (key) => {
+    if (sortConfig.key !== key) return '↕️';
+    return sortConfig.direction === 'asc' ? '↑' : '↓';
+  };
+
   const fetchFromMongoDB = async () => {
     try {
       setLoading(true);
@@ -57,6 +100,8 @@ const DataTable = () => {
     );
   }
 
+  const sortedData = getSortedData();
+
   return (
     <div className="w-full mx-auto p-6">
       <div className="flex justify-between items-center mb-6">
@@ -71,14 +116,34 @@ const DataTable = () => {
           <TableCaption>A list of users from the database.</TableCaption>
           <TableHeader>
             <TableRow>
-              <TableHead>ID</TableHead>
-              <TableHead>Name</TableHead>
-              <TableHead>Email</TableHead>
-              <TableHead>Role</TableHead>
+              <TableHead 
+                className="cursor-pointer hover:bg-muted/50 transition-colors"
+                onClick={() => sortData('id')}
+              >
+                ID {getSortIndicator('id')}
+              </TableHead>
+              <TableHead 
+                className="cursor-pointer hover:bg-muted/50 transition-colors"
+                onClick={() => sortData('name')}
+              >
+                Name {getSortIndicator('name')}
+              </TableHead>
+              <TableHead 
+                className="cursor-pointer hover:bg-muted/50 transition-colors"
+                onClick={() => sortData('email')}
+              >
+                Email {getSortIndicator('email')}
+              </TableHead>
+              <TableHead 
+                className="cursor-pointer hover:bg-muted/50 transition-colors"
+                onClick={() => sortData('role')}
+              >
+                Role {getSortIndicator('role')}
+              </TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
-            {data.map((user) => (
+            {sortedData.map((user) => (
               <TableRow key={user.id}>
                 <TableCell className="font-medium">{user.id}</TableCell>
                 <TableCell>{user.name}</TableCell>