I cannot make the BlazorBootstrap Grid work!

[rfalanga]

I've been following along to get a simple display of 25 records of bogus data. I've been following the sample given here, but it shows nothing. Here's my Blazor code:

@page "/"
@using BlazorBootstrap
@using LearnBlazorBootstrap.Models

<PageTitle>Home</PageTitle>

<h1>Before the BlazorBootstrap Grid</h1>

<Grid TItem="Person"
      AllowFiltering="true"
      AllowPaging="true"
      AllowSorting="true"
      Class="table table-hover table-bordered table-striped"
      PageSize="5"
      Responsive="true"
      Data="@People"
      RowKeySelector="@(person => person.Id)"
      SelectionMode="GridSelectionMode.Multiple">

    <GridColumns>
        <GridColumn TItem="Person" PropertyName="Id" HeaderText="Id" Sortable="true" Filterable="true">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Person" PropertyName="FirstName" HeaderText="First Name" Sortable="true" Filterable="true">
            @context.FirstName
        </GridColumn>
        <GridColumn TItem="Person" PropertyName="LastName" HeaderText="Last Name" Sortable="true" Filterable="true">
            @context.LastName
        </GridColumn>
        <GridColumn TItem="Person" PropertyName="Age" HeaderText="Age" Sortable="true" Filterable="true">
            @context.Age
        </GridColumn>
    </GridColumns>
</Grid>

<h3>After the BlazorBootstrap Grid</h3>

The only thing that appears on the Home page is:

Before the BlazorBootstrap Grid

and

After the BlazorBootstrap Grid

That's it. Nothing more.

And here's a snippet of the C# code:

using LearnBlazorBootstrap.Models;

namespace LearnBlazorBootstrap.Components.Pages;

public partial class Home
{
    public IEnumerable<Person> People { get; set; } = default!;

    protected override void OnInitialized()
    {
        // Sample data for demonstration purposes
        People = GetPeople();
    }

    private static List<Person> GetPeople()
    {
        return
        [
            new Person { Id = 1, FirstName = "John", LastName = "Doe", Age = 30 },
            new Person { Id = 2, FirstName = "Jane", LastName = "Smith", Age = 25 },
            new Person { Id = 3, FirstName = "Bob", LastName = "Johnson", Age = 40 },

You'll notice in the Blazor code that I have Sortable="true" Filterable="true" in each of the GridColumns. That's because, although I tried putting in the SortKeySelector as was shown on the Grid Overview page, that failed miserably. Every time I tried, it replaced item => item.Id with something entirely unrelated. I'm sure I'm missing a using, but because it is not in the Grid Overview page, I have no idea what I'm missing, and I cannot read minds.

So, I need help. I'm not finding the documentation useful, as it doesn't specify things like what options are available for SelectionMode. When I clicked on the Selection link it took me to a section of the code, but that doesn't specify all the options available for SelectionMode, and once again I cannot read minds.

[vieledinge]

Change Data="@People" To Data="People".

Or better:

public IEnumerable<Person> People { get; set; } = default!;
People = GetPeople();

to

private List<Person>? _people;
_people = GetPeople();

and

Data="_people"