{"id":13807383,"url":"https://github.com/mfreeborn/ag-grid-rs","last_synced_at":"2025-05-14T00:31:27.523Z","repository":{"id":59318346,"uuid":"536539920","full_name":"mfreeborn/ag-grid-rs","owner":"mfreeborn","description":"Rust bindings for AG Grid","archived":false,"fork":false,"pushed_at":"2023-03-31T14:51:06.000Z","size":680,"stargazers_count":15,"open_issues_count":4,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-04T07:03:04.146Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mfreeborn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE-APACHE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":["mfreeborn"]}},"created_at":"2022-09-14T11:10:00.000Z","updated_at":"2024-09-02T07:15:34.000Z","dependencies_parsed_at":"2024-04-10T04:38:16.683Z","dependency_job_id":"3d21e69f-ca3c-47dd-929e-2f5210268ca5","html_url":"https://github.com/mfreeborn/ag-grid-rs","commit_stats":{"total_commits":30,"total_committers":2,"mean_commits":15.0,"dds":0.4666666666666667,"last_synced_commit":"02ae2d856483e61801912efb3c88599f8cddee7a"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfreeborn%2Fag-grid-rs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfreeborn%2Fag-grid-rs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfreeborn%2Fag-grid-rs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfreeborn%2Fag-grid-rs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfreeborn","download_url":"https://codeload.github.com/mfreeborn/ag-grid-rs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254046304,"owners_count":22005571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:24.919Z","updated_at":"2025-05-14T00:31:22.508Z","avatar_url":"https://github.com/mfreeborn.png","language":"Rust","funding_links":["https://github.com/sponsors/mfreeborn"],"categories":["Crates"],"sub_categories":["Javascript Library Ports"],"readme":"# ag-grid-rs \u0026emsp; [![Build Status]][actions] [![Latest Version]][crates.io] [![Downloads]][crates.io] [![Docs]][docs.rs]\n\n[Build Status]: https://img.shields.io/github/workflow/status/mfreeborn/ag-grid-rs/CI/main\n[actions]: https://github.com/mfreeborn/ag-grid-rs/actions?query=branch%3Amain\n[Latest Version]: https://img.shields.io/crates/v/ag-grid-rs.svg\n[Downloads]: https://img.shields.io/crates/d/ag-grid-rs.svg\n[crates.io]: https://crates.io/crates/ag-grid-rs\n[Docs]: https://img.shields.io/badge/docs-latest-blue.svg\n[docs.rs]: https://docs.rs/ag-grid-rs/latest/ag_grid_rs\n\nRust bindings for the [AG Grid](https://www.ag-grid.com/) JavaScript table library.\n\n## Usage\n\nag-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.\n\nStandalone examples can be found in the [examples/](https://github.com/mfreeborn/ag-grid-rs/tree/main/examples) directory, and a basic example using the `Yew` frontend framework is shown below.\n\nFirst, make sure you have the JavaScript AG Grid library available to the web page by including a CDN link in your base HTML page:\n\n```html\n// index.html\n\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003c!-- snip --\u003e\n        \u003cscript src=\"https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n    \u003c!-- snip --\u003e\n\u003c/html\u003e\n```\n\nThen, in your application:\n\n```rust\nuse ag_grid_rs::{\n    gridoptions::{DataSourceBuilder, RowModelType},\n    ColumnDef, GridOptions, ToJsValue, \n};\nuse gloo_net::http::Request;\nuse serde::Deserialize;\nuse wasm_bindgen::JsCast;\nuse web_sys::HtmlElement;\nuse yew::prelude::*;\n\n#[function_component(Table)]\npub fn table() -\u003e Html {\n    // Fire the hook just once on initial load\n    use_effect_with_deps(\n        |_| {\n            // Get the element to which you want to attach the grid\n            let grid_div = get_element_by_id(\"grid-div\");\n            // Define your columns\n            let field_names = vec![\"athlete\", \"age\", \"country\", \"year\"];\n            let cols = field_names\n                .iter()\n                .map(|name| ColumnDef::new().field(name).sortable(true))\n                .collect();\n\n            // Create your datasource, including a closure that will return rows from the\n            // server\n            let data_source = DataSourceBuilder::new(|params| async move {\n                // `params` contains information from AG Grid about which rows to get, how to\n                // sort the data, etc\n                let data_url = \"https://www.ag-grid.com/example-assets/olympic-winners.json\";\n                let rows = Request::get(data_url)\n                    .send()\n                    .await?\n                    .json::\u003cVec\u003cJsonData\u003e\u003e()\n                    .await?;\n\n                Ok((rows, None))\n            })\n            .build();\n\n            let grid = GridOptions::\u003cJsonData\u003e::new()\n                .column_defs(cols)\n                .row_model_type(RowModelType::Infinite)\n                .datasource(data_source)\n                .build(grid_div);\n\n            // `grid` now provides a handle to the grid and column APIs\n            || ()\n        },\n        (),\n    );\n\n    html! {\n        \u003c\u003e\n            \u003cdiv id=\"grid-div\" class=\"ag-theme-alpine\" style=\"height: 500px\"/\u003e\n        \u003c/\u003e\n    }\n}\n\n#[derive(ToJsValue, Deserialize)]\nstruct JsonData {\n    athlete: String,\n    age: Option\u003cusize\u003e,\n    country: String,\n    year: usize,\n}\n\nfn get_element_by_id(id: \u0026str) -\u003e HtmlElement {\n    web_sys::window()\n        .expect(\"unable to get window object\")\n        .document()\n        .expect(\"unable to get document object\")\n        .get_element_by_id(id)\n        .expect(\"unable to find grid-div\")\n        .dyn_into::\u003cHtmlElement\u003e()\n        .unwrap()\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfreeborn%2Fag-grid-rs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfreeborn%2Fag-grid-rs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfreeborn%2Fag-grid-rs/lists"}