feat: new getKey prop (#256)

README.md

@@ -41,6 +41,16 @@ npm install vue-virtual-scroll-grid
 | `scrollBehavior`           | The behavior of `scrollTo`. Default value is `smooth`                             | `smooth` | `auto`                                         | Optional, a string to be `smooth` or `auto`, defaults to `smooth`   |
 | `scrollTo`                 | Scroll to a specific item by index                                                | `number`                                                       | Optional, an integer from 0 to the `length` prop - 1, defaults to 0 |
 | `tag`                      | The HTML tag used as container element. Default value is `div`                    | `string`                                                       | Optional, any valid HTML tag, defaults to `div`                     |
+| `getKey`                   | The `:key` used on each grid item. Auto-generated, but overwritable via function  | `(internalItem: InternalItem) => number \| string` <sup>1</sup>| Optional, any valid Function that returns a `string` or `number`    |
+
+<sup>1</sup>
+```ts
+interface InternalItem {
+  index: number;
+  value: unknown | undefined;
+  style?: { transform: string; gridArea: string };
+}
+```
 
 Example:
 

src/Grid.vue

@@ -17,7 +17,7 @@
 
     <template
       v-for="internalItem in buffer"
-      :key="keyPrefix + '.' + internalItem.index"
+      :key="getKey ? getKey(internalItem) : keyPrefix + '.' + internalItem.index"
     >
       <slot
         v-if="internalItem.value === undefined"
@@ -52,7 +52,7 @@ import {
   fromWindowScroll,
   useObservable,
 } from "./utilites";
-import { PageProvider, pipeline, ScrollAction } from "./pipeline";
+import { InternalItem, PageProvider, pipeline, ScrollAction } from "./pipeline";
 import { once } from "ramda";
 import { VueInstance } from "@vueuse/core";
 
@@ -112,6 +112,11 @@ export default defineComponent({
       required: false,
       default: "div",
     },
+    getKey: {
+      type: Function as PropType<(internalItem: InternalItem) => number | string>,
+      required: false,
+      default: undefined,
+    },
   },
   setup(props) {
     // template refs