DataTable Component

Type: Action

Customers

Manage your customer accounts and details.

Company	License Use	Status	About
C Catalog catalogapp.io	Enterprise	Active	Design platform for teams
C Circooles circooles.com	Business	Active	Collaboration suite
C Command+R cmdr.ai	Business	Churned	AI assistant platform
H Hourglass hourglass.app	Enterprise	Active	Time tracking solution
L Layers getlayers.io	Free	Pending	Design system toolkit

Page 1 of 3

Type: Menu

Team Members

Company	License Use	Status	About
C Catalog catalogapp.io	Enterprise	Active	Design platform for teams
C Circooles circooles.com	Business	Active	Collaboration suite
C Command+R cmdr.ai	Business	Churned	AI assistant platform
H Hourglass hourglass.app	Enterprise	Active	Time tracking solution
L Layers getlayers.io	Free	Pending	Design system toolkit

Page 1 of 3

Usage examples

Copy-paste-ready snippets for common DataTable patterns.

Minimal action table

<DataTable TItem="Customer"
           Items="@customers"
           Columns="@columns"
           Type="Action"
           Title="Customers"
           Subtitle="Manage customer accounts."
           RowActions="@rowActions"
           OnRowAction="@HandleRowAction"
           PageSize="5" />

@code {
    private List<DataTable<Customer>.Column> columns = new()
    {
        new() { Key = "name",   Title = "Name",   Sortable = true, Property = c => c.Name },
        new() { Key = "status", Title = "Status", Property = c => c.Status },
    };

    private List<DataTable<Customer>.RowActionItem> rowActions = new()
    {
        new() { Key = "edit",   Label = "Edit" },
        new() { Key = "delete", Label = "Delete", Destructive = true },
    };
}

Menu table with selection

<DataTable TItem="Customer"
           Items="@customers"
           Columns="@columns"
           Type="Menu"
           ShowCheckbox="true"
           @bind-SelectedItems="selected"
           RowMenuItems="@rowMenuItems"
           OnRowMenuAction="@HandleRowMenu"
           PageSize="10" />

@code {
    private List<Customer> selected = new();

    private List<DataTable<Customer>.DropdownItem> rowMenuItems = new()
    {
        new() { Key = "view",   Label = "View Details" },
        new() { Key = "edit",   Label = "Edit" },
        new() { Key = "delete", Label = "Delete" },
    };
}

Custom cell template

<DataTable TItem="Customer" Items="@customers" Columns="@columns">
    <CellTemplate Context="cell">
        @switch (cell.ColumnKey)
        {
            case "company":
                <div class="avatar-cell">
                    <Avatar Size="xs" Initials="@cell.Item.Name[0].ToString()" />
                    <div class="avatar-cell-info">
                        <span class="avatar-cell-name">@cell.Item.Name</span>
                        <span class="avatar-cell-email">@cell.Item.Domain</span>
                    </div>
                </div>
                break;
            case "status":
                <Badge Color="success" Text="@cell.Item.Status" />
                break;
            default:
                @cell.DefaultValue
                break;
        }
    </CellTemplate>
</DataTable>