JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 18246
  • Score
    100M100P100Q148657F
  • License MIT

React Component that converts JSON to grid table

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