Toast grid ) 간단한 테이블 만들기

진짜 간단한 toast grid 만들기

cdn :

<link rel="stylesheet" href="https://uicdn.toast.com/grid/latest/tui-grid.css" />
<script src="https://uicdn.toast.com/grid/latest/tui-grid.js"></script>

html:

<div id="grid"></div>

js:

var Grid = tui.Grid;

var instance = new Grid({
  el: document.getElementById('grid'), // Container element
  columns: [
    {
      header: 'Name',
      name: 'name'
    },
    {
      header: 'Artist',
      name: 'artist'
    },
    {
      header: 'Release',
      name: 'release'
    },
    {
      header: 'Genre',
      name: 'genre'
    }
  ],
  data: [
    {
      name: 'Beautiful Lies',
      artist: 'Birdy',
      release: '2016.03.26',
      genre: 'Pop'
    }
  ]
});

instance.resetData(newData); // Call API of instance's public method

Grid.applyTheme('striped'); // Call API of static method