Simple Data Table
A sortable data table with row selection and pagination.
Data Table
Badge
Preview
Name | Email | Department | Role | Status | |
|---|---|---|---|---|---|
| Alice Johnson | [email protected] | Engineering | Senior Developer | Active | |
| Bob Smith | [email protected] | Marketing | Content Lead | Active | |
| Carol Williams | [email protected] | Design | UX Designer | Active | |
| David Brown | [email protected] | Engineering | DevOps Engineer | Inactive | |
| Eve Davis | [email protected] | Sales | Account Executive | Active |
Code
<div class="w-full max-w-4xl">
<BbDataTable TData="Employee" Data="@employees"
SelectionMode="DataTableSelectionMode.Multiple"
InitialPageSize="5"
@bind-SelectedItems="selectedEmployees">
<Columns>
<BbDataTableColumn TData="Employee" TValue="string"
Property="@(e => e.Name)"
Header="Name" Sortable="true" />
<BbDataTableColumn TData="Employee" TValue="string"
Property="@(e => e.Email)"
Header="Email" Sortable="true" />
<BbDataTableColumn TData="Employee" TValue="string"
Property="@(e => e.Department)"
Header="Department" Sortable="true" />
<BbDataTableColumn TData="Employee" TValue="string"
Property="@(e => e.Role)"
Header="Role" Sortable="true" />
<BbDataTableColumn TData="Employee" TValue="string"
Property="@(e => e.Status)"
Header="Status" Sortable="true">
<CellTemplate Context="employee">
<BbBadge Variant="@(employee.Status == "Active" ? BadgeVariant.Default : BadgeVariant.Secondary)">
@employee.Status
</BbBadge>
</CellTemplate>
</BbDataTableColumn>
</Columns>
</BbDataTable>
</div>
@code {
private record Employee(string Name, string Email, string Department, string Role, string Status);
private List<Employee> employees = new()
{
new("Alice Johnson", "[email protected]", "Engineering", "Senior Developer", "Active"),
new("Bob Smith", "[email protected]", "Marketing", "Content Lead", "Active"),
new("Carol Williams", "[email protected]", "Design", "UX Designer", "Active"),
new("David Brown", "[email protected]", "Engineering", "DevOps Engineer", "Inactive"),
new("Eve Davis", "[email protected]", "Sales", "Account Executive", "Active"),
new("Frank Miller", "[email protected]", "Engineering", "Frontend Developer", "Active"),
new("Grace Wilson", "[email protected]", "HR", "Recruiter", "Active"),
new("Henry Taylor", "[email protected]", "Marketing", "SEO Specialist", "Inactive"),
new("Ivy Anderson", "[email protected]", "Design", "Product Designer", "Active"),
new("Jack Thomas", "[email protected]", "Engineering", "Backend Developer", "Active"),
new("Karen Lee", "[email protected]", "Sales", "Sales Manager", "Active"),
new("Leo Martinez", "[email protected]", "Finance", "Financial Analyst", "Inactive")
};
private IReadOnlyCollection<Employee> selectedEmployees = Array.Empty<Employee>();
}