Table, List, and Tree
Use data controls when you need to show rows, tables, or hierarchical data.
ModernUI includes convenient simple helpers and lower-level source-based controls.
Main helpers and controls
| Helper/control | Use it for |
|---|---|
Mui::ListBox |
Simple string list |
Mui::SimpleTable |
Simple string table |
Mui::ListView |
List with custom MuiItemSource |
Mui::TableView |
Table with custom MuiTableSource |
Mui::TreeView |
Tree with custom MuiTreeSource |
ListBox
Use ListBox for a simple array of strings.
string symbols[];
ArrayResize(symbols,3);
symbols[0]="EURUSD";
symbols[1]="GBPUSD";
symbols[2]="XAUUSD";
MuiListBox list=Mui::ListBox(parent,symbols,0,260.0,200.0);
Update a row:
list.SetItem(1,"GBPUSD updated");
SimpleTable
Use SimpleTable for a small string grid.
string headers[];
ArrayResize(headers,3);
headers[0]="Time";
headers[1]="Event";
headers[2]="Status";
MuiSimpleTable table=Mui::SimpleTable(parent,headers,4,520.0,180.0,true,true);
table.SetCell(0,0,"10:30");
table.SetCell(0,1,"Started");
table.SetCell(0,2,"OK");
Use SimpleTable when you do not want to write a custom table source.
Custom ListView
Use ListView with a custom source for larger or dynamic lists.
class MySource : public MuiItemSource
{
public:
virtual int Count(void)
{
return 1000;
}
virtual void BindRow(MuiRowTemplate *row,const int index)
{
row.primary.Text("Row "+IntegerToString(index));
row.primary.SetVisible(true);
row.secondary.SetVisible(false);
row.meta.SetVisible(false);
row.badge.SetVisible(false);
}
};
static MySource src;
MuiListView *list=Mui::ListView(parent,&src,260.0,220.0);
Reset all row fields in BindRow. Rows may be recycled.
Custom TableView
Use TableView with a custom source for large, dynamic, or domain-specific table data.
class MyTableSource : public MuiTableSource
{
public:
virtual int RowCount(void) { return 5000; }
virtual int ColCount(void) { return 5; }
virtual string ColName(const int col)
{
return "C"+IntegerToString(col);
}
virtual string CellText(const int row,const int col)
{
return IntegerToString(row)+":"+IntegerToString(col);
}
};
static MyTableSource src;
MuiTableView *table=Mui::TableView(parent,&src,520.0,260.0);
TreeView
Use TreeView when data is hierarchical.
MuiTreeView *tree=Mui::TreeView(parent,treeSource,360.0,220.0);
Use a custom tree source that matches your data model.
Simple helpers vs custom sources
| Need | Use |
|---|---|
| Small list of strings | ListBox |
| Small table of strings | SimpleTable |
| Large dynamic list | ListView with custom source |
| Large dynamic table | TableView with custom source |
| Numeric/domain-specific sorting | Custom table source |
| Hierarchical data | TreeView |
Ownership and lifetime
Data views usually register a source but do not own it.
Practical rules:
- keep the source alive while the view uses it
- use static/global source objects for simple examples
- keep wrapper values such as
MuiListBoxorMuiSimpleTableif you need to update rows - call
Refresh()or source notification methods when backing data changes - do not delete a source while the UI still references it
Common mistakes
Using SimpleTable for complex data
SimpleTable is convenient but string-based. Use a custom source for complex tables.
Forgetting row recycling
Virtualized views reuse rows. Reset all row fields during binding.
Losing the backing source pointer
If you only keep the visual control pointer, you may not be able to update the backing rows later.
Related pages
- Data views —
MuiTableView, cell/header events, sources Mui::SimpleTable·Mui::ListBox- Event Bus —
MUI_EVENT_TABLE_CELL_CLICK,MUI_EVENT_SELECTION_CHANGED - Trading dashboard showcase — table and list patterns in a full demo
- Table and list sources
- Combo, List, Table, and Tabs
- Table and list sources