Blazor Grid - Data binding

@foreach (var department in departments)
{
    <p>@department.Name Employees:</p>
    <Grid TItem="Employee1"
          Class="table table-hover border-top"
          Data="department.Employees">

        <GridColumns>
            <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
                @context.Id
            </GridColumn>
            <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
                @context.Name
            </GridColumn>
            <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
                @context.Designation
            </GridColumn>
            <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
                @context.DOJ
            </GridColumn>
            <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
                @context.IsActive
            </GridColumn>
        </GridColumns>

    </Grid>
}

@code {
    private List<Department> departments = new List<Department>()
    {
        new Department("Product 1 - Research & Development", new List<Employee1> {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }
        }),
        new Department("Product 2 - Research & Development", new List<Employee1> {
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true }
        })
    };
}

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="AddEmployee"> Add Employee </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="AddEmployee2"> Add Employee 2 </Button>

<Grid @ref="grid"
      TItem="Employee1"
      Class="table table-hover table-bordered table-striped mt-3"
      Data="employees">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    Grid<Employee1> grid = default!;
    private List<Employee1>? employees;

    protected override void OnInitialized()
    {
        employees = new List<Employee1> {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }
        };
    }

    private async Task AddEmployee()
    {
        // for the same employees collection, we are adding an object
        // explicit grid refresh required
        employees!.Add(CreateEmployee());
        await grid.RefreshDataAsync();
    }

    private void AddEmployee2()
    {
        // creates a shallow copy
        var emps = employees!.GetRange(0, employees.Count);
        emps.Add(CreateEmployee());
        // now employees variable has a new reference. So no need to refresh the grid explicitly
        // explicit grid refresh is not required
        employees = emps;
    }

    private Employee1 CreateEmployee()
    {
        var emp = new Employee1();
        emp.Id = employees!.Max(x => x.Id) + 1;
        emp.Name = $"Employee {emp.Id}";
        emp.Designation = $"QA Engineer {emp.Id}";
        emp.DOJ = new DateOnly(new Random().Next(1970, 2000), new Random().Next(1, 12), new Random().Next(1, 25));
        emp.IsActive = true;
        return emp;
    }
}