Table

function TableDemo() {
  const alerts = [
    {
      id: "ALR-4821",
      title: "Impossible travel sign-in",
      asset: "m.rocha@acme.com",
      severity: "critical",
      events: 3,
    },
    {
      id: "ALR-4820",
      title: "Outbound traffic to a known C2 domain",
      asset: "srv-web-02",
      severity: "high",
      events: 1284,
    },
    {
      id: "ALR-4817",
      title: "RDP exposed to the internet",
      asset: "vm-jump-01",
      severity: "high",
      events: 57,
    },
    {
      id: "ALR-4815",
      title: "TLS certificate expires in 5 days",
      asset: "portal.acme.com",
      severity: "medium",
      events: 1,
    },
    {
      id: "ALR-4809",
      title: "Unsigned PowerShell script ran",
      asset: "wks-0193",
      severity: "low",
      events: 12,
    },
  ] as const

  return (
    <Table containerLabel="Open alerts">
      <TableCaption>Open alerts, most recent first.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>ID</TableHead>
          <TableHead>Alert</TableHead>
          <TableHead>Asset</TableHead>
          <TableHead>Severity</TableHead>
          <TableHead className="text-right">Events</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {alerts.map((alert) => (
          <TableRow key={alert.id}>
            <TableCell className="font-mono text-text-muted">
              {alert.id}
            </TableCell>
            <TableCell className="font-medium">{alert.title}</TableCell>
            <TableCell className="font-mono">{alert.asset}</TableCell>
            <TableCell>
              <SeverityBadge level={alert.severity} />
            </TableCell>
            <TableCell className="text-right tabular-nums">
              {alert.events.toLocaleString("en-US")}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

function TableWithFooter() {
  const sources = [
    { name: "Endpoint (EDR)", alerts: 412, events: 98234 },
    { name: "Identity provider", alerts: 167, events: 20311 },
    { name: "Email gateway", alerts: 89, events: 4872 },
  ]
  const total = sources.reduce(
    (sum, source) => ({
      alerts: sum.alerts + source.alerts,
      events: sum.events + source.events,
    }),
    { alerts: 0, events: 0 }
  )

  return (
    <Table className="max-w-md">
      <TableHeader>
        <TableRow>
          <TableHead>Source</TableHead>
          <TableHead className="text-right">Alerts</TableHead>
          <TableHead className="text-right">Events</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {sources.map((source) => (
          <TableRow key={source.name}>
            <TableCell>{source.name}</TableCell>
            <TableCell className="text-right tabular-nums">
              {source.alerts.toLocaleString("en-US")}
            </TableCell>
            <TableCell className="text-right tabular-nums">
              {source.events.toLocaleString("en-US")}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell>Total</TableCell>
          <TableCell className="text-right tabular-nums">
            {total.alerts.toLocaleString("en-US")}
          </TableCell>
          <TableCell className="text-right tabular-nums">
            {total.events.toLocaleString("en-US")}
          </TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}

function TableSelectable() {
  const assets = [
    { id: "srv-web-02", os: "Ubuntu 22.04", owner: "Infrastructure" },
    { id: "vm-jump-01", os: "Windows Server 2019", owner: "IT operations" },
    { id: "wks-0193", os: "Windows 11", owner: "Finance" },
  ]
  const [selected, setSelected] = React.useState<string[]>(["vm-jump-01"])
  const allSelected = selected.length === assets.length

  return (
    <Table className="max-w-lg" containerLabel="Assets">
      <TableHeader>
        <TableRow>
          <TableHead className="w-8">
            <Checkbox
              aria-label="Select all assets"
              checked={allSelected}
              indeterminate={selected.length > 0 && !allSelected}
              onCheckedChange={(checked) =>
                setSelected(checked ? assets.map((asset) => asset.id) : [])
              }
            />
          </TableHead>
          <TableHead>Asset</TableHead>
          <TableHead>Operating system</TableHead>
          <TableHead>Owner</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {assets.map((asset) => {
          const isSelected = selected.includes(asset.id)
          return (
            <TableRow
              key={asset.id}
              data-state={isSelected ? "selected" : undefined}
            >
              <TableCell>
                <Checkbox
                  aria-label={`Select ${asset.id}`}
                  checked={isSelected}
                  onCheckedChange={(checked) =>
                    setSelected((current) =>
                      checked
                        ? [...current, asset.id]
                        : current.filter((id) => id !== asset.id)
                    )
                  }
                />
              </TableCell>
              <TableCell className="font-mono">{asset.id}</TableCell>
              <TableCell>{asset.os}</TableCell>
              <TableCell>{asset.owner}</TableCell>
            </TableRow>
          )
        })}
      </TableBody>
    </Table>
  )
}

function TableStickyHeader() {
  const sources = ["firewall-edge-01", "vpn-gw-02", "dc-01", "proxy-03"]
  const events = Array.from({ length: 24 }, (_, index) => ({
    id: `EVT-${(90412 - index).toString()}`,
    time: `10/23/2026 14:${(59 - index * 2).toString().padStart(2, "0")}:07`,
    source: sources[index % sources.length],
    bytes: 1200 + index * 371,
  }))

  return (
    <Table
      containerLabel="Network events"
      containerClassName="max-h-72 rounded-md border border-border-subtle"
    >
      <TableHeader sticky>
        <TableRow>
          <TableHead>Event</TableHead>
          <TableHead>Time</TableHead>
          <TableHead>Source</TableHead>
          <TableHead className="text-right">Bytes</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {events.map((event) => (
          <TableRow key={event.id}>
            <TableCell className="font-mono text-text-muted">
              {event.id}
            </TableCell>
            <TableCell className="tabular-nums">{event.time}</TableCell>
            <TableCell className="font-mono">{event.source}</TableCell>
            <TableCell className="text-right tabular-nums">
              {event.bytes.toLocaleString("en-US")}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Alert</TableHead>
      <TableHead>Asset</TableHead>
      <TableHead>Severity</TableHead>
      <TableHead className="text-right">Events</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow className="hover:bg-transparent">
      <TableCell colSpan={4} className="whitespace-normal">
        <ListEmptyState
          icon={SearchXIcon}
          title="No alerts match these filters"
          description="Try a wider time range or fewer filters."
          action={
            <Button variant="outline" size="sm">
              <FilterXIcon data-icon="inline-start" />
              Clear filters
            </Button>
          }
        />
      </TableCell>
    </TableRow>
  </TableBody>
</Table>