Translation Keys Tree

ProNew

A tree built from dotted translation keys (checkout.cart.title) that shows which locale is missing a value, with a locale select, an only-missing switch and a count per namespace. Use this when translators work through a project's keys.

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.

defaultLocale

Guide and examples

When to use it

Use it for localisation dashboards and translator tools that work from a flat file of dotted keys.

Do not use it for translating the strings themselves (add an editor beside it) or for non-dotted key schemes.

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
`entries`	`Record<string, Record<string, string \| undefined>>`	-	Dotted key to value per locale.
`locales`	`{ code, label }[]`	-	Languages in the select.
`defaultLocale`	`string`	`first`	Language shown first.

Accessibility

The status of every key ("missing" or its value) is part of the row's accessible name, not colour alone.
Namespaces say how many keys are missing ("a, 2 missing").
The language select and the switch have visible labels; counts are in a polite live region.

Testing

The pattern ships with a Testing Library test (translation-keys-tree.test.tsx) that covers building the tree, the missing counts, switching language and the only-missing switch.

Guide and examples

When to use it

Use it for localisation dashboards and translator tools that work from a flat file of dotted keys.

Do not use it for translating the strings themselves (add an editor beside it) or for non-dotted key schemes.

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
`entries`	`Record<string, Record<string, string \| undefined>>`	-	Dotted key to value per locale.
`locales`	`{ code, label }[]`	-	Languages in the select.
`defaultLocale`	`string`	`first`	Language shown first.

Accessibility

The status of every key ("missing" or its value) is part of the row's accessible name, not colour alone.
Namespaces say how many keys are missing ("a, 2 missing").
The language select and the switch have visible labels; counts are in a polite live region.

Testing

The pattern ships with a Testing Library test (translation-keys-tree.test.tsx) that covers building the tree, the missing counts, switching language and the only-missing switch.