Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Table Export

By setting `ShowExportButton` to display the export button, the component has built-in export Excel function

The export function provides an export callback method OnExportAsync, which can be used to export data by providing a custom export method. If no data export method is provided, the component will export data according to the injected export service

Precautions

This component relies on BootstrapBlazor.TableExport, which needs to reference its component package when using this component

Nuget Install

Use nuget.org to install BootstrapBlazor.TableExport component

.NET CLI

dotnet add package BootstrapBlazor.TableExport

PackageReference

<PackageReference Include="BootstrapBlazor.TableExport" Version="7.3.0" />

Package Manager

Install-Package BootstrapBlazor.TableExport

inject service：

public void ConfigureServices(IServiceCollection services)
{
    // Add BootstrapBlazor component
    services.AddBootstrapBlazor();

    // Add Table Excel export service
    services.AddBootstrapBlazorTableExcelExport();
}

Table export function

Whether to display the export button by setting the ShowExportButton property, the default is false

Demo

@inject IStringLocalizer<Foo> LocalizerFoo

<div>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowToolbar="true" ShowDefaultButtons="false" ShowExportButton="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private List<Foo>? Items { get; set; }

    private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = Foo.GenerateFoo(LocalizerFoo);
    }

    private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
    {
        IEnumerable<Foo> items = Items;

        // 设置记录总数
        var total = items.Count();

        // 内存分页
        items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();

        return Task.FromResult(new QueryData<Foo>()
        {
            Items = items,
            TotalCount = total
        });
    }
}

Custom export method

You can customize the export method by setting the OnExportAsync callback delegate method. If you don't set it, the built-in export function of the component will be used.

Demo

@inject IStringLocalizer<Foo> LocalizerFoo

<div>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowToolbar="true" ShowDefaultButtons="false" ShowExportButton="true"
           OnExportAsync="OnExportAsync" OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private List<Foo>? Items { get; set; }

    private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };

    [Inject]
    [NotNull]
    private ITableExcelExport? Exporter { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = Foo.GenerateFoo(LocalizerFoo);
    }

    private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
    {
        IEnumerable<Foo> items = Items;

        // 设置记录总数
        var total = items.Count();

        // 内存分页
        items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();

        return Task.FromResult(new QueryData<Foo>()
        {
            Items = items,
            TotalCount = total
        });
    }

    private async Task<bool> OnExportAsync(IEnumerable<Foo> items, QueryPageOptions options)
    {
        // your code ...
        await Exporter.ExportAsync(items, null, "Test.xlsx");

        // 返回 true 时自动弹出提示框
        return true;
    }
}

Custom export dropdown button

Customize the content of the export button dropdown box by setting the ExportButtonDropdownTemplate template

Demo

@inject IStringLocalizer<Foo> LocalizerFoo
@inject ToastService ToastService

<div>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowToolbar="true" ShowDefaultButtons="false" ShowExportButton="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
        <ExportButtonDropdownTemplate Context="ExportContext">
            <div class="dropdown-item" @onclick="ExportContext.ExportAsync">
                <i class="fa-regular fa-file-excel"></i>
                <span>MS-Excel</span>
            </div>
            <div class="dropdown-item" @onclick="@CsvExportAsync">
                <i class="fa-regular fa-file-excel"></i>
                <span>MS-CSV</span>
            </div>
        </ExportButtonDropdownTemplate>
    </Table>
</div>

@code {
    /// <summary>
    /// Foo 类为Demo测试用，如有需要请自行下载源码查阅
    /// Foo class is used for Demo test, please download the source code if necessary
    /// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
    /// </summary>
    [NotNull]
    private List<Foo>? Items { get; set; }

    private static IEnumerable<int> PageItemsSource => new int[] { 4, 10, 20 };
    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = Foo.GenerateFoo(LocalizerFoo);
    }

    private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
    {
        IEnumerable<Foo> items = Items;

        // 设置记录总数
        var total = items.Count();

        // 内存分页
        items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();

        return Task.FromResult(new QueryData<Foo>()
        {
            Items = items,
            TotalCount = total
        });
    }

    private Task CsvExportAsync()
    {
        //your code ...
        
        return ToastService.Success("CSV export", "Export CSV data successfully");
    }
}

B station related video link

[portal]

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Table Export

By setting ShowExportButton to display the export button, the component has built-in export Excel function

Demo

Demo

Demo

Bootstrap Blazor Component library updated to 7.4.4-beta01

By setting `ShowExportButton` to display the export button, the component has built-in export Excel function