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.