Dioxus Componentsdioxus

Scroll this page to verify virtualized rendering with dynamic row heights.

Installation

Use the CLI command for the common path, or copy the component files manually.

Manual installation files

Copy the component source and CSS into your app. Import the shared theme CSS once near your app root.

use dioxus::prelude::*;
pub use dioxus_primitives::virtual_list::VirtualListProps;
use dioxus_primitives::{dioxus_attributes::attributes, merge_attributes};

/// Styled wrapper around the primitive `VirtualList`.
#[component]
pub fn VirtualList(props: VirtualListProps) -> Element {
    let base = attributes!(div {
        class: "dx-virtual-list-container"
    });
    let merged = merge_attributes(vec![base, props.attributes]);

    rsx! {
        dioxus_primitives::virtual_list::VirtualList {
            count: props.count,
            buffer: props.buffer,
            estimate_size: props.estimate_size,
            render_item: props.render_item,
            attributes: merged,
        }
    }
}

Usage notes

The VirtualList component virtualizes large lists by rendering only visible rows plus a buffer. It is useful for long, dynamic-height datasets where rendering every row at once would be expensive.

Component Structure

VirtualList {
    // Total number of items.
    count: 2000usize,
    // Render buffer (approximate row count) above and below viewport.
    buffer: 8usize,
    // Row renderer callback receives the absolute index.
    render_item: move |idx: usize| rsx! {
        article { key: "{idx}", "{rows[idx].title}" }
    },
}

Variants

Alternative examples for common configurations.

random_heights

Random heights variant - tests adaptive estimation with highly variable item sizes