js/ui/components/data
js/ui/components/data.ts
Host-neutral tables, file trees, timelines, and reusable tree state. @internal
Interfaces
interface TableColumn {
One column of a {@link Table}.
Properties
key: string
header: string
width?: number
Explicit cell width; narrower terminal content truncates with an ellipsis.
align?: 'start' | 'end'
interface TableProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Table}.
Properties
columns: readonly TableColumn[]
rows: ReadonlyArray<Readonly<Record<string, string>>>
selectedIndex?: number
onSelectRow?: (index: number) => void
interface FileTreeNode {
One node of a {@link FileTree}; missing children marks a leaf.
Properties
key: string
label: string
icon?: string
children?: readonly FileTreeNode[]
interface VisibleTreeRow {
One visible flattened tree row shared by render targets.
Properties
node: FileTreeNode
depth: number
directory: boolean
open: boolean
interface FileTreeProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link FileTree}.
Properties
nodes: readonly FileTreeNode[]
expanded: readonly string[]
selectedKey?: string | null
icons?: Readonly<Record<string, string>>
folderIcons?: { open: string; closed: string }
onToggle?: (key: string) => void
onSelect?: (key: string) => void
interface TreeState {
Reusable expansion and selection state for {@link FileTree}.
Readonly Properties
readonly expanded: Signal<string[]>
readonly selectedKey: Signal<string | null>
Methods
toggle(key: string): void
select(key: string | null): void
isExpanded(key: string): boolean
interface TimelineEntry {
One entry of a {@link Timeline}.
Properties
key: string
title: string
detail?: string
variant?: StatusVariant
interface TimelineProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link Timeline}.
Properties
entries: readonly TimelineEntry[]
Functions
function Table(props: TableProps): VNode
Data table with optional controlled row selection.
function visibleTreeRows(
nodes: readonly FileTreeNode[],
expanded: readonly string[],
): VisibleTreeRow[]
Flatten only expanded tree branches into deterministic visible rows.
function fileIcon(
node: Pick<FileTreeNode, 'label' | 'icon' | 'children'>,
icons?: Readonly<Record<string, string>>,
open = false,
folderIcons?: { open: string; closed: string },
): string
Resolve a file-tree node to a target-independent icon registry name.
function FileTree(props: FileTreeProps): VNode
Expandable and selectable file hierarchy.
function createTreeState(
defaultExpanded: readonly string[] = [],
defaultSelected: string | null = null,
): TreeState
Create tree state outside component bodies so it survives target re-renders.
function Timeline(props: TimelineProps): VNode
Vertical event list with status markers and optional details.
Constants
const FILE_ICONS: Readonly<Record<string, string>>
Built-in extension-to-icon-name table.