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
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 |
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 |
Name | Description |
---|---|
on() | Starts table styling and event binding |
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();
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 $ |
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.lessJS
jQuery.js Stashy.Table.js