CleanCodeJN.GenericApis.DataGrid 1.3.4

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

Clickable rows

OnRowClick gives you the item, RowClass the cursor:

<CCJNDataGrid TDto="InvoiceGetDto" ...
              RowClass="cursor-pointer"
              OnRowClick="OpenAsync" />

For a plain detail view there is no need to write a dialog at all — ViewFormContent opens one that carries just a close button:

<CCJNDataGrid TDto="InvoiceGetDto" ...
              RowClass="cursor-pointer"
              ViewTitle="Invoice"
              CloseLabel="Close"
              HiddenProperties="@(new HashSet<string> { "Notes" })">
    <ViewFormContent Context="row">
        <MudText Typo="Typo.subtitle2">@row.Number</MudText>
        <MudText Typo="Typo.body2" Style="white-space:pre-wrap">@row.Notes</MudText>
    </ViewFormContent>
</CCJNDataGrid>

The grid carries several templated parameters, so Blazor wants each fragment's item named — Context="row" above. Writing @context without it does not compile.

Notes is listed under HiddenProperties: the dialog needs the value, the table does not need the column. ExcludedProperties would drop it from the query as well and the dialog would stay empty.

The same switches exist on CCJNDataGridDialog itself (ShowSubmit, ShowCancel, CloseLabel) if you open it yourself.

Where rows are editable, a read-only view is usually one dialog too many. EditOnRowClick sends the click straight into the edit dialog and drops the pencil button; the action column disappears entirely once nothing is left in it:

<CCJNDataGrid TDto="InvoiceGetDto" ...
              AllowEdit="true" EditOnRowClick="true"
              RowClass="cursor-pointer"
              SubmitLabel="Speichern" CancelLabel="Abbrechen" />

Explicit columns

Declare CCJNColumn children to control which columns appear, in which order, and how a cell is rendered. As soon as one is declared, auto-detection is off and the declared columns are the table:

<CCJNDataGrid TDto="InvoiceGetDto" ... >
    <Columns>
        <CCJNColumn TDto="InvoiceGetDto" Property="Number" Title="Invoice" />
        <CCJNColumn TDto="InvoiceGetDto" Title="Customer" SortBy="CustomerName"
                    Fields="@(new[] { "CustomerName", "CustomerEmail" })">
            <CellTemplate Context="row">
                <div>@row.CustomerName</div>
                <MudText Typo="Typo.caption">@row.CustomerEmail</MudText>
            </CellTemplate>
        </CCJNColumn>
        <CCJNColumn TDto="InvoiceGetDto" Property="Status">
            <CellTemplate Context="row">
                <MudChip T="string" Size="Size.Small">@row.Status</MudChip>
            </CellTemplate>
        </CCJNColumn>
    </Columns>
</CCJNDataGrid>

The key property is always requested, whether or not it has a column — edit and delete need it. The same goes for the fields of the edit form: it writes all of them back, so a value that was never loaded would be saved as its default and quietly overwrite what was there.

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