vue js grid code example

Example: jsgrid vuejs

var app = new Vue({
  el: '#app',
  data: function() {
    let tableData = []
    /*generate junk data*/
    for (let i=0; i< 100; i++) {
      tableData.push({ "Name": "Client " + i, "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false });
    }
    
    let dataObj = { 
      message: 'Hello Vue!',
      clients: tableData,
      countries: [
          { Name: "", Id: 0 },
          { Name: "United States", Id: 1 },
          { Name: "Canada", Id: 2 },
          { Name: "United Kingdom", Id: 3 }
      ],
      grid: null
    }
    
    return dataObj;
  },
  mounted: function() {
    this.grid = $('#jsGrid');
    this.grid.jsGrid({
      //filtering: true,
      width: "100%",
      height: "400px",
      selecting: true,
      inserting: false,
      editing: true,
      sorting: true,
      paging: true,
      data: this.clients,

      fields: [
        { name: "Name", type: "text", width: 150, validate: "required" },
        { name: "Age", type: "number", width: 50 },
        { name: "Address", type: "text", width: 200 },
        { name: "Country", type: "select", items: this.countries, valueField: "Id", textField: "Name" },
        { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
        { type: "control" }
      ]
    })
  }
})



HTML
<div id="app">
  <div id="jsGrid"></div>
</div>