From 77a75c2400b051f82aa904f681bef699f5ef3ab4 Mon Sep 17 00:00:00 2001
From: John Carmichael <john@johnine.org>
Date: Wed, 1 Sep 2021 13:59:07 +0100
Subject: [PATCH] header-inner-container slot

---
 README.md                 | 25 +++++++++++++++++++++++++
 src/VirtualCollection.vue |  1 +
 2 files changed, 26 insertions(+)

diff --git a/README.md b/README.md
index 5ba2b37..d1b6dca 100644
--- a/README.md
+++ b/README.md
@@ -344,6 +344,31 @@ The header slot allows you to simulate a full-page mode for the virtual-scroller
 </VirtualCollection>
 ```
 
+### header-inner-container
+The header-inner-container slot is injected into the `div.vue-virtual-collection-container` but appears before cells. Additionally this slot is not removed from the DOM on scroll unlike the cells.
+
+```html
+<VirtualCollection
+    :cellSizeAndPositionGetter="item => { return { width: item.width, height: item.height, x: item.x, y: item.y }}"
+    :collection="items.items"
+    :height="items.boxHeight"
+    :width="items.boxWidth"
+    :containerHeightSpacer="50"
+    v-on:scrolled-to-top="scrollTop"
+    v-on:scrolled-to-bottom="scrollBottom">
+
+  <template v-slot:header-inner-container>
+    <div class="filter-controls">
+        <!-- inject your component here -->
+    </div>
+  </template>
+  
+  <div slot="cell" slot-scope="props">
+      {{props.data}}
+  </div>
+</VirtualCollection>
+```
+
 ### cell
 ```html
 <div slot="cell" slot-scope="yourOwnScope">{{yourOwnScope.data.text}}</div>
diff --git a/src/VirtualCollection.vue b/src/VirtualCollection.vue
index d57823f..f887080 100644
--- a/src/VirtualCollection.vue
+++ b/src/VirtualCollection.vue
@@ -19,6 +19,7 @@
     <div class="vue-virtual-collection" :style="outerStyle" @scroll.passive="onScroll" ref="outer">
         <slot name="header"></slot>
         <div class="vue-virtual-collection-container" :style="containerStyle">
+            <slot name="header-inner-container"></slot>
             <div v-for="item in displayItems" class="cell-container" :key="item.key" :style="getComputedStyle(item)">
                 <slot name="cell" :data="item.data"></slot>
             </div>