View Table and Cards with Animated Transitions

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 (a.chakra+a.name).localeCompare(b.chakra+b.name);
});

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="${d.name}">
      <div class="c1">
        ${d.name}
      </div>
      <div class="c2">
        ${d.spirit}
      </div>
    </div>
  `,
  // sort functions
  sort: (data, key, direction) => {
    if(key=='chakra'){
      return data.sort(direction>0 ?
        (a, b) => (a.chakra+a.name).localeCompare(b.chakra+b.name)
        :
        (a, b) => ((8-a.chakra)+a.name).localeCompare((8-b.chakra)+b.name)
      )
    }else{
      return data.sort((a, b) => direction*a.name.localeCompare(b.name))
    }
  }
});
itc.render()

4. Redraw the Table/Grid view when needed.