refactor: cellRendererを使うことで画面移遷のパフォーマンスを向上

components/users/userLinkRenderer.tsx

@@ -0,0 +1,15 @@
+import {ICellRendererParams} from "ag-grid-community";
+import Link from "next/link";
+
+export default function UserLinkRenderer(param: ICellRendererParams) {
+    return (
+        <Link
+            href={`/users/${param.value}`}
+            style={{
+                width: '100%',
+            }}
+        >
+            {param.value}
+        </Link>
+    )
+}

components/users/usersAgGrid.tsx

@@ -10,6 +10,7 @@ import {User} from "@/src/models/UserModel";
 import {Class} from '@/src/models/ClassModel';
 import {Team} from "@/src/models/TeamModel";
 import {useRouter} from "next/navigation";
+import UserLinkRenderer from "@/components/users/userLinkRenderer";
 
 ModuleRegistry.registerModules([ClientSideRowModelModule]);
 
@@ -38,7 +39,11 @@ const UsersAgGrid = (props: UsersAgGridProps) => {
     const [rowData, setRowData] = useState<IRow[]>([])
     // Column Definitions: Defines & controls grid columns.
     const [colDefs,] = useState<ColDef<IRow>[]>([
-        {field: "userId", headerName: "ユーザーID"},
+        {
+            field: "userId",
+            headerName: "ユーザーID",
+            cellRenderer: UserLinkRenderer,
+        },
         {
             field: "name",
             headerName: "名前",