DataTable

import { DataTable, Badge } from "@grassroot/ui-react";
 
const statusVariant = { healthy: "success", degraded: "warning", down: "error" };
 
const serviceData = [
  { service: "ledger-api", p95: 142, status: "healthy" },
  { service: "billing-worker", p95: 88, status: "healthy" },
  { service: "analytics-ingest", p95: 310, status: "degraded" },
];
 
const serviceColumns = [
  { key: "service", header: "Service", head: true },
  { key: "p95", header: "p95", num: true, render: (r) => `${r.p95}ms` },
  { key: "status", header: "Status", sortable: false, render: (r) => <Badge variant={statusVariant[r.status]}>{r.status}</Badge> },
];
 
<DataTable columns={serviceColumns} data={serviceData} defaultSort="p95" zebra />

import { Badge, DataTable } from "@grassroot/ui-solid";
 
const statusVariant = { healthy: "success", degraded: "warning", down: "error" };
const serviceData = [
  { service: "ledger-api", p95: 142, status: "healthy" },
  { service: "billing-worker", p95: 88, status: "healthy" },
  { service: "analytics-ingest", p95: 310, status: "degraded" },
];
const serviceColumns = [
  { key: "service", header: "Service", head: true },
  { key: "p95", header: "p95", num: true, render: (r) => `${r.p95}ms` },
  { key: "status", header: "Status", sortable: false, render: (r) => <Badge variant={statusVariant[r.status]}>{r.status}</Badge> },
];
 
export function Example() {
  return (
    <>
      <Badge variant={statusVariant[r.status]}>{r.status}</Badge>
      <DataTable columns={serviceColumns} data={serviceData} defaultSort="p95" zebra />
    </>
  );
}