BlazorTable

Блантапируемый

Компонент блазора с сортировкой, пейджингом и фильтрацией

Установить

• Добавить бланетую Nuget
  • Dotnet добавить пакет Blazortable
• Добавить в index.html или _hosts.cshtml
  • <script src="_content/BlazorTable/BlazorTable.min.js"></script>
• Добавить Call в программу.cs или startup.cs
  • Services.addblazortable ();

ПРИМЕЧАНИЕ. При установке BlazorTable в размещенном приложении Blazor WASM эти шаги должны выполняться в клиентском проекте WASM.

Функции

• Переупорядочение столбца
• Редактировать режим (переключение шаблона)
• Клиентская сторона
  • Пейджинг
  • Сортировка
  • Фильтрация
    • Строки
    • Числа
    • Даты
    • Перечисление
    • Пользовательский компонент

Зависимости

• Bootstrap 4 CSS

Образец

Пример страницы

 < 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 >