MediaTable

Responsive Table jQuery Plguin

What does this plugin do?

MediaTable listen to screen size to define visible or hidden columns using CSS media query.
You can choose what column to view with the automagically columns menu.

This is a usefull solution to display big data table into small screen devices allowing the user to display relevant data at the beginning then to choose what data to display.

How do I use this demo?

  1. Look at the number of colums displayed in the table below
  2. Click on Enable MediaTable to startup the widget
  3. Look at the menu generated upon the table. You can choose what columns to display
  4. Resize the window (or change orientation on iPad) to see how table changes
  5. Click on Disable MediaTable to completely remove the widget form the table
Employee xHTML HTML5 CSS JS jQuery jQueryUI jQuery Mobile Sencha Touch PHP PHP (OO) CakePHP
Marco Pegoraro y y y y y y y y y y y
Mario Rossi y y n y n n n y y y n
Alberto Bianchi n n y n n n n n n n n

Created by Marco Pegoraro | Based upon a Filament Group article | Fork on GitHub