Data display

14 components

Cards, tables, lists, trees and timelines.

Accordion

items: [{ key, title, content, disabled? }]. One section is open at a time unless multiple is set. Control …

Badge

Overlays a small indicator on the corner of its children, like MUI's Badge. badgeContent is a number or tex…

Card

On narrow screens the header wraps, so actions drop below a long title or subtitle instead of squeezing it.

Chip

Compact tag for filters and selections. onClick makes it a toggle button (with selected for the pressed sta…

CodeDisplay

Read-only code block with a copy button. Optional title, language caption, lineNumbers, wrap and maxHeight.…

DataGrid

Table with sorting (click a sortable header: ascending, descending, off), search, pagination and row select…

FileExplorer

Browse files and folders. The open folder shows as cards (grid) or a table (list) with breadcrumbs, a name …

List

LogViewer

Log output you can filter and search. Pass logs: { id, level, message, timestamp?, source?, data?, stack? }…

NestedTable

A table whose rows expand. A row can hold nested children rows (a tree: departments and the people in them)…

PipelineGraph

Job dependency graph, left to right like the workflow view on GitHub Actions. nodes: { id, label, status, d…

Table

columns: [{ key, header, render?(row), align? }]; rowKey (default id) names the unique field.

Timeline

tone: default, success, warning, danger.

Tree

nodes: [{ key, label, children? }]. Keyboard: Up / Down move, Right expands or enters, Left collapses or go…