https://github.com/kevincobain2000/json-to-html-table

Convert Nested JSON to HTML Table — React, Javascript.
https://github.com/kevincobain2000/json-to-html-table

jsontohtml jsontohtmltable jsontotable react

Last synced: about 1 month ago
JSON representation

Convert Nested JSON to HTML Table — React, Javascript.

• Host: GitHub
• URL: https://github.com/kevincobain2000/json-to-html-table
• Owner: kevincobain2000
• Created: 2020-08-09T14:07:23.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-05-10T07:17:18.000Z (over 1 year ago)
• Last Synced: 2024-11-25T03:05:06.003Z (about 1 month ago)
• Topics: jsontohtml, jsontohtmltable, jsontotable, react
• Language: CSS
• Homepage: https://medium.com/web-developer/convert-nested-json-to-html-table-react-javascript-be6611fed718
• Size: 6.46 MB
• Stars: 32
• Watchers: 2
• Forks: 14
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# json-to-html-table

Convert Nested JSON to HTML Table — React, Javascript.

A simple react component to convert any nested JSON object or array into an HTML table.

for more info see

https://medium.com/web-developer/convert-nested-json-to-html-table-react-javascript-be6611fed718

# Use it Online

Online tool https://kevincobain2000.github.io/json-to-html-table/

## Install

```bash

npm install --save @kevincobain2000/json-to-html-table

```

## Usage

```jsx

import React, { Component } from 'react'

import { JSONToHTMLTable } from '@kevincobain2000/json-to-html-table'

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 (

      

    )

  }

}

```

## License

MIT