MudDataGrid not showing filter options in Blazor app despite Filterable set to true

I am using Blazor Web App .NET 8 with the latest MudBlazor service. After setting the Filterable = true, the filter icon is appearing on my table, but when click, nothing is showing up. I am following the example on the MudBlazor website. Am I missing something?

I have followed the steps on installing the MudBlazor service to my project. I even tested it with and without Bootstraps stylesheet to see if there is conflicts. And I used the default weather table from Blazor Web App and change to use MudDataGrid. Maybe I am not adding the function for handling the filter after onclick. But based on the example I see in MudBlazor Documentation, they just set the Filterable = "true" and the filter just work.

_Imports.razor

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using MudBlazorTest
@using MudBlazorTest.Components
@using MudBlazor

App.razor

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="MudBlazorTest.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>

</body>

</html>

Program.cs

using MudBlazorTest.Components;
using MudBlazor.Services;


var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddMudServices();

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

MainLayout.razor

@inherits LayoutComponentBase

<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Weather.razor

@page "/weather"
@attribute [StreamRendering]
@rendermode InteractiveServer
@using MudBlazor

<PageTitle>Weather</PageTitle>

<h1>Weather</h1>

<p>This component demonstrates showing data.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{

<MudDataGrid Items="@forecasts.Take(Range.All)" Class="custom-bordered" RowClass="custom-hover" Filterable="true" FilterMode="@FilterMode">
    <Columns>
        <PropertyColumn Property="x => x.Date" Title="Date">
        </PropertyColumn>
        <PropertyColumn Property="x => x.TemperatureC" />
        <PropertyColumn Property="x => x.TemperatureF" />
        <PropertyColumn Property="x => x.Summary" Title="Summary">
        </PropertyColumn>    
    </Columns>
</MudDataGrid>
}

@code {
    private WeatherForecast[]? forecasts;
    DataGridFilterMode FilterMode = DataGridFilterMode.ColumnFilterMenu;

    protected override async Task OnInitializedAsync()
    {
        // Simulate asynchronous loading to demonstrate streaming rendering
        await Task.Delay(500);

        var startDate = DateOnly.FromDateTime(DateTime.Now);
        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            Date = startDate.AddDays(index),
            TemperatureC = Random.Shared.Next(-20, 55),
            Summary = summaries[Random.Shared.Next(summaries.Length)]
        }).ToArray();
    }

    private class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

Solution

Someone already helped me answer this quesiton on github. the link is here

Updated: Solution is to add this inside the MainLayout.razor file because I set my Weather page to Interactive Server rendermode.

<MudThemeProvider @rendermode="InteractiveServer"/>
<MudDialogProvider @rendermode="InteractiveServer"/>
<MudSnackbarProvider @rendermode="InteractiveServer"/>