What is DataTable?
DataTable is a high-performance widget for displaying tabular data. It uses Apache Arrow under the hood, which means it can handle large datasets efficiently. Arrow provides columnar data format with zero-copy reads, making it fast even with millions of rows.
What you can do with DataTable:
- Sort columns
- Filter rows
- Paginate or batch-load data
- Freeze columns
- Group columns
- Copy selected cells
- Row actions
The performance comes from smart data handling. Instead of sending all rows at once, DataTable streams data in batches. It sends binary Arrow IPC data over gRPC, avoiding JSON serialization overhead.
Basic example:
public record Employee(int Id, string Name, decimal Salary, bool IsActive);
[App]
public class EmployeeTableApp : ViewBase
{
public override object? Build()
{
var employees = GetEmployees().AsQueryable();
return employees.ToDataTable(e => e.Id)
.Header(e => e.Name, "Employee Name")
.Header(e => e.Salary, "Salary")
.Header(e => e.IsActive, "Active")
.Width(e => e.Salary, Size.Px(120))
.Config(config =>
{
config.AllowSorting = true;
config.AllowFiltering = true;
config.BatchSize = 50;
});
}
}
The fluent API lets you configure headers, widths, alignment, and grouping. You can also add row actions like edit, delete, or custom menus.
AI Filtering
This is where it gets interesting. DataTable supports LLM-based filtering. Instead of writing complex filter expressions, users can type natural language queries.
Enable it with one line:
.Config(config => config.AllowLlmFiltering = true)
What users can type:`
- "employees older than 30"
- "salary above 100000"
- "active managers"
- "hired in 2023"
The AI filter agent converts these to structured filter expressions like
[Age] > 30 or [Salary] > 100000 AND [IsManager] = true.
The filter grammar supports:
- Comparisons:
=,!=,>,>=,<,<= - Text operations:
contains,starts with,ends with - Existence checks:
is blank,is not blank - Logical operators:
AND,OR,NOT - Grouping with parentheses
Smart interpretation:
The agent is forgiving with user input. It handles typos like "diabetees" to "diabetes" or "sience" to "science". It maps concepts to fields, so "retirement age" becomes [Age] >= 65 and "drinking age" becomes [Age] >= 18.
It also resolves type mismatches. If someone writes "Status above 45" but Status is an icon field, the agent looks for related numeric fields like Age and uses that instead.
Full example with AI filtering:
[App(icon: Icons.DatabaseZap)]
public class DataTableApp : ViewBase
{
public override object? Build()
{
var employees = UseState(() => GenerateEmployeeData(1000));
return employees.Value.AsQueryable()
.ToDataTable(e => e.Id)
.Header(e => e.Name, "Name")
.Header(e => e.Email, "Email")
.Header(e => e.Age, "Age")
.Header(e => e.Salary, "Salary")
.Header(e => e.IsActive, "Active")
.Header(e => e.Department, "Dept")
.Config(config =>
{
config.AllowSorting = true;
config.AllowFiltering = true;
config.AllowLlmFiltering = true;
config.ShowSearch = true;
config.BatchSize = 50;
})
.RowActions(
MenuItem.Default(Icons.Pencil, "edit"),
MenuItem.Default(Icons.Trash2, "delete")
)
.HandleRowAction(async e =>
{
var client = UseService<IClientProvider>();
client.Toast($"Action: {e.Value.Tag} on row {e.Value.Id}");
});
}
}
What is Ivy Framework?
Ivy is an open-source C# framework for building internal tools and dashboards. It works like React but runs entirely in C#. State is entirely handled on the server and sends updates over WebSocket to a provided frontend renderer.
The key benefits:
- Single codebase: no JavaScript, HTML, or CSS required
- Server-side state: better security for enterprise applications
- AI Tools: generate applications and filter data using AI
- Database support: SQL Server, Postgres, MySQL, Supabase, and more
Get Started With Ivy
Ready to build your first data table?
1. Install the CLI:
dotnet tool install -g Ivy.Console
2. Create a new project:
ivy init --hello
3. Run:
dotnet watch
4. Open
http://localhost:5010
To build a data table app, create a class that extends ViewBase, query your data source, and call .ToDataTable(). Configure columns with the fluent API, enable AI filtering, and deploy.
Sign up for a free account at ivy.app to access the agentic features and code generation. The LLM agent can generate entire back office applications based on your database schema.
For more details, check the documentation and samples.
