Package Exports
- @redheadphone/react-json-grid
- @redheadphone/react-json-grid/dist/index.es.js
- @redheadphone/react-json-grid/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@redheadphone/react-json-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-json-grid

The library react-json-grid provides the React component JSONGrid, which is a user-friendly and versatile tool that enables you to effortlessly transform nested JSON objects or arrays into visually appealing grid tables. Whether you're working on a data visualization project or simply need to present complex JSON data in an organized manner, this component has got you covered.
Features
- Ease of Integration: Seamlessly incorporate the component into your React applications without any hassle.
- Nested JSON Support: Handle deeply nested JSON structures with ease, creating structured grid tables.
- Interactive Interface: Provide users with an interactive and user-friendly way to explore complex data.
Install
Run either one in your React directory:
npm install @redheadphone/react-json-grid
yarn add @redheadphone/react-json-grid
Usage
Here's an example of how to use the react-json-grid library:
import React, { Component } from 'react'
import { JSONGrid } from '@redheadphone/react-json-grid'
class Example extends Component {
render () {
const data = {
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" },
{ "id": "1003", "type": "Blueberry" },
{ "id": "1004", "type": "Devil's Food" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
}
return (
<JSONGrid data={data}/>
)
}
}
Props
The JSONGrid component supports the following props:
Name | Type | Description | Default |
---|---|---|---|
data | object | The JSON object or array to be transformed into a grid table. | undefined |
Contributing
Please kindly follow CONTRIBUTING.md to get started.
Acknowledgements
- jsongrid.com: Grid design and styles
- kevincobain2000/json-to-html-table: React Component and project structure