Added item key check in internal each loop

README.md

@@ -68,6 +68,16 @@ You can optimize initial display and scrolling when the height of items is known
 </VirtualList>
 ```
 
+## `itemKey`
+
+Allow the internal loop to use a specific key in your data, to help invalidate list items properly if the data changes.
+
+```html
+<VirtualList itemKey="number" items={things} let:item>
+  <p>{item.number}: {item.name}</p>
+</VirtualList>
+```
+
 
 ## Configuring webpack
 

VirtualList.svelte

@@ -5,6 +5,7 @@
 	export let items;
 	export let height = '100%';
 	export let itemHeight = undefined;
+	export let itemKey = undefined;
 
 	let foo;
 
@@ -132,6 +133,15 @@
 		rows = contents.getElementsByTagName('svelte-virtual-list-row');
 		mounted = true;
 	});
+
+	// Use a key from the item data if specified
+	function getKey(row) {
+		if (itemKey && row.data.hasOwnProperty(itemKey)) {
+			return row.data[itemKey];
+		}
+
+		return row.index;
+	}
 </script>
 
 <style>
@@ -161,7 +171,7 @@
 		bind:this={contents}
 		style="padding-top: {top}px; padding-bottom: {bottom}px;"
 	>
-		{#each visible as row (row.index)}
+		{#each visible as row (getKey(row))}
 			<svelte-virtual-list-row>
 				<slot item={row.data}>Missing template</slot>
 			</svelte-virtual-list-row>