The week calendar from the last lesson shows one week. But the office also wants a list of all appointments: sorted by start, re-sorted by title when someone is looking for a particular customer, and in pages, because there will soon be a few hundred. The contact list from lesson 2.5.4 could do that, with a link for every sort order and every page. For a list that only the office uses and that people often re-sort, though, there is a ready-made tool from Microsoft: QuickGrid.
In this lesson the internal appointment list becomes a QuickGrid. It runs as an island like the calendar, fetches its data from the database page by page and gets a small pager of its own.
Getting QuickGrid into the project
QuickGrid is a component from a package of its own. It belongs to ASP.NET Core and ships with the same version number:
dotnet package add Microsoft.AspNetCore.Components.QuickGrid --project src/Kladde.Web/Kladde.Web.csproj
Afterward, Kladde.Web.csproj contains a line like <PackageReference Include="Microsoft.AspNetCore.Components.QuickGrid" Version="10.0.14" />;
use the version that matches your other ASP.NET Core packages. So that the components are known in every .razor file, add a line to
Components/_Imports.razor:
@using Microsoft.AspNetCore.Components.QuickGrid
QuickGrid brings isolated stylesheets of its own. They reach the page through Kladde.Web.styles.css, which you have linked in App.razor
since lesson 2.5.2: That file includes the stylesheets of all packages. There is nothing more to do.