ag-grid-svelte-5

A Svelte component for integrating AG Grid with Svelte 5

Installation

npm install ag-grid-svelte5

Main Processes

• Create grid options which will include the column defs and other information and event handlers (e.g row clicked)
• Create the row data seperate (outside grid options) and pass as a parameter to the ag grid component (this is for change detection)
• Optional: Can create a theme for different modes and pass that in (similar process to row data for change detection, e.g. a light and dark mode switch)
• Please visit the repo for a quick example

Example Usage

// Default Import
import AgGridSvlete5Component from 'ag-grid-svelte5';

interface Car {
	make: string;
	model: string;
	price: number;
	id: number;
}

let rowData: Car[] = $state([
	{ id: 1, make: 'Toyota', model: 'Celica', price: 35000 },
	{ id: 2, make: 'Ford', model: 'Mondeo', price: 32000 },
	{ id: 3, make: 'Porsche', model: 'Boxster', price: 72000 }
]);

let gridOptions: GridOptions<Car> = {
	columnDefs: [{ field: 'id' }, { field: 'make' }, { field: 'model' }, { field: 'price' }],
	// Important for reducing dom updates and improving performance
	getRowId: (params) => params.data.id.toString(),
	domLayout: 'autoHeight'
};

setInterval(() => {
	rowData = [
		{ id: 1, make: 'Ford', model: 'Mondeo', price: 32000 },
		{ id: 2, make: 'Toyota', model: 'Celica', price: 35000 },
		{ id: 3, make: 'Porsche', model: 'Boxster', price: rowData[2].price + 1 } // Example for change detection
	];
}, 200);

const modules: Module[] = [ClientSideRowModelModule];

// E.g. For dark and light mode themes
const theme = $derived(getThemeFromSomeState());
</script>

<div>
	<AgGridSvlete5Component {gridOptions} {rowData} {modules} {theme} />
</div>