A Svelte component for integrating AG Grid with Svelte 5
npm install ag-grid-svelte5A Svelte component for integrating AG Grid with Svelte 5
``bash`
npm i ag-grid-svelte5
pnpm i ag-grid-svelte5
bun install ag-grid-svelte5
yarn install ag-grid-svelte5
1. Main Features
2. How this Library Works
1. Overview
2. Custom Cells
3. Examples
1. Standard
2. Custom Cell
3. Custom Theme
4. General and Contact
- Create custom cells with Svelte components 🚀
- Create various themes that will auto-update when changed 🎟
- Fully Svelte 5 Compatible 💨
- Please visit the GitHub for demo usage 💡
This library creates a Svelte component based on the Javascript version of AG Grid. The svelte component contains a div component where the grid is placed and has an internal reference to the grid api returned from ag grids createGrid function. To render the grid inside this svelte component overrides are required to tell the grid we are using a framework to render the grid.
AG Grid provides 2 main ways to render a custom cell.
1. A function which the gui element (e.g. a div containing your cell data)
2. A class that implements ICellRendererComp
The first instance only returns a gui element which will not work to render our custom svelte component and its required props.
The second instance is what this library uses. This library exports the class AgGridSvelteRendererComp which implements AG Grids ICellRendererComp. This class contains the methods required to render the svelte component, pass the required parameters, and cleanup the component once its deleted. The main functions are init to setup the parameters and render which simply calls Svelte's mount function to mount/render the component.
Because a component cannot be passed in as a generic type to a class. A 'hack' is used to carry some of the weight in cellRendererParams which includes the component instance and the props to be passed.
I would strongly advise looking into the documentation for AG Grid particulary around custom components if this is something you are interested in. There are many cases where the generic AgGridSvelteRendererComp may not meet your needs, so it may be recommened to create your own class that implements ICellRendererComp. E.g. a different refresh function which only refreshes the cell when x value changes.
`svelte
`
#### Main Svelte Component
`
rowData={rowDataTwo}
theme={selectedTheme}
{modules}
/>
`
`
$3
onclick={() => (selectedTheme = selectedTheme === themeOne ? themeTwo : themeOne)}
>Change Theme >
rowData={rowDataTwo}
theme={selectedTheme} // Changes when selectedTheme updates!
{modules}
/>
If you have any suggestions/feedback it would be greatly appreciated. Please visit the GitHub to raise any issues or possible changes!
If you would like to contact me. Here is my website: https://www.john-maher.dev with contact information.