Press "Enter" to skip to content

View Table and Cards with Animated Transitions | Isomorphic-Table-Cards

Isomorphic-Table-Cards is a Vanilla JavaScript library that allows you to switch between Table View and Grid View with a smooth transition effect.

How to make use of it:

1. Insert the primary script isomorphic-table-cards.js into the doc.

<script src="js/isomorphic-table-cards.js"></script>

2. Define your information for the Table/Grid view.

var data = [
    "name": "Amazonite",
    "chakra": 4,
    "spirit": "Self-determination"
    "name": "Amber",
    "chakra": 3,
    "spirit": "Makes carefree"
    "name": "Amethyst",
    "chakra": 7,
    "spirit": "Alertness, justice, inner peace",
    "body": "Good for the skin; alleviates pain, tension and lowers high blood pressure."
  // ...
].sort(function(a, b){
  return (;

3. Render the info within the Table/Grid view.

let itc
itc = new IsomorphicTableCards({
  // row and card dimesions
  rowHeight: 31,
  cardHeight: 94,
  cardWidth: 210,
  // item template
  itemTemplate: d => `<div class="item chakra${d.chakra}" id="${}">
      <div class="c1">
      <div class="c2">
  // sort functions
  sort: (data, key, direction) => {
      return data.sort(direction>0 ?
        (a, b) => (
        (a, b) => ((8-a.chakra)
      return data.sort((a, b) => direction*

4. Redraw the Table/Grid view when needed.


5. Switch between Table View and Grid View.


6. Sort of information.


Isomorphic Table & Grid View Switcher, Isomorphic Table Cards Plugin/Github

See Demo And Download

Official Website(evoluteur): Click Here

This superior jQuery/javascript plugin is developed by evoluteur. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.