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

1. 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.

2. 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>
   <!-- ... -->

3. Then create a component in src/components/Grid.astro with ZingGrid in it that will have a data prop to allow us to pass data to the grid.

   ---
   const { data } = Astro.props;
   ---
   
   <zing-grid data={data}></zing-grid>

4. Then, let's add the grid component to src/pages/index.astro and pass data to it. Run npm 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:

• Part 1
• Part 2