CleanCodeJN.GenericApis.DataGrid 1.2.0

CleanCodeJN.GenericApis.DataGrid

A generic, server-side MudBlazor table component for CleanCodeJN.GenericApis.

Drop <CCJNDataGrid> onto any Blazor page and point it at your GraphQL endpoint — columns, types, paging, sorting and search are all handled automatically.

Requirements

• The backend must use CleanCodeJN.GenericApis with HotChocolate's auto-wiring (UseProjection, UseFiltering, UseSorting)
• MudBlazor must be configured in the host app (wwwroot/index.html / App.razor)

Installation

dotnet add package CleanCodeJN.GenericApis.DataGrid

Setup

Register the services in Program.cs:

builder.Services.AddCleanCodeJNDataGrid();

This registers MudServices, the named HttpClient and GraphQLDataGridService in one call.

Add the MudBlazor layout components to your App.razor or MainLayout.razor if not already present:

<MudThemeProvider />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

Usage

@using CleanCodeJN.GenericApis.DataGrid.Components

<CCJNDataGrid TDto="CustomerGetDto"
              GraphQLEndpoint="https://your-api/graphql"
              EntityName="customer"
              Title="Customers" />

EntityName is the lowercase GraphQL query field name — matches typeof(TEntity).Name.ToLowerInvariant() as generated by AutoQueryTypeExtensions.

Parameters

Column auto-detection

Columns are discovered automatically from the DTO via reflection. Scalar types are included; complex objects and collections are skipped.

Supported types: string, bool, char, byte, short, int, long, float, double, decimal, DateTime, DateTimeOffset, DateOnly, TimeOnly, TimeSpan, Guid, and all enum types (including nullable variants).

Property names are converted to headers by inserting spaces before each capital letter (FirstName → First Name). Override any header via ColumnHeaders.

Search

The search field queries all scalar columns simultaneously via a single GraphQL where: { or: [...] } clause:

• String columns — contains (case-insensitive, server-side)
• Numeric / Guid / bool columns — eq (only applied when the search term is parseable as that type)

Search fires 500 ms after the last keystroke (debounce). The clear button resets immediately.

Example with all options

<CCJNDataGrid TDto="InvoiceGetDto"
              GraphQLEndpoint="@Endpoint"
              EntityName="invoice"
              Title="Invoices"
              Searchable="true"
              Dense="true"
              Striped="false"
              Elevation="4"
              BearerToken="@_token"
              ExcludedProperties="@(new HashSet<string> { "Customer", "InternalNotes" })"
              PageSizeOptions="@(new[] { 5, 10, 25 })"
              ColumnHeaders="@(new Dictionary<string, string>
              {
                  ["Id"]         = "Invoice ID",
                  ["CustomerId"] = "Customer",
                  ["Amount"]     = "Amount (€)",
              })" />

Programmatic reload

Expose a reference to the component and call ReloadTable() from code:

<CCJNDataGrid @ref="_grid" TDto="CustomerGetDto" ... />

@code {
    private CCJNDataGrid<CustomerGetDto> _grid = default!;

    private async Task Refresh() => await _grid.ReloadTable();
}

License

MIT