How to make use of it:

1. Install the tui.grid with NPM.

# NPM
$ npm install tui-grid --save

2. Import the tui.grid’s information within the doc.

<link rel="stylesheet" type="text/css" href="/path/to/tui-grid.css">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/underscore.js"></script>
<script src="/path/to/backbone.js"></script>
<script src="/path/to/tui-code-snippet.js"></script>
<script src="/path/to/tui-grid.js"></script>

3. Create a container wherein the info grid can be positioned.

<div id="myGrid"></div>

4. Define your personal information in a JavaScript array.

var myData = [
    {
      id: 549731,
      name: 'Beautiful Lies',
      artist: 'Birdy',
      release: '2016.03.26',
      type: 'Deluxe',
      typeCode: '1',
      genre: 'Pop',
      genreCode: '1',
      grade: '4',
      price: 10000,
      downloadCount: 1000,
      listenCount: 5000
    },
    // more data here
]

5. Render a fundamental information grid contained in the placeholder aspect.

var gridInstance = new tui.Grid({
    el: $('#myGrid'),
    data: myData,
    columns: [
      {
          title: 'Name',
          name: 'name'
      },
      {
          title: 'Artist',
          name: 'artist'
      },
      {
          title: 'Type',
          name: 'type'
      },
      {
          title: 'Release',
          name: 'release'
      },
      {
          title: 'Genre',
          name: 'genre'
      }
    ]
});

Full-featued CRUD Data Grid Component, TOAST UI Grid Plugin/Github, appendgrid, jquery data grids, jquery editable grid

See Demo And Download