Skip to content
Elaris.UI Logo Elaris.UI Documentation

Table Demo Example

The Table Demo shows how to use the Table widget to display structured data with columns, rows, selection, and specialized column types.

What It Demonstrates

Section titled “What It Demonstrates”
  • Creating tables with columns
  • Data binding with lambda expressions
  • Specialized columns (ProgressColumn, CheckboxColumn)
  • Row selection and activation
  • Custom data models

Key Features

Section titled “Key Features”

Creating Columns

Section titled “Creating Columns”
var table = new Table();


table.AddColumn("Task", 30).BindTo<TaskItem>(t => t.Name);
table.AddColumn("Status", 12).BindTo<TaskItem>(t => t.Status);
table.AddColumn(new ProgressColumn("Progress", 20)
{
    ShowPercentage = true
}.BindTo<TaskItem>(t => t.Progress));
table.AddColumn(new CheckboxColumn("Done", 6)
    .BindTo<TaskItem>(t => t.IsComplete));

Data Binding

Section titled “Data Binding”
var tasks = new List<TaskItem>
{
    new("Implement login page", "In Progress", 65, false, "High", "Alice"),
    new("Design database schema", "Complete", 100, true, "High", "Bob")
};


table.DataSource = tasks;

Events

Section titled “Events”
table.RowSelected += row =>
{
    if (row.Data is TaskItem task)
        statusBar.LeftText = $"Selected: {task.Name}";
};


table.RowActivated += row =>
{
    if (row.Data is TaskItem task)
        statusBar.CenterText = $"Activated: {task.Name}";
};

Running the Example

Section titled “Running the Example”
Terminal window
cd examples/Elaris.Examples.TableDemo
dotnet run

Learning Points

Section titled “Learning Points”
  • Tables are ideal for structured data
  • Lambda expressions provide flexible data binding
  • Specialized columns add visual elements
  • Row selection and activation enable interaction
Section titled “Related Widgets”