fix(ui): перенести основные таблицы на ReUI v9

components/data-grids/asns-data-grid.tsx

@@ -1,21 +1,20 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import type { Asn } from "@/lib/data"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { FilterIcon, NetworkIcon } from "lucide-react"
 
@@ -26,7 +25,7 @@ interface AsnsDataGridProps {
 }
 
 function AsnsDataGrid({ asns, isLoading, pagination = false }: AsnsDataGridProps) {
-  const columns = useMemo<ColumnDef<Asn>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, Asn>[]>(
     () => [
       {
         id: "asn",
@@ -115,12 +114,11 @@ function AsnsDataGrid({ asns, isLoading, pagination = false }: AsnsDataGridProps
     [],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: !pagination,
     data: asns,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    ...(pagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
     getRowId: (row) => row.id,
   })
 

components/data-grids/communities-data-grid.tsx

@@ -1,20 +1,20 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import {
   CheckIcon,
@@ -77,7 +77,7 @@ function CommunitiesDataGrid({
   onSelect,
   onCopy,
 }: CommunitiesDataGridProps) {
-  const columns = useMemo<ColumnDef<CommunityRow>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, CommunityRow>[]>(
     () => [
       {
         id: "value",
@@ -222,15 +222,15 @@ function CommunitiesDataGrid({
   )
 
   const rowSelection = useMemo(
-    () => (selectedId ? { [selectedId]: true } : {}),
+    () => (selectedId ? { [selectedId]: true as const } : {}),
     [selectedId],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: communities,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
     enableRowSelection: true,
     state: { rowSelection },

components/data-grids/compact-data-grid.tsx

@@ -1,20 +1,19 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo, type ReactNode } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+  useTable,
+} from "@tanstack/react-table"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { InboxIcon } from "lucide-react"
 
@@ -47,7 +46,7 @@ function CompactDataGrid<T extends { id: string }>({
   onRowClick,
   getExpandedContent,
 }: CompactDataGridProps<T>) {
-  const columnDefs = useMemo<ColumnDef<T>[]>(
+  const columnDefs = useMemo<ColumnDef<DataGridFeatures, T>[]>(
     () =>
       columns.map((col, index) => ({
         id: col.id,
@@ -81,12 +80,11 @@ function CompactDataGrid<T extends { id: string }>({
     [columns, getExpandedContent],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data,
     columns: columnDefs,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    ...(getExpandedContent ? { getExpandedRowModel: getExpandedRowModel() } : {}),
     getRowId: (row) => row.id,
     ...(getExpandedContent ? { getRowCanExpand: () => true } : {}),
   })

components/data-grids/domains-data-grid.tsx

@@ -1,21 +1,20 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import type { Domain } from "@/lib/data"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { FilterIcon, GlobeIcon } from "lucide-react"
 
@@ -26,7 +25,7 @@ interface DomainsDataGridProps {
 }
 
 function DomainsDataGrid({ domains, isLoading, pagination = false }: DomainsDataGridProps) {
-  const columns = useMemo<ColumnDef<Domain>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, Domain>[]>(
     () => [
       {
         id: "domain",
@@ -124,12 +123,11 @@ function DomainsDataGrid({ domains, isLoading, pagination = false }: DomainsData
     [],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: !pagination,
     data: domains,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    ...(pagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
     getRowId: (row) => row.id,
   })
 

components/data-grids/ip-ranges-data-grid.tsx

@@ -1,21 +1,20 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import type { IpRange } from "@/lib/data"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { FilterIcon, NetworkIcon } from "lucide-react"
 
@@ -26,7 +25,7 @@ interface IpRangesDataGridProps {
 }
 
 function IpRangesDataGrid({ ipRanges, isLoading, pagination = false }: IpRangesDataGridProps) {
-  const columns = useMemo<ColumnDef<IpRange>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, IpRange>[]>(
     () => [
       {
         id: "cidr",
@@ -126,12 +125,11 @@ function IpRangesDataGrid({ ipRanges, isLoading, pagination = false }: IpRangesD
     [],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: !pagination,
     data: ipRanges,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    ...(pagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
     getRowId: (row) => row.id,
   })
 

components/data-grids/shared/data-grid-shell.tsx

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from "react"
 import type { Table } from "@tanstack/react-table"
+import { DATA_GRID_LABELS_RU } from "@/lib/data-grid-labels-ru"
 import {
   DataGrid,
   DataGridContainer,
@@ -44,6 +45,7 @@ function DataGridShell<TData extends object>({
   return (
     <DataGrid
       className="w-full"
+      i18n={{ labels: DATA_GRID_LABELS_RU }}
       table={table}
       recordCount={recordCount}
       isLoading={isLoading}

components/data-grids/traffic-flows-data-grid.tsx

@@ -1,15 +1,17 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
-import { type ColumnDef, getCoreRowModel, useReactTable } from "@tanstack/react-table-v8"
+import { type ColumnDef, useTable } from "@tanstack/react-table"
 import type { FlowTalkerDto } from "@mmapp/contracts/traffic-flow"
 import { ArrowDownIcon, ArrowUpIcon, MinusIcon } from "lucide-react"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
+} from "@/components/data-grids/shared/data-grid-layout"
 import { fmtRate } from "@/lib/fmt-rate"
 import { cn } from "@/lib/utils"
 
@@ -61,7 +63,7 @@ function TrafficFlowsDataGrid({
   rows: FlowTalkerDto[]
   emptyHint?: string
 }) {
-  const columns = useMemo<ColumnDef<FlowTalkerDto>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, FlowTalkerDto>[]>(
     () => [
       {
         id: "client",
@@ -169,10 +171,12 @@ function TrafficFlowsDataGrid({
     [],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
+    manualSorting: true,
     data: rows,
     columns,
-    getCoreRowModel: getCoreRowModel(),
     getRowId: (row, i) => `${row.serverId}-${row.src}-${row.dst}-${row.proto}-${row.srcPort}-${row.dstPort}-${i}`,
   })
 

components/data-grids/uptime-resources-data-grid.tsx

@@ -1,31 +1,30 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import type { Server } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { Sparkline } from "@/components/sparkline"
 import { StatusDot } from "@/components/status-dot"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import {
   AlertCircleIcon,
   ClockIcon,
   CpuIcon,
   HardDriveIcon,
-  ServerIcon,
   SearchIcon,
   ThermometerIcon,
 } from "lucide-react"
@@ -114,7 +113,7 @@ interface UptimeResourcesDataGridProps {
 }
 
 function UptimeResourcesDataGrid({ rows }: UptimeResourcesDataGridProps) {
-  const columns = useMemo<ColumnDef<UptimeResourceRow>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, UptimeResourceRow>[]>(
     () => [
       {
         id: "name",
@@ -348,11 +347,11 @@ function UptimeResourcesDataGrid({ rows }: UptimeResourcesDataGridProps) {
     [],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: rows,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.serverId,
   })
 

components/data-grids/uptime-speed-history-data-grid.tsx

@@ -1,21 +1,21 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import type { Server } from "@/lib/data"
 import { Flag } from "@/components/flag"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { cn } from "@/lib/utils"
 import { ArrowRightIcon, RefreshCwIcon } from "lucide-react"
 
@@ -43,7 +43,7 @@ interface UptimeSpeedHistoryDataGridProps {
 }
 
 function UptimeSpeedHistoryDataGrid({ runs, servers }: UptimeSpeedHistoryDataGridProps) {
-  const columns = useMemo<ColumnDef<SpeedTestRunRow>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, SpeedTestRunRow>[]>(
     () => [
       {
         id: "startedAt",
@@ -221,11 +221,11 @@ function UptimeSpeedHistoryDataGrid({ runs, servers }: UptimeSpeedHistoryDataGri
     [servers],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: runs,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
     initialState: { sorting: [{ id: "startedAt", desc: true }] },
   })