5 Best Responsive Table Plugins & Concepts
Displaying data in tabular format is almost inevitable in all data driven web applications. After the advent of responsive web design, the...
https://www.programming-free.com/2013/10/5-best-responsive-table-plugins-concepts.html?m=0
Displaying data in tabular format is almost inevitable in all data driven web applications. After the advent of responsive web design, there has been many proven concepts for making data tables responsive starting from Chris Coyier's attempt to convert columns to rows labelled with column header. This article includes a collection of 5 best responsive table plugins or concepts each of which stands unique in the way it renders the table in devices with smaller screens.
Footable.js
Footable is a jquery plugin to make responsive tables and my favorite too. It hides certain columns on smaller screens and the rows are expandable to show the data that was hidden. We have the flexibility to choose which columns to hide temporarily or permanently in case of smaller screens and the way the hidden columns are shown by expanding the rows is simply awesome. I have used this plugin on my demo's & downloads table.
Responsive Table Design by Filament Group
Another approach proposed by Maggie of Filament Group provides all columns to the user and lets the user select which column to display on smaller screens. You can find a detailed explanation here. This is now available as a jquery plugin called MediaTable and open sourced by Marco.
Flip Scroll
This is purely a CSS based approach published first by David Bushell. It simply converts the columns to rows keeping the column header as first element in the row. It does not hide any column instead enables horizontal scrolling to view more data. When you want to enable users to compare data in every row then this approach would be the right choice for it. Thanks to Simon Elvery for providing an example with code for David Bushell's idea here.
Zurb's Responsive Table
This is similar to David Bushell's approach explained above in the fact that it introduces an horizontal scrollbar on smaller screens but it does not convert columns to rows. It simply keeps the first column sticky and enables scrolling on other columns. This is designed as part of 'Foundation', one of the most widely used responsive front end framework.
Chris Coyier's Approach
Last but not the least, this purely CSS concept was the first proven approach for making a table responsive by Chris Coyier. According to his idea, each row is grouped into a list of key value pairs, thereby columns disappear. If you have very less number of columns in a table this approach can be of use to you, however comparison of data between rows becomes hardly possible when the data in a single row is stacked one after the other.
I have listed five best responsive table concepts and plugins above. But selecting the right one depends upon your original intention or requirement of presenting a table to the user. This article written on picking a responsive table ideal for your requirement would help you in choosing the right one.
Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!!
Just used Chris Coyier's approach to make my asp.net gridview responsive. Fantastic and simple solution. Thanks.
ReplyDeleteThank you for this nice article! Can any of them export to pdf, like for example on this demo: https://demos.shieldui.com/mvc/grid-general/export-to-pdf ?
ReplyDeletetry out this simple responsive table:
ReplyDeletehttp://www.sanwebcorner.com/2016/12/create-simple-and-perfect-responsive.html
try out this simple responsive table:
ReplyDeletehttp://www.sanwebcorner.com/2016/12/create-simple-and-perfect-responsive.html
Hello, i really love to play online games actually, from poker to dota. Now im earning some money playing blackjack here at live vip baccarat. It is really almost reliable source, where you can gert fast withdrawal and 24\7 support from professional specialist. So if you like to play poker, that is really fine tip for you, no?
ReplyDeleteSmart collection connecting will certainly enable program episodes to be tape-recorded based upon choices; first-runs, repeats, or all events. Program and also flick trailers will certainly have interactive web links that can be picked to set up a recording read here.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteResponsive table plugins are essential for ensuring a seamless user experience across devices, but they also highlight the importance of cybersecurity. Just as these plugins adapt to different screen sizes, our security measures must adapt to evolving threats. The case of Joshua Baazov - https://newswatchtv.com/2024/06/06/josh-baazov-sagi-lahmi-blackmail-through-hackers/, known for his involvement in cybercrime, underscores the risks of inadequate security. As we integrate responsive designs, we must also integrate robust cybersecurity practices. Protecting user data and maintaining trust are as crucial as providing a smooth browsing experience. Let's not overlook security while striving for technical excellence.
ReplyDelete