AG-Grid wrapper component for Svelte 5 (runes) with support for Svelte components as cell renderers, reactive data updates, and enhanced performance
npm install ag-grid-svelte5-extendedDemo page: https://bn-l.github.io/ag-grid-svelte5-extended. The cell with the thermometer icon is a svelte component.
This builds on JohnMaher1/ag-grid-svelte5 with some additional features.
To use to use ag-grid with a framework you need to create an adaptor that follows this interface: IFrameworkOverrides. Ag-grid give no documentation on building a framework integration. This is the adaptor code for svelte 5: src/lib/SvelteFrameworkOverrides.svelte.ts
- Fully svelte 5
- Put any svelte component in a grid cell (see: cell renderers for context)
- Reactive data updates (based on $state, just update the data prop supplied to the table)
- Cell editing (nothing extra to do, will just work like updating the data).
- Reactive grid options.
Always provide a getRowId function in initialOptions for optimal performance
``bash`
npm install ag-grid-svelte5-extended
Component| Prop | Type | Required | Description |
|------|------|----------|-------------|
| initialOptions | GridOptions | Yes | Initial AG-Grid options |updateOptions
| | Omit | No | Options to update after initialization |rowData
| | T[] | No | Array of data to display |modules
| | Module[] | No | AG-Grid modules to include |gridClass
| | string | No | CSS class for grid (defaults to "ag-theme-quartz") |quickFilterText
| | string | No | Text for quick filtering |sizeColumnsToFit
| | boolean | No | Auto-size columns (default: true) |theme
| | GridTheme | No | AG-Grid theme object |
#### Usage
(See demo page source for more extended example)
`svelte
`
helper functionA utility function to create AG-Grid cell renderers from Svelte components. Takes a svelte component and optionally the class for the container div. It's given ICellRendererParams%20are%3A) as props (with the cell's value as the value prop)
`typescript`
function makeSvelteCellRenderer(
Component: Component
containerDivClass?: string
): ICellRenderer
#### Usage
(See demo page source for more extended example)
CustomBoldCell.svelte:
`svelte
{ value }
< script lang = "ts" >
import type { ICellRendererParams } from "@ag-grid-community/core";
let { value }: ICellRendererParams = $props();
`+page.svelte:
`svelte``