(V5) Possible to apply virtual-list to table?

Questions
1

Hi ,

I would appreciate if any of you could help me regarding how to
make a virtual-list but using it to create <tr> table row instead of <li> list item ?

var virtualList = app.virtualList.create({
// List Element
el: '.virtual-list',
// Pass array with items
items: items,
// Custom search function for searchbar
searchAll: function (query, items) {
  var found = [];
  for (var i = 0; i < items.length; i++) {
    if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
  }
  return found; //return array with mathced indexes
},

itemTemplate: 
      '<tr>'+
          '<td class="label-cell">Product #2</td>'+
          '<td class="medium-only numeric-cell">12</td>'+
      '<td class="numeric-cell"><div class="row">'+
        '<div class="col">'+
            '<div class="stepper stepper-fill stepper-init" data-wraps="true" data-autorepeat="true" data-autorepeat-dynamic="true" data-decimal-point="2" data-manual-input-mode="true">'+
            '<div class="stepper-button-minus"></div>'+
            '<div class="stepper-input-wrap">'+
                '<input type="text" value="15" min="0" max="1000" step="1">'+
            '</div>'+
            '<div class="stepper-button-plus"></div>'+
            '</div>'+
        '</div>'+
        '</div>'+
      '</td>'+
      '<td class="numeric-cell">180.00</td>'+
    '</tr>'
  ,
// List item Template7 template
itemTemplate_li_sample:
  '<li >' +
    '<a  class="item-link item-content" href="/sellerproduct">' +
      '<div class="item-media">'+
        '<img src="someimage.jpg" width="44"/>'+
        '</div>'+
       '<div class="item-inner">' +
        '<div class="item-title-row">' +
          '<div class="item-title">{{title}}</div>' +
        '</div>' +
        '<div class="item-subtitle">{{subtitle}}</div>' +
      '</div>' +
    '</a>' +
  '</li>',

the original virtual list is applied for list item <ul> ... </ul> , so is there anyway which i can use the method or itemTemplate like the above to render my items ?

Thanks,
Kalmen

2

Try to use ‘createUl’ to false .
Look virtual list parameters

3

Hi,
i have tried as advice,

image
image998×473 52.8 KB

and then i insert that to my table body tag as shown below,
image

and then i found that my console show error,
image

and the page is blank because of incomplete action, i think, any idea ?

4

Hi,
not sure whether this is a good practice, for now, i follow this ,https://www.w3schools.com/jsref/met_table_insertrow.asp and write a displayItem(item){…} in the mounted() block of the page i need and it works.

Thanks for all the help.

1 Like