JSON Grid is a open source javascript library meant to be run in the browser that aims to allow users to convert JSON objects into user-friendly and interactive tables/grids.

Instalation

In order to install, just require the package through unpkg (https://unpkg.com/@araujoigor/json-grid) and use the JSONGrid object to generate your grid.

Usage

A simple usage case would be:

Include the lib from unpkg
Create a div with id container
Store your JSON into a variable.
Create a JSONGrid instance with the references to your data and the container (see the API section)
Run the render method of the instance.

  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON Grid</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/@araujoigor/json-grid/dist/json-grid.css">
    <script src="https://unpkg.com/@araujoigor/json-grid/dist/JSONGrid.min.js"></script>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var container = document.getElementById("container");
      var data = {
        sport: "Formula 1",
        GP: "Brazilian GP - Interlagos",
        date: "2019-11-17T17:10:00.000Z",
        track: "Autódromo José Carlos Pace",
        stadings: [
          { "pos": 1, "driver": "M. Verstappen","team": "Red Bull", "number#": 33, "time": "+1:33:14.678", "pts": 25 },
          { "pos": 2, "driver": "P. Gasly","team": "Toro Rosso", "number#": 10, "time": "+6.077s", "pts": 18 },
          { "pos": 3, "driver": "C. Sainz, Jr.","team": "McLaren", "number#": 55, "time": "+8.896s", "pts": 15 },
          { "pos": 4, "driver": "K. Räikkönen","team": "Alfa Romeo", "number#": 7, "time": "+9.452s", "pts": 12 },
          { "pos": 5, "driver": "A. Giovinazzi","team": "Alfa Romeo", "number#": 99, "time": "+10.201s", "pts": 10 },
          { "pos": 6, "driver": "D. Ricciardo","team": "Renault", "number#": 3, "time": "+10.541s", "pts": 8 },
          { "pos": 7, "driver": "L. Hamilton","team": "Mercedes", "number#": 44, "time": "+11.139s", "pts": 6 },
          { "pos": 8, "driver": "L. Norris","team": "McLaren", "number#": 4, "time": "+11.204s", "pts": 4 },
          { "pos": 9, "driver": "S. Pérez","team": "Racing Point", "number#": 11, "time": "+11.529s", "pts": 2 },
          { "pos": 10, "driver": "D. Kvyat","team": "Toro Rosso", "number#": 26, "time": "+11.931s", "pts": 1 },
          { "pos": 11, "driver": "K. Magnussen","team": "Haas", "number#": 20, "time": "+12.732s", "pts": 0 },
          { "pos": 12, "driver": "G. Russell","team": "Williams", "number#": 63, "time": "+13.599s", "pts": 0 },
          { "pos": 13, "driver": "R. Grosjean","team": "Haas", "number#": 8, "time": "+13.599s", "pts": 0 },
          { "pos": 14, "driver": "A. Albon","team": "Red Bull", "number#": 23, "time": "+14.927s", "pts": 0 },
          { "pos": 15, "driver": "N. Hülkenberg","team": "Renault", "number#": 27, "time": "+18.059s", "pts": 0 },
          { "pos": 16, "driver": "R. Kubica","team": "Williams", "number#": 88, "time": "+1 Lap", "pts": 0 },
          { "pos": 17, "driver": "S. Vettel","team": "Ferrari", "number#": 5, "time": "DNF", "pts": 0 },
          { "pos": 18, "driver": "C. Leclerc","team": "Ferrari", "number#": 16, "time": "DNF", "pts": 0 },
          { "pos": 19, "driver": "L. Stroll","team": "Racing Point", "number#": 18, "time": "DNF", "pts": 0 },
          { "pos": 20, "driver": "V. Bottas","team": "Mercedes", "number#": 77, "time": "DNF", "pts": 0 }
        ]
      };
      var jsonGrid = new JSONGrid(data, container);
      jsonGrid.render();
    </script>
  </body>
  </html>

API

The functions that are meant to be used publicily are:

`JSONGrid(data, container)`

The constructor receives two arguments: data and container.

The data parameter is expected to be JSON object. The container paramenter is expected to be a DOM node and will be used to render the contents.

After the object is created, you can use the render function to render the grid.

`JSONGrid.prototype.render`

Used to render grid based on the given data to the given container.

`JSONGrid.prototype.generateDOM`

Returns the grid DOM without rendering it to the container.

Keywords

FAQs

What is @araujoigor/json-grid?

Is @araujoigor/json-grid popular?

Is @araujoigor/json-grid well maintained?

Package last updated on 08 May 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@araujoigor/json-grid

JSON Grid

Instalation

Usage

API

JSONGrid(data, container)

JSONGrid.prototype.render

JSONGrid.prototype.generateDOM

Keywords

Related posts

2025 Blockchain and Cryptocurrency Threat Report: Malware in the Open Source Supply Chain

pnpm 10.12 Introduces Global Virtual Store and Expanded Version Catalogs

`JSONGrid(data, container)`

`JSONGrid.prototype.render`

`JSONGrid.prototype.generateDOM`