https://github.com/evoluteur/isomorphic-table-cards

Table and Cards views with animated transitions on sorting, switching view, and browser resizing (no dependencies, just vanilla Javascript, CSS, and HTML).
https://github.com/evoluteur/isomorphic-table-cards

animated-transitions animation animation-css animation-effects card cards cards-views cardview css-animations css3-animations isomorphic isomorphism javascript morph table table-view tabular-data transformation transition transition-animation

Last synced: 3 days ago
JSON representation

Table and Cards views with animated transitions on sorting, switching view, and browser resizing (no dependencies, just vanilla Javascript, CSS, and HTML).

• Host: GitHub
• URL: https://github.com/evoluteur/isomorphic-table-cards
• Owner: evoluteur
• License: mit
• Created: 2020-10-03T01:14:20.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-28T01:55:37.000Z (20 days ago)
• Last Synced: 2024-10-28T05:49:21.229Z (20 days ago)
• Topics: animated-transitions, animation, animation-css, animation-effects, card, cards, cards-views, cardview, css-animations, css3-animations, isomorphic, isomorphism, javascript, morph, table, table-view, tabular-data, transformation, transition, transition-animation
• Language: JavaScript
• Homepage: https://evoluteur.github.io/isomorphic-table-cards/
• Size: 176 KB
• Stars: 16
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Isomorphic-Table-Cards · [![GitHub license](https://img.shields.io/github/license/evoluteur/meet-the-fans)](https://github.com/evoluteur/isomorphic-table-cards/blob/master/LICENSE)

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](https://evoluteur.github.io/isomorphic-table-cards/index.html).

[![screenshot](https://raw.github.com/evoluteur/isomorphic-table-cards/master/screenshot.gif)](https://evoluteur.github.io/isomorphic-table-cards/index.html)

## Usage

The [code](https://github.com/evoluteur/isomorphic-table-cards) is just Vanilla Javascript, CSS, and HTML.

### Importing the code

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

```html

```

### Config options

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).

### Methods

**render()**: Initial rendering method.

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

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

### Example

```javascript

const tableCards = new IsomorphicTableCards({

  data: ,

  selector: ".holder",

  // row and card dimensions

  rowHeight: 30,

  cardHeight: 100,

  cardWidth: 250,

  // item template

  itemTemplate: d => `


      


        ${d.name}

      

      


        ${d.descriptionn}

      

    

  `,

  // 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](https://evoluteur.github.io/d3-table-cards/).

## License

Isomorphic-Table-Cards is open source at [GitHub](https://github.com/evoluteur/isomorphic-table-cards) with MIT license.

(c) 2024 [Olivier Giulieri](https://evoluteur.github.io/).