To implement custom filtering in Smart.Table using Blazor, you can use the Filterable property along with custom logic in C# to control how data is filtered. Here’s a step-by-step example.
<Table DataSource="@FilteredData"
Filterable="true"
Columns="@Columns">
</Table>
Define your columns:
@code {
private List<TableColumn> Columns = new List<TableColumn>
{
new TableColumn { Label = "ID", DataField = "Id" },
new TableColumn { Label = "Name", DataField = "Name" },
new TableColumn { Label = "Status", DataField = "Status" }
};
Setup the filtering:
private List<Item> AllItems = new List<Item>
{
new Item { Id = 1, Name = "Task A", Status = "Open" },
new Item { Id = 2, Name = "Task B", Status = "Closed" },
new Item { Id = 3, Name = "Task C", Status = "In Progress" }
};
private List<Item> FilteredData = new List<Item>();
private string filterText = "";
protected override void OnInitialized()
{
FilteredData = AllItems;
}
private void OnFilterChanged(ChangeEventArgs e)
{
filterText = e.Value.ToString();
ApplyCustomFilter();
}
private void ApplyCustomFilter()
{
if (string.IsNullOrWhiteSpace(filterText))
{
FilteredData = AllItems;
}
else
{
FilteredData = AllItems.Where(item =>
item.Name.Contains(filterText, StringComparison.OrdinalIgnoreCase) ||
item.Status.Contains(filterText, StringComparison.OrdinalIgnoreCase)).ToList();
}
}
}
Add a filter input
<input type="text" placeholder="Filter by name or status..." @oninput="OnFilterChanged" />
Best regards,
Markov
Smart UI Team
https://www.htmlelements.com/
.
