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

Category: Javascript , Recommended , Table | May 20, 2019
Author: iliketomatoes
Views Total: 2,935
Official Page: Go to website
Last Update: May 20, 2019
License: MIT

Preview:

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

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: '&euro;',

      /**
       * 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

You Might Be Interested In:


One thought on “Responsive Sliding Period/Pricing Table With Pure JavaScript – tabella.js

Leave a Reply