fix(config): добавить новые зависимости и обновить конфигурацию компонентов

components/data-table.tsx

@@ -1,8 +1,24 @@
 "use client"
 
 import { useMemo, useState } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
 import { Card } from "@/components/ui/card"
-import { SearchIcon } from "lucide-react"
+import {
+  DataGrid,
+  DataGridContainer,
+  DataGridPagination,
+  DataGridTable,
+} from "@/components/reui/data-grid"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import { EmptyState } from "@/components/empty-state"
+import { InboxIcon } from "lucide-react"
 
 export interface Column<T> {
   key: string
@@ -15,6 +31,9 @@ interface DataTableProps<T extends { id: string }> {
   columns: Column<T>[]
   searchPlaceholder?: string
   searchKeys?: (keyof T)[]
+  isLoading?: boolean
+  emptyTitle?: string
+  emptyDescription?: string
 }
 
 export function DataTable<T extends { id: string }>({
@@ -22,10 +41,14 @@ export function DataTable<T extends { id: string }>({
   columns,
   searchPlaceholder = "Поиск…",
   searchKeys = [],
+  isLoading = false,
+  emptyTitle = "Нет записей",
+  emptyDescription,
 }: DataTableProps<T>) {
   const [search, setSearch] = useState("")
+  const [globalFilter, setGlobalFilter] = useState("")
 
-  const filtered = useMemo(() => {
+  const filteredData = useMemo(() => {
     if (!search || searchKeys.length === 0) return data
     const s = search.toLowerCase()
     return data.filter((row) =>
@@ -33,44 +56,60 @@ export function DataTable<T extends { id: string }>({
     )
   }, [data, search, searchKeys])
 
+  const columnDefs = useMemo<ColumnDef<T>[]>(
+    () =>
+      columns.map((col) => ({
+        id: col.key,
+        accessorKey: col.key,
+        header: col.label,
+        cell: ({ row }) => col.render(row.original),
+        meta: { headerTitle: col.label },
+      })),
+    [columns],
+  )
+
+  const table = useReactTable({
+    data: filteredData,
+    columns: columnDefs,
+    state: { globalFilter },
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  const displayCount = searchKeys.length > 0 ? filteredData.length : data.length
+
   return (
     <Card>
-      <div className="flex items-center gap-2 px-5 py-3 border-b">
-        <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[220px]">
-          <SearchIcon className="size-3.5 text-muted-foreground shrink-0" />
-          <input
-            className="flex-1 bg-transparent outline-none placeholder:text-muted-foreground text-sm"
-            placeholder={searchPlaceholder}
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
+      <DataPageToolbar
+        search={search}
+        onSearchChange={setSearch}
+        searchPlaceholder={searchPlaceholder}
+        countLabel={`${displayCount} записей`}
+      />
+      <DataGrid
+        table={table}
+        recordCount={filteredData.length}
+        isLoading={isLoading}
+        loadingMode="skeleton"
+        emptyMessage={
+          <EmptyState
+            icon={<InboxIcon className="size-4" />}
+            title={emptyTitle}
+            description={emptyDescription}
+            className="py-12"
           />
-        </div>
-        <span className="text-sm text-muted-foreground ml-1">{filtered.length} записей</span>
-      </div>
-      <div className="overflow-x-auto">
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="border-b border-border text-xs text-muted-foreground">
-              {columns.map((col) => (
-                <th key={col.key} className="text-left font-medium px-5 py-3">
-                  {col.label}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody className="divide-y divide-border">
-            {filtered.map((row) => (
-              <tr key={row.id} className="hover:bg-muted/40 transition-colors">
-                {columns.map((col) => (
-                  <td key={col.key} className="px-5 py-3">
-                    {col.render(row)}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+        }
+        tableLayout={{ rowBorder: true, headerBackground: true }}
+      >
+        <DataGridContainer border={false}>
+          <DataGridTable />
+        </DataGridContainer>
+        {filteredData.length > 0 && <DataGridPagination className="px-5 pb-3" />}
+      </DataGrid>
     </Card>
   )
 }