Taxonomy Editor

ProNew

A sortable category tree with add child, rename and a two-step delete for categories that have subcategories, announced as you go. Use this when editors maintain a category tree by hand.

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 CMS categories, product taxonomies and help-centre structure edited by a small team.

Do not use it for end-user tagging (use tag-hierarchy-editor) or for trees edited by importing a file.

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
`nodes`	`TreeNode[]`	-	The starting tree; the editor keeps its own copy.
`onNodesChange`	`(nodes) => void`	-	Called after every change.
`createId`	`() => string`	`counter`	Makes ids for new categories.

Accessibility

Every change is announced in a status region ("Added Film under Culture.").
Delete on a category with subcategories needs a second press that says how many go with it; changing the selection cancels it.
Reordering uses sortable-tree: drag, or Alt with the arrow keys.

Testing

The pattern ships with a Testing Library test (taxonomy-editor.test.tsx) that covers adding at the root and under a parent, renaming and the two-step delete.

Guide and examples

When to use it

Use it for CMS categories, product taxonomies and help-centre structure edited by a small team.

Do not use it for end-user tagging (use tag-hierarchy-editor) or for trees edited by importing a file.

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
`nodes`	`TreeNode[]`	-	The starting tree; the editor keeps its own copy.
`onNodesChange`	`(nodes) => void`	-	Called after every change.
`createId`	`() => string`	`counter`	Makes ids for new categories.

Accessibility

Every change is announced in a status region ("Added Film under Culture.").
Delete on a category with subcategories needs a second press that says how many go with it; changing the selection cancels it.
Reordering uses sortable-tree: drag, or Alt with the arrow keys.

Testing

The pattern ships with a Testing Library test (taxonomy-editor.test.tsx) that covers adding at the root and under a parent, renaming and the two-step delete.