Skip to content
Shiny.NET
Blog
Shiny .NET v4 is here with BLE Windows Support, Improved GPS, & More! Check It Out

TableView | Blazor Usage

The Blazor <TableView> component mirrors the MAUI control. Colors use CSS strings, and all properties map directly to component parameters.

Setup

Section titled “Setup”

Install the NuGet package:

Terminal window
dotnet add package Shiny.Blazor.Controls

Add the @using directives — typically in _Imports.razor:

@using Shiny.Blazor.Controls
@using Shiny.Blazor.Controls.Cells
@using Shiny.Blazor.Controls.Sections

Basic Usage

Section titled “Basic Usage”
<TableView>
    <TableRoot>
        <TableSection Title="Account">
            <SwitchCell Title="Notifications"
                        On="@notificationsOn"
                        OnChanged="v => notificationsOn = v" />
            <EntryCell Title="Username"
                       ValueText="@username"
                       ValueTextChanged="v => username = v"
                       Placeholder="Enter name" />
            <CommandCell Title="About"
                         Command="OnAbout"
                         ShowArrow="true" />
        </TableSection>
    </TableRoot>
</TableView>


@code {
    bool notificationsOn;
    string username = "";


    Task OnAbout() => Task.CompletedTask;
}

Cell Types

Section titled “Cell Types”

All 15 cell types are available in Blazor with the same property names. Key differences from MAUI:

  • Colors are CSS strings (e.g. "#F5F5F5", "DodgerBlue")
  • Command properties are EventCallback instead of ICommand
  • Two-way bound values use a ValueChanged callback pattern (e.g. On/OnChanged for SwitchCell)
<TableView>
    <TableRoot>
        <TableSection Title="Settings">
            <SwitchCell Title="Dark Mode" On="@darkMode" OnChanged="v => darkMode = v" />
            <SliderCell Title="Volume" Value="@volume" ValueChanged="v => volume = v"
                        Min="0" Max="100" />
            <DatePickerCell Title="Birthday" Date="@birthday" DateChanged="v => birthday = v" />
            <TimePickerCell Title="Alarm" Time="@alarm" TimeChanged="v => alarm = v" />
            <PickerCell Title="Theme" Items="@themes" SelectedIndex="@themeIndex"
                        SelectedIndexChanged="v => themeIndex = v" />
            <EntryCell Title="Email" ValueText="@email" ValueTextChanged="v => email = v"
                       Keyboard="Email" />
            <CommandCell Title="Sign Out" Command="OnSignOut" TitleColor="#FF3B30" />
        </TableSection>
    </TableRoot>
</TableView>


@code {
    bool darkMode;
    double volume = 50;
    DateTime birthday = DateTime.Today;
    TimeSpan alarm = new(7, 0, 0);
    string[] themes = ["Light", "Dark", "System"];
    int themeIndex;
    string email = "";


    Task OnSignOut() => Task.CompletedTask;
}

Styling

Section titled “Styling”

Cascading styles work the same way — set properties on TableView or TableSection and cells inherit them:

<TableView CellBackgroundColor="#1E1E1E"
           CellTitleColor="White"
           CellDescriptionColor="#999"
           SeparatorColor="#333">
    <TableRoot>
        <TableSection Title="Dark Theme Example"
                      HeaderTextColor="#AAA">
            <SwitchCell Title="Enabled" On="true" />
            <CommandCell Title="Details" ShowArrow="true" />
        </TableSection>
    </TableRoot>
</TableView>