Preview
Joe Crosswave Married 32 1/5/1992 False
Merry Lisel Widowed 41 5/6/1982
Henry Crux Single 29 11/19/1994 True
Cody Jurut 49 8/11/1974 False
MVC controller

[HttpGet]
public ViewResult Index()
{
    // Result needs to be IQueryable in database scenarios, to make use of database side paging.
    return View(Context.Set<Person>());
}

MVC view

@model IQueryable<Person>

@(Html
    .Grid(Model)
    .Build(columns =>
    {
        columns.Add(model => model.Name).Titled("Name");
        columns.Add(model => model.Surname).Titled("Surname");
        columns.Add(model => model.MaritalStatus).Titled("Marital status");

        columns.Add(model => model.Age).Titled("Age");
        columns.Add(model => model.Birthday).Titled("Birthday").Formatted("{0:d}");
        columns.Add(model => model.IsWorking).Titled("Employed");
    })
    .Filterable(GridFilterCase.Lower)
    .Using(GridFilterMode.Header)
    .Empty("No data found")
    .Pageable(pager =>
    {
        pager.RowsPerPage = 4;
    })
    .Sortable()
)

Razor page

public class IndexModel : PageModel
{
    public IQueryable<Person> People { get; set; }

    public void OnGet()
    {
        People = repository.GetPeople();
    }
}

Razor page view

@page
@model IndexModel

@(Html
    .Grid(Model.People)
    .Build(columns =>
    {
        columns.Add(model => model.Name).Titled("Name");
        columns.Add(model => model.Surname).Titled("Surname");
        columns.Add(model => model.MaritalStatus).Titled("Marital status");

        columns.Add(model => model.Age).Titled("Age");
        columns.Add(model => model.Birthday).Titled("Birthday").Formatted("{0:d}");
        columns.Add(model => model.IsWorking).Titled("Employed");
    })
    .Filterable(GridFilterCase.Lower)
    .Using(GridFilterMode.Header)
    .Empty("No data found")
    .Pageable(pager =>
    {
        pager.RowsPerPage = 4;
    })
    .Sortable()
)