Tree Position
TreePosition renders the Position section on a tree entity’s show page. It answers “where is this node in the tree” with a small table of the surrounding nodes and their raw nested-set values, plus an ancestor breadcrumb.
It renders nothing for non-tree entities: if the loaded entity has no lvl/lft fields the component returns null, so it can be mounted unconditionally in the show container.
Import
import { TreePosition } from "@phpcreation/frontend-crud-react-nextjs-bundle/components";Props
type TreePositionProps = {
resource: string; // API resource name
locale: string;
tenant: string;
handleRemoveSection?: (section: string) => void; // shown when managing page layout
};The entity itself comes from DetailShowContext (data, loading, managingPage), so the component must render inside the show page’s provider.
What it shows
The neighbors come from useTreeNeighbors, fetched with nested-set range queries:
| Row | Content |
|---|---|
| Root | the tree’s root node (hidden when the current node is the root) |
| Parent | the direct parent from the entity’s parent relation |
| Before | previous sibling at the same level, - if first |
| Current | the entity itself, highlighted |
| After | next sibling at the same level, - if last |
Each row shows Level, Left (lft), Right (rgt), and an identification label. The label field is the user’s entity-field-settings preference from local storage, falling back to toString, title, then #id. Levels and identifications link to the filtered listing and the node’s show page.
Below the table, a breadcrumb lists the full ancestor chain from root to parent, each linking to its show page:
Fruit / Rose Family / Berry Sub-Family / StrawberryThe list icon in the section header links to /{locale}/{resource}/treeview?anchor={id}, which opens the tree view with this node expanded and scrolled into view.