Update Tanstack table to v9

package.json

@@ -23,7 +23,7 @@
     "@tanstack/react-form": "^1.33.0",
     "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-router": "^1.170.17",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.1.1",
     "axios": "^1.18.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

pnpm-workspace.yaml

@@ -6,3 +6,7 @@ trustLockfile: true
 allowBuilds:
   msgpackr-extract: false
   msw: false
+
+minimumReleaseAgeExclude:
+  - '@tanstack/react-table@9.1.1'
+  - '@tanstack/table-core@9.1.1'

src/components/ui/data-table.tsx

@@ -1,13 +1,20 @@
 import {
+  type CellData,
   type ColumnDef,
   type Row,
   type RowData,
   type SortingState,
+  type TableFeatures,
   type TableMeta,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  sortFn_datetime,
+  sortFn_text,
+  tableFeatures,
+  useTable,
 } from "@tanstack/react-table";
 import { memo, useState } from "react";
 
@@ -20,24 +27,48 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
+
+interface DataTableProps<TData extends RowData> {
+  columns: ColumnDef<typeof dataTableFeatures, TData>[];
+  data: TData[];
+  meta?: TableMeta<typeof dataTableFeatures, TData>;
+}
+
 declare module "@tanstack/react-table" {
-  interface ColumnMeta<TData extends RowData, TValue> {
+  interface ColumnMeta<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+    TValue extends CellData = CellData,
+  > {
     className?: string;
   }
 }
 
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[];
-  data: TData[];
-  meta?: TableMeta<TData>;
-}
+export const dataTableFeatures = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    basic: sortFn_basic,
+    datetime: sortFn_datetime,
+    text: sortFn_text,
+  },
+});
+
+const DataTableRow = memo(
+  DataTableRowImpl,
+  (prev, next) => prev.row.original === next.row.original && prev.meta === next.meta,
+) as typeof DataTableRowImpl;
 
-function DataTableRowImpl<TData>({
+function DataTableRowImpl<TData extends RowData>({
   row,
-}: Readonly<{ meta: TableMeta<TData> | undefined ; row: Row<TData> }>) {
+}: Readonly<{
+  meta: TableMeta<typeof dataTableFeatures, TData> | undefined;
+  row: Row<typeof dataTableFeatures, TData>;
+}>) {
   return (
     <TableRow>
-      {row.getVisibleCells().map((cell) => (
+      {row.getAllCells().map((cell) => (
         <TableCell key={cell.id} className={cell.column.columnDef.meta?.className}>
           {flexRender(cell.column.columnDef.cell, cell.getContext())}
         </TableCell>
@@ -46,24 +77,18 @@ function DataTableRowImpl<TData>({
   );
 }
 
-const DataTableRow = memo(
-  DataTableRowImpl,
-  (prev, next) => prev.row.original === next.row.original && prev.meta === next.meta,
-) as typeof DataTableRowImpl;
-
-export function DataTable<TData, TValue>({
+export function DataTable<TData extends RowData>({
   columns,
   data,
   meta,
-}: Readonly<DataTableProps<TData, TValue>>) {
+}: Readonly<DataTableProps<TData>>) {
   const [sorting, setSorting] = useState<SortingState>([]);
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataTableFeatures,
     data,
     columns,
     meta,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     onSortingChange: setSorting,
     state: { sorting },
   });

src/routes/dashboard/admin/members.tsx

@@ -1,6 +1,11 @@
 import { queryOptions, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import { type ColumnDef, type RowData, type TableMeta } from "@tanstack/react-table";
+import {
+  type ColumnDef,
+  type RowData,
+  type TableFeatures,
+  type TableMeta,
+} from "@tanstack/react-table";
 import axios from "axios";
 import {
   type LucideIcon,
@@ -27,7 +32,7 @@ import {
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { DataTable } from "@/components/ui/data-table";
+import { type dataTableFeatures, DataTable } from "@/components/ui/data-table";
 import {
   Dialog,
   DialogContent,
@@ -110,7 +115,7 @@ interface RoleModifyVars {
 }
 
 declare module "@tanstack/react-table" {
-  interface TableMeta<TData extends RowData> {
+  interface TableMeta<TFeatures extends TableFeatures, TData extends RowData> {
     members?: MembersMeta;
   }
 }
@@ -172,7 +177,7 @@ const EMPTY_ROLES: Role[] = [];
 const ACTIONS_TRIGGER = <Button variant="ghost" size="icon-sm" className="text-brand-text-sub" />;
 const REGISTERED_FMT = new Intl.DateTimeFormat("en-US", { month: "short", year: "numeric" });
 
-const MEMBER_COLUMNS: ColumnDef<AdminMember>[] = [
+const MEMBER_COLUMNS: ColumnDef<typeof dataTableFeatures, AdminMember>[] = [
   {
     id: "member",
     header: "Member",
@@ -479,7 +484,7 @@ function MembersPage() {
     [rows, page],
   );
 
-  const tableMeta = useMemo<TableMeta<AdminMember>>(
+  const tableMeta = useMemo<TableMeta<typeof dataTableFeatures, AdminMember>>(
     () => ({ members: { meId, onManage: openManage, onAskDelete: askDelete } }),
     [meId, openManage, askDelete],
   );

src/routes/dashboard/admin/tags.tsx

@@ -1,7 +1,12 @@
 import { useForm } from "@tanstack/react-form";
 import { queryOptions, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import { type ColumnDef, type RowData, type TableMeta } from "@tanstack/react-table";
+import {
+  type ColumnDef,
+  type RowData,
+  type TableFeatures,
+  type TableMeta,
+} from "@tanstack/react-table";
 import axios from "axios";
 import {
   AlertTriangle,
@@ -28,7 +33,7 @@ import {
 } from "@/components/app/sudo-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { DataTable } from "@/components/ui/data-table";
+import { type dataTableFeatures, DataTable } from "@/components/ui/data-table";
 import {
   Dialog,
   DialogContent,
@@ -107,7 +112,7 @@ interface EditVars extends TagVars {
 }
 
 declare module "@tanstack/react-table" {
-  interface TableMeta<TData extends RowData> {
+  interface TableMeta<TFeatures extends TableFeatures, TData extends RowData> {
     tags?: TagsMeta;
   }
 }
@@ -124,7 +129,7 @@ const EMPTY_TAGS: FullTags[] = [];
 const ACTIONS_TRIGGER = <Button variant="ghost" size="icon-sm" className="text-brand-text-sub" />;
 const DESCRIPTION_MAX = 128;
 
-const TAG_COLUMNS: ColumnDef<FullTags>[] = [
+const TAG_COLUMNS: ColumnDef<typeof dataTableFeatures, FullTags>[] = [
   {
     id: "tag",
     header: "Tag",
@@ -476,7 +481,7 @@ function TagsPage() {
     () => filtered.slice((page - 1) * TABLE_PAGE_SIZE, page * TABLE_PAGE_SIZE),
     [filtered, page],
   );
-  const tableMeta = useMemo<TableMeta<FullTags>>(
+  const tableMeta = useMemo<TableMeta<typeof dataTableFeatures, FullTags>>(
     () => ({ tags: { onEdit: openEdit, onDelete: removeTag } }),
     [openEdit, removeTag],
   );

src/routes/dashboard/manage/events.tsx

@@ -7,7 +7,12 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import { type ColumnDef, type RowData, type TableMeta } from "@tanstack/react-table";
+import {
+  type ColumnDef,
+  type RowData,
+  type TableFeatures,
+  type TableMeta,
+} from "@tanstack/react-table";
 import axios from "axios";
 import { blake3 } from "hash-wasm";
 import {
@@ -34,7 +39,7 @@ import { EmptyState } from "@/components/app/dashboard-events";
 import { DataPagination } from "@/components/app/data-pagination";
 import { ThumbnailDropzone } from "@/components/app/thumbnail-dropzone";
 import { Button } from "@/components/ui/button";
-import { DataTable } from "@/components/ui/data-table";
+import { type dataTableFeatures, DataTable } from "@/components/ui/data-table";
 import { DatePicker } from "@/components/ui/date-picker";
 import {
   Dialog,
@@ -136,7 +141,7 @@ interface UndoVars {
 }
 
 declare module "@tanstack/react-table" {
-  interface TableMeta<TData extends RowData> {
+  interface TableMeta<TFeatures extends TableFeatures, TData extends RowData> {
     events?: ManageEventsMeta;
   }
 }
@@ -162,7 +167,7 @@ const EMPTY_ATTENDANCE_SUMMARY: AttendanceSummary = { planned: 0, attended: 0 };
 /// Constants — Table Columns
 
 const ACTIONS_TRIGGER = <Button variant="ghost" size="icon-sm" className="text-brand-text-sub" />;
-const EVENT_COLUMNS: ColumnDef<FullEvent>[] = [
+const EVENT_COLUMNS: ColumnDef<typeof dataTableFeatures, FullEvent>[] = [
   {
     id: "event",
     header: "Event",
@@ -771,7 +776,7 @@ function ManageEventsPage() {
     },
   });
 
-  const tableMeta = useMemo<TableMeta<FullEvent>>(
+  const tableMeta = useMemo<TableMeta<typeof dataTableFeatures, FullEvent>>(
     () => ({
       events: {
         now,

src/routes/dashboard/manage/projects.tsx

@@ -7,7 +7,12 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { type ColumnDef, type RowData, type TableMeta } from "@tanstack/react-table";
+import {
+  type ColumnDef,
+  type RowData,
+  type TableFeatures,
+  type TableMeta,
+} from "@tanstack/react-table";
 import axios from "axios";
 import { blake3 } from "hash-wasm";
 import {
@@ -40,7 +45,7 @@ import { ThumbnailDropzone } from "@/components/app/thumbnail-dropzone";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { DataTable } from "@/components/ui/data-table";
+import { type dataTableFeatures, DataTable } from "@/components/ui/data-table";
 import {
   Dialog,
   DialogContent,
@@ -143,7 +148,7 @@ interface Editor {
 }
 
 declare module "@tanstack/react-table" {
-  interface TableMeta<TData extends RowData> {
+  interface TableMeta<TFeatures extends TableFeatures, TData extends RowData> {
     manage?: ManageProjectsMeta;
   }
 }
@@ -216,7 +221,7 @@ const JOIN_POLICIES = Object.keys(JOIN_POLICY_META) as JoinPolicy[];
 const ACTIONS_TRIGGER = (
   <Button variant="ghost" size="icon-sm" className="relative text-brand-text-sub" />
 );
-const PROJECT_COLUMNS: ColumnDef<FullProject>[] = [
+const PROJECT_COLUMNS: ColumnDef<typeof dataTableFeatures, FullProject>[] = [
   {
     id: "project",
     header: "Project",
@@ -910,7 +915,7 @@ function ManageProjectsPage() {
     [form],
   );
 
-  const tableMeta = useMemo<TableMeta<FullProject>>(
+  const tableMeta = useMemo<TableMeta<typeof dataTableFeatures, FullProject>>(
     () => ({
       manage: {
         invites,