Dynamic tags

Author: Akryum

README.md

@@ -39,6 +39,33 @@ There are additional props you can use:
 
 - `typeField` to customize which field is used on the items to get their type and use the corresponding definition in the `renderers` map. The default is `'type'`.
 - `keyField` to customize which field is used on the items to set their `key` special attribute (see [the documation](https://vuejs.org/v2/api/#key)). The default is `'id'`.
+- `mainTag` to change the DOM tag of the component root element. The default is `'div'`.
+- `containerTag` to change the DOM tag of the element simulating the height. The default is `'div'`.
+- `contentTag` to change the DOM tag of the element containing the items. The default is `'div'`. For example, you can change this to `'table'`.
+
+The component template is structured like this:
+
+```html
+<main>
+  <container>
+    <content>
+      <!-- Your items here -->
+    </content>
+  </container>
+</main>
+```
+
+If you set `contentTag` to `'table'`, the actual result in the DOM will bu the following:
+
+```html
+<div>
+  <div>
+    <table>
+      <!-- Your items here -->
+    </table>
+  </div>
+</div>
+```
 
 The `renderers` map is an object containing a component definition for each possible value of the item type. **The component definition must have an `item` prop, that will get the item object to render in the scroller.**
 

dist/vue-virtual-scroller.css

@@ -4,6 +4,11 @@
 }
 .item-container[data-v-5594e8c4] {
   box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+}
+.items[data-v-5594e8c4] {
+  width: 100%;
 }
 
 .resize-observer[data-v-c7b3205a] {

dist/vue-virtual-scroller.js

@@ -11,11 +11,13 @@
         Virtual scroller update: {{ updateTime }} ms
       </span>
       <span>
-        <button @click="showScroller = !showScroller">Toggle scroller</button>
+        <button @mousedown="showScroller = !showScroller">Toggle scroller</button>
       </span>
     </div>
     <div class="content" v-if="showScroller">
-      <virtual-scroller class="scroller" :items="items" :renderers="renderers" item-height="42" type-field="type" key-field="index"></virtual-scroller>
+      <div class="wrapper">
+        <virtual-scroller class="scroller" :items="items" :renderers="renderers" item-height="42" type-field="type" key-field="index" main-tag="section" content-tag="table"></virtual-scroller>
+      </div>
     </div>
   </div>
 </template>
@@ -130,22 +132,26 @@ body {
   position: relative;
 }
 
-.scroller {
-  overflow: auto;
+.wrapper {
+  overflow: hidden;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 }
 
+.scroller {
+  width: 100%;
+  height: 100%;
+}
+
 .item-container {
   box-sizing: border-box;
 }
 
 .item {
   height: 42px;
-  padding: 12px;
   box-sizing: border-box;
   cursor: pointer;
   user-select: none;
@@ -165,9 +171,16 @@ body {
 }
 
 .index {
-  display: inline-block;
   color: rgba(0, 0, 0, 0.2);
   width: 55px;
   text-align: right;
 }
+
+table {
+  border-collapse: collapse;
+}
+
+td {
+  padding: 12px;
+}
 </style>

docs-src/src/App.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="person" @click="edit"><span class="index">{{item.index}}</span> {{item.value.name}}</div>
+  <tr class="person" @click="edit">
+    <td class="index">
+      {{item.index}}
+    </td>
+    <td>
+      {{item.value.name}}
+    </td>
+  </tr>
 </template>
 
 <script>

docs-src/src/Item.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="letter"><span class="index">{{item.index}}</span> {{item.value}}</div>
+  <tr class="letter">
+    <td class="index">
+      {{item.index}}
+    </td>
+    <td>
+      {{item.value}}
+    </td>
+  </tr>
 </template>
 
 <script>

docs-src/src/Letter.vue

@@ -1,7 +1,7 @@
 {
   "name": "vue-virtual-scroller",
   "description": "Smooth scrolling for any amount of data",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": {
     "name": "Guillaume Chau",
     "email": "[email protected]"

docs/build.js

@@ -1,13 +1,12 @@
 <template>
-  <div class="virtual-scroller" @scroll="updateVisibleItems">
-    <div class="item-container" :style="itemContainerStyle">
-      <div class="items">
+  <component :is="mainTag" class="virtual-scroller" @scroll="updateVisibleItems">
+    <component :is="containerTag" class="item-container" :style="itemContainerStyle">
+      <component :is="contentTag" class="items" :style="itemsStyle">
         <component class="item" v-for="item in visibleItems" :key="item[keyField]" :is="renderers[item[typeField]]" :item="item"></component>
-      </div>
-    </div>
-
+      </component>
+    </component>
     <resize-observer @notify="updateVisibleItems" />
-  </div>
+  </component>
 </template>
 
 <script>
@@ -40,11 +39,24 @@ export default {
       type: String,
       default: 'id',
     },
+    mainTag: {
+      type: String,
+      default: 'div',
+    },
+    containerTag: {
+      type: String,
+      default: 'div',
+    },
+    contentTag: {
+      type: String,
+      default: 'div',
+    },
   },
 
   data: () => ({
     visibleItems: [],
     itemContainerStyle: null,
+    itemsStyle: null,
   }),
 
   watch: {
@@ -74,7 +86,9 @@ export default {
       this.visibleItems = this.items.slice(startIndex, endIndex)
       this.itemContainerStyle = {
         height: l * this.itemHeight + 'px',
-        paddingTop: startIndex * this.itemHeight + 'px',
+      }
+      this.itemsStyle = {
+        marginTop: startIndex * this.itemHeight + 'px',
       }
       this.$forceUpdate()
     },
@@ -97,5 +111,11 @@ export default {
 
 .item-container {
   box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+}
+
+.items {
+  width: 100%;
 }
 </style>