An unofficial Svelte wrapper for AG Grid. Tested with v28 to v30.
Install with npm install ag-grid-svelte ag-grid-community
<script>
import AgGridSvelte from 'ag-grid-svelte';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
const columnDefs = [{ field: 'athlete' }, { field: 'gold' }, { field: 'age' }];
let rowData = [];
function onGridReady() {
fetch('/olympic-winners.json')
.then((resp) => resp.json())
.then((data) => (rowData = data));
}
</script>
<div style:height="500px" class="ag-theme-alpine">
<AgGridSvelte {rowData} {columnDefs} {onGridReady} />
</div>
<style>
.ag-theme-alpine {
--ag-background-color: #ddd;
}
</style>
This is a SvelteKit project, and contains both the ag-grid-svelte package and the documentation website:
- The package is in
src/lib
- The docs website is in
src/routes
Install dependencies with yarn
, then:
yarn dev # Run the docs locally
yarn build # Build the docs
yarn preview # View the built docs locally
yarn test # Run library tests
yarn package # Package the library
Icons are taken from Github's Octicons.