Scoped slots

Author: Akryum

README.md

@@ -105,10 +105,10 @@ Vue.component('virtual-scroller', VirtualScroller)
 
 # Usage
 
-The virtual scroller has three required props:
+The virtual scroller has three main props:
 
 - `items` is the list of items you want to display in the scroller. There can be several types of item.
-- `renderers` is a map of component definitions objects or names for each item type.
+- `renderers` is a map of component definitions objects or names for each item type. If you don't define `renderers`, the scroller will use *scoped slots* ([see below](#scoped_slots)).
 - `itemHeight` is the display height of the items in pixels used to calculate the scroll height and position.
 
 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.**
@@ -149,6 +149,32 @@ If you set `contentTag` to `'table'`, the actual result in the DOM will look lik
 
 > The browsers have a height limitation on DOM elements, it means that currently the virtual scroller can't display more than ~500k items depending on the browser.
 
+## Scoped slots
+
+Alternatively, you can use [scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots) instead of `renderers`. This is active when you don't define the `renderers` prop on the virtual scroller.
+
+The scope will contain the row's item in the `item` attribute, so you can write `scope="props"` and then use `props.item`.
+
+Here is an example:
+
+```html
+<virtual-scroller class="scroller" :items="items" item-height="42" content-tag="table">
+  <template scope="props">
+    <tr v-if="props.item.type === 'letter'" class="letter">
+      <td>
+        {{props.item.value}} Scoped
+      </td>
+    </tr>
+
+    <tr v-if="props.item.type === 'person'" class="person">
+      <td>
+        {{props.item.value.name}}
+      </td>
+    </tr>
+  </template>
+</virtual-scroller>
+```
+
 # Example
 
 ```html

dist/vue-virtual-scroller.js

@@ -12,11 +12,29 @@
       </span>
       <span>
         <button @mousedown="showScroller = !showScroller">Toggle scroller</button>
+        <label><input type="checkbox" v-model="scopedSlots" /> Scoped slots</label>
       </span>
     </div>
     <div class="content" v-if="showScroller">
       <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>
+        <!-- Scoped slots -->
+        <virtual-scroller v-if="scopedSlots" class="scroller" :items="items" item-height="42" main-tag="section" content-tag="table">
+          <template scope="props">
+            <!-- <letter v-if="props.item.type === 'letter'" :item="props.item"></letter>-->
+            <tr v-if="props.item.type === 'letter'" class="letter">
+              <td class="index">
+                {{props.item.index}}
+              </td>
+              <td>
+                {{props.item.value}} Scoped
+              </td>
+            </tr>
+            <item v-if="props.item.type === 'person'" :item="props.item"></item>
+          </template>
+        </virtual-scroller>
+
+        <!-- Renderers -->
+        <virtual-scroller v-else 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>
@@ -34,13 +52,19 @@ const renderers = {
 }
 
 export default {
+  components: {
+    Letter,
+    Item,
+  },
+
   data: () => ({
     items: [],
     renderers,
     count: 10000,
     generateTime: null,
     updateTime: null,
     showScroller: true,
+    scopedSlots: false,
   }),
 
   watch: {

docs-src/src/App.vue

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

docs/build.js

@@ -2,7 +2,12 @@
   <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>
+        <template v-if="renderers">
+          <component class="item" v-for="item in visibleItems" :key="item[keyField]" :is="renderers[item[typeField]]" :item="item"></component>
+        </template>
+        <template v-else>
+          <slot class="item" v-for="item in visibleItems" :item="item"></slot>
+        </template>
       </component>
     </component>
     <resize-observer @notify="updateVisibleItems" />
@@ -25,7 +30,7 @@ export default {
       required: true,
     },
     renderers: {
-      required: true,
+      default: null,
     },
     itemHeight: {
       type: [Number, String],