TreeViewNode is a semantic container for a single tree-view node row. Provides consistent styling and structure for displaying an interactive row within the TreeViewNode component.
import { TreeView, TreeViewNodes, TreeViewNode, TreeViewItemLabel } from '@syncfusion/react-navigations';
const data = [{ id: '1', label: 'Documents' }];
const fields = { id: 'id', label: 'label' };
export default function App() {
return (
<TreeView dataSource={data} fields={fields}>
<TreeViewNodes>
{(ctx) => (
<TreeViewNode className="my-row">
<TreeViewItemLabel>{String((ctx.item as { label: string }).label)}</TreeViewItemLabel>
</TreeViewNode>
)}
</TreeViewNodes>
</TreeView>
);
}
The following table outlines the props for the TreeViewNodeProps:
| Name | Type | Default | Description |
|---|
| children | node | - | Specifies the child content for the component. |
| className | string | - | Specifies the root element class name. |