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
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 ofnpm run dev
, it might be running on a different port).In the
<script>
section ofApp.svelte
, import ZingGrid. We'll also remove thename
component property:<script> import 'zinggrid' </script>
Now remove the contents of
<main>
and replace them with azing-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
.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>
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.
[integrations: svelte]