This is a reusable grid component for Blazor. It also support client side pagination.
The BlazorGrid component can be used in a Blazor application only. To create a Blazor application follow the steps mentioned at https://blazor.net/docs/get-started.html
The Nuget package page can be found at https://www.nuget.org/packages/BlazorGrid/
To install BlazorGrid
using NPM run the following command
Install-Package BlazorGrid
To install BlazorGrid
using .NET CLI run the following command
dotnet add package BlazorGrid
After you have installed the package add the following line in the _Imports.razor
file
@using BlazorGridComponent
The <BlazorGrid>
component accepts following parameters
Refer to the sample code below:
<BlazorGrid Items="@forecasts" PageSize="4">
<GridHeader>
<th>Date</th>
<th>TemperatureC</th>
<th>TemperatureF</th>
<th>Summary</th>
</GridHeader>
<GridRow>
<td>@context.Date.ToShortDateString()</td>
<td>@context.TemperatureC</td>
<td>@context.TemperatureF</td>
<td>@context.Summary</td>
</GridRow>
</BlazorGrid>
@functions {
WeatherForecast[] forecasts;
protected override async Task OnInitAsync()
{
forecasts = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");
}
class WeatherForecast
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public int TemperatureF { get; set; }
public string Summary { get; set; }
}
}
Feel free to use this component and provide your valuable feedback. If you encounter any bugs open an issue and discuss.
To learn how the BlazorGrid is created refer to my article https://ankitsharmablogs.com/blazorgrid-reusable-grid-component-for-blazor/
1.1.0
- Updated license
1.0.0
- Initial release