Isomorphic-Table-Cards is a Javascript class for Table and Cards views with animated transitions on sorting, view toggle, and browser resizing.

Check out the live demo.

The code is just Vanilla Javascript, CSS, and HTML.

In the "head" section your html page, import the Javascript and CSS:

<link href="css/isomorphic-table-cards.css" rel="stylesheet" />
<script src="js/isomorphic-table-cards.js" charset="utf-8"></script>

Isomorphic-Table-Cards is a Javascript class with configuration options for re-use.

data: data to display (JSON array).

selector: CSS selector for the root element which will hold the cards or table.

rowHeight: Row height (in pixels).

cardHeight: Card height (in pixels).

cardWidth: Card width (in pixels).

itemTemplate: HTML template to display an item. It is the same for both table and cards views, only the CSS changes.

sort: Function for sorting the data (arguments: data, key, direction).

render(): Initial rendering method.

redraw(style): Redraw method (style="table" or "cards").

sort(key): Sort method (key=data attribute to sort by).

const tableCards = new IsomorphicTableCards({
  data: <yourData>,
  selector: ".holder",
  // row and card dimensions
  rowHeight: 30,
  cardHeight: 100,
  cardWidth: 250,
  // item template
  itemTemplate: d => `<div class="item" id="${d.name}">
      <div class="c1">
        ${d.name}
      </div>
      <div class="c2">
        ${d.descriptionn}
      </div>
    </div>
  `,
  // sort function
  sort: (data, key, direction) => data.sort((a, b) => direction*a[key].localeCompare(b[key]))   }
});

tableCards.render()

The same animations can also be done using D3.js.

Isomorphic-Table-Cards is open source at GitHub with MIT license.

(c) 2024 Olivier Giulieri.