feat!(web): migrate UI from SvelteKit to React + shadcn/ui + ReUI

Web UI полностью переведён с SvelteKit на новый стек: React 19, TanStack Router/Query/Table/Virtual, shadcn/ui (base-nova) и ReUI enterprise-компоненты (data-grid, filters, autocomplete). Новый код разложен по слоям: packages/ui (shadcn-примитивы), apps/web (роуты, shared-обёртки, ReUI-адаптации). BREAKING CHANGE: меняется структура и инструментинг фронтенда. - apps/web/ — новый Vite + React-проект (@evobgp/web), file-based роуты TanStack Router; экраны dashboard, modules, monitoring, network, operations, schedule, settings, tenant-settings, access, directories. - packages/ui/ — shadcn/ui-примитивы (@evobgp/ui) с общими стилями globals.css и cn-утилитой; CLI shadcn запускается из apps/web. - apps/web/src/components/reui/ — enterprise-паттерны ReUI. - pnpm workspace (pnpm-workspace.yaml, pnpm-lock.yaml, tsconfig.base.json) заменяет npm-проект в web/. - web/ переименован в web-legacy-svelte/ (архив-референс для миграции); импорты оттуда запрещены правилом WEB-22. - CI (.gitea/workflows/ci.yaml): job web переведён на Node 22 + pnpm 10 (typecheck/lint/build через pnpm --filter @evobgp/web); пути триггеров обновлены под apps/web|packages/ui. - deploy/docker/evobgp-web/Dockerfile: сборка из корня репозитория, pnpm install --frozen-lockfile, выход dist из apps/web/dist. - .cursor/rules/web-shadcn.mdc, context7-stack.mdc, engineering.mdc, AGENTS.md — обновлены под React-стек (WEB-01..WEB-22, DOC-SYNC-06/07). Проверки WEB-19 локально: typecheck, lint, build — exit 0. Co-authored-by: Cursor <[email protected]>
2026-07-02 17:59:59 +07:00
parent db75126bea
commit c144b49acf
417 changed files with 25450 additions and 124 deletions
@@ -0,0 +1,53 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@evobgp/ui/components/alert-dialog'
+import type { ReactElement, ReactNode } from 'react'
+
+interface ConfirmDialogProps {
+  trigger: ReactElement
+  title: string
+  description?: ReactNode
+  confirmLabel?: string
+  cancelLabel?: string
+  destructive?: boolean
+  onConfirm: () => void
+}
+
+export function ConfirmDialog({
+  trigger,
+  title,
+  description,
+  confirmLabel = 'Подтвердить',
+  cancelLabel = 'Отмена',
+  destructive,
+  onConfirm,
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger render={trigger} />
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description ? <AlertDialogDescription>{description}</AlertDialogDescription> : null}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{cancelLabel}</AlertDialogCancel>
+          <AlertDialogAction
+            variant={destructive ? 'destructive' : 'default'}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react'
+import { cn } from '@evobgp/ui/lib/utils'
+
+interface EmptyStateProps {
+  title: string
+  description?: string
+  icon?: ReactNode
+  action?: ReactNode
+  className?: string
+}
+
+export function EmptyState({ title, description, icon, action, className }: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-8 text-center',
+        className,
+      )}
+    >
+      {icon ? <div className="text-muted-foreground">{icon}</div> : null}
+      <div className="flex flex-col gap-1">
+        <p className="text-sm font-medium">{title}</p>
+        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {action ? <div className="mt-2">{action}</div> : null}
+    </div>
+  )
+}
@@ -0,0 +1,172 @@
+import {
+  LayoutDashboard,
+  Boxes,
+  Network,
+  Cog,
+  ListChecks,
+  Activity,
+  Settings,
+  BookText,
+  KeyRound,
+  ServerCog,
+} from 'lucide-react'
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@evobgp/ui/components/sidebar'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@evobgp/ui/components/breadcrumb'
+import { Separator } from '@evobgp/ui/components/separator'
+
+import { Link, useRouterState } from '@tanstack/react-router'
+import type { ComponentType, ReactNode } from 'react'
+
+import { ModeToggle } from '@/components/mode-toggle'
+
+interface NavItem {
+  to: string
+  label: string
+  icon: ComponentType<{ className?: string }>
+}
+
+interface NavGroup {
+  label: string
+  items: NavItem[]
+}
+
+const NAV_GROUPS: NavGroup[] = [
+  {
+    label: 'Обзор',
+    items: [{ to: '/dashboard', label: 'Dashboard', icon: LayoutDashboard }],
+  },
+  {
+    label: 'Маршрутизация',
+    items: [
+      { to: '/modules', label: 'Модули', icon: Boxes },
+      { to: '/network', label: 'Сеть', icon: Network },
+      { to: '/directories', label: 'Справочники', icon: BookText },
+    ],
+  },
+  {
+    label: 'Операции',
+    items: [
+      { to: '/operations', label: 'Операции', icon: Cog },
+      { to: '/schedule', label: 'Задачи', icon: ListChecks },
+      { to: '/monitoring', label: 'Мониторинг', icon: Activity },
+    ],
+  },
+  {
+    label: 'Система',
+    items: [
+      { to: '/access', label: 'Доступ', icon: KeyRound },
+      { to: '/tenant-settings', label: 'Настройки BIRD', icon: ServerCog },
+      { to: '/settings', label: 'Настройки UI', icon: Settings },
+    ],
+  },
+]
+
+const ALL_NAV_ITEMS = NAV_GROUPS.flatMap((g) => g.items)
+
+const ROUTE_LABELS: Record<string, string> = Object.fromEntries(
+  ALL_NAV_ITEMS.map((i) => [i.to, i.label]),
+)
+
+const PARENT_ROUTE: Record<string, string> = {}
+
+export function AppShell({ children }: { children: ReactNode }) {
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const activeItem =
+    ALL_NAV_ITEMS.find((i) => pathname === i.to || (i.to !== '/' && pathname.startsWith(`${i.to}/`))) ??
+    ALL_NAV_ITEMS[0]
+  const parentTo = PARENT_ROUTE[activeItem.to]
+  const parentLabel = parentTo ? ROUTE_LABELS[parentTo] : null
+
+  return (
+    <SidebarProvider>
+      <Sidebar collapsible="icon">
+        <SidebarHeader>
+          <div className="flex items-center gap-2 px-2 py-1.5">
+            <div className="flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground text-sm font-bold">
+              B
+            </div>
+            <div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
+              <span className="truncate text-sm font-semibold">EvoBGP</span>
+              <span className="truncate text-xs text-muted-foreground">Control Plane</span>
+            </div>
+          </div>
+        </SidebarHeader>
+        <SidebarContent>
+          {NAV_GROUPS.map((group) => (
+            <SidebarGroup key={group.label}>
+              <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {group.items.map((item) => {
+                    const Icon = item.icon
+                    const isActive = pathname === item.to || pathname.startsWith(`${item.to}/`)
+                    return (
+                      <SidebarMenuItem key={item.to}>
+                        <SidebarMenuButton
+                          render={<Link to={item.to} />}
+                          isActive={isActive}
+                          tooltip={item.label}
+                        >
+                          <Icon className="size-4" />
+                          <span>{item.label}</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    )
+                  })}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </SidebarContent>
+        <SidebarFooter />
+      </Sidebar>
+      <SidebarInset>
+        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+          <SidebarTrigger />
+          <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              {parentLabel && parentTo ? (
+                <>
+                  <BreadcrumbItem className="hidden md:block">
+                    <BreadcrumbLink render={<Link to={parentTo} />}>{parentLabel}</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                </>
+              ) : null}
+              <BreadcrumbItem>
+                <BreadcrumbPage>{ROUTE_LABELS[activeItem.to] ?? activeItem.label}</BreadcrumbPage>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <div className="ml-auto flex items-center gap-2">
+            <ModeToggle />
+          </div>
+        </header>
+        <main className="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">{children}</main>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
@@ -0,0 +1,19 @@
+import { Button } from '@evobgp/ui/components/button'
+import { Loader2Icon } from 'lucide-react'
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+
+type LoadingButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  loading?: boolean
+  variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link'
+  size?: 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'
+  children: ReactNode
+}
+
+export function LoadingButton({ loading, disabled, children, ...props }: LoadingButtonProps) {
+  return (
+    <Button disabled={disabled || loading} {...props}>
+      {loading ? <Loader2Icon className="animate-spin" data-icon="inline-start" /> : null}
+      {children}
+    </Button>
+  )
+}
@@ -0,0 +1,29 @@
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { Button } from '@evobgp/ui/components/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@evobgp/ui/components/dropdown-menu'
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="ghost" size="icon" />}>
+        <Sun className="size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+        <Moon className="absolute size-5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+        <span className="sr-only">Сменить тему</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>Светлая</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>Тёмная</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>Системная</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react'
+
+interface PageHeaderProps {
+  title: string
+  description?: string
+  actions?: ReactNode
+}
+
+export function PageHeader({ title, description, actions }: PageHeaderProps) {
+  return (
+    <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+    </div>
+  )
+}
@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react'
+import { cn } from '@evobgp/ui/lib/utils'
+
+export function PageShell({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn('flex flex-col gap-4 md:gap-6', className)}>{children}</div>
+}
@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react'
+import { AlertCircle, RefreshCwIcon } from 'lucide-react'
+import { Button } from '@evobgp/ui/components/button'
+import { Skeleton } from '@evobgp/ui/components/skeleton'
+import { EmptyState } from './empty-state'
+
+interface QueryStateProps<T> {
+  data: T | undefined
+  isLoading: boolean
+  isError: boolean
+  error?: unknown
+  empty?: boolean
+  emptyTitle?: string
+  emptyDescription?: string
+  emptyAction?: ReactNode
+  onRetry?: () => void
+  skeleton?: ReactNode
+  children: (data: T) => ReactNode
+}
+
+export function QueryState<T>({
+  data,
+  isLoading,
+  isError,
+  error,
+  empty,
+  emptyTitle = 'Нет данных',
+  emptyDescription,
+  emptyAction,
+  onRetry,
+  skeleton,
+  children,
+}: QueryStateProps<T>) {
+  if (isLoading) {
+    return <>{skeleton ?? <DefaultSkeleton />}</>
+  }
+  if (isError) {
+    return (
+      <EmptyState
+        icon={<AlertCircle className="size-8" />}
+        title="Ошибка загрузки"
+        description={error instanceof Error ? error.message : 'Не удалось загрузить данные'}
+        action={
+          onRetry ? (
+            <Button variant="outline" size="sm" onClick={onRetry}>
+              <RefreshCwIcon data-icon="inline-start" />
+              Повторить
+            </Button>
+          ) : null
+        }
+      />
+    )
+  }
+  if (empty || data == null) {
+    return <EmptyState title={emptyTitle} description={emptyDescription} action={emptyAction} />
+  }
+  return <>{children(data)}</>
+}
+
+function DefaultSkeleton() {
+  return (
+    <div className="flex flex-col gap-3">
+      <Skeleton className="h-8 w-48" />
+      <Skeleton className="h-32 w-full" />
+    </div>
+  )
+}
@@ -0,0 +1,343 @@
+"use client"
+
+import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { ScrollArea } from "@evobgp/ui/components/scroll-area"
+import { XIcon, ChevronsUpDownIcon } from "lucide-react"
+
+const inputVariants = cva(
+  "outline-none flex w-full text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [[readonly]]:bg-muted/80 [[readonly]]:cursor-not-allowed border border-input focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg bg-transparent dark:bg-input/30 text-sm transition-colors focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-3",
+  {
+    variants: {
+      size: {
+        sm: "h-7 px-2 [&~[data-slot=autocomplete-clear]]:end-1.5 [&~[data-slot=autocomplete-trigger]]:end-1.5",
+        default:
+          "h-8 px-2.5 [&~[data-slot=autocomplete-clear]]:end-1.75 [&~[data-slot=autocomplete-trigger]]:end-1.75",
+        lg: "h-9 px-2.5 [&~[data-slot=autocomplete-clear]]:end-2 [&~[data-slot=autocomplete-trigger]]:end-2",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+const Autocomplete = AutocompletePrimitive.Root
+
+function AutocompleteValue({ ...props }: AutocompletePrimitive.Value.Props) {
+  return (
+    <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />
+  )
+}
+
+function AutocompleteInput({
+  className,
+  size = "default",
+  showClear = false,
+  showTrigger = false,
+  ...props
+}: Omit<AutocompletePrimitive.Input.Props, "size"> &
+  VariantProps<typeof inputVariants> & {
+    showClear?: boolean
+    showTrigger?: boolean
+  }) {
+  return (
+    <div className="relative w-full">
+      <AutocompletePrimitive.Input
+        data-slot="autocomplete-input"
+        data-size={size}
+        className={cn(inputVariants({ size }), className)}
+        {...props}
+      />
+      {showTrigger && <AutocompleteTrigger />}
+      {showClear && <AutocompleteClear />}
+    </div>
+  )
+}
+
+function AutocompleteStatus({
+  className,
+  ...props
+}: AutocompletePrimitive.Status.Props) {
+  return (
+    <AutocompletePrimitive.Status
+      data-slot="autocomplete-status"
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-sm empty:m-0 empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AutocompletePortal({ ...props }: AutocompletePrimitive.Portal.Props) {
+  return (
+    <AutocompletePrimitive.Portal data-slot="autocomplete-portal" {...props} />
+  )
+}
+
+function AutocompleteBackdrop({
+  ...props
+}: AutocompletePrimitive.Backdrop.Props) {
+  return (
+    <AutocompletePrimitive.Backdrop
+      data-slot="autocomplete-backdrop"
+      {...props}
+    />
+  )
+}
+
+function AutocompletePositioner({
+  className,
+  ...props
+}: AutocompletePrimitive.Positioner.Props) {
+  return (
+    <AutocompletePrimitive.Positioner
+      data-slot="autocomplete-positioner"
+      className={cn("z-50 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function AutocompleteList({
+  className,
+  scrollAreaClassName,
+  ...props
+}: AutocompletePrimitive.List.Props & {
+  scrollAreaClassName?: string
+  scrollFade?: boolean
+  scrollbarGutter?: boolean
+}) {
+  return (
+    <ScrollArea
+      className={cn(
+        "size-full min-h-0 **:data-[slot=scroll-area-viewport]:h-full **:data-[slot=scroll-area-viewport]:overscroll-contain",
+        scrollAreaClassName
+      )}
+    >
+      <AutocompletePrimitive.List
+        data-slot="autocomplete-list"
+        className={cn(
+          "not-empty:px-1 not-empty:py-1 not-empty:scroll-py-1 in-data-has-overflow-y:me-3",
+          className
+        )}
+        {...props}
+      />
+    </ScrollArea>
+  )
+}
+
+function AutocompleteCollection({
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Collection>) {
+  return (
+    <AutocompletePrimitive.Collection
+      data-slot="autocomplete-collection"
+      {...props}
+    />
+  )
+}
+
+function AutocompleteRow({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Row>) {
+  return (
+    <AutocompletePrimitive.Row
+      data-slot="autocomplete-row"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function AutocompleteItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Item>) {
+  return (
+    <AutocompletePrimitive.Item
+      data-slot="autocomplete-item"
+      className={cn(
+        "text-foreground data-highlighted:text-foreground data-highlighted:before:bg-accent gap-1.5 rounded-md px-1.5 py-1 text-sm data-highlighted:before:rounded-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:relative data-highlighted:z-0 data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([role=img]):not([class*=text-])]:opacity-60",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export interface AutocompleteContentProps extends React.ComponentProps<
+  typeof AutocompletePrimitive.Popup
+> {
+  align?: AutocompletePrimitive.Positioner.Props["align"]
+  sideOffset?: AutocompletePrimitive.Positioner.Props["sideOffset"]
+  alignOffset?: AutocompletePrimitive.Positioner.Props["alignOffset"]
+  side?: AutocompletePrimitive.Positioner.Props["side"]
+  anchor?: AutocompletePrimitive.Positioner.Props["anchor"]
+  showBackdrop?: boolean
+}
+
+function AutocompleteContent({
+  className,
+  children,
+  showBackdrop = false,
+  align = "start",
+  sideOffset = 4,
+  alignOffset = 0,
+  side = "bottom",
+  anchor,
+  ...props
+}: AutocompleteContentProps) {
+  return (
+    <AutocompletePortal>
+      {showBackdrop && <AutocompleteBackdrop />}
+      <AutocompletePositioner
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        side={side}
+        anchor={anchor}
+      >
+        <div className="relative flex max-h-full">
+          <AutocompletePrimitive.Popup
+            data-slot="autocomplete-popup"
+            className={cn(
+              "bg-popover text-popover-foreground rounded-lg shadow-md ring-foreground/10 flex max-h-[min(var(--available-height),24rem)] w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) scroll-pt-2 scroll-pb-2 flex-col overscroll-contain py-0.5 ring-1 transition-[scale,opacity] has-data-starting-style:scale-98 has-data-starting-style:opacity-0 has-data-[side=none]:scale-100 has-data-[side=none]:transition-none",
+              className
+            )}
+            {...props}
+          >
+            {children}
+          </AutocompletePrimitive.Popup>
+        </div>
+      </AutocompletePositioner>
+    </AutocompletePortal>
+  )
+}
+
+function AutocompleteGroup({
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Group>) {
+  return (
+    <AutocompletePrimitive.Group data-slot="autocomplete-group" {...props} />
+  )
+}
+
+function AutocompleteGroupLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>) {
+  return (
+    <AutocompletePrimitive.GroupLabel
+      data-slot="autocomplete-group-label"
+      className={cn(
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AutocompleteEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Empty>) {
+  return (
+    <AutocompletePrimitive.Empty
+      data-slot="autocomplete-empty"
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-sm text-center empty:m-0 empty:p-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AutocompleteClear({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Clear>) {
+  return (
+    <AutocompletePrimitive.Clear
+      data-slot="autocomplete-clear"
+      className={cn(
+        "ring-offset-background focus:ring-ring absolute top-1/2 -translate-y-1/2 cursor-pointer opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-disabled:pointer-events-none",
+        className
+      )}
+      {...props}
+    >
+      <XIcon className="size-4" />
+    </AutocompletePrimitive.Clear>
+  )
+}
+
+function AutocompleteTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Trigger>) {
+  return (
+    <AutocompletePrimitive.Trigger
+      data-slot="autocomplete-trigger"
+      className={cn(
+        "focus:ring-ring ring-offset-background absolute top-1/2 -translate-y-1/2 cursor-pointer focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none has-[+[data-slot=autocomplete-clear]]:hidden data-disabled:pointer-events-none",
+        className
+      )}
+      {...props}
+    >
+      <ChevronsUpDownIcon className="size-4 opacity-70" />
+    </AutocompletePrimitive.Trigger>
+  )
+}
+
+function AutocompleteArrow({
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Arrow>) {
+  return (
+    <AutocompletePrimitive.Arrow data-slot="autocomplete-arrow" {...props} />
+  )
+}
+
+function AutocompleteSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompletePrimitive.Separator>) {
+  return (
+    <AutocompletePrimitive.Separator
+      data-slot="autocomplete-separator"
+      className={cn(
+        "bg-border my-1.5 h-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Autocomplete,
+  AutocompleteValue,
+  AutocompleteTrigger,
+  AutocompleteInput,
+  AutocompleteStatus,
+  AutocompletePortal,
+  AutocompleteBackdrop,
+  AutocompletePositioner,
+  AutocompleteContent,
+  AutocompleteList,
+  AutocompleteCollection,
+  AutocompleteRow,
+  AutocompleteItem,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteEmpty,
+  AutocompleteClear,
+  AutocompleteArrow,
+  AutocompleteSeparator,
+}
@@ -0,0 +1,98 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+const badgeVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center w-fit border border-transparent font-medium whitespace-nowrap outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground",
+        outline: "border-border bg-transparent dark:bg-input/32",
+        secondary: "bg-secondary text-secondary-foreground",
+        info: "bg-info text-white",
+        success: "bg-success text-white",
+        warning: "bg-warning text-white",
+        destructive: "bg-destructive text-white",
+        focus: "bg-focus text-focus-foreground",
+        invert: "bg-invert text-invert-foreground",
+        "primary-light":
+          "bg-primary/10 border-none text-primary dark:bg-primary/20",
+        "warning-light":
+          "bg-warning/10 border-none text-warning-foreground dark:bg-warning/20",
+        "success-light":
+          "bg-success/10 border-none text-success-foreground dark:bg-success/20",
+        "info-light":
+          "bg-info/10 border-none text-info-foreground dark:bg-info/20",
+        "destructive-light":
+          "bg-destructive/10 border-none text-destructive-foreground dark:bg-destructive/20",
+        "invert-light":
+          "bg-invert/10 border-none text-foreground dark:bg-invert/20",
+        "focus-light":
+          "bg-focus/10 border-none text-focus-foreground dark:bg-focus/20",
+        "primary-outline":
+          "bg-background border-border text-primary dark:bg-input/30",
+        "warning-outline":
+          "bg-background border-border text-warning-foreground dark:bg-input/30",
+        "success-outline":
+          "bg-background border-border text-success-foreground dark:bg-input/30",
+        "info-outline":
+          "bg-background border-border text-info-foreground dark:bg-input/30",
+        "destructive-outline":
+          "bg-background border-border text-destructive-foreground dark:bg-input/30",
+        "invert-outline":
+          "bg-background border-border text-invert-foreground dark:bg-input/30",
+        "focus-outline":
+          "bg-background border-border text-focus-foreground dark:bg-input/30",
+      },
+      size: {
+        xs: "px-1 py-0.25 text-[0.6rem] leading-none h-4 min-w-4 gap-1",
+        sm: "px-1 py-0.25 text-[0.625rem] leading-none h-4.5 min-w-4.5 gap-1",
+        default: "px-1.25 py-0.5 text-xs h-5 min-w-5 gap-1",
+        lg: "px-1.5 py-0.5 text-xs h-5.5 min-w-5.5 gap-1",
+        xl: "px-2 py-0.75 text-sm h-6 min-w-6 gap-1.5",
+      },
+      /** `default`: per-theme radius. `full`: max radius per theme (Lyra stays `rounded-none`). */
+      radius: {
+        default:
+          "rounded-sm",
+        full: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+    },
+  }
+)
+
+interface BadgeProps extends useRender.ComponentProps<"span"> {
+  variant?: VariantProps<typeof badgeVariants>["variant"]
+  size?: VariantProps<typeof badgeVariants>["size"]
+  radius?: VariantProps<typeof badgeVariants>["radius"]
+}
+
+function Badge({
+  className,
+  variant,
+  size,
+  radius,
+  render,
+  ...props
+}: BadgeProps) {
+  const defaultProps = {
+    "data-slot": "badge",
+    className: cn(badgeVariants({ variant, size, radius, className })),
+  }
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+  })
+}
+
+export { Badge, badgeVariants, type BadgeProps }
@@ -0,0 +1,167 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { Badge } from "@/components/reui/badge"
+import { Column } from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { Input } from "@evobgp/ui/components/input"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@evobgp/ui/components/popover"
+import { Separator } from "@evobgp/ui/components/separator"
+import { CirclePlusIcon, CheckIcon } from "lucide-react"
+
+interface DataGridColumnFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>
+  title?: string
+  options: {
+    label: string
+    value: string
+    icon?: React.ComponentType<{ className?: string }>
+  }[]
+}
+
+function DataGridColumnFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataGridColumnFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues()
+  const selectedValues = new Set(column?.getFilterValue() as string[])
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const filteredOptions = useMemo(() => {
+    if (!searchQuery) return options
+    return options.filter((option) =>
+      option.label.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+  }, [options, searchQuery])
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button variant="outline" size="sm">
+            <CirclePlusIcon className="size-4" />
+            {title}
+            {selectedValues?.size > 0 && (
+              <>
+                <Separator orientation="vertical" className="mx-2 h-4" />
+                <Badge
+                  variant="secondary"
+                  className="rounded-sm px-1 font-normal lg:hidden"
+                >
+                  {selectedValues.size}
+                </Badge>
+                <div className="hidden space-x-1 lg:flex">
+                  {selectedValues.size > 2 ? (
+                    <Badge
+                      variant="secondary"
+                      className="rounded-sm px-1 font-normal"
+                    >
+                      {selectedValues.size} selected
+                    </Badge>
+                  ) : (
+                    options
+                      .filter((option) => selectedValues.has(option.value))
+                      .map((option) => (
+                        <Badge
+                          variant="secondary"
+                          key={option.value}
+                          className="rounded-sm px-1 font-normal"
+                        >
+                          {option.label}
+                        </Badge>
+                      ))
+                  )}
+                </div>
+              </>
+            )}
+          </Button>
+        }
+      />
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <div className="p-2">
+          <Input
+            placeholder={title}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="h-8"
+          />
+        </div>
+        <div className="max-h-[300px] overflow-y-auto">
+          {filteredOptions.length === 0 ? (
+            <div className="text-muted-foreground py-6 text-center text-sm">
+              No results found.
+            </div>
+          ) : (
+            <div className="p-1">
+              {filteredOptions.map((option) => {
+                const isSelected = selectedValues.has(option.value)
+                return (
+                  <div
+                    key={option.value}
+                    onClick={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value)
+                      } else {
+                        selectedValues.add(option.value)
+                      }
+                      const filterValues = Array.from(selectedValues)
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      )
+                    }}
+                    className={cn(
+                      "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
+                      "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                    )}
+                  >
+                    <div
+                      className={cn(
+                        "border-primary me-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <CheckIcon className="h-4 w-4" />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="text-muted-foreground mr-2 h-4 w-4" />
+                    )}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ms-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+          {selectedValues.size > 0 && (
+            <>
+              <div className="bg-border -mx-1 my-1 h-px" />
+              <div className="p-1">
+                <div
+                  onClick={() => column?.setFilterValue(undefined)}
+                  className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center justify-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
+                >
+                  Clear filters
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { DataGridColumnFilter, type DataGridColumnFilterProps }
@@ -0,0 +1,343 @@
+import { HTMLAttributes, memo, ReactNode, useMemo } from "react"
+import {
+  getColumnHeaderLabel,
+  useDataGrid,
+} from "@/components/reui/data-grid/data-grid"
+import { Column } from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, CheckIcon, ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowLeftIcon, ArrowRightIcon, Settings2Icon, PinOffIcon } from "lucide-react"
+
+interface DataGridColumnHeaderProps<
+  TData,
+  TValue,
+> extends HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  /** When omitted, uses `column.columnDef.meta.headerTitle`, then a string `columnDef.header`, then `column.id`. */
+  title?: string
+  icon?: ReactNode
+  pinnable?: boolean
+  filter?: ReactNode
+  visibility?: boolean
+}
+
+function DataGridColumnHeaderInner<TData, TValue>({
+  column,
+  title,
+  icon,
+  className,
+  filter,
+  visibility = false,
+}: DataGridColumnHeaderProps<TData, TValue>) {
+  const { isLoading, table, props, recordCount } = useDataGrid()
+  const resolvedTitle = title ?? getColumnHeaderLabel(column)
+
+  const columnOrder = table.getState().columnOrder
+  const columnVisibilityKey = JSON.stringify(table.getState().columnVisibility)
+  const isSorted = column.getIsSorted()
+  const isPinned = column.getIsPinned()
+  const canSort = column.getCanSort()
+  const canPin = column.getCanPin()
+  const canResize = column.getCanResize()
+
+  const columnIndex = columnOrder.indexOf(column.id)
+  const canMoveLeft = columnIndex > 0
+  const canMoveRight = columnIndex < columnOrder.length - 1
+
+  const handleSort = () => {
+    if (isSorted === "asc") {
+      column.toggleSorting(true)
+    } else if (isSorted === "desc") {
+      column.clearSorting()
+    } else {
+      column.toggleSorting(false)
+    }
+  }
+
+  const headerLabelClassName = cn(
+    "text-secondary-foreground/80 inline-flex h-full items-center gap-1.5 font-normal [&_svg]:opacity-60 text-[0.8125rem] leading-[calc(1.125/0.8125)] [&_svg]:size-3.5",
+    className
+  )
+
+  const headerButtonClassName = cn(
+    "text-secondary-foreground/80 hover:bg-secondary data-[state=open]:bg-secondary hover:text-foreground data-[state=open]:text-foreground -ms-2 px-2 font-normal h-6 rounded-lg",
+    className
+  )
+
+  const sortIcon =
+    canSort &&
+    (isSorted === "desc" ? (
+      <ArrowDownIcon className="size-3.25" />
+    ) : isSorted === "asc" ? (
+      <ArrowUpIcon className="size-3.25" />
+    ) : (
+      <ChevronsUpDownIcon className="mt-px size-3.25" />
+    ))
+
+  const hasControls =
+    props.tableLayout?.columnsMovable ||
+    (props.tableLayout?.columnsVisibility && visibility) ||
+    (props.tableLayout?.columnsPinnable && canPin) ||
+    filter
+
+  const menuItems = useMemo(() => {
+    const items: ReactNode[] = []
+    let hasPreviousSection = false
+
+    // Filter section
+    if (filter) {
+      items.push(
+        <DropdownMenuGroup key="group-filter">
+          <DropdownMenuLabel key="filter">{filter}</DropdownMenuLabel>
+        </DropdownMenuGroup>
+      )
+      hasPreviousSection = true
+    }
+
+    // Sort section
+    if (canSort) {
+      if (hasPreviousSection) {
+        items.push(<DropdownMenuSeparator key="sep-sort" />)
+      }
+      items.push(
+        <DropdownMenuItem
+          key="sort-asc"
+          onClick={() => {
+            if (isSorted === "asc") {
+              column.clearSorting()
+            } else {
+              column.toggleSorting(false)
+            }
+          }}
+          disabled={!canSort}
+        >
+          <ArrowUpIcon className="size-3.5!" />
+          <span className="grow">Asc</span>
+          {isSorted === "asc" && (
+            <CheckIcon className="text-primary size-4 opacity-100!" />
+          )}
+        </DropdownMenuItem>,
+        <DropdownMenuItem
+          key="sort-desc"
+          onClick={() => {
+            if (isSorted === "desc") {
+              column.clearSorting()
+            } else {
+              column.toggleSorting(true)
+            }
+          }}
+          disabled={!canSort}
+        >
+          <ArrowDownIcon className="size-3.5!" />
+          <span className="grow">Desc</span>
+          {isSorted === "desc" && (
+            <CheckIcon className="text-primary size-4 opacity-100!" />
+          )}
+        </DropdownMenuItem>
+      )
+      hasPreviousSection = true
+    }
+
+    // Pin section
+    if (props.tableLayout?.columnsPinnable && canPin) {
+      if (hasPreviousSection) {
+        items.push(<DropdownMenuSeparator key="sep-pin" />)
+      }
+      items.push(
+        <DropdownMenuItem
+          key="pin-left"
+          onClick={() => column.pin(isPinned === "left" ? false : "left")}
+        >
+          <ArrowLeftToLineIcon className="size-3.5!" aria-hidden="true" />
+          <span className="grow">Pin to left</span>
+          {isPinned === "left" && (
+            <CheckIcon className="text-primary size-4 opacity-100!" />
+          )}
+        </DropdownMenuItem>,
+        <DropdownMenuItem
+          key="pin-right"
+          onClick={() => column.pin(isPinned === "right" ? false : "right")}
+        >
+          <ArrowRightToLineIcon className="size-3.5!" aria-hidden="true" />
+          <span className="grow">Pin to right</span>
+          {isPinned === "right" && (
+            <CheckIcon className="text-primary size-4 opacity-100!" />
+          )}
+        </DropdownMenuItem>
+      )
+      hasPreviousSection = true
+    }
+
+    // Move section
+    if (props.tableLayout?.columnsMovable) {
+      if (hasPreviousSection) {
+        items.push(<DropdownMenuSeparator key="sep-move" />)
+      }
+      items.push(
+        <DropdownMenuItem
+          key="move-left"
+          onClick={() => {
+            if (columnIndex > 0) {
+              const newOrder = [...columnOrder]
+              const [movedColumn] = newOrder.splice(columnIndex, 1)
+              newOrder.splice(columnIndex - 1, 0, movedColumn)
+              table.setColumnOrder(newOrder)
+            }
+          }}
+          disabled={!canMoveLeft || isPinned !== false}
+        >
+          <ArrowLeftIcon className="size-3.5!" aria-hidden="true" />
+          <span>Move to Left</span>
+        </DropdownMenuItem>,
+        <DropdownMenuItem
+          key="move-right"
+          onClick={() => {
+            if (columnIndex < columnOrder.length - 1) {
+              const newOrder = [...columnOrder]
+              const [movedColumn] = newOrder.splice(columnIndex, 1)
+              newOrder.splice(columnIndex + 1, 0, movedColumn)
+              table.setColumnOrder(newOrder)
+            }
+          }}
+          disabled={!canMoveRight || isPinned !== false}
+        >
+          <ArrowRightIcon className="size-3.5!" aria-hidden="true" />
+          <span>Move to Right</span>
+        </DropdownMenuItem>
+      )
+      hasPreviousSection = true
+    }
+
+    // Visibility section
+    if (props.tableLayout?.columnsVisibility && visibility) {
+      if (hasPreviousSection) {
+        items.push(<DropdownMenuSeparator key="sep-visibility" />)
+      }
+      items.push(
+        <DropdownMenuSub key="visibility">
+          <DropdownMenuSubTrigger>
+            <Settings2Icon className="size-3.5!" />
+            <span>Columns</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent side="right">
+            {table
+              .getAllColumns()
+              .filter((col) => col.getCanHide())
+              .map((col) => (
+                <DropdownMenuCheckboxItem
+                  key={col.id}
+                  checked={col.getIsVisible()}
+                  onSelect={(event) => event.preventDefault()}
+                  onCheckedChange={(value) => col.toggleVisibility(!!value)}
+                  className="capitalize"
+                >
+                  {getColumnHeaderLabel(col)}
+                </DropdownMenuCheckboxItem>
+              ))}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      )
+    }
+
+    return items
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    filter,
+    canSort,
+    isSorted,
+    column,
+    props.tableLayout?.columnsPinnable,
+    props.tableLayout?.columnsMovable,
+    props.tableLayout?.columnsVisibility,
+    canPin,
+    isPinned,
+    canMoveLeft,
+    canMoveRight,
+    visibility,
+    table,
+    columnIndex,
+    columnOrder,
+    columnVisibilityKey, // Needed to update checkbox states when visibility changes
+  ])
+
+  if (hasControls) {
+    return (
+      <div className="flex h-full items-center justify-between gap-1.5">
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button
+                variant="ghost"
+                className={headerButtonClassName}
+                disabled={isLoading || recordCount === 0}
+              >
+                {icon && icon}
+                {resolvedTitle}
+                {sortIcon}
+              </Button>
+            }
+          />
+          <DropdownMenuContent className="w-40" align="start">
+            {menuItems}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        {props.tableLayout?.columnsPinnable && canPin && isPinned && (
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            className="-me-1 size-7 rounded-md"
+            onClick={() => column.pin(false)}
+            aria-label={`Unpin ${resolvedTitle} column`}
+            title={`Unpin ${resolvedTitle} column`}
+          >
+            <PinOffIcon className="size-3.5! opacity-50!" aria-hidden="true" />
+          </Button>
+        )}
+      </div>
+    )
+  }
+
+  if (canSort || (props.tableLayout?.columnsResizable && canResize)) {
+    return (
+      <div className="flex h-full items-center">
+        <Button
+          variant="ghost"
+          className={headerButtonClassName}
+          disabled={isLoading || recordCount === 0}
+          onClick={handleSort}
+        >
+          {icon && icon}
+          {resolvedTitle}
+          {sortIcon}
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className={headerLabelClassName}>
+      {icon && icon}
+      {resolvedTitle}
+    </div>
+  )
+}
+
+const DataGridColumnHeader = memo(
+  DataGridColumnHeaderInner
+) as typeof DataGridColumnHeaderInner
+
+export { DataGridColumnHeader, type DataGridColumnHeaderProps }
@@ -0,0 +1,53 @@
+"use client"
+
+import { ReactElement } from "react"
+import { getColumnHeaderLabel } from "@/components/reui/data-grid/data-grid"
+import { Table } from "@tanstack/react-table"
+
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@evobgp/ui/components/dropdown-menu"
+
+function DataGridColumnVisibility<TData>({
+  table,
+  trigger,
+}: {
+  table: Table<TData>
+  trigger: ReactElement<Record<string, unknown>>
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={trigger} />
+      <DropdownMenuContent align="end" className="min-w-[150px]">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel className="font-medium">
+            Toggle Columns
+          </DropdownMenuLabel>
+          {table
+            .getAllColumns()
+            .filter((column) => column.getCanHide())
+            .map((column) => {
+              return (
+                <DropdownMenuCheckboxItem
+                  key={column.id}
+                  className="capitalize"
+                  checked={column.getIsVisible()}
+                  onSelect={(event) => event.preventDefault()}
+                  onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                >
+                  {getColumnHeaderLabel(column)}
+                </DropdownMenuCheckboxItem>
+              )
+            })}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export { DataGridColumnVisibility }
@@ -0,0 +1,224 @@
+import React, { ReactNode } from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@evobgp/ui/components/select"
+import { Skeleton } from "@evobgp/ui/components/skeleton"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+interface DataGridPaginationProps {
+  sizes?: number[]
+  sizesInfo?: string
+  sizesLabel?: string
+  sizesDescription?: string
+  sizesSkeleton?: ReactNode
+  more?: boolean
+  moreLimit?: number
+  info?: string
+  infoSkeleton?: ReactNode
+  className?: string
+  rowsPerPageLabel?: string
+  previousPageLabel?: string
+  nextPageLabel?: string
+  ellipsisText?: string
+}
+
+function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element {
+  const { table, recordCount, isLoading } = useDataGrid()
+
+  const defaultProps: Partial<DataGridPaginationProps> = {
+    sizes: [5, 10, 25, 50, 100],
+    sizesLabel: "Show",
+    sizesDescription: "per page",
+    sizesSkeleton: <Skeleton className="h-8 w-44" />,
+    moreLimit: 5,
+    more: false,
+    info: "{from} - {to} of {count}",
+    infoSkeleton: <Skeleton className="h-8 w-60" />,
+    rowsPerPageLabel: "Rows per page",
+    previousPageLabel: "Go to previous page",
+    nextPageLabel: "Go to next page",
+    ellipsisText: "...",
+  }
+
+  const mergedProps: DataGridPaginationProps = { ...defaultProps, ...props }
+
+  const btnBaseClasses = "size-7 p-0 text-sm"
+  const btnArrowClasses = btnBaseClasses + " rtl:transform rtl:rotate-180"
+  const pageIndex = table.getState().pagination.pageIndex
+  const pageSize = table.getState().pagination.pageSize
+  const from = pageIndex * pageSize + 1
+  const to = Math.min((pageIndex + 1) * pageSize, recordCount)
+  const pageCount = table.getPageCount()
+
+  // Replace placeholders in paginationInfo
+  const paginationInfo = mergedProps?.info
+    ? mergedProps.info
+        .replace("{from}", from.toString())
+        .replace("{to}", to.toString())
+        .replace("{count}", recordCount.toString())
+    : `${from} - ${to} of ${recordCount}`
+
+  // Pagination limit logic
+  const paginationMoreLimit = mergedProps?.moreLimit || 5
+
+  // Determine the start and end of the pagination group
+  const currentGroupStart =
+    Math.floor(pageIndex / paginationMoreLimit) * paginationMoreLimit
+  const currentGroupEnd = Math.min(
+    currentGroupStart + paginationMoreLimit,
+    pageCount
+  )
+
+  // Render page buttons based on the current group
+  const renderPageButtons = () => {
+    const buttons = []
+    for (let i = currentGroupStart; i < currentGroupEnd; i++) {
+      buttons.push(
+        <Button
+          key={i}
+          size="icon-sm"
+          variant="ghost"
+          className={cn(btnBaseClasses, "text-muted-foreground", {
+            "bg-accent text-accent-foreground": pageIndex === i,
+          })}
+          onClick={() => {
+            if (pageIndex !== i) {
+              table.setPageIndex(i)
+            }
+          }}
+        >
+          {i + 1}
+        </Button>
+      )
+    }
+    return buttons
+  }
+
+  // Render a "previous" ellipsis button if there are previous pages to show
+  const renderEllipsisPrevButton = () => {
+    if (currentGroupStart > 0) {
+      return (
+        <Button
+          size="icon-sm"
+          className={btnBaseClasses}
+          variant="ghost"
+          onClick={() => table.setPageIndex(currentGroupStart - 1)}
+        >
+          {mergedProps.ellipsisText}
+        </Button>
+      )
+    }
+    return null
+  }
+
+  // Render a "next" ellipsis button if there are more pages to show after the current group
+  const renderEllipsisNextButton = () => {
+    if (currentGroupEnd < pageCount) {
+      return (
+        <Button
+          className={btnBaseClasses}
+          variant="ghost"
+          size="icon-sm"
+          onClick={() => table.setPageIndex(currentGroupEnd)}
+        >
+          {mergedProps.ellipsisText}
+        </Button>
+      )
+    }
+    return null
+  }
+
+  return (
+    <div
+      data-slot="data-grid-pagination"
+      className={cn(
+        "flex grow flex-col flex-wrap items-center justify-between gap-2.5 py-2.5 sm:flex-row sm:py-0",
+        mergedProps?.className
+      )}
+    >
+      <div className="order-2 flex flex-wrap items-center space-x-2.5 pb-2.5 sm:order-1 sm:pb-0">
+        {isLoading ? (
+          mergedProps?.sizesSkeleton
+        ) : (
+          <>
+            <div className="text-muted-foreground text-sm">
+              {mergedProps.rowsPerPageLabel}
+            </div>
+            <Select
+              value={`${pageSize}`}
+              onValueChange={(value) => {
+                const newPageSize = Number(value)
+                table.setPageSize(newPageSize)
+              }}
+            >
+              <SelectTrigger className="w-14" size="sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent side="top" className="min-w-18">
+                {mergedProps?.sizes?.map((size: number) => (
+                  <SelectItem key={size} value={`${size}`}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </>
+        )}
+      </div>
+      <div className="order-1 flex flex-col items-center justify-center gap-2.5 pt-2.5 sm:order-2 sm:flex-row sm:justify-end sm:pt-0">
+        {isLoading ? (
+          mergedProps?.infoSkeleton
+        ) : (
+          <>
+            <div className="text-muted-foreground text-sm order-2 text-nowrap sm:order-1">
+              {paginationInfo}
+            </div>
+            {pageCount > 1 && (
+              <div className="order-1 flex items-center space-x-1 sm:order-2">
+                <Button
+                  size="icon-sm"
+                  variant="ghost"
+                  className={btnArrowClasses}
+                  onClick={() => table.previousPage()}
+                  disabled={!table.getCanPreviousPage()}
+                >
+                  <span className="sr-only">
+                    {mergedProps.previousPageLabel}
+                  </span>
+                  <ChevronLeftIcon className="size-4" />
+                </Button>
+
+                {renderEllipsisPrevButton()}
+
+                {renderPageButtons()}
+
+                {renderEllipsisNextButton()}
+
+                <Button
+                  size="icon-sm"
+                  variant="ghost"
+                  className={btnArrowClasses}
+                  onClick={() => table.nextPage()}
+                  disabled={!table.getCanNextPage()}
+                >
+                  <span className="sr-only">{mergedProps.nextPageLabel}</span>
+                  <ChevronRightIcon className="size-4" />
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export { DataGridPagination, type DataGridPaginationProps }
@@ -0,0 +1,421 @@
+"use client"
+
+import {
+  PointerEvent,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+const MIN_THUMB_SIZE = 24
+const FALLBACK_SCROLLBAR_SIZE = 12
+
+const INITIAL_METRICS = {
+  hasVerticalOverflow: false,
+  headerHeight: 0,
+  horizontalScrollbarSize: 0,
+  thumbHeight: 0,
+  thumbTop: 0,
+  trackHeight: 0,
+} as const
+
+type DataGridScrollAreaOrientation = "horizontal" | "vertical" | "both"
+
+type ScrollbarMetrics = {
+  hasVerticalOverflow: boolean
+  headerHeight: number
+  horizontalScrollbarSize: number
+  thumbHeight: number
+  thumbTop: number
+  trackHeight: number
+}
+
+type ObservedElements = {
+  header: HTMLElement | null
+  horizontalScrollbar: HTMLElement | null
+  table: HTMLElement | null
+  tableViewport: HTMLElement | null
+}
+
+type DataGridScrollAreaProps = Omit<
+  ScrollAreaPrimitive.Root.Props,
+  "children"
+> & {
+  children: ReactNode
+  orientation?: DataGridScrollAreaOrientation
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function areMetricsEqual(next: ScrollbarMetrics, prev: ScrollbarMetrics) {
+  return (
+    next.hasVerticalOverflow === prev.hasVerticalOverflow &&
+    next.headerHeight === prev.headerHeight &&
+    next.horizontalScrollbarSize === prev.horizontalScrollbarSize &&
+    next.thumbHeight === prev.thumbHeight &&
+    next.thumbTop === prev.thumbTop &&
+    next.trackHeight === prev.trackHeight
+  )
+}
+
+function applyMetrics(element: HTMLElement, metrics: ScrollbarMetrics) {
+  element.style.setProperty(
+    "--data-grid-scrollbar-header-height",
+    `${metrics.headerHeight}px`
+  )
+  element.style.setProperty(
+    "--data-grid-scrollbar-thumb-height",
+    `${metrics.thumbHeight}px`
+  )
+  element.style.setProperty(
+    "--data-grid-scrollbar-thumb-top",
+    `${metrics.thumbTop}px`
+  )
+  element.style.setProperty(
+    "--data-grid-scrollbar-track-height",
+    `${metrics.trackHeight}px`
+  )
+}
+
+function DataGridScrollArea({
+  children,
+  className,
+  orientation = "both",
+  ...props
+}: DataGridScrollAreaProps) {
+  const { props: dataGridProps } = useDataGrid()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const viewportRef = useRef<HTMLDivElement | null>(null)
+  const dragRef = useRef<{
+    pointerId: number
+    startScrollTop: number
+    startY: number
+  } | null>(null)
+  const metricsRef = useRef<ScrollbarMetrics>(INITIAL_METRICS)
+  const observedElementsRef = useRef<ObservedElements>({
+    header: null,
+    horizontalScrollbar: null,
+    table: null,
+    tableViewport: null,
+  })
+
+  const showHorizontal = orientation !== "vertical"
+  const showVertical = orientation !== "horizontal"
+  const usesCustomVerticalScrollbar =
+    showVertical && !!dataGridProps.tableLayout?.headerSticky
+  const [hasCustomVerticalOverflow, setHasCustomVerticalOverflow] =
+    useState(false)
+
+  const clearDragState = useCallback(() => {
+    dragRef.current = null
+    document.body.style.userSelect = ""
+    document.body.style.webkitUserSelect = ""
+  }, [])
+
+  const resetMetrics = useCallback(() => {
+    const container = containerRef.current
+
+    if (container && !areMetricsEqual(INITIAL_METRICS, metricsRef.current)) {
+      applyMetrics(container, INITIAL_METRICS)
+      metricsRef.current = INITIAL_METRICS
+    }
+
+    setHasCustomVerticalOverflow((prev) => (prev ? false : prev))
+  }, [])
+
+  const syncCustomVerticalScrollbar = useCallback(() => {
+    const container = containerRef.current
+    const viewport = viewportRef.current
+
+    if (!container || !viewport || !usesCustomVerticalScrollbar) {
+      resetMetrics()
+      return
+    }
+
+    const { header, horizontalScrollbar } = observedElementsRef.current
+    const headerHeight = header?.getBoundingClientRect().height ?? 0
+    const viewportHeight = viewport.clientHeight
+    const viewportWidth = viewport.clientWidth
+    const scrollHeight = viewport.scrollHeight
+    const scrollWidth = viewport.scrollWidth
+    const hasHorizontalOverflow =
+      showHorizontal && scrollWidth > viewportWidth + 0.5
+    const horizontalScrollbarSize = hasHorizontalOverflow
+      ? horizontalScrollbar?.offsetHeight || FALLBACK_SCROLLBAR_SIZE
+      : 0
+    const trackHeight = Math.max(
+      0,
+      viewportHeight - headerHeight - horizontalScrollbarSize
+    )
+    const maxScroll = Math.max(0, scrollHeight - viewportHeight)
+
+    let nextMetrics: ScrollbarMetrics
+
+    if (trackHeight === 0 || maxScroll === 0) {
+      nextMetrics = {
+        hasVerticalOverflow: false,
+        headerHeight,
+        horizontalScrollbarSize,
+        thumbHeight: trackHeight,
+        thumbTop: 0,
+        trackHeight,
+      }
+    } else {
+      const bodyContentHeight = Math.max(
+        trackHeight,
+        scrollHeight - headerHeight
+      )
+      const thumbHeight = clamp(
+        trackHeight * (trackHeight / bodyContentHeight),
+        MIN_THUMB_SIZE,
+        trackHeight
+      )
+      const maxThumbTop = Math.max(0, trackHeight - thumbHeight)
+      const thumbTop =
+        maxThumbTop > 0 ? (viewport.scrollTop / maxScroll) * maxThumbTop : 0
+
+      nextMetrics = {
+        hasVerticalOverflow: true,
+        headerHeight,
+        horizontalScrollbarSize,
+        thumbHeight,
+        thumbTop,
+        trackHeight,
+      }
+    }
+
+    if (!areMetricsEqual(nextMetrics, metricsRef.current)) {
+      applyMetrics(container, nextMetrics)
+      metricsRef.current = nextMetrics
+    }
+
+    setHasCustomVerticalOverflow((prev) =>
+      prev === nextMetrics.hasVerticalOverflow
+        ? prev
+        : nextMetrics.hasVerticalOverflow
+    )
+  }, [resetMetrics, showHorizontal, usesCustomVerticalScrollbar])
+
+  useEffect(() => {
+    const container = containerRef.current
+    const viewport = viewportRef.current
+
+    if (!container || !viewport) return
+
+    if (!usesCustomVerticalScrollbar) {
+      resetMetrics()
+      return
+    }
+
+    observedElementsRef.current = {
+      header: container.querySelector(
+        '[data-slot="data-grid-table"] thead'
+      ) as HTMLElement | null,
+      horizontalScrollbar: container.querySelector(
+        '[data-slot="data-grid-scrollbar"][data-orientation="horizontal"]'
+      ) as HTMLElement | null,
+      table: container.querySelector(
+        '[data-slot="data-grid-table"]'
+      ) as HTMLElement | null,
+      tableViewport: container.querySelector(
+        '[data-slot="data-grid-table-viewport"]'
+      ) as HTMLElement | null,
+    }
+
+    let frame = 0
+
+    const scheduleSync = () => {
+      cancelAnimationFrame(frame)
+      frame = window.requestAnimationFrame(syncCustomVerticalScrollbar)
+    }
+
+    scheduleSync()
+    viewport.addEventListener("scroll", scheduleSync, { passive: true })
+
+    const observer =
+      typeof ResizeObserver === "undefined"
+        ? null
+        : new ResizeObserver(scheduleSync)
+
+    observer?.observe(viewport)
+    observedElementsRef.current.header &&
+      observer?.observe(observedElementsRef.current.header)
+    observedElementsRef.current.table &&
+      observer?.observe(observedElementsRef.current.table)
+    observedElementsRef.current.tableViewport &&
+      observer?.observe(observedElementsRef.current.tableViewport)
+
+    return () => {
+      cancelAnimationFrame(frame)
+      observer?.disconnect()
+      viewport.removeEventListener("scroll", scheduleSync)
+      clearDragState()
+    }
+  }, [
+    clearDragState,
+    resetMetrics,
+    syncCustomVerticalScrollbar,
+    usesCustomVerticalScrollbar,
+  ])
+
+  const scrollToThumbOffset = (nextThumbTop: number) => {
+    const viewport = viewportRef.current
+    const { thumbHeight, trackHeight } = metricsRef.current
+
+    if (!viewport) return
+
+    const maxScroll = Math.max(0, viewport.scrollHeight - viewport.clientHeight)
+    const maxThumbTop = Math.max(0, trackHeight - thumbHeight)
+
+    if (maxScroll === 0 || maxThumbTop === 0) {
+      viewport.scrollTop = 0
+      return
+    }
+
+    const ratio = clamp(nextThumbTop, 0, maxThumbTop) / maxThumbTop
+    viewport.scrollTop = ratio * maxScroll
+  }
+
+  const handleThumbPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    const viewport = viewportRef.current
+
+    if (!viewport) return
+
+    event.preventDefault()
+    event.stopPropagation()
+    event.currentTarget.setPointerCapture(event.pointerId)
+
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startScrollTop: viewport.scrollTop,
+      startY: event.clientY,
+    }
+
+    document.body.style.userSelect = "none"
+    document.body.style.webkitUserSelect = "none"
+  }
+
+  const handleThumbPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    const viewport = viewportRef.current
+    const dragState = dragRef.current
+    const { thumbHeight, trackHeight } = metricsRef.current
+
+    if (!viewport || !dragState || dragState.pointerId !== event.pointerId) {
+      return
+    }
+
+    const maxThumbTop = Math.max(0, trackHeight - thumbHeight)
+    const maxScroll = Math.max(0, viewport.scrollHeight - viewport.clientHeight)
+
+    if (maxThumbTop === 0 || maxScroll === 0) return
+
+    const deltaY = event.clientY - dragState.startY
+    const nextScrollTop =
+      dragState.startScrollTop + (deltaY / maxThumbTop) * maxScroll
+
+    viewport.scrollTop = clamp(nextScrollTop, 0, maxScroll)
+  }
+
+  const handleThumbPointerUp = (event: PointerEvent<HTMLDivElement>) => {
+    if (dragRef.current?.pointerId !== event.pointerId) return
+    clearDragState()
+  }
+
+  const handleTrackPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    const { thumbHeight } = metricsRef.current
+
+    if (event.target !== event.currentTarget) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const rect = event.currentTarget.getBoundingClientRect()
+    const offsetY = event.clientY - rect.top - thumbHeight / 2
+
+    scrollToThumbOffset(offsetY)
+  }
+
+  return (
+    <div ref={containerRef} className="relative">
+      <ScrollAreaPrimitive.Root
+        data-slot="data-grid-scroll-area"
+        className={cn("relative", className)}
+        {...props}
+      >
+        <ScrollAreaPrimitive.Viewport
+          ref={viewportRef}
+          data-slot="scroll-area-viewport"
+          className="size-full"
+        >
+          <ScrollAreaPrimitive.Content data-slot="scroll-area-content">
+            {children}
+          </ScrollAreaPrimitive.Content>
+        </ScrollAreaPrimitive.Viewport>
+
+        {showHorizontal && (
+          <ScrollAreaPrimitive.Scrollbar
+            data-slot="data-grid-scrollbar"
+            data-orientation="horizontal"
+            orientation="horizontal"
+            className="flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent"
+          >
+            <ScrollAreaPrimitive.Thumb
+              data-slot="data-grid-thumb"
+              className="bg-border rounded-full relative flex-1"
+            />
+          </ScrollAreaPrimitive.Scrollbar>
+        )}
+
+        {showVertical && !usesCustomVerticalScrollbar && (
+          <ScrollAreaPrimitive.Scrollbar
+            data-slot="data-grid-scrollbar"
+            data-orientation="vertical"
+            orientation="vertical"
+            className="flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent"
+          >
+            <ScrollAreaPrimitive.Thumb
+              data-slot="data-grid-thumb"
+              className="bg-border rounded-full relative flex-1"
+            />
+          </ScrollAreaPrimitive.Scrollbar>
+        )}
+      </ScrollAreaPrimitive.Root>
+
+      {usesCustomVerticalScrollbar && hasCustomVerticalOverflow && (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-e-0 top-(--data-grid-scrollbar-header-height) z-20 h-(--data-grid-scrollbar-track-height)"
+        >
+          <div
+            className="pointer-events-auto relative h-full w-2 touch-none p-px"
+            onPointerDown={handleTrackPointerDown}
+          >
+            <div
+              className={cn(
+                "bg-border absolute end-px w-2",
+                "top-(--data-grid-scrollbar-thumb-top) h-(--data-grid-scrollbar-thumb-height)",
+                "rounded-full"
+              )}
+              onLostPointerCapture={clearDragState}
+              onPointerCancel={handleThumbPointerUp}
+              onPointerDown={handleThumbPointerDown}
+              onPointerMove={handleThumbPointerMove}
+              onPointerUp={handleThumbPointerUp}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { DataGridScrollArea }
+export type { DataGridScrollAreaOrientation, DataGridScrollAreaProps }
@@ -0,0 +1,307 @@
+import {
+  createContext,
+  CSSProperties,
+  ReactNode,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import {
+  DataGridTableBase,
+  DataGridTableBody,
+  DataGridTableBodyRow,
+  DataGridTableBodyRowCell,
+  DataGridTableBodyRowSkeleton,
+  DataGridTableBodyRowSkeletonCell,
+  DataGridTableEmpty,
+  DataGridTableFoot,
+  DataGridTableHead,
+  DataGridTableHeadRow,
+  DataGridTableHeadRowCell,
+  DataGridTableHeadRowCellResize,
+  DataGridTableRowSpacer,
+  DataGridTableViewport,
+} from "@/components/reui/data-grid/data-grid-table"
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  UniqueIdentifier,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type Modifier,
+} from "@dnd-kit/core"
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { Cell, flexRender, HeaderGroup, Row } from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Button } from "@evobgp/ui/components/button"
+import { GripHorizontalIcon } from "lucide-react"
+
+// Context to share sortable listeners from row to handle
+type SortableContextValue = ReturnType<typeof useSortable>
+const SortableRowContext = createContext<Pick<
+  SortableContextValue,
+  "attributes" | "listeners"
+> | null>(null)
+
+function DataGridTableDndRowHandle({ className }: { className?: string }) {
+  const context = useContext(SortableRowContext)
+
+  if (!context) {
+    // Fallback if context is not available (shouldn't happen in normal usage)
+    return (
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        className={cn(
+          "size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing",
+          className
+        )}
+        disabled
+      >
+        <GripHorizontalIcon
+        />
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      className={cn(
+        "size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing",
+        className
+      )}
+      {...context.attributes}
+      {...context.listeners}
+    >
+      <GripHorizontalIcon
+      />
+    </Button>
+  )
+}
+
+function DataGridTableDndRow<TData>({ row }: { row: Row<TData> }) {
+  const {
+    transform,
+    transition,
+    setNodeRef,
+    isDragging,
+    attributes,
+    listeners,
+  } = useSortable({
+    id: row.id,
+  })
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition,
+    opacity: isDragging ? 0.8 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: "relative",
+    cursor: isDragging ? "grabbing" : undefined,
+  }
+
+  return (
+    <SortableRowContext.Provider value={{ attributes, listeners }}>
+      <DataGridTableBodyRow
+        row={row}
+        dndRef={setNodeRef}
+        dndStyle={style}
+        key={row.id}
+      >
+        {row.getVisibleCells().map((cell: Cell<TData, unknown>, colIndex) => {
+          return (
+            <DataGridTableBodyRowCell cell={cell} key={colIndex}>
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </DataGridTableBodyRowCell>
+          )
+        })}
+      </DataGridTableBodyRow>
+    </SortableRowContext.Provider>
+  )
+}
+
+function DataGridTableDndRows<TData>({
+  handleDragEnd,
+  dataIds,
+  footerContent,
+}: {
+  handleDragEnd: (event: DragEndEvent) => void
+  dataIds: UniqueIdentifier[]
+  footerContent?: ReactNode
+}) {
+  const { table, isLoading, props } = useDataGrid()
+  const pagination = table.getState().pagination
+  const tableContainerRef = useRef<HTMLDivElement>(null)
+  const [isDraggingRow, setIsDraggingRow] = useState(false)
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  )
+
+  useEffect(() => {
+    if (!isDraggingRow) return
+
+    const { body, documentElement } = document
+    const previousBodyCursor = body.style.cursor
+    const previousDocumentCursor = documentElement.style.cursor
+
+    body.style.cursor = "grabbing"
+    documentElement.style.cursor = "grabbing"
+
+    return () => {
+      body.style.cursor = previousBodyCursor
+      documentElement.style.cursor = previousDocumentCursor
+    }
+  }, [isDraggingRow])
+
+  const modifiers = useMemo(() => {
+    const restrictToTableContainer: Modifier = ({
+      transform,
+      draggingNodeRect,
+    }) => {
+      if (!tableContainerRef.current || !draggingNodeRect) {
+        return transform
+      }
+
+      const containerRect = tableContainerRef.current.getBoundingClientRect()
+      const { x, y } = transform
+
+      const minX = containerRect.left - draggingNodeRect.left
+      const maxX = containerRect.right - draggingNodeRect.right
+      const minY = containerRect.top - draggingNodeRect.top
+      const maxY = containerRect.bottom - draggingNodeRect.bottom
+
+      return {
+        ...transform,
+        x: Math.max(minX, Math.min(maxX, x)),
+        y: Math.max(minY, Math.min(maxY, y)),
+      }
+    }
+
+    return [restrictToVerticalAxis, restrictToTableContainer]
+  }, [])
+
+  return (
+    <DndContext
+      id={useId()}
+      collisionDetection={closestCenter}
+      modifiers={modifiers}
+      onDragCancel={() => setIsDraggingRow(false)}
+      onDragEnd={(event) => {
+        setIsDraggingRow(false)
+        handleDragEnd(event)
+      }}
+      onDragStart={() => setIsDraggingRow(true)}
+      sensors={sensors}
+    >
+      <DataGridTableViewport
+        viewportRef={tableContainerRef}
+        className={
+          isDraggingRow
+            ? "relative cursor-grabbing [&_*]:cursor-grabbing!"
+            : "relative"
+        }
+      >
+        <DataGridTableBase>
+          <DataGridTableHead>
+            {table
+              .getHeaderGroups()
+              .map((headerGroup: HeaderGroup<TData>, index) => {
+                return (
+                  <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
+                    {headerGroup.headers.map((header, index) => {
+                      const { column } = header
+
+                      return (
+                        <DataGridTableHeadRowCell header={header} key={index}>
+                          {header.isPlaceholder ? null : props.tableLayout
+                              ?.columnsResizable && column.getCanResize() ? (
+                            <div className="truncate">
+                              {flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                            </div>
+                          ) : (
+                            flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )
+                          )}
+                          {props.tableLayout?.columnsResizable &&
+                            column.getCanResize() && (
+                              <DataGridTableHeadRowCellResize header={header} />
+                            )}
+                        </DataGridTableHeadRowCell>
+                      )
+                    })}
+                  </DataGridTableHeadRow>
+                )
+              })}
+          </DataGridTableHead>
+
+          {(props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
+            <DataGridTableRowSpacer />
+          )}
+
+          <DataGridTableBody>
+            {props.loadingMode === "skeleton" &&
+            isLoading &&
+            pagination?.pageSize ? (
+              Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
+                <DataGridTableBodyRowSkeleton key={rowIndex}>
+                  {table.getVisibleFlatColumns().map((column, colIndex) => {
+                    return (
+                      <DataGridTableBodyRowSkeletonCell
+                        column={column}
+                        key={colIndex}
+                      >
+                        {column.columnDef.meta?.skeleton}
+                      </DataGridTableBodyRowSkeletonCell>
+                    )
+                  })}
+                </DataGridTableBodyRowSkeleton>
+              ))
+            ) : table.getRowModel().rows.length ? (
+              <SortableContext
+                items={dataIds}
+                strategy={verticalListSortingStrategy}
+              >
+                {table.getRowModel().rows.map((row: Row<TData>) => {
+                  return <DataGridTableDndRow row={row} key={row.id} />
+                })}
+              </SortableContext>
+            ) : (
+              <DataGridTableEmpty />
+            )}
+          </DataGridTableBody>
+
+          {footerContent && (
+            <DataGridTableFoot>{footerContent}</DataGridTableFoot>
+          )}
+        </DataGridTableBase>
+      </DataGridTableViewport>
+    </DndContext>
+  )
+}
+
+export { DataGridTableDndRowHandle, DataGridTableDndRows }
@@ -0,0 +1,314 @@
+"use client"
+
+import {
+  CSSProperties,
+  Fragment,
+  ReactNode,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import {
+  DataGridTableBase,
+  DataGridTableBody,
+  DataGridTableBodyRow,
+  DataGridTableBodyRowCell,
+  DataGridTableBodyRowExpandded,
+  DataGridTableBodyRowSkeleton,
+  DataGridTableBodyRowSkeletonCell,
+  DataGridTableEmpty,
+  DataGridTableFoot,
+  DataGridTableHead,
+  DataGridTableHeadRow,
+  DataGridTableHeadRowCell,
+  DataGridTableHeadRowCellResize,
+  DataGridTableRowSpacer,
+  DataGridTableViewport,
+} from "@/components/reui/data-grid/data-grid-table"
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  Modifier,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core"
+import {
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import {
+  Cell,
+  flexRender,
+  Header,
+  HeaderGroup,
+  Row,
+} from "@tanstack/react-table"
+
+import { Button } from "@evobgp/ui/components/button"
+import { GripVerticalIcon } from "lucide-react"
+
+function DataGridTableDndHeader<TData>({
+  header,
+}: {
+  header: Header<TData, unknown>
+}) {
+  const { props } = useDataGrid()
+  const { column } = header
+
+  // Check if column ordering is enabled for this column
+  const canOrder =
+    (column.columnDef as { enableColumnOrdering?: boolean })
+      .enableColumnOrdering !== false
+
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id: header.column.id,
+  })
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition,
+    cursor: isDragging ? "grabbing" : undefined,
+    whiteSpace: "nowrap",
+    width: props.tableLayout?.columnsResizable
+      ? `calc(var(--header-${header.id}-size) * 1px)`
+      : header.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  }
+
+  return (
+    <DataGridTableHeadRowCell
+      header={header}
+      dndStyle={style}
+      dndRef={setNodeRef}
+    >
+      <div className="flex items-center justify-start gap-0.5">
+        {canOrder && (
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            className={`-ms-2 size-6 ${isDragging ? "cursor-grabbing" : "cursor-grab active:cursor-grabbing"}`}
+            {...attributes}
+            {...listeners}
+            aria-label="Drag to reorder"
+          >
+            <GripVerticalIcon className="opacity-60 hover:opacity-100" aria-hidden="true" />
+          </Button>
+        )}
+        <span className="grow truncate">
+          {header.isPlaceholder
+            ? null
+            : flexRender(header.column.columnDef.header, header.getContext())}
+        </span>
+        {props.tableLayout?.columnsResizable && column.getCanResize() && (
+          <DataGridTableHeadRowCellResize header={header} />
+        )}
+      </div>
+    </DataGridTableHeadRowCell>
+  )
+}
+
+function DataGridTableDndCell<TData>({ cell }: { cell: Cell<TData, unknown> }) {
+  const { props } = useDataGrid()
+  const { isDragging, setNodeRef, transform, transition } = useSortable({
+    id: cell.column.id,
+  })
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition,
+    cursor: isDragging ? "grabbing" : undefined,
+    width: props.tableLayout?.columnsResizable
+      ? `calc(var(--col-${cell.column.id}-size) * 1px)`
+      : cell.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  }
+
+  return (
+    <DataGridTableBodyRowCell cell={cell} dndStyle={style} dndRef={setNodeRef}>
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </DataGridTableBodyRowCell>
+  )
+}
+
+function DataGridTableDnd<TData>({
+  handleDragEnd,
+  footerContent,
+}: {
+  handleDragEnd: (event: DragEndEvent) => void
+  footerContent?: ReactNode
+}) {
+  const { table, isLoading, props } = useDataGrid()
+  const pagination = table.getState().pagination
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isDraggingColumn, setIsDraggingColumn] = useState(false)
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  )
+
+  useEffect(() => {
+    if (!isDraggingColumn) return
+
+    const { body, documentElement } = document
+    const previousBodyCursor = body.style.cursor
+    const previousDocumentCursor = documentElement.style.cursor
+
+    body.style.cursor = "grabbing"
+    documentElement.style.cursor = "grabbing"
+
+    return () => {
+      body.style.cursor = previousBodyCursor
+      documentElement.style.cursor = previousDocumentCursor
+    }
+  }, [isDraggingColumn])
+
+  // Custom modifier to restrict dragging within table bounds with edge offset
+  const restrictToTableBounds: Modifier = ({ draggingNodeRect, transform }) => {
+    if (!draggingNodeRect || !containerRef.current) {
+      return { ...transform, y: 0 }
+    }
+
+    const containerRect = containerRef.current.getBoundingClientRect()
+    const edgeOffset = 0
+
+    const minX = containerRect.left - draggingNodeRect.left - edgeOffset
+    const maxX =
+      containerRect.right -
+      draggingNodeRect.left -
+      draggingNodeRect.width +
+      edgeOffset
+
+    return {
+      ...transform,
+      x: Math.min(Math.max(transform.x, minX), maxX),
+      y: 0, // Lock vertical movement
+    }
+  }
+
+  return (
+    <DndContext
+      collisionDetection={closestCenter}
+      id={useId()}
+      modifiers={[restrictToTableBounds]}
+      onDragCancel={() => setIsDraggingColumn(false)}
+      onDragEnd={(event) => {
+        setIsDraggingColumn(false)
+        handleDragEnd(event)
+      }}
+      onDragStart={() => setIsDraggingColumn(true)}
+      sensors={sensors}
+    >
+      <DataGridTableViewport
+        viewportRef={containerRef}
+        className={
+          isDraggingColumn
+            ? "relative cursor-grabbing [&_*]:cursor-grabbing!"
+            : "relative"
+        }
+      >
+        <DataGridTableBase>
+          <DataGridTableHead>
+            {table
+              .getHeaderGroups()
+              .map((headerGroup: HeaderGroup<TData>, index) => {
+                return (
+                  <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
+                    <SortableContext
+                      items={table.getState().columnOrder}
+                      strategy={horizontalListSortingStrategy}
+                    >
+                      {headerGroup.headers.map((header) => (
+                        <DataGridTableDndHeader
+                          header={header}
+                          key={header.id}
+                        />
+                      ))}
+                    </SortableContext>
+                  </DataGridTableHeadRow>
+                )
+              })}
+          </DataGridTableHead>
+
+          {(props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
+            <DataGridTableRowSpacer />
+          )}
+
+          <DataGridTableBody>
+            {props.loadingMode === "skeleton" &&
+            isLoading &&
+            pagination?.pageSize ? (
+              Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
+                <DataGridTableBodyRowSkeleton key={rowIndex}>
+                  {table.getVisibleFlatColumns().map((column, colIndex) => {
+                    return (
+                      <DataGridTableBodyRowSkeletonCell
+                        column={column}
+                        key={colIndex}
+                      >
+                        {column.columnDef.meta?.skeleton}
+                      </DataGridTableBodyRowSkeletonCell>
+                    )
+                  })}
+                </DataGridTableBodyRowSkeleton>
+              ))
+            ) : table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row: Row<TData>) => {
+                return (
+                  <Fragment key={row.id}>
+                    <DataGridTableBodyRow row={row}>
+                      {row
+                        .getVisibleCells()
+                        .map((cell: Cell<TData, unknown>) => {
+                          return (
+                            <SortableContext
+                              key={cell.id}
+                              items={table.getState().columnOrder}
+                              strategy={horizontalListSortingStrategy}
+                            >
+                              <DataGridTableDndCell cell={cell} />
+                            </SortableContext>
+                          )
+                        })}
+                    </DataGridTableBodyRow>
+                    {row.getIsExpanded() && (
+                      <DataGridTableBodyRowExpandded row={row} />
+                    )}
+                  </Fragment>
+                )
+              })
+            ) : (
+              <DataGridTableEmpty />
+            )}
+          </DataGridTableBody>
+
+          {footerContent && (
+            <DataGridTableFoot>{footerContent}</DataGridTableFoot>
+          )}
+        </DataGridTableBase>
+      </DataGridTableViewport>
+    </DndContext>
+  )
+}
+
+export { DataGridTableDnd }
@@ -0,0 +1,490 @@
+import {
+  memo,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import { useDataGrid } from "@/components/reui/data-grid/data-grid"
+import {
+  DataGridTableBase,
+  DataGridTableBody,
+  DataGridTableEmpty,
+  DataGridTableFoot,
+  DataGridTableHead,
+  DataGridTableHeadRow,
+  DataGridTableHeadRowCell,
+  DataGridTableHeadRowCellResize,
+  DataGridTableRenderedRow,
+  DataGridTableRowSpacer,
+  DataGridTableViewport,
+  getDataGridTableRowSections,
+} from "@/components/reui/data-grid/data-grid-table"
+import { flexRender, HeaderGroup, Row, Table } from "@tanstack/react-table"
+import {
+  useVirtualizer,
+  VirtualItem,
+  Virtualizer,
+  VirtualizerOptions,
+} from "@tanstack/react-virtual"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Spinner } from "@evobgp/ui/components/spinner"
+
+type DataGridTableVirtualScrollElements = {
+  containerElement: HTMLDivElement | null
+  scrollElement: HTMLElement | null
+}
+
+type DataGridTableVirtualizerInstance = Virtualizer<
+  HTMLElement,
+  HTMLTableRowElement
+>
+
+type DataGridTableVirtualizerOptions<TData> = Omit<
+  VirtualizerOptions<HTMLElement, HTMLTableRowElement>,
+  "count" | "estimateSize" | "getItemKey" | "getScrollElement"
+> & {
+  estimateSize?: (index: number, row: Row<TData>) => number
+  getItemKey?: (index: number, row: Row<TData>) => string | number
+  getScrollElement?: (
+    elements: DataGridTableVirtualScrollElements
+  ) => HTMLElement | null
+}
+
+interface DataGridTableVirtualProps<TData> {
+  height?: number | string
+  estimateSize?: number
+  overscan?: number
+  footerContent?: ReactNode
+  renderHeader?: boolean
+  onFetchMore?: () => void
+  isFetchingMore?: boolean
+  hasMore?: boolean
+  fetchMoreOffset?: number
+  virtualizerOptions?: DataGridTableVirtualizerOptions<TData>
+}
+
+interface VirtualBodyProps<TData> {
+  table: Table<TData>
+  columnCount: number
+  topRows: Row<TData>[]
+  centerRows: Row<TData>[]
+  bottomRows: Row<TData>[]
+  virtualItems: VirtualItem[]
+  totalSize: number
+  isVirtualizationEnabled: boolean
+  isInfiniteMode: boolean
+  isFetchingMore: boolean
+  hasMore?: boolean
+  loadingMoreMessage: ReactNode
+  allRowsLoadedMessage: ReactNode
+  measureRowRef?: (element: HTMLTableRowElement | null) => void
+}
+
+function DataGridTableVirtualSpacer({
+  columnCount,
+  height,
+}: {
+  columnCount: number
+  height: number
+}) {
+  if (height <= 0) return null
+
+  return (
+    <tr aria-hidden="true">
+      <td colSpan={columnCount} style={{ height, padding: 0 }} />
+    </tr>
+  )
+}
+
+function DataGridTableVirtualStatusRow({
+  children,
+  className,
+  columnCount,
+}: {
+  children: ReactNode
+  className?: string
+  columnCount: number
+}) {
+  return (
+    <tr>
+      <td
+        colSpan={columnCount}
+        className={cn(
+          "text-muted-foreground py-4 text-center text-sm",
+          className
+        )}
+      >
+        {children}
+      </td>
+    </tr>
+  )
+}
+
+function DataGridTableVirtualBody<TData>({
+  table,
+  columnCount,
+  topRows,
+  centerRows,
+  bottomRows,
+  virtualItems,
+  totalSize,
+  isVirtualizationEnabled,
+  isInfiniteMode,
+  isFetchingMore,
+  hasMore,
+  loadingMoreMessage,
+  allRowsLoadedMessage,
+  measureRowRef,
+}: VirtualBodyProps<TData>) {
+  const totalRows = topRows.length + centerRows.length + bottomRows.length
+
+  if (!totalRows) return <DataGridTableEmpty />
+
+  const hasCenterRows = centerRows.length > 0
+  const showFetchingRow = isInfiniteMode && isFetchingMore
+  const showCompleteRow = isInfiniteMode && hasMore === false && totalRows > 0
+  const hasMiddleSection = hasCenterRows || showFetchingRow || showCompleteRow
+  const leadingSpacerHeight =
+    isVirtualizationEnabled && hasCenterRows && virtualItems.length > 0
+      ? (virtualItems[0]?.start ?? 0)
+      : 0
+  const trailingSpacerHeight =
+    isVirtualizationEnabled && hasCenterRows && virtualItems.length > 0
+      ? Math.max(
+          0,
+          totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)
+        )
+      : 0
+
+  const renderedRows: ReactNode[] = []
+
+  topRows.forEach((row, index) => {
+    renderedRows.push(
+      <DataGridTableRenderedRow
+        key={row.id}
+        row={row}
+        pinnedBoundary={
+          index === topRows.length - 1 && hasMiddleSection ? "top" : undefined
+        }
+      />
+    )
+  })
+
+  if (isVirtualizationEnabled) {
+    if (leadingSpacerHeight > 0) {
+      renderedRows.push(
+        <DataGridTableVirtualSpacer
+          key="virtual-spacer-start"
+          columnCount={columnCount}
+          height={leadingSpacerHeight}
+        />
+      )
+    }
+
+    virtualItems.forEach((virtualRow) => {
+      const row = centerRows[virtualRow.index]
+
+      if (!row) return
+
+      renderedRows.push(
+        <DataGridTableRenderedRow
+          key={row.id}
+          row={row}
+          rowRef={measureRowRef}
+        />
+      )
+    })
+
+    if (trailingSpacerHeight > 0) {
+      renderedRows.push(
+        <DataGridTableVirtualSpacer
+          key="virtual-spacer-end"
+          columnCount={columnCount}
+          height={trailingSpacerHeight}
+        />
+      )
+    }
+  } else {
+    centerRows.forEach((row) => {
+      renderedRows.push(<DataGridTableRenderedRow key={row.id} row={row} />)
+    })
+  }
+
+  if (showFetchingRow) {
+    renderedRows.push(
+      <DataGridTableVirtualStatusRow
+        key="virtual-status-loading"
+        columnCount={columnCount}
+      >
+        <div className="flex items-center justify-center gap-2">
+          <Spinner className="size-4 opacity-60" />
+          {loadingMoreMessage}
+        </div>
+      </DataGridTableVirtualStatusRow>
+    )
+  }
+
+  if (showCompleteRow) {
+    renderedRows.push(
+      <DataGridTableVirtualStatusRow
+        key="virtual-status-complete"
+        columnCount={columnCount}
+        className="py-3 text-xs"
+      >
+        {allRowsLoadedMessage}
+      </DataGridTableVirtualStatusRow>
+    )
+  }
+
+  bottomRows.forEach((row, index) => {
+    renderedRows.push(
+      <DataGridTableRenderedRow
+        key={row.id}
+        row={row}
+        pinnedBoundary={
+          index === 0 && (topRows.length > 0 || hasMiddleSection)
+            ? "bottom"
+            : undefined
+        }
+      />
+    )
+  })
+
+  return <>{renderedRows}</>
+}
+
+/**
+ * Memoized virtual body: skip re-renders during active column resize.
+ * Column widths update via CSS variables on the <table> element,
+ * so the browser handles width changes without React re-renders.
+ */
+const MemoizedVirtualBody = memo(
+  DataGridTableVirtualBody,
+  (_prev, next) => !!next.table.getState().columnSizingInfo.isResizingColumn
+) as typeof DataGridTableVirtualBody
+
+function DataGridTableVirtual<TData>({
+  height,
+  estimateSize = 48,
+  overscan = 10,
+  footerContent,
+  renderHeader = true,
+  onFetchMore,
+  isFetchingMore = false,
+  hasMore,
+  fetchMoreOffset = 0,
+  virtualizerOptions,
+}: DataGridTableVirtualProps<TData>) {
+  const { table, props } = useDataGrid()
+  const { topRows, centerRows, bottomRows } = getDataGridTableRowSections(
+    table,
+    props.tableLayout?.rowsPinnable
+  )
+  const columnCount =
+    table.getVisibleFlatColumns().length +
+    (props.tableLayout?.columnsResizable ? 1 : 0)
+  const isInfiniteMode = typeof onFetchMore === "function"
+  const [viewportElements, setViewportElements] =
+    useState<DataGridTableVirtualScrollElements>({
+      containerElement: null,
+      scrollElement: null,
+    })
+
+  const {
+    estimateSize: customEstimateSize,
+    getItemKey: customGetItemKey,
+    getScrollElement: customGetScrollElement,
+    measureElement: customMeasureElement,
+    overscan: customOverscan,
+    ...virtualizerOptionsRest
+  } = virtualizerOptions ?? {}
+
+  const isVirtualizationEnabled = virtualizerOptions?.enabled !== false
+  const loadingMoreMessage =
+    props.fetchingMoreMessage || props.loadingMessage || "Loading..."
+  const allRowsLoadedMessage =
+    props.allRowsLoadedMessage || "All records loaded"
+
+  const handleViewportRef = useCallback((node: HTMLDivElement | null) => {
+    setViewportElements({
+      containerElement: node,
+      scrollElement:
+        (node?.closest(
+          '[data-slot="scroll-area-viewport"]'
+        ) as HTMLElement | null) ?? node,
+    })
+  }, [])
+
+  const usesExternalScrollArea =
+    viewportElements.scrollElement !== null &&
+    viewportElements.scrollElement !== viewportElements.containerElement
+
+  const resolveScrollElement = useCallback(() => {
+    if (customGetScrollElement) {
+      return customGetScrollElement(viewportElements)
+    }
+
+    return viewportElements.scrollElement
+  }, [customGetScrollElement, viewportElements])
+
+  const resolveItemKey = useCallback(
+    (index: number) => {
+      const row = centerRows[index]
+
+      if (!row) return index
+
+      return customGetItemKey?.(index, row) ?? row.id ?? index
+    },
+    [centerRows, customGetItemKey]
+  )
+
+  const resolveEstimateSize = useCallback(
+    (index: number) => {
+      const row = centerRows[index]
+
+      return row
+        ? (customEstimateSize?.(index, row) ?? estimateSize)
+        : estimateSize
+    },
+    [centerRows, customEstimateSize, estimateSize]
+  )
+
+  const virtualizer = useVirtualizer({
+    count: centerRows.length,
+    getScrollElement: resolveScrollElement,
+    getItemKey: resolveItemKey,
+    estimateSize: resolveEstimateSize,
+    overscan: customOverscan ?? overscan,
+    measureElement: customMeasureElement,
+    ...virtualizerOptionsRest,
+  }) as DataGridTableVirtualizerInstance
+
+  const virtualItems = isVirtualizationEnabled
+    ? virtualizer.getVirtualItems()
+    : []
+  const totalSize = isVirtualizationEnabled ? virtualizer.getTotalSize() : 0
+  const measureRowRef =
+    isVirtualizationEnabled && customMeasureElement
+      ? virtualizer.measureElement
+      : undefined
+  const resolvedFetchMoreOffset = useMemo(
+    () => Math.max(0, fetchMoreOffset),
+    [fetchMoreOffset]
+  )
+
+  useEffect(() => {
+    if (
+      !isVirtualizationEnabled ||
+      !isInfiniteMode ||
+      hasMore === false ||
+      isFetchingMore
+    ) {
+      return
+    }
+
+    const lastItem = virtualItems[virtualItems.length - 1]
+    if (!lastItem) return
+
+    if (lastItem.index >= centerRows.length - 1 - resolvedFetchMoreOffset) {
+      onFetchMore?.()
+    }
+  }, [
+    centerRows.length,
+    hasMore,
+    isFetchingMore,
+    isInfiniteMode,
+    isVirtualizationEnabled,
+    onFetchMore,
+    resolvedFetchMoreOffset,
+    virtualItems,
+  ])
+
+  return (
+    <DataGridTableViewport
+      viewportRef={handleViewportRef}
+      className={!usesExternalScrollArea ? "block" : undefined}
+      style={
+        usesExternalScrollArea
+          ? undefined
+          : { height, overflow: "auto", position: "relative" }
+      }
+    >
+      <DataGridTableBase>
+        {renderHeader && (
+          <DataGridTableHead>
+            {table
+              .getHeaderGroups()
+              .map((headerGroup: HeaderGroup<TData>, index) => (
+                <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
+                  {headerGroup.headers.map((header, hIndex) => {
+                    const { column } = header
+
+                    return (
+                      <DataGridTableHeadRowCell header={header} key={hIndex}>
+                        {header.isPlaceholder ? null : props.tableLayout
+                            ?.columnsResizable && column.getCanResize() ? (
+                          <div className="truncate">
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                          </div>
+                        ) : (
+                          flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )
+                        )}
+                        {props.tableLayout?.columnsResizable &&
+                          column.getCanResize() && (
+                            <DataGridTableHeadRowCellResize header={header} />
+                          )}
+                      </DataGridTableHeadRowCell>
+                    )
+                  })}
+                </DataGridTableHeadRow>
+              ))}
+          </DataGridTableHead>
+        )}
+
+        {renderHeader &&
+          (props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && (
+            <DataGridTableRowSpacer />
+          )}
+
+        <DataGridTableBody>
+          <MemoizedVirtualBody
+            table={table}
+            columnCount={columnCount}
+            topRows={topRows}
+            centerRows={centerRows}
+            bottomRows={bottomRows}
+            virtualItems={virtualItems}
+            totalSize={totalSize}
+            isVirtualizationEnabled={isVirtualizationEnabled}
+            isInfiniteMode={isInfiniteMode}
+            isFetchingMore={isFetchingMore}
+            hasMore={hasMore}
+            loadingMoreMessage={loadingMoreMessage}
+            allRowsLoadedMessage={allRowsLoadedMessage}
+            measureRowRef={measureRowRef}
+          />
+        </DataGridTableBody>
+
+        {footerContent && (
+          <DataGridTableFoot>{footerContent}</DataGridTableFoot>
+        )}
+      </DataGridTableBase>
+    </DataGridTableViewport>
+  )
+}
+
+export { DataGridTableVirtual }
+export type {
+  DataGridTableVirtualProps,
+  DataGridTableVirtualScrollElements,
+  DataGridTableVirtualizerOptions,
+}
@@ -0,0 +1,268 @@
+import { createContext, ReactNode, useContext, useMemo } from "react"
+import {
+  Column,
+  ColumnFiltersState,
+  RowData,
+  SortingState,
+  Table,
+} from "@tanstack/react-table"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    headerTitle?: string
+    headerClassName?: string
+    cellClassName?: string
+    skeleton?: ReactNode
+    expandedContent?: (row: TData) => ReactNode
+  }
+}
+
+/** Label for headers / column visibility: `meta.headerTitle`, string `columnDef.header`, or `column.id`. */
+export function getColumnHeaderLabel<TData, TValue>(
+  column: Column<TData, TValue>
+): string {
+  const meta = column.columnDef.meta as { headerTitle?: string } | undefined
+  if (typeof meta?.headerTitle === "string") return meta.headerTitle
+  const defHeader = column.columnDef.header
+  if (typeof defHeader === "string") return defHeader
+  return String(column.id)
+}
+
+export type DataGridApiFetchParams = {
+  pageIndex: number
+  pageSize: number
+  sorting?: SortingState
+  filters?: ColumnFiltersState
+  searchQuery?: string
+}
+
+export type DataGridApiResponse<T> = {
+  data: T[]
+  empty: boolean
+  pagination: {
+    total: number
+    page: number
+  }
+}
+
+export interface DataGridContextProps<TData extends object> {
+  props: DataGridProps<TData>
+  table: Table<TData>
+  recordCount: number
+  isLoading: boolean
+}
+
+export type DataGridRequestParams = {
+  pageIndex: number
+  pageSize: number
+  sorting?: SortingState
+  columnFilters?: ColumnFiltersState
+}
+
+export interface DataGridProps<TData extends object> {
+  className?: string
+  table?: Table<TData>
+  recordCount: number
+  children?: ReactNode
+  onRowClick?: (row: TData) => void
+  isLoading?: boolean
+  loadingMode?: "skeleton" | "spinner"
+  loadingMessage?: ReactNode | string
+  fetchingMoreMessage?: ReactNode | string
+  allRowsLoadedMessage?: ReactNode | string
+  emptyMessage?: ReactNode | string
+  tableLayout?: {
+    dense?: boolean
+    cellBorder?: boolean
+    rowBorder?: boolean
+    rowRounded?: boolean
+    stripped?: boolean
+    headerBackground?: boolean
+    headerBorder?: boolean
+    headerSticky?: boolean
+    width?: "auto" | "fixed"
+    columnsVisibility?: boolean
+    columnsResizable?: boolean
+    columnsResizeMode?: "onChange" | "onEnd"
+    columnsPinnable?: boolean
+    columnsMovable?: boolean
+    columnsDraggable?: boolean
+    rowsDraggable?: boolean
+    rowsPinnable?: boolean
+  }
+  tableClassNames?: {
+    base?: string
+    header?: string
+    headerRow?: string
+    headerSticky?: string
+    body?: string
+    bodyRow?: string
+    footer?: string
+    edgeCell?: string
+  }
+}
+
+const DataGridContext = createContext<
+   
+  DataGridContextProps<any> | undefined
+>(undefined)
+
+function useDataGrid() {
+  const context = useContext(DataGridContext)
+  if (!context) {
+    throw new Error("useDataGrid must be used within a DataGridProvider")
+  }
+  return context
+}
+
+function DataGridProvider<TData extends object>({
+  children,
+  table,
+  ...props
+}: DataGridProps<TData> & { table: Table<TData> }) {
+  const tableState = table.getState()
+  const resolvedColumnsResizeMode =
+    props.tableLayout?.columnsResizeMode ?? "onEnd"
+
+  // Keep resize mode aligned with the DataGrid contract every render so
+  // consumer-level useReactTable options cannot flip it back between drags.
+  if (props.tableLayout?.columnsResizable) {
+    table.options.columnResizeMode = resolvedColumnsResizeMode
+  }
+
+  // Memoize context value so consumers don't re-render during column resize.
+  // Column sizing state is intentionally excluded from deps -- CSS variables
+  // on the <table> element handle width updates without React re-renders.
+  const value = useMemo(
+    () => ({
+      props,
+      table,
+      recordCount: props.recordCount,
+      isLoading: props.isLoading || false,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      table,
+      props.recordCount,
+      props.isLoading,
+      props.loadingMode,
+      props.loadingMessage,
+      props.fetchingMoreMessage,
+      props.allRowsLoadedMessage,
+      props.emptyMessage,
+      props.onRowClick,
+      props.className,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify(props.tableLayout),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      JSON.stringify(props.tableClassNames),
+      tableState.sorting,
+      tableState.pagination,
+      tableState.columnFilters,
+      tableState.rowSelection,
+      tableState.expanded,
+      tableState.columnVisibility,
+      tableState.columnOrder,
+      tableState.columnPinning,
+      tableState.globalFilter,
+    ]
+  )
+
+  return (
+    <DataGridContext.Provider value={value}>
+      {children}
+    </DataGridContext.Provider>
+  )
+}
+
+function DataGrid<TData extends object>({
+  children,
+  table,
+  ...props
+}: DataGridProps<TData>) {
+  const defaultProps: Partial<DataGridProps<TData>> = {
+    loadingMode: "skeleton",
+    tableLayout: {
+      dense: false,
+      cellBorder: false,
+      rowBorder: true,
+      rowRounded: false,
+      stripped: false,
+      headerSticky: false,
+      headerBackground: true,
+      headerBorder: true,
+      width: "fixed",
+      columnsVisibility: false,
+      columnsResizable: false,
+      columnsResizeMode: "onEnd",
+      columnsPinnable: false,
+      columnsMovable: false,
+      columnsDraggable: false,
+      rowsDraggable: false,
+      rowsPinnable: false,
+    },
+    tableClassNames: {
+      base: "",
+      header: "",
+      headerRow: "",
+      headerSticky: "sticky top-0 z-15 bg-background/90 backdrop-blur-xs",
+      body: "",
+      bodyRow: "",
+      footer: "",
+      edgeCell: "",
+    },
+  }
+
+  const mergedProps: DataGridProps<TData> = {
+    ...defaultProps,
+    ...props,
+    tableLayout: {
+      ...defaultProps.tableLayout,
+      ...(props.tableLayout || {}),
+    },
+    tableClassNames: {
+      ...defaultProps.tableClassNames,
+      ...(props.tableClassNames || {}),
+    },
+  }
+
+  // Ensure table is provided
+  if (!table) {
+    throw new Error('DataGrid requires a "table" prop')
+  }
+
+  return (
+    <DataGridProvider table={table} {...mergedProps}>
+      {children}
+    </DataGridProvider>
+  )
+}
+
+function DataGridContainer({
+  children,
+  className,
+  border = true,
+}: {
+  children: ReactNode
+  className?: string
+  border?: boolean
+}) {
+  return (
+    <div
+      data-slot="data-grid"
+      className={cn(
+        "w-full overflow-hidden",
+        border &&
+          "border-border rounded-lg border",
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export { useDataGrid, DataGridProvider, DataGrid, DataGridContainer }
@@ -0,0 +1,258 @@
+import { createContext, ReactNode, useContext, useId } from "react"
+import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"
+import { cva, VariantProps } from "class-variance-authority"
+
+import { cn } from "@evobgp/ui/lib/utils"
+import { Label } from "@evobgp/ui/components/label"
+import { MinusIcon, PlusIcon } from "lucide-react"
+
+const NumberFieldContext = createContext<{
+  fieldId: string
+  size: "sm" | "default" | "lg"
+} | null>(null)
+
+const numberFieldGroupVariants = cva(
+  "relative flex w-full justify-between border border-input data-disabled:pointer-events-none data-disabled:opacity-50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-within:has-aria-invalid:border-destructive focus-within:has-aria-invalid:ring-destructive/20 dark:focus-within:has-aria-invalid:ring-destructive/40 rounded-lg bg-transparent dark:bg-input/30 transition-colors focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-3",
+  {
+    variants: {
+      size: {
+        sm: "h-7 text-sm",
+        default:
+          "h-8 text-sm",
+        lg: "h-9 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+const numberFieldButtonVariants = cva(
+  "relative flex shrink-0 cursor-pointer items-center justify-center transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent",
+  {
+    variants: {
+      size: {
+        sm: "px-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        default:
+          "px-2 [&_svg:not([class*='size-'])]:size-4",
+        lg: "px-2.5 [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+const numberFieldInputVariants = cva(
+  "w-full min-w-0 flex-1 bg-transparent text-center tabular-nums outline-none",
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-0.5",
+        default:
+          "px-2.5 py-1",
+        lg: "px-2.5 py-1.5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+function NumberField({
+  id,
+  className,
+  size = "default",
+  ...props
+}: NumberFieldPrimitive.Root.Props &
+  VariantProps<typeof numberFieldGroupVariants>) {
+  const generatedId = useId()
+  const fieldId = id ?? generatedId
+  const sizeValue = size ?? "default"
+
+  return (
+    <NumberFieldContext.Provider value={{ fieldId, size: sizeValue }}>
+      <NumberFieldPrimitive.Root
+        className={cn("flex w-full flex-col items-start gap-2", className)}
+        data-size={sizeValue}
+        data-slot="number-field"
+        id={fieldId}
+        {...props}
+      />
+    </NumberFieldContext.Provider>
+  )
+}
+
+function NumberFieldGroup({
+  className,
+  size: sizeProp,
+  ...props
+}: NumberFieldPrimitive.Group.Props &
+  Partial<VariantProps<typeof numberFieldGroupVariants>>) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldGroup must be used within a NumberField component."
+    )
+  }
+  const size = sizeProp ?? context.size
+
+  return (
+    <NumberFieldPrimitive.Group
+      className={cn(numberFieldGroupVariants({ size }), className)}
+      data-slot="number-field-group"
+      {...props}
+    />
+  )
+}
+
+function NumberFieldDecrement({
+  className,
+  size: sizeProp,
+  children,
+  ...props
+}: NumberFieldPrimitive.Decrement.Props &
+  Partial<VariantProps<typeof numberFieldButtonVariants>> & {
+    children?: React.ReactNode
+  }) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldDecrement must be used within a NumberField component."
+    )
+  }
+  const size = sizeProp ?? context.size
+
+  return (
+    <NumberFieldPrimitive.Decrement
+      className={cn(
+        numberFieldButtonVariants({ size }),
+        "rounded-s-lg border-e-0",
+        className
+      )}
+      data-slot="number-field-decrement"
+      {...props}
+    >
+      {children ?? (
+        <MinusIcon
+        />
+      )}
+    </NumberFieldPrimitive.Decrement>
+  )
+}
+
+function NumberFieldIncrement({
+  className,
+  size: sizeProp,
+  children,
+  ...props
+}: NumberFieldPrimitive.Increment.Props &
+  Partial<VariantProps<typeof numberFieldButtonVariants>> & {
+    children?: ReactNode
+  }) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldIncrement must be used within a NumberField component."
+    )
+  }
+  const size = sizeProp ?? context.size
+
+  return (
+    <NumberFieldPrimitive.Increment
+      className={cn(
+        numberFieldButtonVariants({ size }),
+        "rounded-e-lg border-s-0",
+        className
+      )}
+      data-slot="number-field-increment"
+      {...props}
+    >
+      {children ?? (
+        <PlusIcon
+        />
+      )}
+    </NumberFieldPrimitive.Increment>
+  )
+}
+
+function NumberFieldInput({
+  className,
+  size: sizeProp,
+  ...props
+}: NumberFieldPrimitive.Input.Props &
+  Partial<VariantProps<typeof numberFieldInputVariants>>) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldInput must be used within a NumberField component."
+    )
+  }
+  const size = sizeProp ?? context.size
+
+  return (
+    <NumberFieldPrimitive.Input
+      className={cn(numberFieldInputVariants({ size }), className)}
+      data-slot="number-field-input"
+      {...props}
+    />
+  )
+}
+
+function NumberFieldScrubArea({
+  className,
+  label,
+  ...props
+}: NumberFieldPrimitive.ScrubArea.Props & {
+  label: string
+}) {
+  const context = useContext(NumberFieldContext)
+  if (!context) {
+    throw new Error(
+      "NumberFieldScrubArea must be used within a NumberField component for accessibility."
+    )
+  }
+
+  return (
+    <NumberFieldPrimitive.ScrubArea
+      className={cn("flex cursor-ew-resize", className)}
+      data-slot="number-field-scrub-area"
+      {...props}
+    >
+      <Label className="cursor-ew-resize" htmlFor={context.fieldId}>
+        {label}
+      </Label>
+      <NumberFieldPrimitive.ScrubAreaCursor className="drop-shadow-[0_1px_1px_#0008] filter">
+        <CursorGrowIcon />
+      </NumberFieldPrimitive.ScrubAreaCursor>
+    </NumberFieldPrimitive.ScrubArea>
+  )
+}
+
+function CursorGrowIcon(props: React.ComponentProps<"svg">) {
+  return (
+    <svg
+      fill="black"
+      height="14"
+      stroke="white"
+      viewBox="0 0 24 14"
+      width="26"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" />
+    </svg>
+  )
+}
+
+export {
+  NumberField,
+  NumberFieldScrubArea,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldGroup,
+  NumberFieldInput,
+}
@@ -0,0 +1,109 @@
+import type { ReactElement, ReactNode } from 'react'
+import { Card, CardContent } from '@evobgp/ui/components/card'
+import { cn } from '@evobgp/ui/lib/utils'
+import { TruncatedText } from '@/components/truncated-text'
+
+export interface SectionCardItem {
+  label: ReactNode
+  value: string | number | ReactElement
+  hint?: ReactNode
+  icon?: ReactNode
+  badge?: ReactNode
+  variant?: 'default' | 'warning' | 'destructive'
+  active?: boolean
+  onClick?: () => void
+}
+
+const VARIANT_CLASS: Record<NonNullable<SectionCardItem['variant']>, string> = {
+  default: '',
+  warning: 'border-warning/50',
+  destructive: 'border-destructive/50',
+}
+
+function sectionGridClass(count: number): string {
+  if (count <= 1) return 'grid-cols-1'
+  if (count === 2) return 'sm:grid-cols-2'
+  if (count === 3) return 'sm:grid-cols-2 lg:grid-cols-3'
+  if (count === 4) return 'sm:grid-cols-2 lg:grid-cols-4'
+  if (count === 5) return 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5'
+  if (count === 6) return 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6'
+  return 'sm:grid-cols-2 lg:grid-cols-3'
+}
+
+const VALUE_VARIANT_CLASS: Record<NonNullable<SectionCardItem['variant']>, string> = {
+  default: '',
+  warning: 'text-warning-foreground',
+  destructive: 'text-destructive',
+}
+
+export function SectionCards({ items, className }: { items: SectionCardItem[]; className?: string }) {
+  return (
+    <div className={cn('grid gap-3', sectionGridClass(items.length), className)}>
+      {items.map((item, idx) => {
+        const clickable = Boolean(item.onClick)
+        const content = (
+          <CardContent className="flex items-start gap-2.5 px-3 py-2.5">
+            {item.icon ? (
+              <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground">
+                {item.icon}
+              </span>
+            ) : null}
+            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <div className="flex items-center justify-between gap-2">
+                {typeof item.label === 'string' ? (
+                  <TruncatedText className="text-xs text-muted-foreground">{item.label}</TruncatedText>
+                ) : (
+                  <span className="truncate text-xs text-muted-foreground">{item.label}</span>
+                )}
+                {item.badge ? <span className="shrink-0">{item.badge}</span> : null}
+              </div>
+              <div className="flex min-w-0 items-baseline gap-1.5">
+                <span
+                  className={cn(
+                    'flex items-center gap-1 text-lg font-semibold tabular-nums',
+                    VALUE_VARIANT_CLASS[item.variant ?? 'default'],
+                  )}
+                >
+                  {item.value}
+                </span>
+                {item.hint ? (
+                  typeof item.hint === 'string' ? (
+                    <TruncatedText className="text-xs text-muted-foreground">· {item.hint}</TruncatedText>
+                  ) : (
+                    <span className="truncate text-xs text-muted-foreground">· {item.hint}</span>
+                  )
+                ) : null}
+              </div>
+            </div>
+          </CardContent>
+        )
+        return (
+          <Card
+            key={typeof item.label === 'string' ? item.label : idx}
+            className={cn(
+              'gap-0',
+              VARIANT_CLASS[item.variant ?? 'default'],
+              item.active && 'border-primary ring-1 ring-primary/30',
+              clickable && 'cursor-pointer transition-colors hover:bg-muted/40',
+            )}
+            onClick={item.onClick}
+            role={clickable ? 'button' : undefined}
+            tabIndex={clickable ? 0 : undefined}
+            onKeyDown={
+              clickable
+                ? (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault()
+                      item.onClick?.()
+                    }
+                  }
+                : undefined
+            }
+          >
+            {content}
+          </Card>
+        )
+      })}
+    </div>
+  )
+}
@@ -0,0 +1,38 @@
+import { SectionCards } from './section-cards'
+import { Skeleton } from '@evobgp/ui/components/skeleton'
+import { Card, CardContent } from '@evobgp/ui/components/card'
+
+export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
+  return (
+    <SectionCards
+      items={Array.from({ length: count }, (_, i) => ({
+        icon: <Skeleton className="size-4 rounded-sm" key={`icon-${i}`} />,
+        label: <Skeleton className="h-3 w-20" key={`label-${i}`} />,
+        value: <Skeleton className="h-5 w-16" key={`value-${i}`} />,
+      }))}
+    />
+  )
+}
+
+export function TableSkeleton({ rows = 6, cols = 4 }: { rows?: number; cols?: number }) {
+  return (
+    <Card className="gap-0">
+      <CardContent className="p-0">
+        <div className="flex flex-col">
+          <div className="flex gap-2 border-b p-3">
+            {Array.from({ length: cols }).map((_, i) => (
+              <Skeleton className="h-4 flex-1" key={`h-${i}`} />
+            ))}
+          </div>
+          {Array.from({ length: rows }).map((_, r) => (
+            <div className="flex gap-2 border-b p-3" key={`r-${r}`}>
+              {Array.from({ length: cols }).map((_, c) => (
+                <Skeleton className="h-4 flex-1" key={`c-${r}-${c}`} />
+              ))}
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'react'
+
+import { Badge } from '@/components/reui/badge'
+
+type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>
+
+const STATUS_VARIANT: Record<string, BadgeVariant> = {
+  active: 'success',
+  ok: 'success',
+  paid: 'success',
+  established: 'success',
+  succeeded: 'success',
+  healthy: 'success',
+  paused: 'secondary',
+  disabled: 'secondary',
+  archived: 'outline',
+  error: 'destructive',
+  failed: 'destructive',
+  running: 'info',
+  queued: 'info',
+  overdue: 'warning',
+  stale: 'warning',
+  warning: 'warning',
+  mismatch: 'warning',
+}
+
+export function StatusBadge({ status, label }: { status: string; label?: string }) {
+  const variant = STATUS_VARIANT[status.toLowerCase()] ?? 'outline'
+  return <Badge variant={variant}>{label ?? status}</Badge>
+}
@@ -0,0 +1,16 @@
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import type { ReactNode } from 'react'
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      storageKey="evobgp-theme"
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}
@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@evobgp/ui/components/tooltip'
+import { cn } from '@evobgp/ui/lib/utils'
+
+interface TruncatedTextProps {
+  children: ReactNode
+  className?: string
+  as?: 'span' | 'p' | 'div'
+  /** Явный текст подсказки, если children — не строка. */
+  tooltip?: string
+}
+
+export function TruncatedText({ children, className, as: Tag = 'span', tooltip }: TruncatedTextProps) {
+  const tip =
+    tooltip ??
+    (typeof children === 'string' || typeof children === 'number' ? String(children) : null)
+
+  if (!tip) {
+    return <Tag className={cn('truncate', className)}>{children}</Tag>
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger render={<Tag className={cn('truncate', className)} />}>{children}</TooltipTrigger>
+        <TooltipContent>{tip}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}