vue-virtual-scroller sort filter crud example

See for more info: https://github.com/Akryum/vue-virtual-scroller

by Christopher O

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/Akryum/vue-virtual-scroller/master/dist/vue-virtual-scroller.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/Marak/faker.js/master/examples/browser/js/faker.js"></script>
<script src="https://cdn.rawgit.com/Akryum/vue-virtual-scroller/master/dist/vue-virtual-scroller.min.js"></script>

<div id="app">
  <input placeholder="Search" type="text" class="searchBox" v-model="search" /> Records: {{dispCount}}
  <my-list :list="listSorted"></my-list>
  <p>{{someInfo}}</p>
</div>

CSS

.scroller {
  overflow-y: scroll;
  overflow-x: none;
  height: 300px;
  width: 250px;
  border: 1px solid blue;
  margin-top:5px;
}

.user {
  height: 20px;
  border-bottom: 1px solid grey;
  white-space: nowrap;
}

.user:hover {
  background: green;
  color: white;
}

.searchBox{
  width:150px;
}

JavaScript

console.clear();

Vue.component('recycle-scroller', VueVirtualScroller.RecycleScroller)
//Vue.component('dynamic-scroller', VueVirtualScroller.DynamicScroller)
Vue.component('my-list', {
props:['list'],
template:`
<recycle-scroller
    class="scroller"
    :items="list"
    :item-height="20"
    keyField="i"
  >
    <div slot-scope="{item}" class="user" v-on:click="clicky(item.i)" v-on:dblclick="doubleClicky(item.i)">
      <strong>{{ item.i }}:</strong> {{ item.n }}
    </div>
  </recycle-scroller>
`,
/* template:`
  <DynamicScroller
    :items="list"
    :min-item-height="20"
    class="scroller"
  >
    <template slot-scope="{ item, index, active }">
      <DynamicScrollerItem
        :item="item"
        :active="active"
        :size-dependencies="[
          item.n,
        ]"
        :data-index="index"
      >
        <div class="text"><strong>{{ item.i }}:</strong> {{ item.n }}</div>
      </DynamicScrollerItem>
    </template>
  </DynamicScroller>
`, */
methods: {
    clicky(id){
        //console.log("Clicked: " + id)
        this.$parent.$data.someInfo = "You Clicked: " + id
        
        // Update the record (slow on big lists)
        this.$parent.$data.dict[id].n += '*'
        //vm1.dict[id].n += '*'
    },
    doubleClicky(id){
        this.$parent.$data.someInfo = "You Double-Clicked (deleted): " + id
        
        // Delete one record
    	delete(this.$parent.$data.dict[id])
    },
  },
})


var vm1 = new Vue({
  el: "#app",
  async created() {
  	createHowMany = 10000;
    
    // Create some fake records
    for (var i = 1; i <= createHowMany; i++) {
      let item = { i, n: faker.name.findName() }
      this.$set(this.dict, i, item)
    }
    
    // Wait for render, then make some changes
    // (demo that the browser updates in real-time)
    await timeout()
   
   	// Add 3 new records
   	for (var i = (createHowMany+1); i <= (createHowMany+3); i++) {
      // Create
      this.$set(this.dict, i, { i, n: i+" " +...