📄 tanstack/virtual/latest/docs/framework/svelte/examples/dynamic

=================================================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

src
- App.svelte
- ColumnVirtualizerDynamic.svelte
- GridVirtualizerDynamic.svelte
- RowVirtualizerDynamic.svelte
- RowVirtualizerDynamicWindow.svelte
- app.css
- main.ts
- vite-env.d.ts
.gitignore
README.md
index.html
package.json
svelte.config.js
tsconfig.json
tsconfig.node.json
vite.config.ts

svelte

<script lang="ts">
  import RowVirtualizerDynamic from './RowVirtualizerDynamic.svelte'
  import RowVirtualizerDynamicWindow from './RowVirtualizerDynamicWindow.svelte'
  import ColumnVirtualizerDynamic from './ColumnVirtualizerDynamic.svelte'
  import GridVirtualizerDynamic from './GridVirtualizerDynamic.svelte'

  const pathname = window.location.pathname
</script>

<main>
  <p>
    These components are using <strong>dynamic</strong> sizes. This means that each
    element's exact dimensions are unknown when rendered. An estimated dimension
    is used as the initial measurement, then this measurement is readjusted on the
    fly as each element is rendered.
  </p>
  <nav>
    <ul>
      <li>
        <a href="/">List</a>
      </li>
      <li>
        <a href="/window-list">List - window as scroller</a>
      </li>
      <li>
        <a href="/columns">Column</a>
      </li>
      <li>
        <a href="/grid">Grid</a>
      </li>
    </ul>
  </nav>
  {#if pathname === '/'}
    <RowVirtualizerDynamic />
  {:else if pathname === '/window-list'}
    <RowVirtualizerDynamicWindow />
  {:else if pathname === '/columns'}
    <ColumnVirtualizerDynamic />
  {:else if pathname === '/grid'}
    <GridVirtualizerDynamic />
  {:else}
    <p>Not Found</p>
  {/if}
</main>


<script lang="ts">
  import RowVirtualizerDynamic from './RowVirtualizerDynamic.svelte'
  import RowVirtualizerDynamicWindow from './RowVirtualizerDynamicWindow.svelte'
  import ColumnVirtualizerDynamic from './ColumnVirtualizerDynamic.svelte'
  import GridVirtualizerDynamic from './GridVirtualizerDynamic.svelte'

  const pathname = window.location.pathname
</script>

<main>
  <p>
    These components are using <strong>dynamic</strong> sizes. This means that each
    element's exact dimensions are unknown when rendered. An estimated dimension
    is used as the initial measurement, then this measurement is readjusted on the
    fly as each element is rendered.
  </p>
  <nav>
    <ul>
      <li>
        <a href="/">List</a>
      </li>
      <li>
        <a href="/window-list">List - window as scroller</a>
      </li>
      <li>
        <a href="/columns">Column</a>
      </li>
      <li>
        <a href="/grid">Grid</a>
      </li>
    </ul>
  </nav>
  {#if pathname === '/'}
    <RowVirtualizerDynamic />
  {:else if pathname === '/window-list'}
    <RowVirtualizerDynamicWindow />
  {:else if pathname === '/columns'}
    <ColumnVirtualizerDynamic />
  {:else if pathname === '/grid'}
    <GridVirtualizerDynamic />
  {:else}
    <p>Not Found</p>
  {/if}
</main>

Variable

Sticky

Partners Become a Partner

scarf analytics