Log Groups Virtual Tree

ProNew

A virtualised tree of log groups, streams and thousands of events with a count of errors per group and a button that jumps to the first error. Use this when a log source has far too many rows to render at once.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

heightClassName

Guide and examples

When to use it

Use it for log viewers, audit trails and event streams where the number of rows is in the thousands.

Do not use it for live tailing at high speed (batch updates) or for a few dozen rows.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`groups`	`TreeNode<LogEvent>[]`	-	Groups > streams > events; events carry `data.level`.
`heightClassName`	`string`	`"h-72"`	Height of the list.
`initialRect`	`{ width, height }`	`360 x 288`	Size before measuring.

Accessibility

Every row keeps its true level, position and set size, although only the rows in view are in the page.
The level is written in each event's name ("error, gateway timeout"); groups add their error count.
Jump to first error opens the groups on the way, scrolls and moves focus to the row.

Testing

The pattern ships with a Testing Library test (log-groups-virtual-tree.test.tsx) that covers error counts, windowing, the jump button and the no-error case.

Guide and examples

When to use it

Use it for log viewers, audit trails and event streams where the number of rows is in the thousands.

Do not use it for live tailing at high speed (batch updates) or for a few dozen rows.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`groups`	`TreeNode<LogEvent>[]`	-	Groups > streams > events; events carry `data.level`.
`heightClassName`	`string`	`"h-72"`	Height of the list.
`initialRect`	`{ width, height }`	`360 x 288`	Size before measuring.

Accessibility

Every row keeps its true level, position and set size, although only the rows in view are in the page.
The level is written in each event's name ("error, gateway timeout"); groups add their error count.
Jump to first error opens the groups on the way, scrolls and moves focus to the row.

Testing

The pattern ships with a Testing Library test (log-groups-virtual-tree.test.tsx) that covers error counts, windowing, the jump button and the no-error case.