Vue JS Data Grid With Paging Sorting and Filtering – vue DataTables

Vue JS Data Grid With Paging Sorting and Filtering – vue DataTables

In this Post We Will Explain About is Vue JS Data Grid With Paging Sorting and Filtering – vue DataTables With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to vue Data Grid Table in vuejs Example

In this post we will show you Best way to implement Vue.JS – Advanced Data Grid Component, hear for VueJS Datagrid – Sorting Filtering Paging with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Getting Started for vue Data Grid Table in vuejs

We have used CDN(libes) for vuejs, javascript so you must need Your internet Data connection for them to work on Vue.js simple grid component example.

<title>vue Data Grid Table in vuejs</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
</head>

index.html

This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(VueJS Datagrid – Sorting Filtering Paging) dependencies and the HTML Elements that we have created.

Also Read :   AngularJS Objects-create object-create json object-create object array

<div id="live24uApp">
  <form id="search">
    Search
    <input name="query" v-model="strqry">
  </form>
  <hr/>
  <h2>VueJS Datagrid – Sorting Filtering Paging</h2>
  <data-grid :data="gridData" :dataclmns="gridColumns" :filter-key="strqry">
  </data-grid>
</div>
<script type="text/x-template" id="data-template">
  <table>
    <thead>
      <tr>
        <th v-for="key in dataclmns" @click="sortBy(key)" :class="{ active: lsortstr == key }">
          {{ key | capitalize }}
          <span class="livearw" :class="strclmorder[key] > 0 ? 'asc' : 'dsc'">
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="alist in articleFilter">
        <td v-for="key in dataclmns">
          {{alist[key]}}
        </td>
      </tr>
    </tbody>
  </table>
</script>

index.js

This contains our simple custom index.js files Add Like as javascript, vuejs scripts

console.log(Vue.version);
var articlList = [{
  "name": "wordpress CMS",
  "Unit  Test": 10,
  "writers or authors & Performance": 7,
  "niche supports & Compensation": 9,
  "tutorials & Examples-demo supports": 9,
  "source code URL COUNT": 10,
  "Target & cites Area": 9,
  "copyright & Personal Data": 6,
  "Work scripts & steps": 10,
  "Total Post": 70
}, {
  "name": "Angularjs and vuejs",
  "Unit  Test": 9,
  "writers or authors & Performance": 6,
  "niche supports & Compensation": 7,
  "tutorials & Examples-demo supports": 9,
  "source code URL COUNT": 7,
  "Target & cites Area": 9,
  "copyright & Personal Data": 9,
  "Work scripts & steps": 9,
  "Total Post": 65
}, {
  "name": "PHP Server side.",
  "Unit  Test": 10,
  "writers or authors & Performance": 9,
  "niche supports & Compensation": 7,
  "tutorials & Examples-demo supports": 9,
  "source code URL COUNT": 7,
  "Target & cites Area": 7,
  "copyright & Personal Data": 6,
  "Work scripts & steps": 9,
  "Total Post": 64
}];
console.log('test');
Vue.component('data-grid', {
  template: '#data-template',
  props: {
    data: Array,
    dataclmns: Array,
    filterKey: String
  },
  data: function() {
    var strclmorder = {}
    this.dataclmns.forEach(function(key) {
      strclmorder[key] = 1
    })
    return {
      lsortstr: '',
      strclmorder: strclmorder
    }
  },
  computed: {
    articleFilter: function() {
      var lsortstr = this.lsortstr
      var filterKey = this.filterKey && this.filterKey.toLowerCase()
      var order = this.strclmorder[lsortstr] || 1
      var data = this.data
      if (filterKey) {
        data = data.filter(function(row) {
          return Object.keys(row).some(function(key) {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (lsortstr) {
        data = data.slice().sort(function(a, b) {
          a = a[lsortstr]
          b = b[lsortstr]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    }
  },
  filters: {
    capitalize: function(str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  },
  methods: {
    sortBy: function(key) {
      this.lsortstr = key
      this.strclmorder[key] = this.strclmorder[key] * -1
    }
  }
})

var vueApp = new Vue({
  el: '#live24uApp',
  data: {
    strqry: '',
    gridColumns: Object.keys(articlList[0]),
    gridData: articlList
  }
})

style.css

Last step, we have add the Following CSS styles for our simple and our Custom styling.

Also Read :   AngularJS $animate Tutorial With Animation Example

table {
  border: 3px solid rgb(102, 152, 255);
  border-radius: 4px;
  background-color: #c60000;
}

th {
  background-color: rgb(102, 152, 255);
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

td {
  background-color: #f9f9f9;
}

th,
td {
  min-width: 150px;
  padding: 11px 21px;
}

th.active {
  color: #c60000;
}

th.active .livearw {
  opacity: 1;
}

.livearw {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.livearw.asc {
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid #c60000;
}

.livearw.dsc {
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 2px solid #c60000;
}

VueJS grid – Sorting Filtering Paging

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   Insert Data Into Database using AngularJS with PHP Mysql





Example

I hope you have Got What is Vue JS Grid With Paging Sorting and Filtering And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.