KeyValueTable

Two-column key-value display table for build info, runtime info, and configuration flags.

Description

Two-column key-value display table for build info, runtime info, and configuration flags. A lightweight alternative to DataTable for simple key-value pair display.

✓ Do

Two-column key-value display (build info, runtime, flags)
Pass a plain object for simple cases
Lightweight alternative to DataTable

✗ Don’t

Multi-column or sortable data (use DataTable)
Large datasets
Custom two-column table layouts

Design

KeyValueTable Example

Version	2.47.0
Revision	abc123def
Go Version	go1.21.5
Build Date	2024-01-15

Where this component exists in the Prometheus UI

View in Prometheus UI → /targets

KeyValueTable inside expanded target — label key-value pairs

View in Prometheus UI → /service-discovery

KeyValueTable in Service Discovery — discovered labels

Implementation

From pages/FlagsPage.tsx in the Prometheus codebase:

<Table horizontalSpacing="md" verticalSpacing="xs" miw={700} layout="fixed">
  <Table.Tbody>
    <Table.Tr>
      <Th sorted={sortBy === "flag"} reversed={reverseSortDirection}
          onSort={() => setSorting("flag")}>Flag</Th>
      <Th sorted={sortBy === "value"} reversed={reverseSortDirection}
          onSort={() => setSorting("value")}>Value</Th>
    </Table.Tr>
  </Table.Tbody>
  <Table.Tbody>
    {sortedData.map((row) => (
      <Table.Tr key={row.flag}>
        <Table.Td><code>--{row.flag}</code></Table.Td>
        <Table.Td><code>{row.value}</code></Table.Td>
      </Table.Tr>
    ))}
  </Table.Tbody>
</Table>

Layout Specs

Property	Value
Cell Padding	6px 12px (0.375rem 0.75rem)
Border Bottom	1px solid
Font Size	13px
Key Column Width	40%
Key Font Weight	600 (semibold)

Accessibility

Table uses proper <table> semantics
Keys and values are read naturally by screen readers