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>