Create custom tables with WebGrid

If you are building data tables with paging and sorting from scratch when using ASP.NET MVC, you are missing out on one of the easiest-to-use helpers. WebGrid gives you built-in support for clickable headers for sorting and paging in the footer. But there is a lot of misinformation about what you can and cannot do with the WebGrid.

This article covers creating a fully formatted table with a strongly typed view using the WebGrid helper. The full code for this project includes views that show the WebGrid with no formatting, with footer CSS formatting alone, with table formatting, and our main topic – customising the footer with paging and other information.

The data for this project is an enumerable list created in the controller; I would typically use SQL Server and access the data with Entity Framework. I created the data in the controller to keep it short enough for an article. You will be using a data model in this example, like you would with Entity Framework, but you won’t be storing or accessing the data in a database.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.