Powerful Component to Display and Edit Data

tui.grid is a powerful component for viewing and editing data. Experience the ultimate data converter! TOAST UI Grid is a powerful data network component that helps you dynamically present larger data in a feature-rich, high-performance data network in one minute.

bootstrap crud table template, dynamic grid in jquery, excel like table editor in html jquery, toast ui grid, crud in html javascript and jquery

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