Blazor/Documentation/docusaurus/docs/view-data/blazorise.md

---
sidebar_position: 6
title: Blazorise DataGrid
---

## Install Blazorise DataGrid

Select your project, then right click and choose `Manage NuGet Packages...`:

![Install Blazorise DataGrid](/img/affichage-donnees/blazorise-01.png)

Select the `Browse` tab and search for `blazorise datagrid`:

![Install Blazorise DataGrid](/img/affichage-donnees/blazorise-02.png)

Select the package then right click on `Install`:

![Install Blazorise DataGrid](/img/affichage-donnees/blazorise-03.png)

:::tip
It's normal that the version you install is different, Blazorise nugets evolve, always use the latest version.
:::

Accept changes by clicking `OK`:

![Install Blazorise DataGrid](/img/affichage-donnees/blazorise-04.png)

Blazorise Datagrid is now installed on your project.

Do the same for the `Blazorise.Bootstrap` & `Blazorise.Icons.FontAwesome` package.

It is also possible to install packages directly with the `Package Manager Console` window (Click in the `View => Other Windows => Package Manager Console` menu to display it).

To install, just use the `Install-Package` command, example:

```shell
Install-Package Blazorise.Bootstrap
Install-Package Blazorise.Icons.FontAwesome
```

## Register Blasorize in the app

Open the `Program.cs` file and add the highlighted changes:

```csharp title="Program.cs"
...

builder.Services.AddHttpClient();

// highlight-start
builder.Services
   .AddBlazorise()
   .AddBootstrapProviders()
   .AddFontAwesomeIcons();
// highlight-end

var app = builder.Build();

...
```

## Add Blazorise Sources

Open the `Pages/_Layout.cshtml` file and add the highlighted changes:

```cshtml title="Pages/_Layout.cshtml"
...

	<script src="_framework/blazor.server.js"></script>

// highlight-start
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

	<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
	<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
// highlight-end

</body>
</html>
```

## Import Blazorise DataGrid

In order for Blazor to recognize the new component, you must add in the global import file `_Imports.razor` the following import at the end of the file:

```cshtml title="_Imports.razor"
@using Blazorise.DataGrid
```

## Declare the grid

Open the `Pages/List.razor` file and edit the following file:

```cshtml title="Pages/List.razor"
@page "/list"
@using Minecraft.Crafting.Models

<h3>List</h3>

<DataGrid TItem="Item"
          Data="@items"
          PageSize="int.MaxValue"
          Responsive>
    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.StackSize)" Caption="Stack size" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.MaxDurability)" Caption="Maximum durability" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.EnchantCategories)" Caption="Enchant categories">
        <DisplayTemplate>
            @(string.Join(", ", ((Item)context).EnchantCategories))
        </DisplayTemplate>
    </DataGridColumn>
    <DataGridColumn TItem="Item" Field="@nameof(Item.RepairWith)" Caption="Repair with">
        <DisplayTemplate>
            @(string.Join(", ", ((Item)context).RepairWith))
        </DisplayTemplate>
    </DataGridColumn>
    <DataGridColumn TItem="Item" Field="@nameof(Item.CreatedDate)" Caption="Created date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
</DataGrid>
```

Your page now displays a dynamic grid with all of your data.

## Blazorise Documentation

You will find at this address the documentation of [Blazorise DataGrid](https://blazorise.com/docs/extensions/datagrid/getting-started).

## Concept: NuGet

It is essential for any modern development platform to provide a mechanism for developers to create, share and exploit the code that is useful to them. Often, this code is grouped into "packages" containing the compiled code (in the form of DLLs) as well as all the content necessary for the projects that use them.

In the case of .NET (including .NET Core), Microsoft's supported code sharing mechanism is NuGet. It defines how .NET packages are created, hosted, and used, and provides tools for each of these roles.

Simply put, a NuGet package is a ZIP file with the .nupkg extension, which contains compiled code (DLLs), other files related to that code, and a descriptive manifest that includes information like the version number of the package. Developers who have code to share create packages and publish them to a public or private host. Consumers retrieve these packages from the corresponding hosts, add them to their projects, and then call their functionality in their project code. NuGet then handles all the intermediate details itself.

Since NuGet supports both private hosts and the public nuget.org host, it is possible to use NuGet packages to share code that is exclusive to an organization or workgroup. They are also a convenient way to embed your own code for use only in your own projects. In short, a NuGet package is a shareable unit of code, which does not require or imply any particular mode of sharing.

### Flow of packages between creators, hosts and consumers

In its role as a public host, NuGet itself manages the central repository of over 100,000 unique packages at [nuget.org](https://www.nuget.org/).
These packages are used by millions of .NET/.NET Core developers every day.
NuGet also lets you host packages privately in the cloud (such as on Azure DevOps), on a private network, or even just on your local file system.
These packages are thus reserved for developers who have access to the host, which makes it possible to make them available to a specific group of consumers.

Whatever its nature, a host serves as a connection point between creators and consumers of packages.
Creators produce convenient NuGet packages and publish them to a host.
Consumers search for convenient and compatible packages on accessible hosts, download them, and include these packages in their projects.
Once installed in a project, package APIs are available to the rest of the code in the project.

![Flow of packages](/img/affichage-donnees/nuget-roles.png)

### Package targeting compatibility

A "compatible" package is a package that contains assemblies created for at least one target version of .NET Framework/Core that is compatible with that of the project using the package.
Developers can either build version-specific packages, like with UWP controls, or support a wider range of target versions.
To maximize package compatibility, they target .NET Standard, which all .NET and .NET Core projects can leverage.
This is the most efficient way for both makers and consumers because a single package (which typically contains a single assembly) works for all projects.

Package developers who need APIs outside of .NET Standard, meanwhile, create a separate assembly for each of the target .NET Framework versions they want to support, and wrap them all in the same package ( “multiple targeting”).
When a consumer installs such a package, NuGet extracts only the assemblies needed by the project.
This reduces the package footprint in the final application and/or in the assemblies produced by this project.
A multi-targeted package is, of course, more difficult for its creator to manage.

### Dependency management

The ease of building on the work of others is one of the most powerful aspects of a package management system.
As a result, most of the work NuGet does is maintaining this dependency tree or "graph" for each project.
In other words, you only need to worry about packages that you use directly in a project.
If any of them use other packages themselves (and so on), NuGet takes care of all those lower-level dependencies.

The following illustration shows a project that depends on five packages, which in turn depend on several others.

![Gestion des dépendances](/img/affichage-donnees/dependency-graph.png)