Alschy.Blazor.Sieve

General

This project is a client implementation for Microsoft Blazor Apps for the Sieve Project. Its provide a Taghelper for a Grid which can dynamically create a HTML Table who support column filtering, column sorts and pagination. Default UI is styled for Bootstrap in the version 4.3, in additon the open ionic icons used for the sort arrows. The classes can be overriden by HTML parameter to set a custom styling. Some more came if the code is added ;)

Installation

The Package is aviable on NuGet. The current version is
For run in a Package-Manager consol run this command

PM>Install-Package Alschy.Blazor.Sieve 

The HTML

To use the table is only a single tag requiered:

<BlazorGrid></BlazorGrid>

To work are any parameters required this are in the follow table with a * signed

Name	Type	Default	Comment
TableItem*	Type		The type of the elements in the table
QueryPath*	string		A path to an route who accept the SieveModel as query paramters
ColumnDefinitions*	IEnumerable<ColumnDefinition>		A collection of ColumnDefinitions which is needed to initialize the table with there content
TableFrameClass	string	table-responsive	The class for div element around the table
TableClass	string	table table-hover	The class for the table element.
ColumnFilterInputClass	string	form-control	The class for the input for the column filters
SortAscSpanClass	string	oi oi-arrow-top	The icon who is display if a column ascending sorted
SortDescSpanClass	string	oi oi-arrow-bottom	The icon who is display if a column descending sorted
FilterVisable	bool	false	say if the column filter inputs are visable. Value can changed on program run
PageSize	int?	null	Set the pagesize they will load on the next reload. If it null pagination is diabled. On dev! Value can changed on program run
CurrentPage	int?	null	The current page if pageination enabled. If value is null pagination is diasbled. On dev! Value can changed on programm run

A basic version of the Tag is follow:

<BlazorGrid TableItem="MyModel" QueryPath="https://localhost/api/myApi" ColumnDefinitions="@builder.Build() result"></BlazorGrid>

The code

on code side will the grid with there columns configured. Filter and sorts they configured on client side for filter must be too configured on serverside sieve to works as excpected. At first must be created a new new BlazorGridBuilder like this:

var builder = new BlazorGridBuilder<TModel>();

Then can you configure the Columns. The order of configuring the columns is they how it display. The ForColumn Method expect a lambda where you choice your property. Its return a new object of ColumnBuilder in there you configure the options for this.

builder.ForColumn(model => model.MyFirstProperty)
          .SetCaption("My Column Name")
          .CanSort()
          .CanFilter()
          .SetConverter(input => DateTime.Parse(input).ToShortDateString())
          ;

In the converter method you will get as input parameter the .ToString() value of the item. In case of a DateTime type of MyFirstProperty you can parse and convert this to how you need. If the .SetConverter(Func<string,string> convert) not called it will display the .ToString() value as default in the table cell. If the caption isn't set is equals the name of the property.

Feel free to contribute, using (too in commercial applications) and fork. Its MIT Licensed