<template>
  <div>
		<h2>Virtual Scroll</h2>
		<p>The Virtual Scroll allows the ComboBox to display millions of items.</p>
		<ComboBox valueField="id" textField="name"
				:virtualScroll="true"
				:data="data" 
				:total="total" 
				:pageSize="pageSize" 
				:rowHeight="rowHeight"></ComboBox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      total: 10000,
      pageSize: 20,
      rowHeight: 30
    };
  },
  created() {
    let data = [];
    for (let i = 0; i < this.total; i++) {
      data.push({
        id: i,
        name: "Item" + i
      });
    }
    this.data = data;
  }
};
</script>