svelte-virtual-table-by-tanin

Svelte Virtual Table
=======================

A virtual table component for Svelte. It only renders the data that is visible on screen. This means you can scroll
through millions of rows without any perf issue.

This is possibly the only virtual list that can handle the scrollable height larger than 16,777,200 pixels, which is
the Google Chrome's limit for a div's height and padding. Other virtual lists would break down due to this limit. 16M
in pixels isn't as high as we think. 1,000,000 rows whose row height is 20px (~1 line) is already 20,000,000px in height.

Here are the improvements:

1. Support as many rows as your browser's memory allows.
2. Support variable height for each row.
3. Support optional sticky top rows and sticky left columns.
4. Support the detection of reaching the bottom. This is useful for supporting a load-more mechanism.
5. Support wider rows with a horizontal scrollbar.
6. Support saving the scroll positions on both axes in the case where you want to restore the previous scroll positions.
7. Support row index.

The caveats:
You must provide the exact height of every row and the exact width of every* column. This can be easily done using canvas and measureText.
* The row height can be changed but needs a full refresh.
* The row height and column width should be whole numbers. In the case of >500,000 rows, we've encountered a rendering issue if the numbers aren't whole.

The test page generates 20,000,000 rows with a single column. The scrolling is smooth on Mac M4.

This package is inspired by https://github.com/sveltejs/svelte-virtual-list (@sveltejs/svelte-virtual-list). It was
initially built for Backdoor, A Postgres Data Querying and Editing Tool that you can embed into your JVM app.

Installation
-------------

npm install svelte-virtual-table-by-tanin

Usage
------

You can see several examples in the test folder, ./test. The gallery is in ./test/App.svelte.

``sveltehtml


  Indices: {startIndex} - {endIndex}, total: {items.length}

      let:item
    let:index
    bind:startIndex
    bind:endIndex
    items={items}
    initialScrollLeft={scrollLeft}
    initialScrollTop={scrollTop}
    onBottomReached={() => {
      console.log("onBottomReached")
    }}
    onScrolled={(scrollLeft_, scrollTop_) => {
      scrollLeft = scrollLeft_;
      scrollTop = scrollTop_;
    }}
  >
    
      {#each columns as column, index (index)}
        {column.name}

      {/each}
    

    
      {#each columns as column, colIndex (colIndex)}
        
          {item.values[colIndex]}
        

      {/each}

Development ------------

1. Run npm install2. Runnpm run rollup and visit ./test/index-rollup.html4. Runnpm run webpack and visit ./test/index-webpack.html` to test webpack.

Test
-----

1. Scrolling up to the top and seeing the first row
2. Scrolling down to the bottom and see the last row.
3. Drag the scrollbar thumb to the bottommost. We should not see it flicker.