@tomatrow/ag-grid-svelte

ag-grid bindings for svelte 5

installation

pnpm i -D @tomatrow/ag-grid-svelte

see it live

• minimal ag-grid example
• custom cell example
• todo example

basic usage

<script lang="ts">
    import { AgGridSvelte } from "@tomatrow/ag-grid-svelte"
    import { AllCommunityModule } from "ag-grid-community"
</script>

<AgGridSvelte
    style="height: 80vh"
    params={{ modules: [AllCommunityModule] }}
    options={{
        // Row Data: The data to be displayed.
        rowData: [
            { make: "Tesla", model: "Model Y", price: 64950, electric: true },
            { make: "Ford", model: "F-Series", price: 33850, electric: false },
            { make: "Toyota", model: "Corolla", price: 29600, electric: false }
        ],
        // Column Definitions: Defines the columns to be displayed.
        columnDefs: [{ field: "make" }, { field: "model" }, { field: "price" }, { field: "electric" }]
    }}
/>

advanced custom cell

<script lang="ts">
    import { AgGridSvelte, AgGridSvelteSnippetRendererComp } from "@tomatrow/ag-grid-svelte"
    import { type ICellRendererParams, AllCommunityModule } from "ag-grid-community"

    interface Coffeehouse {
        name: string
    }
</script>

<AgGridSvelte
    style="height: 80vh"
    params={{ modules: [AllCommunityModule] }}
    options={{
        rowData: [
            { name: "Vinaka Cafe" },
            { name: "The Cup Coffee" },
            { name: "Panikin Coffee & Tea" }
        ],
        columnDefs: [
            {
                field: "name",
                cellRenderer: AgGridSvelteSnippetRendererComp,
                cellRendererParams: (params: ICellRendererParams<Coffeehouse>) => ({
                    snippet: customTextCell,
                    ...params
                })
            }
        ]
    }}
/>

{#snippet customTextCell({ params: { data } }: { params: ICellRendererParams<Coffeehouse> })}
    <p>{data?.name}</p>
{/snippet}