JSON Grid is an 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.
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.
A simple usage case would be:
- Include the lib from unpkg
- Create a
divwith idcontainer - Store your JSON into a variable.
- Create a
JSONGridinstance with the references to your data and the container (see the API section) - Run the
rendermethod 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");
<div style="display: flex; width: 300px">
<button onclick="expandAll()">Expand All</button>
<button onclick="collapseAll()">Collapse All</button>
</div>
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();
function expandAll() {
jsonGrid.expandAll();
}
function collapseAll() {
jsonGrid.collapseAll();
}
</script>
</body>
</html>The functions that are meant to be used publicly are:
The constructor receives two arguments:
dataandcontainer.
The data parameter is expected to be JSON object.
The container parameter 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.
Used to render grid based on the given data to the given container.
Returns the grid DOM without rendering it to the container.
Expands all collapsed tables and nested grids.
Collapses all expanded tables and nested grids.