Illustrated browsers with data grids

Visualize your backend data quickly with ZingGrid & JSON Server

With ONE tag you can have a fully interactive grid contacting your REST endpoint directly out of the box. No extra markup or Javascript required!

              <zing-grid 
  src="https://jsonplaceholder.typicode.com/posts" 
  editor-controls>
</zing-grid>
            

Only one tag required for full CRUD functionality

Live Demo

ZingGrid will automatically set up the GET, POST, PATCH and DELETE requests to your endpoint. In the case of JSON server, we work directly out of the box with the JSON server standard REST endpoint structure defined on their site https://jsonplaceholder.typicode.com/:

Routes screenshot

ZingGrid Markup

              <zing-grid 
  src="https://jsonplaceholder.typicode.com/posts" 
  editor-controls>
</zing-grid>
            

Have a grid on the page in three easy steps

Getting Started

The basic getting started guide to ZingGrid defined below. For a full getting started guide please check out the getting started guide on the site. There are three steps to getting a grid on the page once you have an endpoint setup.

  1. Import - fetch the ZingGrid script into your web page
  2. Markup - add the zing-grid tag to your page
  3. Attributes - add the editor-controls attribute to the tag

Import ZingGrid easily through our cdn

Download the Library

The easiest way to get started is to use the cdn to import a script tag to the library. If you want to see all the ways to download the library checkout our download page or our getting started guide.

Client Code

            <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js" defer></script>
          

One tag will get your grid running

Adding Markup

You now need to add the zing-grid tag to your page. Since the library is a webcomponent you can defer the script tag download and the ZingGrid library will bootstrap itself once it's fully downloaded on the page. This means you can add this tag anywhere on your page!

Client Code

            <zing-grid></zing-grid>
          

Turn on features through attributes

Adding Attributes

We now need to add functionality to the grid. The easiest way to achieve this through attributes on the zing-grid tag. Add the following attributes to acheive a fully functioning CRUD grid.

Attributes

  1. src - will link your data to the grid for reading data
  2. editor-controls - will enable and link ALL CRUD actions
  3. Attributes - add the editor-controls attribute to the tag

Client Code

            <zing-grid
  src="https://json-server-backend.glitch.me"
  editor-controls>
</zing-grid>
          

Use any of the jsonplaceholder endpoints

Demos

A great site for examples of JSON server endpoints is https://jsonplaceholder.typicode.com. The following demos will get you a fully working CRUD grid with any of the jsonplaceholder endpoints:

  1. Posts demo
  2. Comments demo
  3. Albums demo
  4. Photos demo
  5. Todos demo
  6. Users demo