GravityView Datatables layout columns display

If you’ve been working with Gravity Forms a lot, sooner or later you will come across a need to display the submitted Gravity Forms entries on front-end. With the extensive API documentation available for Gravity Forms, you can certainly pull the entries out and display it but why reinvent the wheel when you have an excellent plugin available called GravityView (https://gravityview.co/). 

I recently built a complex insurance quote generator which required me to provide a dashboard to display all generated quotes and display them on a dashboard. I also had to generate PDFs on demand from the submitted quotes. GravityView connects with GravityPDF (the PDF generation plugin I recommend) and Gravity Forms to pull all this in one place as you can see from the screenshot below.

As you can see, you can create a user dashboard displaying all your Gravity Form entries very easily using GravityView. When you create a view, you have an option to choose the layout for your display. You can choose to display it as a table, a list, on a map or as datatables (https://docs.gravityview.co/article/400-what-are-the-differences-between-the-view-types). Datatables is my favorite way since it’s very easy to make the tables responsive with the datatables layout. 

The datatables responsive layout works best on device width and it automatically hides columns based on available device width but what if you want to make sure there are certain columns which should always display no matter what the device width is. If you search it on Google, you may run into this article on GravityView website https://docs.gravityview.co/article/290-changing-column-width. The article is actually only applicable to table view since even if you specify a width in a datatables view like this article suggests, it will get ignored. 

Luckily, there are ready-made classes in datatables to take care of it for us. You can read more about these classes here https://www.datatables.net/extensions/responsive/examples/display-control/classes.html. Since, GravityView uses datatables library to create the datatables view and allows for you to enter any custom CSS classes like shown in the screenshot below, all we need to do is to add the css class “all” in the configure field setting of the GravityView and that will ensure that our column gets displayed on any and all devices no matter the device width.

Once you apply this class to each column that you want, your datatables view will display these columns no matter what the device width is. If you need help, just click the hire button below this article and I will get you sorted.

Leave a Comment