https://github.com/zvakanaka/table-of-data

v1 custom element
https://github.com/zvakanaka/table-of-data

v1 web-components

Last synced: about 1 year ago
JSON representation

v1 custom element

• Host: GitHub
• URL: https://github.com/zvakanaka/table-of-data
• Owner: zvakanaka
• Created: 2017-06-02T22:00:27.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-12-13T20:46:18.000Z (over 8 years ago)
• Last Synced: 2025-06-02T22:46:49.739Z (about 1 year ago)
• Topics: v1, web-components
• Language: HTML
• Homepage:
• Size: 59.6 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Table Custom Element

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://www.webcomponents.org/element/zvakanaka/table-of-data)  

[demo](https://zvakanaka.github.io/table-of-data)

## About

Lightweight and easy to use data table

## Usage

Import the element in the head

```html

```

Put the element somewhere in the body

```html

<table-of-data></table-of-data>

```

Put data in the table

```javascript

let data = {

  headings: [ 'State', 'Place' ],

  rows: [

    [ 'California',

      'Redwood Forest'

    ],

    [ 'New York',

      'New York Islands'

    ]

  ]

};

document.querySelector('table-of-data').data = data;

```

![Screenshot](http://i.imgur.com/Wi9b2Jy.png)

## Polyfill

Only Custom Elements needs to be polyfilled (`custom-elements.js`). To see how to use a polyfill, check out [index.html](https://github.com/zvakanaka/table-of-data/blob/master/index.html#L29-L56), which only loads the polyfill if needed (credit to [Eric Bidelman](https://gist.github.com/ebidel/1d5ede1e35b6f426a2a7)).