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.
itc.redraw()
5. Switch between Table View and Grid View.
itc.redraw('table') itc.redraw('cards')
6. Sort of information.
itc.sort('name') itc.sort('chakra')
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