Data Display

Components for showing structured data and user-generated content: tables, trees, code, logs, kanban, and timelines.

Components in this categoryCopy link

Tables & GridsCopy link

Table / Th / Td / Tr / TableFooterCopy link

Table, Th, Td, Tr, and TableFooter are the standard table primitives. Th has a num prop for right-aligned numeric headers; Td adds num, name (bold), and mono variants. Tr supports hover, attn (highlighted), sel (selected), and dimmed.

import {
  Table,
  TableContainer,
  Th,
  Td,
  Tr,
  TableFooter,
} from "@solarius/onset";

DataGridCopy link

DataGrid provides sortable columns, row selection, cell editing, virtual scrolling, zebra striping, and a sticky footer summary. Built on useVirtualRange for performance on large datasets.

import { DataGrid } from "@solarius/onset";
import type { DataGridColumn, DataGridSort, CellEdit } from "@solarius/onset";

const columns: DataGridColumn<MyRow>[] = [
  { key: "name", header: "Name", sortable: true },
  { key: "status", header: "Status", numeric: true },
  {
    key: "actions",
    header: "",
    render: (row) => <Button size="sm">View</Button>,
  },
];

<DataGrid
  rows={data}
  columns={columns}
  getRowId={(row) => row.id}
  rowHeight={36}
  height={400}
  sort={sort}
  onSortChange={setSort}
  selectedIds={selected}
  onSelectionChange={setSelected}
/>;

VirtualListCopy link

VirtualList renders only the visible slice of a long list, using the useVirtualRange hook for windowing math. Supports both fixed and variable row heights.

import { VirtualList, useVirtualRange } from "@solarius/onset";

<VirtualList
  data={items}
  itemHeight={40}
  height={300}
  renderItem={(item, index) => <div>{item.name}</div>}
  overscan={8}
/>;

List / ListItem / ListSection / ListDividerCopy link

Generic vertical list primitive. The base under ActivityFeed, InboxPanel, and ad hoc row layouts. ListItem has slots for media, title, description, meta, and actions.

DescriptionListCopy link

Key/value fact sheet, as in a "Details" card. Rows are DescriptionRow objects with key, value, optional mono font, and optional onClick.

ResourceRowCopy link

ResourceRow renders a cloud resource row with an icon, title, subtitle, and right-aligned meta/value pair. Exported from DescriptionList.

TagListCopy link

TagList renders a horizontal list of Tag components from a string array.

Trees & JSONCopy link

TreeViewCopy link

Hierarchical explorer (account trees, resource groups, file paths) with disclosure carets and single selection.

import { TreeView } from "@solarius/onset";
import type { TreeNode } from "@solarius/onset";

TreeTableCopy link

TreeTable combines the hierarchical disclosure of TreeView with the column grid of a table — expandable rows with per-column values. Exported from JsonViewer.

import { TreeTable } from "@solarius/onset";
import type { TreeTableColumn, TreeTableNode } from "@solarius/onset";

JsonViewerCopy link

Interactive JSON tree with collapsible nodes, search highlighting, and a copy button. Accepts any plain object, array, or primitive.

import { JsonViewer } from "@solarius/onset";

Code & LogsCopy link

CodeBlockCopy link

Syntax-highlighted code block with line numbers and a copy button. Supports ts, tsx, js, json, bash, sql, css, yaml, and text. Highlighting uses a small rule-based tokenizer, not a parser.

InlineCodeCopy link

InlineCode wraps a short code fragment in a styled <code> element for use inside running text.

DiffViewerCopy link

DiffViewer renders a unified diff with colored add/delete lines, line-number gutters, and a collapsed-file-header row. Pass a raw diff string or pre-parsed DiffLine[]. The exported parseUnifiedDiff helper converts unified diff text into typed lines.

import { DiffViewer, parseUnifiedDiff } from "@solarius/onset";

<DiffViewer
  diff={`--- a/file.ts
+++ b/file.ts
@@ -1,3 +1,3 @@
-const old = true;
+const updated = false;
 unchanged;`}
/>;

LogViewerCopy link

Live-tailing log stream with time, level, and unit columns. Renders from an array of LogEntry objects.

import { LogViewer } from "@solarius/onset";
import type { LogEntry } from "@solarius/onset";

KanbanCopy link

KanbanBoard, KanbanColumn, and KanbanCard form a drag-and-drop board. Cards are draggable between columns via HTML drag-and-drop. Each KanbanColumn receives dropped cards through onDropCard.

import { KanbanBoard, KanbanColumn, KanbanCard } from "@solarius/onset";

<KanbanBoard>
  <KanbanColumn
    title="Backlog"
    count={items.length}
    onDropCard={(cardId, index) => moveCard(cardId, "backlog", index)}
  >
    {items.map((item) => (
      <KanbanCard key={item.id} id={item.id} title={item.title} />
    ))}
  </KanbanColumn>
</KanbanBoard>;

Text & mediaCopy link

TruncateCopy link

Truncate supports line clamping, middle ellipsis, and tooltips for clipped text. Use Text truncate for a single trailing ellipsis. See Truncate for props.

ImageCopy link

An <img> that reserves its layout box before loading, shows a placeholder while loading, and renders a fallback when the URL fails. It lazy-loads by default. Full props on its page.

import { Truncate, Image } from "@solarius/onset";

<Truncate tooltip>{row.message}</Truncate>
<Image src={asset.url} alt={asset.name} ratio={16 / 9} rounded="md" />

OtherCopy link

Pagination / PageButtonCopy link

Numbered pager built on PageButton; pair with TableFooter for the standard table footer.

Timeline / TimelineItemCopy link

Timeline displays ordered events with optional title, meta, time, description, detail, and actions slots. It accepts items or TimelineItem children, three variants, three densities, and configurable timestamp placement. See Timeline.

ActivityFeedCopy link

ActivityFeed displays actor, action, target, and timestamp fields using Timeline rows. Optional day headings use the client timezone after hydration.

import { ActivityFeed } from "@solarius/onset";
import type { ActivityItem } from "@solarius/onset";

CommentThread / CommentView / CommentComposerCopy link

Threaded comment system with avatars, reactions, badges, replies, and a composer. CommentView renders a single comment with nested replies; CommentComposer provides the text input for new comments and replies. Supports pending (optimistic) posts.

import { CommentThread, CommentView, CommentComposer } from "@solarius/onset";
import type { Comment, CommentReaction } from "@solarius/onset";

const comments: Comment[] = [
  {
    id: "1",
    author: "Alice",
    body: "Looks good to me. Ship it.",
    time: new Date(),
    reactions: [{ emoji: "🚀", count: 2, reacted: true }],
    replies: [
      { id: "2", author: "Bob", body: "Agreed, let's go.", time: new Date() },
    ],
  },
];

<CommentThread
  comments={comments}
  onReply={(parentId, body) => createReply(parentId, body)}
  onReact={(commentId, emoji) => toggleReaction(commentId, emoji)}
/>;