[READ-ONLY] Mirror of https://github.com/probablykasper/k5kit. Utilities for TypeScript and Svelte
Remove row count selector
+3
-15
+3
-15
src/routes/+page.svelte
+3
-15
src/routes/+page.svelte
···
5
5
function generate_source_items(count: number) {
6
6
return Array.from({ length: count }, () => String(Math.random()).slice(2))
7
7
}
8
-
let source_items = generate_source_items(50_000)
8
+
let source_items = generate_source_items(500_000)
9
9
10
10
const virtual_grid = VirtualGrid.create(source_items, {
11
11
row_prepare(source_item, index) {
···
29
29
virtual_grid.set_columns(columns)
30
30
})
31
31
32
-
let item_count = $state(50_000)
33
-
$effect(() => {
34
-
source_items = generate_source_items(item_count)
35
-
virtual_grid.set_source_items(source_items)
36
-
})
37
-
38
32
const selection = new KSelection(source_items, {
39
33
scroll_to({ index }) {
40
34
virtual_grid.scroll_to_index(index)
···
50
44
</script>
51
45
52
46
<div class="h-screen max-h-screen gap-2 flex flex-col p-5">
53
-
<h1 class="text-3xl">Virtual grid</h1>
54
-
<div>
55
-
<select class="appearance-auto w-auto bg-gray-700" bind:value={item_count}>
56
-
{#each [50_000, 500_000] as size}
57
-
<option value={size}>{Intl.NumberFormat().format(size)} rows</option>
58
-
{/each}
59
-
</select>
60
-
</div>
47
+
<h1 class="text-3xl">Virtual grid with row selection</h1>
48
+
<p>{Intl.NumberFormat().format(500_000)} rows</p>
61
49
<!-- Virtual grid viewport -->
62
50
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
63
51
<div