https://github.com/AnkitSharma-007/BlazorGrid

A reusable grid component for Blazor with the support of client side pagination.
https://github.com/AnkitSharma-007/BlazorGrid

ankit-sharma asp-net-core blazor blazor-extensions blazorgrid componets csharp webassembly

Last synced: 3 months ago
JSON representation

A reusable grid component for Blazor with the support of client side pagination.

• Host: GitHub
• URL: https://github.com/AnkitSharma-007/BlazorGrid
• Owner: AnkitSharma-007
• License: mit
• Created: 2018-11-29T17:07:12.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-31T12:49:59.000Z (over 5 years ago)
• Last Synced: 2024-06-30T10:12:02.496Z (4 months ago)
• Topics: ankit-sharma, asp-net-core, blazor, blazor-extensions, blazorgrid, componets, csharp, webassembly
• Language: C#
• Homepage:
• Size: 4.88 MB
• Stars: 71
• Watchers: 6
• Forks: 12
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![License](https://img.shields.io/github/license/BlazorExtensions/Storage.svg?longCache=true&style=flat-square)](https://github.com/AnkitSharma-007/BlazorGrid/blob/master/LICENSE)

[![Package Version](https://img.shields.io/badge/nuget-v1.1.0-blue.svg?longCache=true&style=flat-square)](https://www.nuget.org/packages/BlazorGrid/)

# BlazorGrid

This is a reusable grid component for Blazor. It also support client side pagination.

# Prerequisites

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

# Nuget Gallery

The Nuget package page can be found at https://www.nuget.org/packages/BlazorGrid/

# Installation

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

```

# Sample usage

The `````` component accepts following parameters

-	**Items** : The list of items supplied to the BlazorGrid.

-	**PageSize** : Size of each page of BlazorGrid. This is a required field.

-	**GridHeader** : Header for BlazorGrid.

-	**GridRow** : Rows for BlazorGrid.

Refer to the sample code below:

```

	

		Date

		TemperatureC

		TemperatureF

		Summary

	

	

		@context.Date.ToShortDateString()

		@context.TemperatureC

		@context.TemperatureF

		@context.Summary

	

```

```

@functions {

    WeatherForecast[] forecasts;

    protected override async Task OnInitAsync()

    {

        forecasts = await Http.GetJsonAsync("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; }

    }

}

```

# Sample Output

![Alt Text](https://github.com/AnkitSharma-007/BlazorGrid/blob/master/BlazorGridComponent/BlazorGridDemo.PNG)

# Feedback

Feel free to use this component and provide your valuable feedback. If you encounter any bugs open an issue and discuss.

# BlazorGrid blog 

To learn how the BlazorGrid is created refer to my article https://ankitsharmablogs.com/blazorgrid-reusable-grid-component-for-blazor/

# Release notes

**1.1.0**

> - Updated license 

**1.0.0**

> - Initial release