Pro Components

Pro Feature

These components are only available in UIFlow Pro.

UIFlow Pro extends the Free component set with data-heavy and game-specific widgets.

UIFlowProDataGrid

A more capable data grid with sorting, filtering, column resizing, pagination, cell/row editing, and row striping.

var grid := $ProDataGrid
grid.setup([
    {"name": "name", "title": "Item", "sortable": true, "filterable": true, "editable": true, "width": 180},
    {"name": "rarity", "title": "Rarity", "filterable": true, "width": 100},
    {"name": "price", "title": "Price", "sortable": true, "align": "right"}
], preload("res://UIScene/ItemRow.tscn"))
grid.page_size = 20
grid.set_data(shop_items)
grid.cell_edited.connect(_on_cell_edited)
grid.row_edited.connect(_on_row_edited)

Features

• Sorting — click sortable column headers.
• Filtering — global set_filter() plus per-column filter inputs.
• Pagination — page_size with previous/next controls.
• Column resize — drag the right edge of a column header.
• Cell editing — double-click an editable cell.
• Row editing — double-click a row to open an edit panel.
• Striping — alternating row background via show_stripes and stripe_color.

UIFlowProVirtualList

Virtual list optimized for very large datasets with variable row heights and selection persistence.

virtual_list.bind(
    quest_list,
    preload("res://UIScene/QuestRow.tscn"),
    _setup_quest,
    {"estimated_height": 64}
)

UIFlowProInventoryGrid

Purpose-built for inventories and equipment screens:

• Drag-and-drop rearrangement.
• Slot highlighting by item type / rarity.
• Stack size rendering.
• Equipment category filters (weapon, armor, consumable).

inventory_grid.set_inventory(player_inventory)
inventory_grid.slot_clicked.connect(_on_slot_clicked)

UIFlowProTreeView

Hierarchical data display for skill trees, tech trees, or file browsers, with drag-and-drop reordering, multi-select, and virtual scrolling.

tree_view.set_root({
    "id": "root",
    "label": "Skills",
    "children": [
        {"id": "combat", "label": "Combat", "children": [
            {"id": "sword", "label": "Sword Mastery"},
            {"id": "dual", "label": "Dual Wield"}
        ]},
        {"id": "magic", "label": "Magic", "children": [
            {"id": "fireball", "label": "Fireball"},
            {"id": "ice", "label": "Ice Shield"}
        ]}
    ]
})

Features

• Drag-and-drop reordering — drop onto a node to insert as child; drop near top/bottom edge to insert as sibling before/after.
• Multi-select — Ctrl+click toggles, Shift+click range-selects.
• Keyboard navigation — Up/Down moves selection, Left/Right collapses/expands, Enter activates.
• Virtual scrolling — only visible rows are rendered for large trees.
• Events — item_moved, selection_changed, item_activated.

UIFlowProChartView

Basic charting for stats, progression, or analytics:

• Line, bar, and pie charts.
• Data-driven via Dictionary or Array.
• Theme-aware colors.

UIFlowProWorldUI

World-space UI components that follow 3D nodes:

• Nameplates, health bars, and floating damage numbers.
• Billboard or locked-rotation modes.
• Automatic pooling and cleanup.

UIFlowProRichTextPanel

Rich text rendering with markup, inline icons, and clickable links, wrapped as a reusable page component.

Migration from Free Components

Some Pro components share names with Free components (e.g., UIFlowDataGrid). Pro versions usually expose a superset of the Free API, so upgrading is often a matter of swapping the scene/script reference.