@redheadphone/react-json-grid

React JSON Grid

Interactive demos available below!

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.
• Highlight Magic: Select and highlight specific cells, rows, or columns in the grid tables for better data exploration.

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