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]EngineeringSenior Developer
Active
Bob Smith[email protected]MarketingContent Lead
Active
Carol Williams[email protected]DesignUX Designer
Active
David Brown[email protected]EngineeringDevOps Engineer
Inactive
Eve Davis[email protected]SalesAccount 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>();
}