Data Table

TanStack Table primitives wrapped in the Omni glass shell: mono headers, uppercase controls, and frosted toolbars that mirror the PoC dashboards.

Deployment health

Control-plane services

Search, column visibility, and pagination ship with the registry defaults—no manual wiring required.

0 selected • 5 total


Telemetry API svc-telemetry	Observability	Healthy	Tokyo	128 ms	0
Ingress Gateway svc-gateway	SRE	Warning	Singapore	182 ms	1
Reports svc-reports	Product	Healthy	Frankfurt	156 ms	0
Billing svc-billing	Finance	Degraded	Oregon	244 ms	3
Inference API svc-ai	AI Platform	Warning	Tokyo	198 ms	2

Showing 1–5 of 5 rows

Rows

1 / 1

Installation

pnpm dlx shadcn@latest add @omni/data-table

The table relies on @tanstack/react-table. Install it withpnpm add @tanstack/react-tableif it's not already in your workspace.

Usage

import { DataTable } from "@/components/ui/data-table"
import type { ColumnDef } from "@tanstack/react-table"

type Deployment = {
  id: string
  service: string
  status: "Healthy" | "Warning" | "Degraded"
  region: string
}

const columns: ColumnDef<Deployment>[] = [
  {
    accessorKey: "service",
    header: "SERVICE",
  },
  {
    accessorKey: "status",
    header: "STATUS",
  },
]

export function DeploymentTable({ data }: { data: Deployment[] }) {
  return (
    <DataTable columns={columns} data={data} searchKey="service" />
  )
}