Table
Mantine Table used on /status and /tsdb-status. 14px th (bold) + 14px td, 7px 10px cell padding, visible bottom border between rows.
DO
Default to sortable — match the /flags treatment (see INC-004).
DON'T
Ship two tables with identical shape but different interaction affordances.
Design
default
| Key | Value |
|---|---|
| Version | 3.0.0 |
| Revision | abcdef1 |
Two+-column table with bold header row.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<Table>
<Table.Thead><Table.Tr><Table.Th>Key</Table.Th>…</Table.Tr></Table.Thead>
…
</Table>Layout
| Property | Value |
|---|---|
| th-padding | 7px 10px |
| th-font-weight | 700 |
| td-padding | 7px 10px |
| row-separator | 1px bottom border on tr card |
Accessibility
| Screen reader | Use <thead>/<tbody> correctly. Provide <caption> or aria-label for the purpose. |