MatBlazor MatTable Demo Project

• it's all about the data!

Background

MatBlazor is a great, open source, set of components for Blazor development.

It includes a a data aware table component, MatTable, which can page data from a web API. However, the shape of the API is not documented; along with how various other parameters interact.

Installation

MatTable requires additional support:

Startup.cs

    public void ConfigureServices(IServiceCollection services)
    {
      // ...

      // MatTable needs this to call its data URL
      services.AddScoped<HttpClient>();

      services
        .AddNewtonsoftJson(options =>
        {
          // MatTable assumes camel case when deserialising JSON data
          options.SerializerSettings.ContractResolver = 
            new CamelCasePropertyNamesContractResolver();
        });

      // ...
    }

• HttpClient scope should be setup with the correct permissions/identity since it will probably be calling an API which requires suitable authentication/authorisation
• we must force all JSON to be camel case as this is a hard coded assumption in MatTable

MatTable data related properties

Data API

• ApiUrl String
  • Specifies the API Url form for the table data
• LoadInitialData Boolean
  • Specifies whether to Load the Initial Table Data
• RequestApiOnlyOnce Boolean
  • Specifies whether to Request the API only once.
  • This will load all the data in a single call, so is only suitable for small data sets.

Pageable

Requested data returned directly

• CurrentPage Int32
  • The current page, starting from one.
• PageSize Int32
  • The number of rows per page.

Extended Pageable

Requested data and additional information returned

• PagingDataPropertyName String
• PagingRecordsCountPropertyName String

Searchable

• FilterByColumnName String
  • Specifies which column is used for the filter / search term. If this is populated the Search Textbox will be visible.

Sortable

• SortBy String
  • data column on which API should order returned data
• Descending Boolean
  • whether API should sort returned data in descending order

API Shapes

All data is assumed to be retrieved by an HTTP.Get on a URL specified by the ApiUrl property. The assumed shape of the returned data will depend on several MatTable properties.

API Endpoint

MatTable makes a very strong assumption about how its data URL will look but makes reasonable assumptions about query parameter names.

    [HttpGet]
    public ActionResult GetAll(
      [FromQuery] int Page,
      [FromQuery] int PageSize,
      [FromQuery] string SortBy,
      [FromQuery] bool Descending,
      [FromQuery] string searchTerm)
    {
      // ...
    }

Note that ActionResult will wrap the requested data.

• Page
  • 1-based
  • corresponds to MatTable.CurrentPage
• PageSize
  • the number of rows per page
  • -1 if all rows are requested
• SortBy
  • can be null
  • data column on which to sort returned data
• Descending
  • defaults to false
  • whether to sort returned data in descending order
• searchTerm
  • can be null
  • user entered string in search box
  • API is called every time user changes string in search box

Pageable Data

This is the simplest case as the requested data is returned directly:

    [HttpGet]
    public ActionResult<IEnumerable<Contact>> GetAll(...)
    {
      // ...
    }

Extended Pageable Data

If both MatTable.PagingDataPropertyName and MatTable.PagingRecordsCountPropertyName are set, then the shape of the returned data is a little more complicated:

    public class ContactDataEx
    {
      public IEnumerable<Contact> Contacts { get; set; }
      public int TotalContacts { get; set; }
    }
    
    [HttpGet]
    public ActionResult<ContactDataEx> GetAll(...)
    {
      // ...
    }

• Contacts data property is specified by MatTable.PagingDataPropertyName
• TotalContacts data property is specified by MatTable.PagingRecordsCountPropertyName