What are the ways to make a table responsive in MVC?
Data representation is the most crucial part of any mobile application or website. If you have a lot of data and want to manage it, but don’t know a proper way to represent it, then it’s of no value. In most cases, tabular presentation is the significant type of data representation especially in the case of statistical data.
Making a table responsive is a bit of a challenging task. And, there is no single solution to make any <table> responsive. There are many different types of tables on websites and applications where content may vary as widely as the approaches used to make them responsive. And, when it comes to MVC (Model View Controller) pattern, then the task may become more challenging. Before moving further, let’s understand MVA architecture first.
What is MVC?
Model View Controller is a software design pattern which can be used across multiple frameworks with many programming languages like Ruby, PHP, Python, JavaScript and more. This is majorly used to design mobile and web applications. The MVC development design pattern comprises of:
· Model- Stores and manages data
· View — Graphical User Interface
· Controller- Brain of the application
Model is often a database which uses local web storage to illustrate the concept. The view is actually the visual presentation of data like chart, diagram, or table form. Controller is generally the brain of application which connects model and view. It converts input from the view to update data in model.
Creating tables responsive in MVC
If you need to display multiple fields among different columns, creating alternative forms is the only possibility. And, when we talk about responsiveness, there are times when we have to display multiple forms in a single column on the mobile. MVC have made things easier for the developers. The form builder features sections which enable better organization of elements. Lets understand the way to create responsive table in MVC development:
Create a new MVC project
To create a responsive table in MVC, first you need to create a new MVC project using Visual Studio. Name it as Alternate Tab 1. Once you have new project, add three classes into the \models folder. Name these classes as Prod, ProdManager, and Prodviewmodel. Instead of using data, you may add some mock data in the ProdManager class.
You can add more product objects in the list to display several rows of data. The last class is the view model which is called MVC controller. Using this approach, you can see a nice separation of the concerns in your application.
MVC controller loads the data and feeds that data in the CSHTML pages used to render your page of the Prod data. The CSHTML page you are building uses the Prod property of the view model passed to it to create an HTML table.
The HTML table view
Now it’s time to create a new folder under \views folder called \Prod. Right click on the folder name and select add> MVC view page with layout. Set its name and click ok. You can use Bootstrap table classes to help with styling the table. Loop through the collection of the prod data in Prod property of the Prodviewmodel class. Each time, display the appropriate data from the Prod class in each <td> of table. Here you can run your app and see your table of Proddata will appear.
Making the tables responsive
Remove the attribute class=”table-responsive” from the <div>around the<table> element. Now re-run the application and see the results. Here you will see the table where data is wrapped within the columns. If you have several columns, you can scroll it wherever required and can see the data accordingly.
