Blazor and .NET 8 QuickGrid Implementation with CSV Data Export

You will notice the hamburger icon on the left side of the column name. It appears for every column. We introduce a column filter along with the HTML we add. On clicking, it expands, as you can see on the screen. Now we can easily filter data and reset the filter as per our needs. You can add as many filters as you want to.

Now we will add pagination and enable virtualization. This will help us understand how to work with a large number of records. For this demo, I will allow one item per page.

Our Code looks like this.

@using Microsoft.AspNetCore.Components.QuickGrid

<QuickGrid Virtualize="true" Items="@GetFoodsQueryable()" @ref="grid" Pagination="@pagination">
    <PropertyColumn Property="@(p => p.FoodId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.ExpiryDate)" Format="dd-MMM-yyyy" Sortable="true" />
    <PropertyColumn Property="@(p => p.Price)" Sortable="true" />
    <PropertyColumn Property="@(p => p.IsVegetarian)" Sortable="true">
        <ColumnOptions>
            <label>
                <input type="checkbox" @bind="ShowVeg" /> Show Veg
                <hr />
                <button onclick="@ResetGridAsync">Reset</button>
            </label>
        </ColumnOptions>
    </PropertyColumn>
</QuickGrid>

<Paginator State="@pagination" />

@code {
    private bool? ShowVeg = null;
    QuickGrid<Food>? grid;
    PaginationState pagination = new PaginationState { ItemsPerPage = 1 };
    record Food(int FoodId, string Name, DateOnly ExpiryDate, decimal Price, bool IsVegetarian);

    async Task ResetGridAsync()
    {
        ShowVeg = null;
        await grid.RefreshDataAsync();
    }

    IQueryable<Food> GetFoodsQueryable()
    {
        if (ShowVeg != null)
        {
            return foods.Where(f => f.IsVegetarian == ShowVeg).AsQueryable();
        }
        else
        {
            return foods.AsQueryable();
        }
    }

    IEnumerable<Food> foods = new Food[]
    {
        new Food(1001, "Apple", new DateOnly(2023, 1, 31), 150m, true),
        new Food(1002, "Pasta", new DateOnly(2023, 2, 15), 300m, true),
        new Food(1003, "Chicken", new DateOnly(2023, 1, 20), 850m, false),
        new Food(1004, "Yogurt", new DateOnly(2023, 3, 5), 20m, true),
        new Food(1005, "Salad", new DateOnly(2023, 1, 10), 45m, true),
        new Food(1006, "Chocolate", new DateOnly(2023, 4, 1), 50m, false),
    };
}

After updating the code, our UI looks like this.

Bonus

We will now add export functionality using the CSV helper library. This will help us to export data in CSV format.

For this, we will add the below package.

 <PackageReference Include="CsvHelper" Version="30.0.1" />

Now, we are simply going to update the code to add an export button and use all the supporting code used by Blazor to ensure the file is available to download on the client side. Our final code looks like the one below.

@using CsvHelper
@using Microsoft.AspNetCore.Components.QuickGrid
@using System.Globalization
@using System.Text
@inject IJSRuntime JS

<button onclick="@ExportData">Export</button>

<QuickGrid Virtualize="true" Items="@GetFoodsQueryable()" @ref="grid" Pagination="@pagination">
    <PropertyColumn Property="@(p => p.FoodId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.ExpiryDate)" Format="dd-MMM-yyyy" Sortable="true" />
    <PropertyColumn Property="@(p => p.Price)" Sortable="true" />
    <PropertyColumn Property="@(p => p.IsVegetarian)" Sortable="true">
        <ColumnOptions>
            <label>
                <input type="checkbox" @bind="ShowVeg" /> Show Veg
                <hr />
                <button onclick="@ResetGridAsync">Reset</button>
            </label>
        </ColumnOptions>
    </PropertyColumn>
</QuickGrid>

<Paginator State="@pagination" />

<script>
    window.downloadFileFromStream = async (fileName, contentStreamReference) => {
        const arrayBuffer = await contentStreamReference.arrayBuffer();
        const blob = new Blob([arrayBuffer]);
        const url = URL.createObjectURL(blob);
        const anchorElement = document.createElement('a');
        anchorElement.href = url;
        anchorElement.download = fileName ?? '';
        anchorElement.click();
        anchorElement.remove();
        URL.revokeObjectURL(url);
    }
</script>

@code {
    private bool? ShowVeg = null;
    QuickGrid<Food>? grid;
    PaginationState pagination = new PaginationState { ItemsPerPage = 1 };
    record Food(int FoodId, string Name, DateOnly ExpiryDate, decimal Price, bool IsVegetarian);

    async Task ResetGridAsync()
    {
        ShowVeg = null;
        await grid.RefreshDataAsync();
    }

    IQueryable<Food> GetFoodsQueryable()
    {
        if (ShowVeg != null)
        {
            return foods.Where(f => f.IsVegetarian == ShowVeg).AsQueryable();
        }
        else
        {
            return foods.AsQueryable();
        }
    }

    string GetCsvString()
    {
        string dataCsv;
        using (var writer = new StringWriter())
        using (var csv = new CsvWriter(writer, CultureInfo.InvariantCulture, true))
        {
            var records = GetFoodsQueryable().ToList();
            csv.WriteRecords(records);
            dataCsv = writer.ToString();
        }
        return dataCsv;
    }

    async Task ExportData()
    {
        var csvStr = GetCsvString();
        byte[] byteArray = Encoding.UTF8.GetBytes(csvStr);
        MemoryStream stream = new MemoryStream(byteArray);
        using var streamRef = new DotNetStreamReference(stream: stream);
        await JS.InvokeVoidAsync("downloadFileFromStream", "file.csv", streamRef);
    }

    IEnumerable<Food> foods = new Food[]
    {
        new Food(1001, "Apple", new DateOnly(2023, 1, 31), 150m, true),
        new Food(1002, "Pasta", new DateOnly(2023, 2, 15), 300m, true),
        new Food(1003, "Chicken", new DateOnly(2023, 1, 20), 850m, false),
        new Food(1004, "Yogurt", new DateOnly(2023, 3, 5), 20m, true),
        new Food(1005, "Salad", new DateOnly(2023, 1, 10), 45m, true),
        new Food(1006, "Chocolate", new DateOnly(2023, 4, 1), 50m, false),
    };
}

UI looks like below.

We have used many features of QuickGrid in this article.

I hope you enjoyed reading till the end and hopefully will try the above code. I have also uploaded the source so you can refer to it to explore further. Please mention in comments how you feel about this Grid.