Svelte Integration

ZingGrid works with your development stack, including Svelte! In this guide, we'll walk you through how to add ZingGrid to your Svelte 3 project.

Usage

1. For this example we'll start with a new Svelte app:

   npx degit sveltejs/template zinggrid-svelte-helloworld
   cd zinggrid-svelte-helloworld
   npm install 
   npm install zinggrid
   npm run dev

   You can now view the app in a browser at localhost:8080 (check the output of npm run dev, it might be running on a different port).

2. In the <script> section of App.svelte, import ZingGrid. We'll also remove the name component property:

   <script>
     import 'zinggrid'
   </script>

3. Now remove the contents of <main> and replace them with a zing-grid component:

   <main>
     <zing-grid />
   </main>

   When you save the file, the page should refresh and show an empty ZingGrid, with the message There are no records to display.

4. Let's add some data and update the zinggrid component to show it. First, define the data in the <script> section:

   <script>
     import 'zinggrid'
   
     const data = [
       {"name": "Sousage", "breed": "Dachshund"},
       {"name": "Plop", "breed": "Corgi"},
       {"name": "Floof", "breed": "Pomeranian"}
     ]
   </script>

5. Change the zing-grid component to look like this:

<main>
  <zing-grid caption="Dogs" data={JSON.stringify(data)} />
</main>

Altogether, this is what it'll look like (the unused styles have been removed as well):

```javascript
<script>
  import 'zinggrid'

  const data = [
      {"name": "Sousage", "breed": "Dachshund"},
      {"name": "Plop", "breed": "Corgi"},
      {"name": "Floof", "breed": "Pomeranian"}
  ]
</script>

<main>
  <zing-grid caption="Dogs" data={JSON.stringify(data)} />
</main>

<style>
  main {
  	padding: 1em;
  	margin: 0 auto;
  }
</style>

For more details on integrating ZingGrid into a Svelte app, see this article.