Svelte AG Grid - Overview

Getting Started

AG Grid Svelte is designed to provide a seamless AG Grid integration to any Svelte project.

> npm install ag-grid-svelte ag-grid-community

Usage

All grid options are available as props to <AGGridSvelte/> and leverages Svelte's reactivity to update on changes.

Check out the official AG Grid docs for further documentation on AG Grid functionality as most of the features are shared with the official packages.

Theming

Before loading the grid, import the relevant CSS files:

import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS, always needed
import 'ag-grid-community/styles/ag-theme-alpine.css'; // Optional theme CSS

Then, apply the chosen theme by adding the corresponding class to the parent container:

<div class="ag-theme-alpine" style:width="500px" style:height="500px">
  <AGGridSvelte ... />
</div>

Accessing APIs

The Grid API and Column API objects can be accessed via prop bindings:

<script>
  let api, columnApi;

  const onClick = () => {
    api.deselectAll();
  };
</script>

<AGGridSvelte bind:api={api} bind:columnApi={columnApi} />

Alternatively, the onGridReady event will provide the APIs as well

<script>
  let api, columnApi;

  const onGridReady = (event) => {
    api = event.api;
    columnApi = event.columnApi;
  };
</script>

<AGGridSvelte {onGridReady} />

Styling

Since styles in Svelte are scoped to that component, make sure to apply styles globally so inner elements can pick up the theme.

<div style:height="500px" class="ag-theme-alpine">
  <AgGridSvelte {rowData} {columnDefs} {defaultColDef} {onGridReady} />
</div>

<style>
  :global(.ag-theme-alpine) {
    --ag-background-color: #ddd;
  }
  :global(.ag-theme-alpine .ag-header-cell-label) {
    font-style: italic;
  }
</style>

Enterprise

To use AG Grid Enterprise, import ag-grid-enterprise before any grid instance is created. Within Svelte, this can be done in a regular <script> tag or (preferably) a module script:

<script context="module">
  // Will get called only once when this module is loaded
  import 'ag-grid-enterprise';
</script>

You can set a license key in a similar way:

<script context="module">
  import { LicenseManager } from 'ag-grid-enterprise';

  LicenseManager.setLicenseKey("your license key");
</script>

For Vite / SvelteKit users, if you are getting a warning about the enterprise package missing, it may be due to Vite's dependency pre-bundling. Try clearing your Vite cache (run vite dev --force ) or adding ag-grid-svelte to optimize.include in your Vite config.

Version Compatibility

AG Grid Svelte requires Svelte 3, and has been tested with AG Grid 28 and 29.

However, when using TypeScript and AG Grid 29, there may be some type errors due to slight differences between v28 and v29. If you encounter a different issue, please raise an issue on the Github repo.