Skip to content

Commit ed3b592

Browse files
GenieTimGenieTim
committed
First implementation of upgrade to Svelte 5
1 parent 90e1bfa commit ed3b592

File tree

5 files changed

+1558
-1617
lines changed

5 files changed

+1558
-1617
lines changed

‎README.md

+58-63
Original file line numberDiff line numberDiff line change
@@ -31,67 +31,64 @@ npm install svelte-virtual-table
3131
You can then, after the installation, import it in your app:
3232

3333
```js
34-
import VirtualTable from 'svelte-virtual-table'
34+
import VirtualTable from 'svelte-virtual-table';
3535
```
3636

3737
and use it, for example like so:
3838

3939
```js
40-
let myItemsArray = []
40+
let myItemsArray = [];
4141

4242
async function getData() {
43-
let dataItems = []
44-
for (let page = 1; page < 5; page++) {
45-
let res = await fetch(
46-
`https://node-hnapi.herokuapp.com/news?page=${page}`
47-
)
48-
let data = await res.json()
49-
dataItems = dataItems.concat(data)
50-
}
51-
items = dataItems
52-
return items
43+
let dataItems = [];
44+
for (let page = 1; page < 5; page++) {
45+
let res = await fetch(`https://node-hnapi.herokuapp.com/news?page=${page}`);
46+
let data = await res.json();
47+
dataItems = dataItems.concat(data);
48+
}
49+
items = dataItems;
50+
return items;
5351
}
5452

55-
const dataPromise = getData()
53+
const dataPromise = getData();
5654

5755
// TWO variables that can be bound to the VirtualTable
58-
let start // the index of the first visible item
59-
let end // the index of the last visible item
56+
let start; // the index of the first visible item
57+
let end; // the index of the last visible item
6058
```
6159

6260
```svelte
6361
{#await dataPromise}
64-
Loading...
62+
Loading...
6563
{:then}
66-
<VirtualTable
67-
items={myItemsArray}
68-
class="anyClassIWantToAdd"
69-
bind:start
70-
bind:end
71-
>
72-
<tr slot="thead" role="row">
73-
<th data-sort="title">Title</th>
74-
<th data-sort="user">User</th>
75-
<th data-sort="domain">Domain</th>
76-
<th data-sort="time" data-sort-initial="descending">Time ago</th>
77-
<th data-sort="comments_count">Comments</th>
78-
</tr>
79-
<tr slot="tbody" role="row" let:item>
80-
<td>
81-
<a href={item.url} target="_blank">{item.title}</a>
82-
</td>
83-
<td>{item.user}</td>
84-
<td>{item.domain}</td>
85-
<td>{item.time_ago}</td>
86-
<td>{item.comments_count}</td>
87-
</tr>
88-
</VirtualTable>
64+
<VirtualTable items={myItemsArray} class="anyClassIWantToAdd" bind:start bind:end>
65+
{#snippet thead()}
66+
<tr>
67+
<th data-sort="title">Title</th>
68+
<th data-sort="user">User</th>
69+
<th data-sort="domain">Domain</th>
70+
<th data-sort="time" data-sort-initial="descending">Time ago</th>
71+
<th data-sort="comments_count">Comments</th>
72+
</tr>
73+
{/snippet}
74+
{#snippet trow(item)}
75+
<tr>
76+
<td>
77+
<a href={item.url} target="_blank">{item.title}</a>
78+
</td>
79+
<td>{item.user}</td>
80+
<td>{item.domain}</td>
81+
<td>{item.time_ago}</td>
82+
<td>{item.comments_count}</td>
83+
</tr>
84+
{/snippet}
85+
</VirtualTable>
8986
{:catch error}
90-
<p style="color: red">{error.message}</p>
87+
<p style="color: red">{error.message}</p>
9188
{/await}
9289
```
9390

94-
Pay attention to the `role` attributes: those are highly recommended if you want to have the table behave as such also in accessibility contexts.
91+
Pay attention to the `role` attributes: those are highly recommended if you want to have the table behave as such also in accessibility contexts.
9592
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.
9693

9794
You can find an example-app in the [GitHub Repo](https://github.com/BernhardWebstudio/svelte-virtual-table/tree/main/example-app).
@@ -113,26 +110,26 @@ As these are not block-type elements, the original intention to use padding as a
113110

114111
There are numerous workarounds, that were attempted:
115112

116-
- apply a border to `<tbody>`,
117-
- use `::before`- and `::after`-pseudo elements,
118-
- increase the height of `<tbody>`'s last- and first-child,
119-
- use `display: block` on `<table>` and `display: table` on `<tbody>, <tfoot>, <thead>`
120-
- or use `<tfoot>` and `<thead>` as the elements whose height is changed (and which are kept in the document, no matter if they even have content).
113+
- apply a border to `<tbody>`,
114+
- use `::before`- and `::after`-pseudo elements,
115+
- increase the height of `<tbody>`'s last- and first-child,
116+
- use `display: block` on `<table>` and `display: table` on `<tbody>, <tfoot>, <thead>`
117+
- or use `<tfoot>` and `<thead>` as the elements whose height is changed (and which are kept in the document, no matter if they even have content).
121118

122119
As an example, the pseudo-element approach would work e.g. like this:
123120

124121
```css
125122
tbody::before {
126-
box-sizing: border-box;
127-
content: ' ';
128-
display: block;
129-
height: var(--p-top);
123+
box-sizing: border-box;
124+
content: ' ';
125+
display: block;
126+
height: var(--p-top);
130127
}
131128
tbody::after {
132-
box-sizing: border-box;
133-
content: ' ';
134-
display: block;
135-
height: var(--p-bottom);
129+
box-sizing: border-box;
130+
content: ' ';
131+
display: block;
132+
height: var(--p-bottom);
136133
}
137134
```
138135

@@ -141,10 +138,10 @@ This is not the case when scrolling up.
141138

142139
Some observations related to this problem:
143140

144-
- scrollTop increases with the --p-top
145-
- changing --p-top and --p-bottom triggers a scroll event
146-
- scrolling up is not affected
147-
- unstopped scrolling starts after removing an item from viewport
141+
- scrollTop increases with the --p-top
142+
- changing --p-top and --p-bottom triggers a scroll event
143+
- scrolling up is not affected
144+
- unstopped scrolling starts after removing an item from viewport
148145

149146
The reason is with high probability, that the current calculations are incorrect. Refer to [this codepen](https://codepen.io/BernhardWebstudio/pen/NWggLyG) for some calculation-analysis possibilities.
150147

@@ -164,8 +161,6 @@ You can pass the prop `requireBorderCollapse` with a value that evaluates to tru
164161

165162
## Inspiration/Compatibility
166163

167-
- https://svelte.dev/repl/a138b0c8579b4fc8bdde842a9d922b1f?version=3.17.1
168-
- https://github.com/mattiash/svelte-tablesort
169-
- https://github.com/sveltejs/svelte-virtual-list
170-
171-
164+
- https://svelte.dev/repl/a138b0c8579b4fc8bdde842a9d922b1f?version=3.17.1
165+
- https://github.com/mattiash/svelte-tablesort
166+
- https://github.com/sveltejs/svelte-virtual-list

0 commit comments

Comments
 (0)