BlazorDataGrid 1.1.1

Une datagrid filtrée, ordonnée et paginée

There is a newer version of this package available.
See the version list below for details.
Install-Package BlazorDataGrid -Version 1.1.1
dotnet add package BlazorDataGrid --version 1.1.1
<PackageReference Include="BlazorDataGrid" Version="1.1.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorDataGrid --version 1.1.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: BlazorDataGrid, 1.1.1"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install BlazorDataGrid as a Cake Addin
#addin nuget:?package=BlazorDataGrid&version=1.1.1

// Install BlazorDataGrid as a Cake Tool
#tool nuget:?package=BlazorDataGrid&version=1.1.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

il faut ajouter dans le fichier _Imports.razor

@using BlazorDataGrid

Et dans le fichier Startup.cs dans la méthode public void ConfigureServices(IServiceCollection services)

services.AddScoped<AppState, AppState>();

Exemple d'utilisation

Le composant <BlazorDataGrid> accepte les paramètres suivant :

  • Items : La liste qui remplie la datagrid
  • PageSize : Le nombre de résultat par page. Le paramètre est obligatoire (0 signifie tout sur une page)
  •  **ShowTotalResult** : Un booléen pour afficher ou non le nombre de résultats
    
  • BlazorDataGridColumn : Un composant permettant d'afficher les header
  • GridRow : Les lignes de la datagrid

Le composant <BlazorDataGridColumn> accepte les paramètres suivant :

  • DataGridColumn : Le composant détaillant chaque header

Le composant <DataGridColumn> accepte les paramètres suivant :

  • Items : Il faut passer le même paramètre que pour le composant <BlazorDataGrid>
  • ColumnName : Le nom réel de la colonne sur laquelle se base le filtre et le tri
  • DisplayColumnName : (non obligatoire) Le nom qui sera affiché dans le header. Il est possible de passer le contenu du header entre les balises à la place
  • Filter : true ou false pour afficher ou non le champ filtre sur la colonne

Exemple de code :

<BlazorDataGrid Items="@forecasts" PageSize="5" ShowTotalResult="true">
    <BlazorDataGridColumn>
        <DataGridColumn Items="@forecasts" ColumnName="Date" Filter="true"><strong>Date</strong></DataGridColumn>
        <DataGridColumn Items="@forecasts" ColumnName="TemperatureC" DisplayColumnName="TemperatureC" Filter="true"></DataGridColumn>
        <DataGridColumn Items="@forecasts" ColumnName="TemperatureF" DisplayColumnName="TemperatureF"></DataGridColumn>
        <DataGridColumn Items="@forecasts" ColumnName="Summary" DisplayColumnName="Summary"></DataGridColumn>
    </BlazorDataGridColumn>
    <GridRow>
        <td>@context.Date.ToShortDateString()</td>
        <td>@context.TemperatureC</td>
        <td>@context.TemperatureF</td>
        <td>@context.Summary</td>
    </GridRow>
</BlazorDataGrid>

Aperçu

sortie 1

sortie 2

il faut ajouter dans le fichier _Imports.razor

@using BlazorDataGrid

Et dans le fichier Startup.cs dans la méthode public void ConfigureServices(IServiceCollection services)

services.AddScoped<AppState, AppState>();

Exemple d'utilisation

Le composant <BlazorDataGrid> accepte les paramètres suivant :

  • Items : La liste qui remplie la datagrid
  • PageSize : Le nombre de résultat par page. Le paramètre est obligatoire (0 signifie tout sur une page)
  •  **ShowTotalResult** : Un booléen pour afficher ou non le nombre de résultats
    
  • BlazorDataGridColumn : Un composant permettant d'afficher les header
  • GridRow : Les lignes de la datagrid

Le composant <BlazorDataGridColumn> accepte les paramètres suivant :

  • DataGridColumn : Le composant détaillant chaque header

Le composant <DataGridColumn> accepte les paramètres suivant :

  • Items : Il faut passer le même paramètre que pour le composant <BlazorDataGrid>
  • ColumnName : Le nom réel de la colonne sur laquelle se base le filtre et le tri
  • DisplayColumnName : (non obligatoire) Le nom qui sera affiché dans le header. Il est possible de passer le contenu du header entre les balises à la place
  • Filter : true ou false pour afficher ou non le champ filtre sur la colonne

Exemple de code :

<BlazorDataGrid Items="@forecasts" PageSize="5" ShowTotalResult="true">
    <BlazorDataGridColumn>
        <DataGridColumn Items="@forecasts" ColumnName="Date" Filter="true"><strong>Date</strong></DataGridColumn>
        <DataGridColumn Items="@forecasts" ColumnName="TemperatureC" DisplayColumnName="TemperatureC" Filter="true"></DataGridColumn>
        <DataGridColumn Items="@forecasts" ColumnName="TemperatureF" DisplayColumnName="TemperatureF"></DataGridColumn>
        <DataGridColumn Items="@forecasts" ColumnName="Summary" DisplayColumnName="Summary"></DataGridColumn>
    </BlazorDataGridColumn>
    <GridRow>
        <td>@context.Date.ToShortDateString()</td>
        <td>@context.TemperatureC</td>
        <td>@context.TemperatureF</td>
        <td>@context.Summary</td>
    </GridRow>
</BlazorDataGrid>

Aperçu

sortie 1

sortie 2

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
4.1.1 69 2/12/2021
4.1.1-beta.2 31 2/12/2021
4.1.1-beta.1 37 2/12/2021
4.1.0 52 2/12/2021
4.0.0 39 2/10/2021
3.0.0 236 10/16/2020
2.0.2 296 6/11/2020
2.0.1 132 5/14/2020
2.0.0 129 5/4/2020
1.11.0 2,048 12/16/2019
1.10.2 192 10/22/2019
1.10.1 143 10/21/2019
1.10.0 146 10/17/2019
1.9.0 154 10/15/2019
1.8.0 187 9/23/2019
1.7.0 158 9/6/2019
1.6.0 154 9/3/2019
1.5.0 148 9/2/2019
1.4.0 155 8/26/2019
1.3.0 160 8/22/2019
1.2.0 168 8/13/2019
1.1.1 170 8/5/2019
1.1.0 167 8/5/2019
1.0.0 168 8/3/2019
Show less