Sometimes one column is not enough to recognize an item. MultiColumnComboBox shows several columns with a header row and searches all of them.
Why it helps
- Several columns in the list
- Typing searches every column
- Built on Autocomplete
Where it fits
- Customers with city and ID
- Products with code and price
- Employees with department
Example
<MultiColumnComboBox TItem="Person" Items="SampleData.People" Columns="_columns" ItemText="@(p => p.Name)" @bind-Value="_person" Label="Employee" Placeholder="Search by any column" />
<p>Chosen: @(_person?.Name ?? "none")</p>
@code {
private Person? _person;
private readonly IReadOnlyList<ComboColumn<Person>> _columns =
[
new("Name", p => p.Name, "10rem"),
new("Department", p => p.Department, "8rem"),
new("Age", p => p.Age, "4rem")
];
}A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.
Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.