Skip to content
ES6 Responsive Table Library
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
README.md
index.js
package.json

README.md

Responsive table

Most front end projects involving tables require some sort of responsive behavior, and not all of it the same. Responsive table aims to be a hyper flexible front end library for dealing with responsive tables.

It comes in three modules and is written in vanilla ES6.

Table Component Controller

This is the main module for dealing with tables. All other modules are used to power this.

Options

  • element : table wrapper element
  • breakPoint: number of pixels wide to switch to mobile view
  • mobileCallback: function to substitute the default mobile view
  • desktopCallback: function to substitute the default desktop view
import ResponsiveTable from '../src/responsive_table';

let breakPoint  = 800,
    element = document.getElementById('better-table'),

new ResponsiveTable.TableComponentController({
  breakPoint: breakPoint,
  element: element
});
<div id='table'>
  <table>
    <thead>
      <tr>
        <th scope='col'>header 1</th>
        <th scope='col'>header 2</th>
        <th scope='col'>header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
      </tr>
      <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
      </tr>
      <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>foot 1</td>
        <td>foot 2</td>
        <td>foot 3</td>
      </tr>
    </tfoot>
  </table>
</div>

TableComponentViews

We can use the view module on it's own like so.

  • cards(element) : returns and sets the transformed markup for card formatting
  • cached(element, cached) : returns and sets the cached markup
import ResponsiveTable from 'responsive-table';

let tableElement = document.getElementById('responsive-table');
ResponsiveTable.TableComponentViews.cards(tableElement);

ScreenCalculator

We can use the screen calculator on it's own like so.

  • width() : Returns the width of your screen at any given point
  • height() : Returns the height of your screen at any given point
import ResponsiveTable from 'responsive-table';

ResponsiveTable.ScreenCalulator.width(); // Your current width
ResponsiveTable.ScreenCalulator.height(); // Your current height
You can’t perform that action at this time.