fixing refresh & sorting manage groups

src/pages/groups/Column.tsx

@@ -1,5 +1,8 @@
 import { KeenIcon } from '@/components';
+import { Button } from '@/components/ui/button';
 import { ColumnDef } from '@tanstack/react-table';
+import { ArrowUpDown } from 'lucide-react';
+import moment from 'moment';
 
 export type Group = {
   no: number;
@@ -12,27 +15,81 @@ export type Group = {
 export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Group>[] => [
   {
     accessorKey: 'no',
-    header: 'ID'
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          ID
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
   },
   {
     accessorKey: 'created_at',
-    header: 'Created Date',
-    cell: ({ row }) => new Date(row.original.created_at).toLocaleDateString()
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Created Date
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss')
   },
   {
     accessorKey: 'name',
-    header: 'Name'
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Name
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
   },
   {
     accessorKey: 'status',
-    header: 'Status'
+    header: 'Status',
+    cell: ({ row }) => {
+      const isActive = row.original.status === 'Y';
+
+      return (
+        <span
+          className={`px-2 py-1 text-xs font-semibold rounded-full ${
+            isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+          }`}
+        >
+          {isActive ? 'Active' : 'inactive'}
+        </span>
+      );
+    }
   },
   {
     accessorKey: 'description',
-    header: 'Description'
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Description
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
   },
   {
     id: 'actions',
+    header: 'Actions',
     cell: ({ row }) => {
       const dataMembers = row.original;