ag-grid-svelte

An unofficial Svelte wrapper for AG Grid. Tested with v28 to v30.

Usage

Install with npm install ag-grid-svelte ag-grid-community

<script>
  import AgGridSvelte from 'ag-grid-svelte';
  import 'ag-grid-community/styles/ag-grid.css';
  import 'ag-grid-community/styles/ag-theme-alpine.css';

  const columnDefs = [{ field: 'athlete' }, { field: 'gold' }, { field: 'age' }];

  let rowData = [];
  function onGridReady() {
    fetch('/olympic-winners.json')
      .then((resp) => resp.json())
      .then((data) => (rowData = data));
  }
</script>

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

<style>
  .ag-theme-alpine {
    --ag-background-color: #ddd;
  }
</style>

Developing

This is a SvelteKit project, and contains both the ag-grid-svelte package and the documentation website:

• The package is in src/lib
• The docs website is in src/routes

Install dependencies with yarn, then:

yarn dev      # Run the docs locally
yarn build    # Build the docs
yarn preview  # View the built docs locally

yarn test     # Run library tests
yarn package  # Package the library

Icons are taken from Github's Octicons.