From 84c1b015840b20a3bf024e2941a6b26f1856f8b9 Mon Sep 17 00:00:00 2001
From: NoryiE <NoryiE@users.noreply.github.com>
Date: Thu, 30 Oct 2025 07:40:56 +0000
Subject: [PATCH] deploy: 83c27d824f2821dee9c95691a9d6c52a168a3248

---
 docs/references/elements/Container.md |   8 +-
 docs/references/elements/Table.md     |  32 +++++++-
 docs/references/elements/Tree.md      | 107 +++++++++++++++++++++++++-
 3 files changed, 134 insertions(+), 13 deletions(-)

diff --git a/docs/references/elements/Container.md b/docs/references/elements/Container.md
index de8db44..62424dc 100644
--- a/docs/references/elements/Container.md
+++ b/docs/references/elements/Container.md
@@ -1,11 +1,5 @@
 # Container
-_A fundamental layout element that manages child UI components. Containers handle element organization, event propagation, _
-_rendering hierarchy, and coordinate space management. They serve as the backbone of Basalt's UI structure by providing:_
-_- Child element management and organization_
-_- Event bubbling and distribution_
-_- Visibility calculations and clipping_
-_- Focus management_
-_- Coordinate space transformation_
+_A fundamental layout element that manages child UI components. Containers handle element organization, event propagation, rendering hierarchy, and coordinate space management._
 
 Extends: `VisualElement`
 
diff --git a/docs/references/elements/Table.md b/docs/references/elements/Table.md
index 6021a65..fcbf458 100644
--- a/docs/references/elements/Table.md
+++ b/docs/references/elements/Table.md
@@ -5,9 +5,33 @@ Extends: `Collection`
 
 ## Usage
 ```lua
-local people = container:addTable():setWidth(40)
-people:setColumns({{name="Name",width=12}, {name="Age",width=10}, {name="Country",width=15}})
-people:addRow("Alice", 30, "USA"):addRow("Bob", 25, "UK")
+local peopleTable = main:addTable()
+:setPosition(1, 2)
+:setSize(49, 10)
+:setColumns({
+{name = "Name", width = 15},
+{name = "Age", width = 8},
+{name = "Country", width = 12},
+{name = "Score", width = 10}
+})
+:setBackground(colors.black)
+:setForeground(colors.white)
+
+peopleTable:addRow("Alice", 30, "USA", 95)
+peopleTable:addRow("Bob", 25, "UK", 87)
+peopleTable:addRow("Charlie", 35, "Germany", 92)
+peopleTable:addRow("Diana", 28, "France", 88)
+peopleTable:addRow("Eve", 32, "Spain", 90)
+peopleTable:addRow("Frank", 27, "Italy", 85)
+peopleTable:addRow("Grace", 29, "Canada", 93)
+peopleTable:addRow("Heidi", 31, "Australia", 89)
+peopleTable:addRow("Ivan", 26, "Russia", 91)
+peopleTable:addRow("Judy", 33, "Brazil", 86)
+peopleTable:addRow("Karl", 34, "Sweden", 84)
+peopleTable:addRow("Laura", 24, "Norway", 82)
+peopleTable:addRow("Mallory", 36, "Netherlands", 83)
+peopleTable:addRow("Niaj", 23, "Switzerland", 81)
+peopleTable:addRow("Olivia", 38, "Denmark", 80)
 ```
 
 ## Properties
@@ -138,7 +162,7 @@ Set data with automatic formatting
 
 ### Parameters
 * `rawData` `table` The raw data array (array of row arrays)
-* `formatters` `table` ? Optional formatter functions for columns `{[2] = function(value) return value end}`
+* `formatters` `table` ? Optional formatter functions for columns {`[2] = function(value)` return value end}
 
 ### Returns
 * `Table` `self` The Table instance
diff --git a/docs/references/elements/Tree.md b/docs/references/elements/Tree.md
index bf5bcea..3448a31 100644
--- a/docs/references/elements/Tree.md
+++ b/docs/references/elements/Tree.md
@@ -1,6 +1,109 @@
 # Tree
-_This is the tree class. It provides a hierarchical view of nodes that can be expanded and collapsed,_
-_with support for selection and scrolling._
+_This is the tree class. It provides a hierarchical view of nodes that can be expanded and collapsed, with support for selection and scrolling._
+_run [[_
+_local basaltg = require("basalt")_
+_local main = basalt.getMainFrame()_
+
+_local fileTree = main:addTree()_
+_:setPosition(2, 2)_
+_:setSize(15, 15)_
+_:setBackground(colors.black)_
+_:setForeground(colors.white)_
+_:setSelectedBackgroundColor(colors.blue)_
+_:setSelectedForegroundColor(colors.white)_
+_:setScrollBarColor(colors.lightGray)_
+_:setScrollBarBackgroundColor(colors.gray)_
+
+_-- Build a file system-like tree structure_
+_local treeData = {_
+_{_
+_text = "Root",_
+_children = {_
+_{_
+_text = "Documents",_
+_children = {_
+_{text = "report.txt"},_
+_{text = "notes.txt"},_
+_{text = "todo.txt"}_
+_}_
+_},_
+_{_
+_text = "Pictures",_
+_children = {_
+_{text = "vacation.png"},_
+_{text = "family.jpg"},_
+_{_
+_text = "Archive",_
+_children = {_
+_{text = "old_photo1.jpg"},_
+_{text = "old_photo2.jpg"},_
+_{text = "old_photo3.jpg"}_
+_}_
+_}_
+_}_
+_},_
+_{_
+_text = "Music",_
+_children = {_
+_{text = "song1.mp3"},_
+_{text = "song2.mp3"},_
+_{text = "song3.mp3"},_
+_{text = "song4.mp3"}_
+_}_
+_},_
+_{_
+_text = "Videos",_
+_children = {_
+_{text = "movie1.mp4"},_
+_{text = "movie2.mp4"}_
+_}_
+_},_
+_{_
+_text = "Projects",_
+_children = {_
+_{_
+_text = "ProjectA",_
+_children = {_
+_{text = "src"},_
+_{text = "tests"},_
+_{text = "README.md"}_
+_}_
+_},_
+_{_
+_text = "ProjectB",_
+_children = {_
+_{text = "main.lua"},_
+_{text = "config.lua"}_
+_}_
+_}_
+_}_
+_}_
+_}_
+_}_
+_}_
+
+_fileTree:setNodes(treeData)_
+_local textLabel = main:addLabel()_
+_:setPosition(2, 18)_
+_:setForeground(colors.yellow)_
+_:setText("Selected: None")_
+
+_-- Handle node selection_
+_fileTree:onSelect(function(self, node)_
+_textLabel_
+_:setText("Selected: " .. node.text)_
+_:setPosition(2, 18)_
+_:setForeground(colors.yellow)_
+_end)_
+
+_-- Info label_
+_main:addLabel()_
+_:setText("Click nodes to expand/collapse | Scroll to navigate")_
+_:setPosition(2, 1)_
+_:setForeground(colors.lightGray)_
+
+_basalt.run()_
+_]]_
 
 Extends: `VisualElement`