https://github.com/michaelkim/ag-grid-svelte

A Svelte wrapper for ag-grid
https://github.com/michaelkim/ag-grid-svelte

ag-grid svelte sveltekit

Last synced: about 15 hours ago
JSON representation

A Svelte wrapper for ag-grid

• Host: GitHub
• URL: https://github.com/michaelkim/ag-grid-svelte
• Owner: MichaelKim
• License: mit
• Created: 2022-07-20T07:12:57.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-12-06T13:52:51.000Z (12 months ago)
• Last Synced: 2024-04-14T13:31:49.619Z (7 months ago)
• Topics: ag-grid, svelte, sveltekit
• Language: Svelte
• Homepage: https://ag-grid-svelte.michael.kim/guide
• Size: 507 KB
• Stars: 41
• Watchers: 7
• Forks: 13
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [](https://ag-grid-svelte.michael.kim) ag-grid-svelte

[![NPM Version](https://img.shields.io/npm/v/ag-grid-svelte?color=40b3ff)](https://npmjs.org/package/ag-grid-svelte) [![license](https://img.shields.io/github/license/michaelkim/ag-grid-svelte)](LICENSE)

An unofficial Svelte wrapper for [AG Grid](http://www.ag-grid.com/). Tested with v28 to v30.

## Usage

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

```svelte

  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));

  }



  



  .ag-theme-alpine {

    --ag-background-color: #ddd;

  }

```

## Developing

This is a [SvelteKit](https://kit.svelte.dev) project, and contains both the ag-grid-svelte package and the [documentation website](https://ag-grid-svelte.michael.kim):

- The package is in `src/lib`

- The docs website is in `src/routes`

Install dependencies with `yarn`, then:

```bash

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](https://primer.style/octicons/).