datareq- Type
TreeNode[]- Default
- -
- Description
- Hierarchical data structure representing folders and files.
Components / Layout
Tree View
மரவமைப்பு
A tree view displays hierarchical node records (folders and nested files). Useful for navigating nested categories, district circles, administrative structures, or local folder structures.
மரவமைப்பானது படிநிலை விவரங்களை (கோப்புறைகள் மற்றும் கோப்புகள்) கிளைகளாகக் காட்சிப்படுத்த உதவும்.
Variants
Component preview
Tree View variantsமரவமைப்பு வகைகள்Anatomy
Structure
Anatomy
3 parts documented for implementation and review.
1
Expander Chevron Toggle
விரிவாக்கக் குறி<button>Chevron icon button that rotates dynamically to signal branch expansion states (0 degrees for closed, 90 degrees for open).
2
Folder/File Icon Glyph
கோப்பு அல்லது கோப்புறை சின்னம்required<svg>Semantic glyph reinforcing whether the node represents a branch container (Folder) or a leaf document (FileText).
3
Node Selection Label
முனை லேபிள்requiredBilingual descriptive text statement for the node (e.g. 'சென்னை மாவட்டம் / Chennai'). Sized small with snug spacing.
API
Props
defaultExpanded- Type
boolean- Default
false- Description
- Default folder open configuration.
onNodeSelect- Type
(node: TreeNode) => void- Default
- -
- Description
- Node click listener callback.
| Prop | Type | Default | Description |
|---|---|---|---|
datareq | TreeNode[] | - | Hierarchical data structure representing folders and files. |
defaultExpanded | boolean | false | Default folder open configuration. |
onNodeSelect | (node: TreeNode) => void | - | Node click listener callback. |
Usage guidance
- Implement visual indent padding grids (e.g. `pl-6`) to clearly indicate the hierarchical level of nested nodes.
- Ensure keyboard arrow navigation support is fully mapped (Up/Down to navigate, Left/Right to collapse/expand).
Best practices
Utilize unique visual symbols for folders vs files
கோப்புறைகள் மற்றும் கோப்புகளுக்கு தனித்துவமான குறியீடுகளைப் பயன்படுத்தவும்
Different visual glyphs assist in quickly scanning nested layouts.
கோப்புறைகள் மற்றும் கோப்புகளை வேறுபடுத்திக் காட்டும் சின்னங்களைப் பயன்படுத்துங்கள்.
Don't nest items without left padding offsets
இடைவெளி நகர்த்தல்கள் இல்லாமல் கிளைகளை அடுக்காதே
Nesting nodes flatly makes it impossible to identify which files belong to which parent folder.
இடைவெளி ஒதுக்காமல் அடுக்குவது படிநிலையைப் புரிந்துகொள்வதைக் கடினமாக்கும்.