Blazor: @onclick event handler not triggering SortData() for table column sorting

Question:I'm working on a Blazor application where I need to implement sorting functionality for a table of vehicle data. The table displays vehicle information (Make, Model, Color, Year), and each column header should be clickable to sort the data. However, when I click on the column headers, the SortData() method is not being triggered, and the sorting doesn't work.

I already tried, Chatgpt, Gemini, Copilot but nothing no solution

VechileData.razor (Child Class)

@using Microsoft.EntityFrameworkCore@using CarTracker.Models@using CarTracker.Data@inject ILogger<VehicleData> Logger@inject CarTrackerDbContext CarDbContext<h1>Vehicle Data Grid</h1>@if (vehicles == null){<p><em>Loading...</em></p>}else if (!vehicles.Any()){<p><em>No vehicles found.</em></p>}else{<table class="table"><thead><tr><th @onclick="() => SortData(nameof(VehicleInformationModel.Make))" style="cursor:pointer;">                    Make @GetSortIcon(nameof(VehicleInformationModel.Make))</th><th @onclick="() => SortData(nameof(VehicleInformationModel.Model))" style="cursor:pointer;">                    Model @GetSortIcon(nameof(VehicleInformationModel.Model))</th><th @onclick="() => SortData(nameof(VehicleInformationModel.Color))" style="cursor:pointer;">                    Color @GetSortIcon(nameof(VehicleInformationModel.Color))</th><th @onclick="() => SortData(nameof(VehicleInformationModel.Year))" style="cursor:pointer;">                    Year @GetSortIcon(nameof(VehicleInformationModel.Year))</th></tr></thead><tbody>            @foreach (var vehicle in vehicles)            {<tr><td>@vehicle.Make</td><td>@vehicle.Model</td><td>@vehicle.Color</td><td>@vehicle.Year</td></tr>            }</tbody></table>}@code {    private List<VehicleInformationModel>? vehicles;    private string sortColumn = nameof(VehicleInformationModel.Make);    private bool sortAscending = true;    protected override async Task OnInitializedAsync()    {        try        {            vehicles = await CarDbContext.VehicleInformationDBSet.ToListAsync();            SortData(sortColumn); // Sort initially        }        catch (Exception ex)        {            Logger.LogError($"Error fetching vehicle data: {ex.Message}");        }    }    private void SortData(string column)    {        Logger.LogInformation($"Sorting by column: {column}, ascending: {sortAscending}");        if (sortColumn == column)        {            sortAscending = !sortAscending;        }        else        {            sortColumn = column;            sortAscending = true;        }        List<VehicleInformationModel> sortedVehicles;        switch (sortColumn)        {            case nameof(VehicleInformationModel.Make):                sortedVehicles = sortAscending                    ? vehicles.OrderBy(v => v.Make).ToList()                    : vehicles.OrderByDescending(v => v.Make).ToList();                break;            case nameof(VehicleInformationModel.Model):                sortedVehicles = sortAscending                    ? vehicles.OrderBy(v => v.Model).ToList()                    : vehicles.OrderByDescending(v => v.Model).ToList();                break;            case nameof(VehicleInformationModel.Color):                sortedVehicles = sortAscending                    ? vehicles.OrderBy(v => v.Color).ToList()                    : vehicles.OrderByDescending(v => v.Color).ToList();                break;            case nameof(VehicleInformationModel.Year):                sortedVehicles = sortAscending                    ? vehicles.OrderBy(v => v.Year).ToList()                    : vehicles.OrderByDescending(v => v.Year).ToList();                break;            default:                sortedVehicles = vehicles;                break;        }        vehicles = sortedVehicles;        StateHasChanged();    }    private string GetSortIcon(string column)    {        if (sortColumn != column) return string.Empty;        return sortAscending ? "↑" : "↓";    }}