Getting started with QuickGrid for Blazor

I am super excited about QuickGrid! However, it's important to note that QuickGrid is not officially released, it's an experiment and could be unsupported if Microsoft finds that it did not add value.  I truly hope that this is not going to be the case because I could have used this component on previous projects and think it is very valuable.

Being a lightweight data grid component with basic features, means that there is still a spot for more advanced data grid components.  It is compatible with .NET6 or later, built on WebAssembly, is open source (code is available on GitHub) and offers a convenient, simple and flexible datagrid component for common needs. 

It is not part of the Blazor framework out of the box and can easily be added by installing the package. 

I played around with some of the features and ended up with this grid (code):

‍

‍

Here are step by step instructions:

1. Install required package:

2. Ensure that the using statement is added to the global import/component file.

3. Add QuickGrid elements and customise to requirements!  Filtering, Sorting, Pagination and styling is possible.  Let's put this to the test!

‍

‍

QuickGrid components and properties

This website does an excellent job at explaining everything we need to know about in detail.  Below is a summary of the properties available (at the time of writing this blog).

‍

QuickGrid Parameters

• Items: Works with type IQueryable, EF Core DataContexts’ table 
• ItemProvider: Where requirements are not covered by an IQueryable. Supply a callback matching GridItemsProvider<T> and return a GridItemsProviderResult<T>
• @ref: Refresh data programmatically by calling the grids RefreshDataAsync() method.

• Theme: Theme is set to default.  This can be changed and enables us to add CSS classes targeting the theme.
• Pagination: To enable create an instance of PaginationState and pass it to this property.  
• Virtualize: Use either Pagination or Virtualization for big data items.  This is a boolean flag.

‍

Columns

• PropertyColumn: Displays single value specified in Property.
• TemplateColumn: Random Razor fragments to provide information to cells.

‍

Column Parameters

• Title: Title of the column and will be overwritten when HeaderTemplate is used
• Class: Expect a CSS class for styling
• Align: Align content of column left/center/right
• ColumnOptions: Popup when the options button in the header column is clicked. For example clicking on the magnifying glass pops up the input search screen.

• Sortable: Sorting indicator in column header
• IsDefaultSort: Sort the table by default
• PlaceholderTemplate: Only for virtualized grids, and displayed while data is loading.

‍

Property Column Parameters

Property: Value to display in the column.  

Format: Format strings like numbers, dates, enums and other .NET types.  An example of Property column : 

‍

Paginator

This component will render a UI for pagination.  Set the Value to the PaginationState property

‍

I am looking forward to this component growing and assisting us with a lightweight grid view solution.

‍