BlazorTable

Blasphone

Composant de table de blazor avec tri, pagination et filtrage

Installer

• Ajouter Nuget Blazortable
  • dotnet ajouter un package flazorable
• Ajouter à l'index.html ou _hosts.cshtml
  • <script src="_content/BlazorTable/BlazorTable.min.js"></script>
• Ajouter un appel à programme.cs ou startup.cs
  • Services.AddBlazortable ();

Remarque: Si l'installation BlazorTable dans une application Blazor Wasm hébergée, ces étapes doivent être effectuées dans le projet Client WASM.

Caractéristiques

• Réorganisation de colonnes
• Mode d'édition (commutation du modèle)
• Côté client
  • Pagination
  • Tri
  • Filtration
    • Cordes
    • Nombres
    • Dates
    • Énumération
    • Composant personnalisé

Dépendances

• Bootstrap 4 CSS

Échantillon

Exemple de page

 < Table TableItem = "PersonData" Items = "data" PageSize = "15" >
    < Column TableItem = "PersonData" Title = "Id" Field = "@(x => x.id)" Sortable = "true" Filterable = "true" Width = "10%" / >
    < Column TableItem = "PersonData" Title = "First Name" Field = "@(x => x.first_name)" Sortable = "true" Filterable = "true" Width = "20%" / >
    < Column TableItem = "PersonData" Title = "Last Name" Field = "@(x => x.last_name)" Sortable = "true" Filterable = "true" Width = "20%" / >
    < Column TableItem = "PersonData" Title = "Email" Field = "@(x => x.email)" Sortable = "true" Filterable = "true" Width = "20%" >
        < Template >
            < a href = "mailto:@context.email" > @context . email < / a >
        < / Template >
    < / Column >
    < Column TableItem = "PersonData" Title = "Confirmed" Field = "@(x => x.confirmed)" Sortable = "true" Filterable = "true" Width = "10%" / >
    < Column TableItem = "PersonData" Title = "Price" Field = "@(x => x.price)" Sortable = "true" Filterable = "true" Width = "10%" Format = "C" Align = "Align.Right" / >
    < Column TableItem = "PersonData" Title = "Created Date" Field = "@(x => x.created_date)" Sortable = "true" Width = "10%" >
        < Template >
            @context . created_date . ToShortDateString ( )
        < / Template >
    < / Column >
    < Pager ShowPageNumber = "true" ShowTotalCount = "true" / >
< / Table >