Database Schema Tree

ProNew

A tree of schemas, tables and columns that writes each column's type, key and nullability into its name and filters by any of them. Use this when people browse a database schema to find a table or a column.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it for database consoles, data catalogues and API explorers where people look up a table or column.

Do not use it for entity-relationship diagrams (it shows structure, not links) or for editing the schema.

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
`schemas`	`TreeNode<Column>[]`	-	Schemas > tables > columns; columns carry `data`.
`onSelect`	`(column) => void`	-	Enter or double click on a column.

Accessibility

A column's type, key, reference and nullability are in its accessible name; the PK and FK tags are decorative.
The search field has an accessible name and the match count is a status message.
Tables and schemas only open and close.

Testing

The pattern ships with a Testing Library test (database-schema-tree.test.tsx) that covers the spoken details, searching by type and selecting a column.

Guide and examples

When to use it

Use it for database consoles, data catalogues and API explorers where people look up a table or column.

Do not use it for entity-relationship diagrams (it shows structure, not links) or for editing the schema.

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
`schemas`	`TreeNode<Column>[]`	-	Schemas > tables > columns; columns carry `data`.
`onSelect`	`(column) => void`	-	Enter or double click on a column.

Accessibility

A column's type, key, reference and nullability are in its accessible name; the PK and FK tags are decorative.
The search field has an accessible name and the match count is a status message.
Tables and schemas only open and close.

Testing

The pattern ships with a Testing Library test (database-schema-tree.test.tsx) that covers the spoken details, searching by type and selecting a column.