Astro Integration
ZingGrid works with your development stack, including Astro! In this guide, we'll walk you through how to add ZingGrid to your Astro project.
Usage
-
For this example we'll start with a new Astro app:
npm create astro@latest
You can now view the app in a browser at
localhost:3000
. -
First, include the ZingGrid library (prferably deferred) in
src/layouts/Layout.astro
:<!-- ... --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="description" content="Astro description" /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <meta name="generator" content={Astro.generator} /> <title>{title}</title> <!-- ZingGrid Library --> <script is:inline defer src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </head> <body> <slot /> </body> </html> <!-- ... -->
-
Then create a component in
src/components/Grid.astro
with ZingGrid in it that will have adata
prop to allow us to pass data to the grid.--- const { data } = Astro.props; --- <zing-grid data={data}></zing-grid>
-
Then, let's add the grid component to
src/pages/index.astro
and pass data to it. Runnpm run dev
to preview your Astro app!--- import Grid from '../components/Grid.astro'; import Layout from '../layouts/Layout.astro'; const myData = JSON.stringify([{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]); --- <Layout> <header> <!-- ... --> </header> <main> <Grid data={myData} /> </main> </Layout>
For more details on integrating ZingGrid into a Astro app, see the articles below:
Top
[integrations: astro]