Basic DataTable

Repository List

Recently updated repositories

Repository
Type
Updated
DependabotCode scanning
codeql-dca-worker
Internal
2025-05-22
Alerts
Enabled
aegir
Public
2025-05-21
None
Enabled
strapi
Public
2025-05-18
Alerts
Disabled
<PrimerDataTable TItem="Repository"
                    Title="Repository List"
                    Subtitle="Recently updated repositories"
                    Items="Repositories"
                    Columns="RepositoryColumns"
                    Density="DataTableDensity.Normal" />

Loading Skeleton

Repository List

Loading...

Repository
Type
Updated
DependabotCode scanning
<PrimerDataTable TItem="Repository"
                    Title="Repository List"
                    Subtitle="Loading..."
                    Columns="RepositoryColumns"
                    IsLoading="true"
                    SkeletonRowCount="4" />

DataTable with Pagination

Pagination Example

Paginated list sample

NameNumber
Item 1
1
Item 2
2
Item 3
3
Item 4
4
Item 5
5
Item 6
6
Item 7
7
Item 8
8
Item 9
9
Item 10
10
<PrimerDataTable TItem="PaginationItem"
                Title="Pagination Example"
                Subtitle="Paginated list sample"
                Items="CurrentPageItems"
                Columns="PaginationColumns">
<PrimerDataTablePagination TotalCount="@PaginationItems.Count"
                            PageSize="@PageSize"
                            CurrentPage="@CurrentPage"
                            PreviousText="Previous"
                            NextText="Next"
                            PaginationTextFormat="{0}–{1} of {2}"
                            OnPageChanged="HandlePageChange" />

DataTable Options

Available options for DataTable component

NameDescriptionDefault ValueCSS Class
Title
Table title text
-
-
Subtitle
Table subtitle text
-
-
Density
Cell padding (Normal, Compact)
Normal
-
IsLoading
Show loading skeleton instead of data
false
-
SkeletonRowCount
Skeleton loading row count
5
-
Pagination
Optional pagination slot
-
-
Sortable
Allow column sorting
false
-
public class Repository
{
    public string Name { get; set; } = string.Empty;
    public string Type { get; set; } = string.Empty;
    public DateTime Updated { get; set; }
    public string Dependabot { get; set; } = string.Empty;
    public string CodeScanning { get; set; } = string.Empty;
}

private List<Repository> Repositories = new()
{
    new() { Name = "codeql-dca-worker", Type = "Internal", Updated = DateTime.Now.AddDays(-1), Dependabot = "Alerts", CodeScanning = "Enabled" },
    new() { Name = "aegir", Type = "Public", Updated = DateTime.Now.AddDays(-2), Dependabot = "None", CodeScanning = "Enabled" },
    new() { Name = "strapi", Type = "Public", Updated = DateTime.Now.AddDays(-5), Dependabot = "Alerts", CodeScanning = "Disabled" }
};

private List<PrimerDataTableColumn<Repository>> RepositoryColumns = new()
{
    new("Name", "Repository") { HeaderAlign = ColumnAlign.Center, CellAlign = ColumnAlign.Start, Sortable = true },
    new("Type", "Type") { HeaderAlign = ColumnAlign.Center, CellAlign = ColumnAlign.Start },
    new("Updated", "Updated") { HeaderAlign = ColumnAlign.Center, CellAlign = ColumnAlign.Start, Format = r => r.Updated.ToString("yyyy-MM-dd"), Sortable = true },
    new("Dependabot", "Dependabot") { HeaderAlign = ColumnAlign.Center, CellAlign = ColumnAlign.Center },
    new("CodeScanning", "Code scanning")
};

public class PaginationItem
{
    public string Name { get; set; } = string.Empty;
    public int Index { get; set; }
}

private List<PaginationItem> PaginationItems = Enumerable.Range(1, 200).Select(i => new PaginationItem
    {
        Name = $"Item {i}",
        Index = i
    }).ToList();

private int PageSize = 10;
private int CurrentPage = 1;

private IEnumerable<PaginationItem> CurrentPageItems => PaginationItems
    .Skip((CurrentPage - 1) * PageSize)
    .Take(PageSize);

private Task HandlePageChange(int page)
{
    CurrentPage = page;
    return InvokeAsync(StateHasChanged);
}

private List<PrimerDataTableColumn<PaginationItem>> PaginationColumns = new()
{
    new("Name", "Name") { CellAlign = ColumnAlign.Start },
    new("Index", "Number") { CellAlign = ColumnAlign.End }
};