fix: migrate tables to TanStack React Table v9

src/components/fm.tsx

@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
 import { useMediaQuery } from "@/hooks/useMediaQuery"
+import { virtualizedTableFeatures } from "@/lib/table"
 import { copyToClipboard, fm, formatPath, fmWorker as worker } from "@/lib/utils"
 import {
     FMEntry,
@@ -84,7 +85,7 @@ export const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({
     const [dOpen, setdOpen] = useState(false)
     const [uOpen, setuOpen] = useState(false)
 
-    const columns: ColumnDef<FMEntry>[] = [
+    const columns: ColumnDef<typeof virtualizedTableFeatures, FMEntry>[] = [
         {
             id: "type",
             header: () => <span>{t("Type")}</span>,
@@ -122,7 +123,7 @@ export const FMComponent: React.FC<FMProps & JSX.IntrinsicElements["div"]> = ({
         },
     ]
 
-    const tableRowComponent = (rows: Row<FMEntry>[]) =>
+    const tableRowComponent = (rows: Row<typeof virtualizedTableFeatures, FMEntry>[]) =>
         function getTableRow(props: VirtualizedTableRowProps) {
             const index = Number(props["data-index"])
             const row = rows[index]

src/components/xui/virtulized-data-table.tsx

@@ -3,16 +3,16 @@
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { TableCell, TableHead, TableRow } from "@/components/ui/table"
 import { useMediaQuery } from "@/hooks/useMediaQuery"
+import { virtualizedTableFeatures } from "@/lib/table"
 import { cn } from "@/lib/utils"
 import {
     ColumnDef,
     Row,
+    RowData,
     SortDirection,
     SortingState,
     flexRender,
-    getCoreRowModel,
-    getSortedRowModel,
-    useReactTable,
+    useTable,
 } from "@tanstack/react-table"
 import { HTMLAttributes, JSX, forwardRef, useEffect, useRef, useState } from "react"
 import { TableVirtuoso } from "react-virtuoso"
@@ -26,7 +26,9 @@ const TableComponent = forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTab
 )
 TableComponent.displayName = "TableComponent"
 
-const TableRowComponent = <TData,>(rows: Row<TData>[]) =>
+const TableRowComponent = <TData extends RowData>(
+    rows: Row<typeof virtualizedTableFeatures, TData>[],
+) =>
     function getTableRow(props: HTMLAttributes<HTMLTableRowElement>) {
         // @ts-expect-error data-index is a valid attribute
         const index = props["data-index"]
@@ -64,34 +66,33 @@ function SortingIndicator({ isSorted }: { isSorted: SortDirection | false }) {
     )
 }
 
-interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[]
+interface DataTableProps<TData extends RowData> {
+    columns: ColumnDef<typeof virtualizedTableFeatures, TData>[]
     data: TData[]
     rowComponent?: (
-        rows: Row<TData>[],
+        rows: Row<typeof virtualizedTableFeatures, TData>[],
     ) => (props: HTMLAttributes<HTMLTableRowElement>) => JSX.Element | null
 }
 
-export function DataTable<TData, TValue>({
+export function DataTable<TData extends RowData>({
     columns,
     data,
     rowComponent,
-}: DataTableProps<TData, TValue>) {
+}: DataTableProps<TData>) {
     const [sorting, setSorting] = useState<SortingState>([
         {
             id: "type",
             desc: true,
         },
     ])
-    const table = useReactTable({
+    const table = useTable({
+        features: virtualizedTableFeatures,
         data,
         columns,
         state: {
             sorting,
         },
         onSortingChange: setSorting,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
     })
 
     const { rows } = table.getRowModel()

src/lib/table.ts

@@ -0,0 +1,29 @@
+import {
+    columnSizingFeature,
+    columnVisibilityFeature,
+    createSortedRowModel,
+    rowSelectionFeature,
+    rowSortingFeature,
+    sortFn_alphanumeric,
+    sortFn_datetime,
+    sortFn_text,
+    tableFeatures,
+} from "@tanstack/react-table"
+
+export const selectableTableFeatures = tableFeatures({
+    columnVisibilityFeature,
+    rowSelectionFeature,
+})
+
+export const virtualizedTableFeatures = tableFeatures({
+    columnSizingFeature,
+    columnVisibilityFeature,
+    rowSelectionFeature,
+    rowSortingFeature,
+    sortedRowModel: createSortedRowModel(),
+    sortFns: {
+        alphanumeric: sortFn_alphanumeric,
+        datetime: sortFn_datetime,
+        text: sortFn_text,
+    },
+})

src/routes/alert-rule.tsx

@@ -14,8 +14,9 @@ import {
     TableHeader,
     TableRow,
 } from "@/components/ui/table"
+import { selectableTableFeatures } from "@/lib/table"
 import { ModelAlertRule, triggerModes } from "@/types"
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { ColumnDef, flexRender, useTable } from "@tanstack/react-table"
 import { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -37,7 +38,7 @@ export default function AlertRulePage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    const columns: ColumnDef<ModelAlertRule>[] = [
+    const columns: ColumnDef<typeof selectableTableFeatures, ModelAlertRule>[] = [
         {
             id: "select",
             header: ({ table }) => (
@@ -57,7 +58,6 @@ export default function AlertRulePage() {
                     aria-label="Select row"
                 />
             ),
-            enableSorting: false,
             enableHiding: false,
         },
         {
@@ -131,10 +131,10 @@ export default function AlertRulePage() {
         return data ?? []
     }, [data])
 
-    const table = useReactTable({
+    const table = useTable({
+        features: selectableTableFeatures,
         data: dataCache,
         columns,
-        getCoreRowModel: getCoreRowModel(),
     })
 
     const selectedRows = table.getSelectedRowModel().rows

src/routes/cron.tsx

@@ -14,9 +14,10 @@ import {
     TableRow,
 } from "@/components/ui/table"
 import { IconButton } from "@/components/xui/icon-button"
+import { selectableTableFeatures } from "@/lib/table"
 import { ModelCron } from "@/types"
 import { cronTypes } from "@/types"
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { ColumnDef, flexRender, useTable } from "@tanstack/react-table"
 import { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -36,7 +37,7 @@ export default function CronPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    const columns: ColumnDef<ModelCron>[] = [
+    const columns: ColumnDef<typeof selectableTableFeatures, ModelCron>[] = [
         {
             id: "select",
             header: ({ table }) => (
@@ -56,7 +57,6 @@ export default function CronPage() {
                     aria-label="Select row"
                 />
             ),
-            enableSorting: false,
             enableHiding: false,
         },
         {
@@ -199,10 +199,10 @@ export default function CronPage() {
         return data ?? []
     }, [data])
 
-    const table = useReactTable({
+    const table = useTable({
+        features: selectableTableFeatures,
         data: dataCache,
         columns,
-        getCoreRowModel: getCoreRowModel(),
     })
 
     const selectedRows = table.getSelectedRowModel().rows

src/routes/ddns.tsx

@@ -12,8 +12,9 @@ import {
     TableHeader,
     TableRow,
 } from "@/components/ui/table"
+import { selectableTableFeatures } from "@/lib/table"
 import { ModelDDNSProfile } from "@/types"
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { ColumnDef, flexRender, useTable } from "@tanstack/react-table"
 import { useEffect, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -45,7 +46,7 @@ export default function DDNSPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    const columns: ColumnDef<ModelDDNSProfile>[] = [
+    const columns: ColumnDef<typeof selectableTableFeatures, ModelDDNSProfile>[] = [
         {
             id: "select",
             header: ({ table }) => (
@@ -65,7 +66,6 @@ export default function DDNSPage() {
                     aria-label="Select row"
                 />
             ),
-            enableSorting: false,
             enableHiding: false,
         },
         {
@@ -136,10 +136,10 @@ export default function DDNSPage() {
         return data ?? []
     }, [data])
 
-    const table = useReactTable({
+    const table = useTable({
+        features: selectableTableFeatures,
         data: dataCache,
         columns,
-        getCoreRowModel: getCoreRowModel(),
     })
 
     const selectedRows = table.getSelectedRowModel().rows

src/routes/nat.tsx

@@ -12,8 +12,9 @@ import {
     TableHeader,
     TableRow,
 } from "@/components/ui/table"
+import { selectableTableFeatures } from "@/lib/table"
 import { ModelNAT } from "@/types"
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { ColumnDef, flexRender, useTable } from "@tanstack/react-table"
 import { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -33,7 +34,7 @@ export default function NATPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    const columns: ColumnDef<ModelNAT>[] = [
+    const columns: ColumnDef<typeof selectableTableFeatures, ModelNAT>[] = [
         {
             id: "select",
             header: ({ table }) => (
@@ -53,7 +54,6 @@ export default function NATPage() {
                     aria-label="Select row"
                 />
             ),
-            enableSorting: false,
             enableHiding: false,
         },
         {
@@ -119,10 +119,10 @@ export default function NATPage() {
         return data ?? []
     }, [data])
 
-    const table = useReactTable({
+    const table = useTable({
+        features: selectableTableFeatures,
         data: dataCache,
         columns,
-        getCoreRowModel: getCoreRowModel(),
     })
 
     const selectedRows = table.getSelectedRowModel().rows

src/routes/notification-group.tsx

@@ -13,13 +13,19 @@ import {
     TableHeader,
     TableRow,
 } from "@/components/ui/table"
+import { selectableTableFeatures } from "@/lib/table"
 import { ModelNotificationGroupResponseItem } from "@/types"
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { ColumnDef, flexRender, useTable } from "@tanstack/react-table"
 import { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 import useSWR from "swr"
 
+type NotificationGroupColumn = ColumnDef<
+    typeof selectableTableFeatures,
+    ModelNotificationGroupResponseItem
+>
+
 export default function NotificationGroupPage() {
     const { t } = useTranslation()
     const { data, mutate, error, isLoading } = useSWR<ModelNotificationGroupResponseItem[]>(
@@ -37,7 +43,7 @@ export default function NotificationGroupPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    const columns: ColumnDef<ModelNotificationGroupResponseItem>[] = [
+    const columns: NotificationGroupColumn[] = [
         {
             id: "select",
             header: ({ table }) => (
@@ -57,7 +63,6 @@ export default function NotificationGroupPage() {
                     aria-label="Select row"
                 />
             ),
-            enableSorting: false,
             enableHiding: false,
         },
         {
@@ -112,10 +117,10 @@ export default function NotificationGroupPage() {
         return data ?? []
     }, [data])
 
-    const table = useReactTable({
+    const table = useTable({
+        features: selectableTableFeatures,
         data: dataCache,
         columns,
-        getCoreRowModel: getCoreRowModel(),
     })
 
     const selectedRows = table.getSelectedRowModel().rows

src/routes/notification.tsx

@@ -15,8 +15,9 @@ import {
     TableRow,
 } from "@/components/ui/table"
 import { useNotification } from "@/hooks/useNotfication"
+import { selectableTableFeatures } from "@/lib/table"
 import { ModelNotification } from "@/types"
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { ColumnDef, flexRender, useTable } from "@tanstack/react-table"
 import { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -40,7 +41,7 @@ export default function NotificationPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    const columns: ColumnDef<ModelNotification>[] = [
+    const columns: ColumnDef<typeof selectableTableFeatures, ModelNotification>[] = [
         {
             id: "select",
             header: ({ table }) => (
@@ -60,7 +61,6 @@ export default function NotificationPage() {
                     aria-label="Select row"
                 />
             ),
-            enableSorting: false,
             enableHiding: false,
         },
         {
@@ -127,10 +127,10 @@ export default function NotificationPage() {
         return data ?? []
     }, [data])
 
-    const table = useReactTable({
+    const table = useTable({
+        features: selectableTableFeatures,
         data: dataCache,
         columns,
-        getCoreRowModel: getCoreRowModel(),
     })
 
     const selectedRows = table.getSelectedRowModel().rows

src/routes/online-user.tsx

@@ -22,8 +22,9 @@ import {
     TableRow,
 } from "@/components/ui/table"
 import { useAuth } from "@/hooks/useAuth"
+import { selectableTableFeatures } from "@/lib/table"
 import { ModelOnlineUser, ModelOnlineUserApi } from "@/types"
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { ColumnDef, flexRender, useTable } from "@tanstack/react-table"
 import { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { useSearchParams } from "react-router-dom"
@@ -55,7 +56,7 @@ export default function OnlineUserPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    let columns: ColumnDef<ModelOnlineUser>[] = [
+    let columns: ColumnDef<typeof selectableTableFeatures, ModelOnlineUser>[] = [
         {
             id: "select",
             header: ({ table }) => (
@@ -75,7 +76,6 @@ export default function OnlineUserPage() {
                     aria-label="Select row"
                 />
             ),
-            enableSorting: false,
             enableHiding: false,
         },
         {
@@ -128,10 +128,10 @@ export default function OnlineUserPage() {
         return data?.value ?? []
     }, [data])
 
-    const table = useReactTable<ModelOnlineUser>({
+    const table = useTable({
+        features: selectableTableFeatures,
         data: dataCache,
         columns,
-        getCoreRowModel: getCoreRowModel(),
     })
 
     const selectedRows = table.getSelectedRowModel().rows

src/routes/server-group.tsx

@@ -13,8 +13,9 @@ import {
     TableHeader,
     TableRow,
 } from "@/components/ui/table"
+import { selectableTableFeatures } from "@/lib/table"
 import { ModelServerGroupResponseItem } from "@/types"
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { ColumnDef, flexRender, useTable } from "@tanstack/react-table"
 import { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -37,7 +38,7 @@ export default function ServerGroupPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    const columns: ColumnDef<ModelServerGroupResponseItem>[] = [
+    const columns: ColumnDef<typeof selectableTableFeatures, ModelServerGroupResponseItem>[] = [
         {
             id: "select",
             header: ({ table }) => (
@@ -57,7 +58,6 @@ export default function ServerGroupPage() {
                     aria-label="Select row"
                 />
             ),
-            enableSorting: false,
             enableHiding: false,
         },
         {
@@ -112,10 +112,10 @@ export default function ServerGroupPage() {
         return data ?? []
     }, [data])
 
-    const table = useReactTable({
+    const table = useTable({
+        features: selectableTableFeatures,
         data: dataCache,
         columns,
-        getCoreRowModel: getCoreRowModel(),
     })
 
     const selectedRows = table.getSelectedRowModel().rows

src/routes/server.tsx

@@ -27,9 +27,10 @@ import {
 } from "@/components/ui/table"
 import { IconButton } from "@/components/xui/icon-button"
 import { useServer } from "@/hooks/useServer"
+import { selectableTableFeatures } from "@/lib/table"
 import { joinIP } from "@/lib/utils"
 import { ModelServerTaskResponse, ModelServer as Server } from "@/types"
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { ColumnDef, flexRender, useTable } from "@tanstack/react-table"
 import { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -51,7 +52,7 @@ export default function ServerPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    const columns: ColumnDef<Server>[] = [
+    const columns: ColumnDef<typeof selectableTableFeatures, Server>[] = [
         {
             id: "select",
             header: ({ table }) => (
@@ -71,7 +72,6 @@ export default function ServerPage() {
                     aria-label="Select row"
                 />
             ),
-            enableSorting: false,
             enableHiding: false,
         },
         {
@@ -217,10 +217,10 @@ export default function ServerPage() {
         return data ?? []
     }, [data])
 
-    const table = useReactTable({
+    const table = useTable({
+        features: selectableTableFeatures,
         data: dataCache,
         columns,
-        getCoreRowModel: getCoreRowModel(),
     })
 
     const selectedRows = table.getSelectedRowModel().rows

src/routes/service.tsx

@@ -12,9 +12,10 @@ import {
     TableHeader,
     TableRow,
 } from "@/components/ui/table"
+import { selectableTableFeatures } from "@/lib/table"
 import { ModelService as Service } from "@/types"
 import { serviceTypes } from "@/types"
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { ColumnDef, flexRender, useTable } from "@tanstack/react-table"
 import { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -34,7 +35,7 @@ export default function ServicePage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    const columns: ColumnDef<Service>[] = [
+    const columns: ColumnDef<typeof selectableTableFeatures, Service>[] = [
         {
             id: "select",
             header: ({ table }) => (
@@ -54,7 +55,6 @@ export default function ServicePage() {
                     aria-label="Select row"
                 />
             ),
-            enableSorting: false,
             enableHiding: false,
         },
         {
@@ -165,10 +165,10 @@ export default function ServicePage() {
         return data ?? []
     }, [data])
 
-    const table = useReactTable({
+    const table = useTable({
+        features: selectableTableFeatures,
         data: dataCache,
         columns,
-        getCoreRowModel: getCoreRowModel(),
     })
 
     const selectedRows = table.getSelectedRowModel().rows

src/routes/user.tsx

@@ -13,8 +13,9 @@ import {
     TableRow,
 } from "@/components/ui/table"
 import { UserCard } from "@/components/user"
+import { selectableTableFeatures } from "@/lib/table"
 import { ModelUser } from "@/types"
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { ColumnDef, flexRender, useTable } from "@tanstack/react-table"
 import { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
@@ -34,7 +35,7 @@ export default function UserPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    const columns: ColumnDef<ModelUser>[] = [
+    const columns: ColumnDef<typeof selectableTableFeatures, ModelUser>[] = [
         {
             id: "select",
             header: ({ table }) => (
@@ -54,7 +55,6 @@ export default function UserPage() {
                     aria-label="Select row"
                 />
             ),
-            enableSorting: false,
             enableHiding: false,
         },
         {
@@ -105,10 +105,10 @@ export default function UserPage() {
         return data ?? []
     }, [data])
 
-    const table = useReactTable({
+    const table = useTable({
+        features: selectableTableFeatures,
         data: dataCache,
         columns,
-        getCoreRowModel: getCoreRowModel(),
     })
 
     const selectedRows = table.getSelectedRowModel().rows

src/routes/waf.tsx

@@ -22,13 +22,14 @@ import {
     TableRow,
 } from "@/components/ui/table"
 import { useAuth } from "@/hooks/useAuth"
+import { selectableTableFeatures } from "@/lib/table"
 import {
     GithubComNezhahqNezhaModelValueArrayModelWAFApiMock,
     ModelWAFApiMock,
     wafBlockIdentifiers,
     wafBlockReasons,
 } from "@/types"
-import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { ColumnDef, flexRender, useTable } from "@tanstack/react-table"
 import { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { useSearchParams } from "react-router-dom"
@@ -61,7 +62,7 @@ export default function WAFPage() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [error])
 
-    let columns: ColumnDef<ModelWAFApiMock>[] = [
+    let columns: ColumnDef<typeof selectableTableFeatures, ModelWAFApiMock>[] = [
         {
             id: "select",
             header: ({ table }) => (
@@ -81,7 +82,6 @@ export default function WAFPage() {
                     aria-label="Select row"
                 />
             ),
-            enableSorting: false,
             enableHiding: false,
         },
         {
@@ -147,10 +147,10 @@ export default function WAFPage() {
         return data?.value ?? []
     }, [data])
 
-    const table = useReactTable({
+    const table = useTable({
+        features: selectableTableFeatures,
         data: dataCache,
         columns,
-        getCoreRowModel: getCoreRowModel(),
     })
 
     const selectedRows = table.getSelectedRowModel().rows