4个版本
0.2.2 | 2022年9月25日 |
---|---|
0.2.1 | 2022年9月19日 |
0.2.0 | 2022年9月19日 |
0.1.0 | 2022年9月14日 |
#506 in WebAssembly
每月 630次下载
66KB
948 行
ag-grid-rs

Rust对AG Grid JavaScript表格库的绑定。
用法
ag-grid-rs旨在以令人惊讶的方式遵循AG Grid的API,通常使用构建器模式来构建Rust结构。
以下是一个使用Yew
前端框架的示例。
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 {
// Fire the hook just once on initial load
use_effect_with_deps(
|_| {
// Get the element to which you want to attach the grid
let grid_div = get_element_by_id("grid-div");
// Define your columns
let field_names = vec!["athlete", "age", "country", "year"];
let cols = field_names
.iter()
.map(|name| ColumnDef::new(name).sortable(true))
.collect();
// Create your datasource, including a closure that will retunr rows from the
// server
let data_source = DataSourceBuilder::new(|params| async move {
// `params` contains information from AG Grid about which rows to get, how to
// sort the data, etc
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);
// `grid` now provides a handle to the grid and column APIs
|| ()
},
(),
);
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()
}
依赖项
~13MB
~243K SLoC