Skip to content

Commit 2fa515f

Browse files
committed
Improve README
1 parent fc1ae70 commit 2fa515f

File tree

1 file changed

+11
-11
lines changed

1 file changed

+11
-11
lines changed

README.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ A sortable, virtual table for Svelte.
44
Example App is available here: [bernhardwebstudio.github.io/svelte-virtual-table/](https://bernhardwebstudio.github.io/svelte-virtual-table/).
55

66
- [Svelte: Virtual Table](#svelte-virtual-table)
7-
- [Installation](#installation)
8-
- [Useage](#useage)
9-
- [Styling](#styling)
10-
- [Development Notes](#development-notes)
11-
- [Inspiration/Compatibility](#inspirationcompatibility)
7+
- [Installation](#installation)
8+
- [Useage](#useage)
9+
- [Styling](#styling)
10+
- [Development Notes](#development-notes)
11+
- [Inspiration/Compatibility](#inspirationcompatibility)
1212

1313
## Installation
1414

@@ -37,7 +37,7 @@ import VirtualTable from 'svelte-virtual-table';
3737
and use it, for example like so:
3838

3939
```js
40-
let myItemsArray = [];
40+
let items = $state([]);
4141

4242
async function getData() {
4343
let dataItems = [];
@@ -53,15 +53,15 @@ async function getData() {
5353
const dataPromise = getData();
5454

5555
// TWO variables that can be bound to the VirtualTable
56-
let start; // the index of the first visible item
57-
let end; // the index of the last visible item
56+
let start = $state(0); // the index of the first visible item
57+
let end = $state(0); // the index of the last visible item
5858
```
5959

6060
```svelte
6161
{#await dataPromise}
6262
Loading...
6363
{:then}
64-
<VirtualTable items={myItemsArray} class="anyClassIWantToAdd" bind:start bind:end>
64+
<VirtualTable items={items} class="anyClassIWantToAdd" bind:start bind:end>
6565
{#snippet thead()}
6666
<tr>
6767
<th data-sort="title">Title</th>
@@ -71,7 +71,7 @@ let end; // the index of the last visible item
7171
<th data-sort="comments_count">Comments</th>
7272
</tr>
7373
{/snippet}
74-
{#snippet trow(item)}
74+
{#snippet trow(item, index)}
7575
<tr>
7676
<td>
7777
<a href={item.url} target="_blank">{item.title}</a>
@@ -91,7 +91,7 @@ let end; // the index of the last visible item
9191
Pay attention to the `role` attributes: those are highly recommended if you want to have the table behave as such also in accessibility contexts.
9292
While this is not necessarily needed for ordinary tables, this one is required to use `display: block` on the table element (see Development Notes](#development-notes)), which in turn makes these role attributes necessary, still.
9393

94-
You can find an example-app in the [GitHub Repo](https://github.com/BernhardWebstudio/svelte-virtual-table/tree/main/example-app).
94+
You can find an example-app in the [GitHub Repo](https://github.com/BernhardWebstudio/svelte-virtual-table/tree/main/src/routes).
9595

9696
## Styling
9797

0 commit comments

Comments
 (0)