-
Notifications
You must be signed in to change notification settings - Fork 24
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Possible implementation of a virtual list ? #84
Comments
Could you try something like this? <script lang="ts">
import VirtualList from 'svelte-tiny-virtual-list';
import {createTable} from 'svelte-headless-table';
const table = createTable();
const columns = table.createColumns(...);
const {rows} = table.createViewModel(columns);
</script>
<table>
<thead>...</thead>
<!-- use the virtual list component as `tbody` -->
<!-- we can PR `asChild` or `as` support for `svelte-tiny-virtual-list` -->
<VirtualList
width="100%"
height={600}
itemCount={$rows.length}
itemSize={50}>
<svelte:fragment slot="item" let:index let:style>
{@const row = $rows[index]}
<Subscribe rowAttrs={row.attrs()}>
<tr {style} {...rowAttrs}>
{#each row.cells as cell (cell.id)}
<Subscribe attrs={cell.attrs()} let:attrs>
<td {...attrs}>
<Render of={cell.render()} />
</td>
</Subscribe>
{/each}
</tr>
</Subscribe>
</svelte:fragment>
</VirtualList>
</table> |
@FluffyDiscord Full disclaimer, I've never used <script lang="ts">
import VirtualList from 'svelte-tiny-virtual-list';
import {createTable} from 'svelte-headless-table';
const table = createTable();
const columns = table.createColumns(...);
const {rows} = table.createViewModel(columns);
</script>
<!-- use the virtual list component as `table` -->
<!-- we can PR `asChild` or `as` support for `svelte-tiny-virtual-list` -->
<VirtualList
width="100%"
height={600}
itemCount={$rows.length}
itemSize={50}>
<thead slot="header">...</thead>
<svelte:fragment slot="item" let:index let:style>
{@const row = $rows[index]}
<Subscribe rowAttrs={row.attrs()}>
<tr {style} {...rowAttrs}>
{#each row.cells as cell (cell.id)}
<Subscribe attrs={cell.attrs()} let:attrs>
<td {...attrs}>
<Render of={cell.render()} />
</td>
</Subscribe>
{/each}
</tr>
</Subscribe>
</svelte:fragment>
</VirtualList> |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Hi,
I am aware that we already have pagination plugin in place which works great, but would it be possible to add an "infinite virtual list" pagination plugin ?
The idea would be to limit the table height and specify (or auto-calculate if reasonable) how many items will be shown/rendered and the rendered offset would be managed by scroll, eg. infinite virtual scroll.
Maybe this would be possible to "plug-in" ? https://github.com/Skayo/svelte-tiny-virtual-list
The text was updated successfully, but these errors were encountered: