into a query against the OpenFDA database. Query parameters are translated into the particular URL format supported by the external JSON API. It's only possible to perform sorting and filtering via sorting and filtering that's supported by the external API. The OpenFDA endpoint doesn't support sorting, so none of the columns are marked as sortable. However, it does support skipping records (`skip` parameter) and limiting the return of records (`limit` parameter), so the component can enable virtualization and scroll quickly through tens of thousands of records.
`FoodRecalls.razor`:
```razor
@page "/food-recalls"
@inject HttpClient Http
@inject NavigationManager NavManager
Food Recalls
OpenFDA Food Recalls
Total: @numResults results found
@code {
GridItemsProvider? foodRecallProvider;
int numResults;
protected override async Task OnInitializedAsync()
{
foodRecallProvider = async req =>
{
var url = NavManager.GetUriWithQueryParameters(
"https://api.fda.gov/food/enforcement.json",
new Dictionary
{
{ "skip", req.StartIndex },
{ "limit", req.Count },
});
var response = await Http.GetFromJsonAsync(
url, req.CancellationToken);
return GridItemsProviderResult.From(
items: response!.Results,
totalItemCount: response!.Meta.Results.Total);
};
numResults = (await Http.GetFromJsonAsync(
"https://api.fda.gov/food/enforcement.json"))!.Meta.Results.Total;
}
}
```
For more information on calling web APIs, see .
## `QuickGrid` scaffolder
The `QuickGrid` scaffolder in [Visual Studio](https://visualstudio.microsoft.com/vs/) scaffolds Razor components with `QuickGrid` to display data from a database.
To use the scaffolder, right-click the project in **Solution Explorer** and select **Add** > **New Scaffolded Item**. Open **Installed** > **Common** > **Razor Component**. Select **Razor Components using Entity Framework (CRUD)**.
The scaffolder generates basic Create, Read, Update, and Delete (CRUD) pages based on an Entity Framework Core data model. You can scaffold individual pages or all of the CRUD pages. You select the model class and the `DbContext`, optionally creating a new `DbContext` if needed.
The scaffolded Razor components are added to the project's `Pages` folder in a generated folder named after the model class. The generated `Index` component uses `QuickGrid` to display the data. Customize the generated components as needed and enable interactivity to take advantage of interactive features, such as sorting and filtering.
The components produced by the scaffolder require server-side rendering (SSR), so they aren't supported when running on WebAssembly.