Framework Integration

Quick start

Leptos

Vanilla JS

Dioxus

Yew

rs-grid-leptos provides a <GridCanvas> component for Leptos CSR applications. It wraps the WASM runtime, canvas lifecycle, event handling, and theming in a single component.

<GridCanvas
    rows=1_000_000_u64
    cols=50_usize
    row_height=32.0_f64     // optional, default 32px
    header_height=40.0_f64  // optional, default 40px
/>

rs-grid can be used without any framework via the JsGrid class exported by rs-grid-web. Build with wasm-pack:

cd crates/rs-grid-web
wasm-pack build --target web

This produces an ES module in pkg/:

rs_grid_web.js — the JS glue
rs_grid_web_bg.wasm — the WASM binary

rs-grid-dioxus provides a GridCanvas component for Dioxus CSR applications. It wraps the WASM runtime, canvas lifecycle, event handling, and theming in a single component.

rsx! {
    GridCanvas {
        model: ModelSlot::new(model),
        width: "100%",
        height: "600px",
    }
}

rs-grid-yew provides a GridCanvas function component for Yew CSR applications. It wraps the WASM runtime, canvas lifecycle, event handling, and theming in a single component.

use rs_grid_yew::{GridCanvas, wrap_model};

let model = wrap_model(my_model);
html! {
    <GridCanvas model={model}
        width="100%" height="600px" />
}

Component API

Leptos

Vanilla JS

Dioxus

Yew

Props

Prop	Type	Default	Description
`rows`	`u64`	required	Total number of data rows
`cols`	`usize`	required	Total number of columns
`row_height`	`f64`	`32.0`	Height of each data row in CSS pixels
`header_height`	`f64`	`40.0`	Height of the column header row

JsGrid API

Method	Description
`new JsGrid(canvas, rows, cols)`	Mount a grid on a canvas element
`detach()`	Unmount and clean up event listeners
`export_patches()`	Export edited cell values as versioned TSV — see Persisting edits
`import_patches(tsv)`	Import TSV patches into the grid — see Persisting edits

Props

Prop	Type	Default	Description
`model`	`ModelSlot`	required	Grid model wrapped in `ModelSlot::new()`
`width`	`String`	`"100%"`	CSS width
`height`	`String`	`"600px"`	CSS height
`theme`	`Option<Signal<Theme>>`	`None`	Optional reactive theme signal
`locale`	`Option<Signal<Locale>>`	`None`	Optional reactive locale signal
`on_mount`	`EventHandler<WebGridCanvas>`	no-op	Called after mount with the grid handle
`on_validation_error`	`EventHandler<(u64, String, String)>`	no-op	Validation error callback

Props

Prop	Type	Default	Description
`model`	`Rc<RefCell<Option<GridModel>>>`	required	Grid model wrapped via `wrap_model()`
`width`	`AttrValue`	`"100%"`	CSS width
`height`	`AttrValue`	`"600px"`	CSS height
`theme`	`Option<Theme>`	`None`	Optional theme
`locale`	`Option<Locale>`	`None`	Optional locale
`on_mount`	`Option<Callback<WebGridCanvas>>`	`None`	Called after mount with the grid handle
`on_validation_error`	`Option<ValidationErrorCb>`	`None`	Validation error callback

Theming

Leptos

Vanilla JS

Dioxus

Yew

The component reads its color palette from CSS custom properties at mount time via rs-grid-web::theme_from_css_vars. Define the variables in your stylesheet:

rs-grid-theme.css

:root {
  --rs-grid-bg:               #0d1117;
  --rs-grid-header-bg:        #161b22;
  --rs-grid-border:           #30363d;
  --rs-grid-text:             #c9d1d9;
  --rs-grid-selection-bg:     rgba(56, 139, 253, 0.15);
  --rs-grid-selection-border: #388bfd;
}

Include the file via your Trunk.toml or a <link> tag in index.html.

JsGrid reads CSS variables at mount time, just like the Leptos integration. Add --rs-grid-* variables to your stylesheet:

:root {
  --rs-grid-bg: #1e1e2e;
  --rs-grid-cell-text: #cdd6f4;
  /* ... */
}

See CSS Variables Reference for the full list.

The component reads its color palette from CSS custom properties at mount time via theme_from_css_vars. Same CSS variables as Leptos — define them in your stylesheet:

rs-grid-theme.css

:root {
  --rs-grid-bg:               #0d1117;
  --rs-grid-header-bg:        #161b22;
  --rs-grid-border:           #30363d;
  --rs-grid-text:             #c9d1d9;
  --rs-grid-selection-bg:     rgba(56, 139, 253, 0.15);
  --rs-grid-selection-border: #388bfd;
}

Include the file via your Trunk.toml or a <link> tag in index.html.

The component reads its color palette from CSS custom properties at mount time via theme_from_css_vars. Same CSS variables as Leptos — define them in your stylesheet:

rs-grid-theme.css

:root {
  --rs-grid-bg:               #0d1117;
  --rs-grid-header-bg:        #161b22;
  --rs-grid-border:           #30363d;
  --rs-grid-text:             #c9d1d9;
  --rs-grid-selection-bg:     rgba(56, 139, 253, 0.15);
  --rs-grid-selection-border: #388bfd;
}

Include the file via your Trunk.toml or a <link> tag in index.html.

Events

Leptos

Vanilla JS

Dioxus

Yew

The Leptos component attaches pointer and wheel listeners to the canvas:

Browser event	GridCommand
`pointerdown`	`SelectCell` / `SelectRow` / `SelectColumn`
`pointerdown` + Shift	`ExtendSelection`
`wheel`	`ScrollTo`
`ResizeObserver`	`Resize`

Events are translated to GridCommand values and applied on the next animation frame. You do not need to manage the event loop manually.

The Dioxus component mounts the grid via rs-grid-web, which attaches pointer, wheel, and resize listeners automatically:

Browser event	GridCommand
`pointerdown`	`SelectCell` / `SelectRow` / `SelectColumn`
`pointerdown` + Shift	`ExtendSelection`
`wheel`	`ScrollTo`
`ResizeObserver`	`Resize`

Events are translated to GridCommand values and applied on the next animation frame. You do not need to manage the event loop manually.

The Yew component mounts the grid via rs-grid-web, which attaches pointer, wheel, and resize listeners automatically:

Browser event	GridCommand
`pointerdown`	`SelectCell` / `SelectRow` / `SelectColumn`
`pointerdown` + Shift	`ExtendSelection`
`wheel`	`ScrollTo`
`ResizeObserver`	`Resize`

Events are translated to GridCommand values and applied on the next animation frame. You do not need to manage the event loop manually.

Full example

Leptos

Vanilla JS

Dioxus

Yew

src/main.rs

use leptos::*;
use rs_grid_leptos::GridCanvas;

#[component]
pub fn App() -> impl IntoView {
    view! {
        <main style="width: 100vw; height: 100vh;">
            <GridCanvas
                rows=500_000_u64
                cols=20_usize
            />
        </main>
    }
}

fn main() {
    leptos::mount_to_body(App);
}

Tip

The reference theme file is at examples/basic-leptos/rs-grid-theme.css. Copy it as a starting point for your own theme.

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas { width: 100%; height: 600px; }
  </style>
</head>
<body>
  <canvas id="grid"></canvas>
  <script type="module">
    import init, { JsGrid } from './pkg/rs_grid_web.js';

    await init();

    const canvas = document.getElementById('grid');
    const grid = new JsGrid(canvas, 1000, 10);
    // Grid is now live with 1000 rows × 10 columns
  </script>
</body>
</html>

src/main.rs

use dioxus::prelude::*;
use rs_grid_dioxus::{GridCanvas, ModelSlot};
use rs_grid_core::model::GridModel;

fn App() -> Element {
    let model = use_hook(|| {
        ModelSlot::new(GridModel::new(500_000, 20))
    });
    rsx! {
        main { style: "width:100vw;height:100vh;",
            GridCanvas { model: model.clone() }
        }
    }
}

fn main() {
    dioxus::launch(App);
}

Tip

The reference theme file is at examples/basic-leptos/rs-grid-theme.css. Copy it as a starting point for your own theme.

src/main.rs

use yew::prelude::*;
use rs_grid_yew::{GridCanvas, wrap_model};
use rs_grid_core::model::GridModel;

#[function_component]
fn App() -> Html {
    let model = wrap_model(GridModel::new(500_000, 20));
    html! {
        <main style="width:100vw;height:100vh;">
            <GridCanvas model={model} />
        </main>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

Tip

The reference theme file is at examples/basic-leptos/rs-grid-theme.css. Copy it as a starting point for your own theme.

Limitations

Leptos

Vanilla JS

Dioxus

Yew

rs-grid-leptos is CSR-only — SSR is not supported
The component expects to be rendered in a browser environment with <canvas> support

Column definitions use default labels (Column 0, Column 1, etc.)
Data is generated with a hash function (demo mode)
For full control over columns and data, use the Rust API directly

Note

The vanilla JS API is a lightweight entry point for demos and simple use cases. For production applications with custom data sources and column definitions, use the Leptos integration or build a custom integration on top of rs-grid-web.

Framework Integration#

#Quick start

#Component API

#Props

#Theming

#Events

#Full example

#Limitations

Framework Integration

Quick start

Component API

Props

Theming

Events

Full example

Limitations