Responsive Sliding Period/Pricing Table With Pure JavaScript – tabella.js

Preview:

Description:

tabella.js is a pure JavaScript plugin that generates a responsive, touch-enabled period/pricing table for your e-commerce/business website.

Click on the arrows or swipe/drag the rows to slide through the pricing table.

Basic usage:

Load the tabella.css in the header for basic styles.

<link href="css/tabella.css" rel="stylesheet">

Create a DIV element that will act as the container for the pricing table.

<div id="tabella" class="tabella-ctr"></div>

Load the tabella.js in your document.
Add your data to the pricing table in the Javascript.

!(function(){
  var tabellaCtr = document.getElementById('tabella');
  var test = new Tabella(
    tabellaCtr,
    {   
      periods: [
        ['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']
        ,['2015-4-7', '2015-4-23']
      ],
      rows : [
        {
        desc: '<h2 class="table-h"><a href="#">Single bed room</a></h2>',
        prices: [[190 , 210, 210, 204, 180, 160],[190 , 210, 210, 204, 180, 140]],
        pricesDesc : [['1 persona'], ['2 persone']]
        },
        {
        desc: '<h2 class="table-h"><a href="#">Double bed room</a></h2>',
        prices: [[190 , 210, 210, 204, 180, 160]],
        pricesDesc : [['1 persona']]
        },
        {
        desc: '<h2 class="table-h"><a href="#">Suite</a></h2>',
        prices: [[190 , 210, 210, 204, 180, 170]],
        pricesDesc : [['1 persona']]
        } 
    
      ]
    });
  
})();

More configuration options.

var myTabella = new Tabella(
    element
    {   
      /**
       * BREAKPOINTS :
       * 1st element in array is the row width,
       * the 2nd is the number of cells to be shown
       * Default breakpoint is from [0,1], just one element is shown
       */
      cellBreakpoints: {
          default: [0, 1],
          small: [360, 2],
          medium: [640, 3],
          large: [820, 4],
          xlarge: [1080, 5]
      },
      /**
       * DESCRIPTION BREAKPOINTS :
       * 1st element in array is the row width,
       * the 2nd is the description cell width,
       * Default breakpoint is from [0,0]
       */
      descBreakpoints: {
          default: [0, 0],
          medium: [460, 160],
          large: [900, 200]
      },
      // Content shown in the period start row
      from: 'from',
      // Content shown in the period end row.
      to: 'to',
      // Currency symbol
      currency: '€',
      /**
       * Easing functions
       * easeInSine
       * easeOutSine
       * easeInOutSine
       * easeInQuad
       * easeOutQuad
       * easeInOutQuad
       * easeInCubic
       * easeOutCubic
       * easeInOutCubic
       * easeInQuart
       * easeOutQuart
       * easeInOutQuart
       * easeInQuint
       * easeOutQuint
       * easeInOutQuint
       * easeInExpo
       * easeOutExpo
       * easeInOutExpo
       * easeInCirc
       * easeOutCirc
       * easeInOutCirc
       * easeInBack
       * easeOutBack
       * easeInOutBack
       */
      easing: 'easeInOutSine',
      // The duration of the sliding animation.
      duration: 600,
      // The speed of the animation once "touch end" event is fired.
      reboundSpeed: 300,
      // The amount of pixels you can swipe over the boundaries of the row.
      edgeThreshold: 150,
      // The amount of pixels needed to fire the swipe event.
      swipeThreshold: 60,
      // Whether to swipe by a single-cell-length per time or not. 
      swipeSingleTick: true,
      // a function which will be fired when the browser window has been resized.
      onRefreshSize: false,
      // customi divider
      headerRowDevider: '-',
      // When a row contains less cells than the number of the table header cells, it will just add an empty cell with this value.
      emptyCell: 'not set',
      // Enable the table header fixed position
      fixedHeader: true,
      // The distance between the fixed table header and the bottom of the table ( expressed in px ) below which the fixed table header will disappear.
      fixedHeaderBottomThreshold: 80,
      // Set the CSS top rule for the table header when it's in fixed position.
      fixedHeaderTop: '0',
      // custom SVG arrows
      leftArrow: '',
      rightArrow: ''
});

API methods.

// Goes to the next cell.        
myTabella.move('right');
// Goes to the previous cell.    
myTabella.move('left');
// Move all the rows by the given amount of pixels.        
myTabella.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.       
myTabella.move();
// Reflow the table size.
// Useful when showing a table that was previously not displayed.          
myTabella.refreshSize();
// Returns the current width of each cell         
myTabella.getCellWidth();
// Returns 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.         
myTabella.getCurrentBreakPoint();
// Sets single tick        
myTabella.setSingleTick(trueOrFalse);

Changelog:

v0.5.1 (05/20/2019)

• Feat: passing svg arrows objects in initializing options

v0.4.1 (11/10/2016)

• Bugfixes