ag-grid-rs
Rust bindings for the AG Grid JavaScript table library.
Usage
ag-grid-rs aims to follow the API of AG Grid in an unsurprising way, and generally makes use of the builder pattern for constructing the Rust structures.
An example using the Yew
frontend framework is shown below.
use ag_grid_rs::{
gridoptions::{DataSourceBuilder, RowModelType},
ColumnDef, GridOptions, ToJsValue,
};
use gloo_net::http::Request;
use serde::Deserialize;
use wasm_bindgen::JsCast;
use web_sys::HtmlElement;
use yew::prelude::*;
#[function_component(About)]
pub fn about() -> Html {
use_effect_with_deps(
|_| {
let grid_div = get_element_by_id("grid-div");
let field_names = vec!["athlete", "age", "country", "year"];
let cols = field_names
.iter()
.map(|name| ColumnDef::new(name).sortable(true))
.collect();
let data_source = DataSourceBuilder::new(|params| async move {
let data_url = "https://www.ag-grid.com/example-assets/olympic-winners.json";
let rows = gloo_net::http::Request::get(data_url)
.send()
.await?
.json::<Vec<JsonData>>()
.await?;
Ok((rows, None))
})
.build();
let grid = GridOptions::<JsonData>::new()
.column_defs(cols)
.row_model_type(RowModelType::Infinite)
.datasource(data_source)
.build(grid_div);
|| ()
},
(),
);
html! {
<>
<div id="grid-div" class="ag-theme-alpine" style="height: 500px"/>
</>
}
}
#[derive(ToJsValue, Deserialize)]
struct JsonData {
athlete: String,
age: Option<usize>,
country: String,
year: usize,
}
fn get_element_by_id(id: &str) -> HtmlElement {
web_sys::window()
.expect("unable to get window object")
.document()
.expect("unable to get document object")
.get_element_by_id(id)
.expect("unable to find grid-div")
.dyn_into::<HtmlElement>()
.unwrap()
}