Table

Work with responsive tables enhanced with priority columns

  Download   View project on Github

Lot of times our table size is too much bigger for display columns in the right way.

Using this component you can make your table responsive and show only the columns you want to.

<div class="st-table-container">
    <table cellspacing="0" class="st-table" id="tbl-id">
        <thead>
          <tr>
             <th class="not-selectable always">Column header 1</th>
             <th class="always">Column header 2</th>
             <th class="ontablet">Column header 3</th>
             <th class="ondesktop">Column header 4</th>
             ... More headers ...
          </tr>
       </thead>
       <tbody>
          <tr>
             <th>Title <span class="subtitle">Subtitle</span></th>
             <td>Lorem ipsum</td>
             <td>01.01.2013</td>
             <td>20$</td>
             ... More columns ...
          </tr>      
          <tr>
             <th>AAPL <span class="subtitle">Subtitle</span></th>
             <td>Lorem ipsum</td>
             <td>01.01.2012</td>
             <td>50$</td>
             ... More columns ...
          </tr>
          .... More rows ...
       </tbody>
    </table>
</div>

The required HTML has a couple of classes helping you to build the responsive table.

.not-selectable When you apply this class the column won´t be selectable in the dropdown menu. In another words, the column will be always visible and can´t be removed by the user.

.always The same as .not-selectable but a checkbox will be showed in the dropdown allowing the user to unselect the column.

.onmobile The column will be displayed only on mobile device sizes (< 768px).

.ontablet The column will be displayed only on tablet device sizes (>= 768px and < 978px).

.ondesktop The column will be displayed only on desktop sizes (>= 978px).

There is another class to improve showing titles ans subtitles. The class is .subtitle and when you apply it using span tags (or similar) you can get a nice subtitle effect in your column cells

Constructor

Stashy.Table(selector, options)
Parameter Type Default Description
selector string .st-table CSS selector for your table
options object See options You can pass the options to the table instance

Options

Option Type Default Description
idpreffix string null Prefix for the id/headers values
notSelectable string not-selectable Class assigned to column headers (th) that should always be present; the script not create a checkbox for these columns
checkContainer string null Container element where the hide/show checkboxes will be inserted; if none specified, the script creates a menu
menuClass string null Specify the menu classes you want to add to style the menu button

Methods

Name Description
on() Starts table styling and event binding

Sample

var table1 = new Stashy.Table("#id1",{
    	        idprefix: "prforid2",
		        notSelectable: "forbidden",
                menuClass : "btn btn-primary"
	        }).on();           
var table2 = new Stashy.Table("#id2",{
		        idprefix: "prforid2-",
                checkContainer: "mymenu"
	        }).on();            

Responsive table styled with bootstrap

Laptop Procesor Speed Graphics card Resolution Screen Size Memory Storage Battery lifez Warranty Price
PortegeToshiba i5 1.6 Mhz Intel HD-4000 1600x900 14'' 4Gb 128 SSD 6h 1 year 1500 $
X1Lenovo i7 2.1 Mhz NVIDIA 635 1980x1080 13.3'' 8Gb 256 SSD 7h 2 year 1799 $
Vaio ProSony i5 1.7 Mhz Intel HD-4000 1366x780 13.3'' 4Gb 500 Gb 6.5h 2 year 1250 $
MacBook AirApple i7 1.8 Mhz Intel HD-4000 2048x1536 13.1'' 4Gb 128 SSD 6h 1 year 1600 $
Zenbook U32VDAsus i3 1.5 Mhz NVIDIA 650 1366x768 14'' 4Gb 400 Gb 4h 2 year 800 $
Spectre XTHP i5 1.6 Mhz Intel HD-4000 1600x900 15'' 8Gb 128 SSD 6h 1 year 1300 $
U500VZAsus i7 3.3 Mhz NVIDIA 735M 1980x1080 15.6'' 8Gb 512 SSD 5h 2 year 1999 $

Responsive table styled with Stashy default theme

Laptop Procesor Speed Graphics card Resolution Screen Size Memory Storage Battery life Warranty Price
PortegeToshiba i5 1.6 Mhz Intel HD-4000 1600x900 14'' 4Gb 128 SSD 6h 1 year 1500 $
X1Lenovo i7 2.1 Mhz NVIDIA 635 1980x1080 13.3'' 8Gb 256 SSD 7h 2 year 1799 $
Vaio ProSony i5 1.7 Mhz Intel HD-4000 1366x780 13.3'' 4Gb 500 Gb 6.5h 2 year 1250 $
MacBook AirApple i7 1.8 Mhz Intel HD-4000 2048x1536 13.1'' 4Gb 128 SSD 6h 1 year 1600 $
Zenbook U32VDAsus i3 1.5 Mhz NVIDIA 650 1366x768 14'' 4Gb 400 Gb 4h 2 year 800 $
Spectre XTHP i5 1.6 Mhz Intel HD-4000 1600x900 15'' 8Gb 128 SSD 6h 1 year 1300 $
U500VZAsus i7 3.3 Mhz NVIDIA 735M 1980x1080 15.6'' 8Gb 512 SSD 5h 2 year 1999 $

less

For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:

Stashy.Variables.less Stashy.Mixins.less Stashy.Table.less

JS

jQuery.js Stashy.Table.js