chore(deps): Bump @tanstack/react-table from 8.21.3 to 9.0.0 in /frontend

frontend/eslint.config.js

@@ -45,9 +45,9 @@ export default tseslint.config(
           paths: [
             {
               name: '@tanstack/react-table',
-              importNames: ['useReactTable'],
+              importNames: ['useTable'],
               message:
-                'Call useTableState from @/components/data-table/useTableState instead. It wraps useReactTable so getRowId cannot fall back to TanStack’s index default (#307, #359).',
+                'Call useTableState from @/components/data-table/useTableState instead. It wraps useTable so getRowId cannot fall back to TanStack’s index default (#307, #359).',
             },
           ],
         },
@@ -59,10 +59,6 @@ export default tseslint.config(
     files: ['src/components/data-table/useTableState.ts'],
     rules: {
       'no-restricted-imports': 'off',
-      // React Compiler flags useReactTable as an incompatible library. This
-      // disable used to be repo-wide because the call sites were scattered;
-      // confining them to one file is what lets it narrow to one file.
-      'react-hooks/incompatible-library': 'off',
     },
   },
   {

frontend/package.json

@@ -36,7 +36,7 @@
     "@radix-ui/react-slot": "^1.3.3",
     "@shadcn/react": "^0.2.1",
     "@tanstack/react-query": "^5.101.4",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.0.0",
     "@tanstack/react-virtual": "^3.13.23",
     "ai": "^7.0.31",
     "class-variance-authority": "^0.7.1",

frontend/src/components/data-table/DataTable.tsx

@@ -1,9 +1,9 @@
 import { Fragment, type ReactNode } from "react";
-import {
-  flexRender,
-  type Row,
-  type Table as TanstackTable,
-} from "@tanstack/react-table";
+import { flexRender, type RowData } from "@tanstack/react-table";
+import type {
+  ComicarrRow,
+  ComicarrTable,
+} from "@/components/data-table/useTableState";
 import {
   Table,
   TableBody,
@@ -14,14 +14,14 @@ import {
 } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
 
-interface DataTableProps<TData> {
-  table: TanstackTable<TData>;
+interface DataTableProps<TData extends RowData> {
+  table: ComicarrTable<TData>;
   onRowClick?: (row: TData) => void;
-  renderSubRow?: (row: Row<TData>, colSpan: number) => ReactNode;
+  renderSubRow?: (row: ComicarrRow<TData>, colSpan: number) => ReactNode;
   className?: string;
 }
 
-export function DataTable<TData>({
+export function DataTable<TData extends RowData>({
   table,
   onRowClick,
   renderSubRow,

frontend/src/components/data-table/DataTableSortHeader.tsx

@@ -1,15 +1,19 @@
-import type { Column } from "@tanstack/react-table";
+import type { CellData, Column, RowData } from "@tanstack/react-table";
 import { ChevronUp, ChevronDown, ChevronsUpDown } from "lucide-react";
+import type { ComicarrTableFeatures } from "@/components/data-table/useTableState";
 
-interface DataTableSortHeaderProps<TData> {
-  column: Column<TData>;
+interface DataTableSortHeaderProps<
+  TData extends RowData,
+  TValue extends CellData,
+> {
+  column: Column<ComicarrTableFeatures, TData, TValue>;
   title: string;
 }
 
-export function DataTableSortHeader<TData>({
-  column,
-  title,
-}: DataTableSortHeaderProps<TData>) {
+export function DataTableSortHeader<
+  TData extends RowData,
+  TValue extends CellData,
+>({ column, title }: DataTableSortHeaderProps<TData, TValue>) {
   if (!column.getCanSort()) {
     return <span>{title}</span>;
   }