Modern Theme

The Modern theme provides a clean, framework-agnostic look with card-style container, refined headers, hover states, and self-contained pager and search styling. No Bootstrap table classes required.

Full Example

Apply the theme, then configure sorting, paging, search, and columns as needed:

@(await Html
    .SimpleGrid(Model)
    .Theme(GridTheme.Modern)
    .Sortable()
    .DefaultSortBy(m => m.Name)
    .AddColumn(col => col.For(m => m.Name).Sortable())
    .AddColumn(col => col.For(m => m.Director).Sortable())
    .AddColumn(col => col
        .Header("Genre")
        .DisplayAs(m => $"<span class='sh-badge sh-badge-info'>{WebUtility.HtmlEncode(m.Genre)}</span>")
        .Encoded(false)
        .SortableBy(m => m.Genre))
    .AddColumnFor(m => m.Released)
    .AddSearch("Name", ...)
    .AddSearch("Director", ...)
    .AddPager(options => { ... })
    .RenderAsync())

Row Modifiers

Highlight rows based on conditions:

@(await Html
    .SimpleGrid(Model)
    .Theme(GridTheme.Modern)
    .AddColumnsForModel()
    .Sortable()
    .DefaultSortBy(m => m.Name)
    .AddRowModifier(
        m => m.Released.HasValue && m.Released.Value < 1980,
        css => css.AddClass("sh-row-warning"))
    .RenderAsync())

Side by Side: Classic vs Modern

CSS Classes Available