This is a pure javascript table plugin, responsive, AMD ready, touch enabled.
Besides cloning this repo or downloading it, you can either get it through Bower.
bower install tabellajs
Include the css into your page:
<link rel="stylesheet" href="path/to/tabella.css">Include the script into your page:
<script src="path/to/tabella.js"></script>Add the markup for your div meant to hold the table:
<div id="example" class="tabella-ctr"></div> Then activate the plugin:
!(function(){
var myTabella = new Tabella(
document.getElementById('example'),
{
tableHeader: [
['2014-12-14', '2014-12-20']
,['2014-12-21', '2015-1-10']
,['2015-2-1', '2015-3-7']
,['2015-3-8', '2015-3-21']
,['2015-3-22', '2015-4-7']
],
rows : [
{
rowHeader: 'Single bed room',
rowVal: [[190 , 210, 210, 204, 180],[190 , 210, 210, 204, 180]],
rowDesc : ['1 persona', '2 persone']
},
{
rowHeader: 'Double bed room',
rowVal: [[190 , 210, 210, 204, 180]],
rowDesc : ['1 persona']
},
{
rowHeader: 'Suite',
rowVal: [[190 , 210, 210, 204, 180]],
rowDesc : ['1 persona']
}
]
});
})();You have to pass to the constructor 2 parameters. The first one is the HTML element where we are going to mount the table. The second one is an objects containing the data of the table.
It's compulsory to define the tableHeader property (which is a nested array with the syntax shown above) into the object passed as second argument to the Tabella's constructor. Together with tableHeader you have to define the table rows with the syntax shown above. The rows property is an array of objects. Each object (i.e. row) must contain the rowVal field, which is an array of arrays. The length of each array hold by rowVal should be equal to the tableHeader length.
i.e. rowHeader and rowDesc are optional properties for the row.
Since it doesn't have dependencies,if you are using Requirejs just write something like this:
require(['tabella'], function(tabella){
//Put here the same thing as shown above
}) Available options:
| Property | Description | Type | DEFAULT |
|---|---|---|---|
| cellBreakpoints | Here we declare the row breakpoints (referred to the table container's width). It is a literal object which contains an arbitrary number of properties. Each property must hold a 2 element-long array; the first element is the table container min-width expressed in px, the second element stands for the number of cells to be shown in each row. | Object | { default : [0,1], small : [360,2], medium : [640,3], large : [820,4], xlarge : [1080,5]} |
| descBreakpoints | Here we declare the description-cell breakpoints (the cells on the left of the table which contains the row description). It is a literal object which contains an arbitrary number of properties. Each property must hold a 2 element-long array; the first element is the table container min-width expressed in px, the second element is the description cell width expressed in px. | Object | { default : [0,0], medium : [460, 160], large: [900, 200] } |
| from | Content shown in the period start row. If the header doesn't contain periods just change this property value to something else. | String | 'from' |
| to | Content shown in the period end row. If the header doesn't contain periods just change this property value to an empty string: ''. | String | 'to' |
| currency | The currency shown in each cell. | String | '€' |
| duration | The duration of the sliding animation. Expressed in milliseconds. | Number | 600 |
| easing | The easing of the animation. You can pick among 24 pre-set easings. | String | 'easeInOutSine' |
| reboundSpeed | The speed of the animation once "touch end" event is fired, after you stopped swiping a table row. Expressed in px/seconds. | Number | 300 |
| edgeThreshold | The amount of pixels you can swipe over the boundaries of the row. | Number | 150 |
| swipeThreshold | The amount of pixels needed to fire the swipe event. | Number | 60 |
| swipeSingleTick | Whether to swipe by a single-cell-length per time or not. If set to false, it'll swipe by a number of cells equal to the result given by this function: Math.abs(Math.floor(delta / swipeThreshold)). | Boolean | true |
| onRefreshSize | A callback to invoke when the browser window has been resized. | Function | false |
| headerRowDevider | When you have a two-storey table header, here you can put any HTML entity you want. | String | '-' |
| emptyCell | When a row contains less cells than the number of the table header cells, it will just add an empty cell with this value. | String | 'not set' |
| fixedHeader | Enable or disable the table header fixed position when scrolling down the page (i.e. when the top of the table isn't visible anymore but the rest of the table is still in the viewport). | Boolean | true |
| fixedHeaderBottomThreshold | The distance between the fixed table header and the bottom of the table ( expressed in px ) below which the fixed table header will disappear. | Number | 80 |
| fixedHeaderTop | This option will set the CSS top rule for the table header when it's in fixed position. | String | '0' |
| leftArrow | Using a custom svg arrow for the left scroll button. It has to be created with document.createElementNS('http://www.w3.org/2000/svg', 'svg'). |
Element | SVG icon |
| rightArrow | Using a custom svg arrow for the right scroll button. It has to be created with document.createElementNS('http://www.w3.org/2000/svg', 'svg'). |
Element | SVG icon |
- easeInSine
- easeOutSine
- easeInOutSine
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInBack
- easeOutBack
- easeInOutBack
var table = new Tabella( document.getElementById('your-tabella'),
{
//Whatever options
});
/**
* Goes to the next cell.
* @param {String}
*/
table.move('right');
/**
* Goes to the previous cell.
* @param {String}
*/
table.move('left');
/**
* Move all the rows by the given amount of pixels.
* @param {Number} pixels
*/
table.move(x);
/**
* Move all the rows to the starting point when no parameters are given.
* Useful when showing a table that was previously not displayed.
*/
table.move();
/**
* Reflow the table size.
* Useful when showing a table that was previously not displayed.
*/
table.refreshSize();
/**
* @return {Number} The current width of each cell
*/
table.getCellWidth();
/**
* @return {Object} The current breakpoint. The first element of this object
* is the array picked from the options.cellBreakpoints which fits into the
* current media query. The second element is another array picked among the
* options.descBreakpoints, which is fit for the current media query as well.
*/
table.getCurrentBreakPoint();
/**
* Set single tick.
* @param {Boolean} Set table.options.swipeSingleTick to true or false. See the options * documentation.
*/
table.setSingleTick(trueOrFalse); Not tested yet, but working on all modern browser, IE9+.
- Better API
- Better Tests
Giancarlo Soverini giancarlosoverini@gmail.com
AGPL-3.0