# Multi-Column Headers

The multi-column headers of the TreeList represent a tree-like structure where one or more columns can be grouped together by a common header.

That common header in turn can be a child of another upper `MultiColumn` header which can also span both columns and other headers. For a runnable example, refer to the [demo on implementing multi-column headers in the TreeList](https://demos.telerik.com/aspnet-mvc/treelist/multicolumnheaders).

```Razor HtmlHelper
    columns.Group(group => group
        .Title("Personal Info")
        .Columns(info =>
        {
            info.Add().Field(x => x.LastName).Width(120);
            info.Group(g => g
                .Title("Location")
                .Columns(location =>
                {
                    location.Add().Field(c => c.City).Width(140);
                    location.Add().Field(c => c.Country).Width(140);
                })
            );
            info.Add().Field(x => x.Phone);
        })
    );
```

The previous example will present the following output.

![UI for ASP.NET MVC TreeList multi-column headers](https://www.telerik.com/aspnet-mvc/documentation/assets/22ba28273992499dbc8ce1bcdb1859a7/treelist-multicolumn-headers.png)

## See Also

* [Implementing Multi-Column Headers in the TreeList HtmlHelper for ASP.NET MVC](https://demos.telerik.com/aspnet-mvc/treelist/multicolumnheaders)
* [Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/treelist)