Log table
Tight, monospace event log surface. Timestamped rows with level pill, source, message, and meta. Designed for operator inspection of long event streams.
Included in the single kansho full pack. Components are not offered as separate installs.
Operator stream
Mixed levels| Timestamp | Level | Source | Message |
|---|---|---|---|
| 14:02:11.184 | info | orchestrator | starting run R-1041branch=audit/m-2014 |
| 14:02:11.302 | debug | skills | loaded skill review-prv1.4.2 |
| 14:02:12.418 | info | tool.shell | executing 'bun run lint' |
| 14:02:13.077 | warn | tool.shell | lint produced 1 warningcomponents/agent/skills-picker.tsx |
| 14:02:13.211 | info | tool.shell | exit 0 |
| 14:02:14.002 | trace | memory | writing 4 facts to long-term store |
| 14:02:14.918 | error | tool.network | POST https://hooks.example.com/intake — 503retry in 4.2s |
| 14:02:18.114 | info | tool.network | POST https://hooks.example.com/intake — 200 |
| 14:02:19.301 | info | verify | verification receipt issuedvk_8a3… |
| 14:02:20.000 | info | orchestrator | run R-1041 paused for approval |
Usage
Guidance- Feed pre-parsed entries with a level so rows carry a text label in addition to colour.
- Use density="compact" for long tails of machine output.
- Colour a row by level alone — the level label carries the meaning.
- Use it for interactive tabular data — reach for DataTable.
- When to use
- Streaming or archived agent / build logs, newest last.
- When not to
- Sortable, selectable, or clickable ledgers — use DataTable.
Props
API reference| Prop | Type | Default | Description |
|---|---|---|---|
| entriesrequired | LogEntry[] | — | Rows: id, ts, level, message, plus optional source and meta. |
| density | 'comfortable' | 'compact' | 'compact' | Row height preset. |
| caption | string | — | Accessible table caption. |
Component documentation
Log Table
components/surfaces/log-table.tsxPurpose
Displays timestamped log entries in a compact operator-oriented table.
Appropriate use
Use for chronological diagnostic output with a known timestamp, level, source, message, and optional metadata shape.
Example
components/surfaces/log-table.tsx has a representative live example in the "Operator stream" section on /components/log-table.
States
Supports comfortable or compact density, all declared log levels, optional source and metadata, and an empty entry list.
API and props
LogTable accepts entries, density, caption, and className; each LogEntry provides id, ts, level, message, and optional source and meta.
Dependencies
React, Tag, and the Kansho cn utility.
Accessibility
Uses native table structure with a configurable caption and scoped column headers; visible level text supplements colour, and every row keeps a consistent source cell.
Limitations
It does not stream, filter, sort, paginate, or virtualize logs, and callers must format timestamps before passing them.
Source
Source: components/surfaces/log-table.tsx.
Full pack
components/surfaces/log-table.tsx is documented at /components/log-table and installs only through the single Kansho full pack; no individual component install is offered.