Improved the sorting and filtering for the Student Performance page

src/components/List.tsx

@@ -1,10 +1,11 @@
-import {Column, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import {Column, flexRender, getCoreRowModel, getSortedRowModel, useReactTable} from "@tanstack/react-table";
 
 export default function List<T>({data, columns}: {data: T[]; columns: any[]}) {
 	const table = useReactTable({
 		data,
 		columns: columns,
 		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
 	});
 
 	return (
@@ -13,8 +14,22 @@ export default function List<T>({data, columns}: {data: T[]; columns: any[]}) {
 				{table.getHeaderGroups().map((headerGroup) => (
 					<tr key={headerGroup.id}>
 						{headerGroup.headers.map((header) => (
-							<th className="p-4 text-left" key={header.id}>
-								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+							<th key={header.id} colSpan={header.colSpan}>
+								{header.isPlaceholder ? null : (
+									<>
+										<div
+											{...{
+												className: header.column.getCanSort() ? "cursor-pointer select-none py-4 text-left first:pl-4" : "",
+												onClick: header.column.getToggleSortingHandler(),
+											}}>
+											{flexRender(header.column.columnDef.header, header.getContext())}
+											{{
+												asc: " 🔼",
+												desc: " 🔽",
+											}[header.column.getIsSorted() as string] ?? null}
+										</div>
+									</>
+								)}
 							</th>
 						))}
 					</tr>

src/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }