react-json-to-html

react-json-to-html

A simple React component that renders an HTML table from a JSON object.

Installation

npm install react-json-to-html --save

Usage

A simple example. Download and run the demo for more examples, or browse the examples here.

import React from 'react';
import {JsonTable} from 'react-json-to-html';

class Nested extends React.Component {
  const json = {
    "Server Name": "foo",
    "Description": "bar",
    "Specs": {
      "IP": "10.100.99.101",
      "MAC": "00:0a:XX:9F:XX:16"
    },
    "Date": "Jan 1, 2018"
  }
  render() {
    return (
      <JsonTable json={json} />
    )
  }
}

export default JsonTable;

JsonTable props

Name	Type	Required	Default	Possible Values	Description
json	[Object]	Yes	undefined	Any valid JSON object	The JSON that will get rendered as HTML table
css	[Object]	No	see the Css JSON below	Css as JS	Some CSS attributes that can be overridden
indent	Integer	No	3	Any positive number	Number of non breaking spaces for indentation of nested attributes

Css variables

The below CSS variables can be passed in as JS via the css prop. These are the default values, but can be overriden.

const Css = {
  jsonTr: {
    height: '25px'
  },
  jsonTd: {
    padding: '5px',
    borderSpacing: '2px',
    borderRadius: '5px'
  },
  rowSpacer: {
    height: '2px'
  },
  rootElement: {
    padding: '5px',
    borderSpacing: '2px',
    backgroundColor: '#BBBBBB',
    fontWeight: 'bold',
    fontFamily: 'Arial',
    borderRadius: '5px'
  },
  subElement: {
    padding: '5px',
    borderSpacing: '2px',
    backgroundColor: '#DDDDDD',
    fontWeight: 'bold',
    fontFamily: 'Arial',
    borderRadius: '5px'
  },
  dataCell: {
    borderSpacing: '2px',
    backgroundColor: '#F1F1F1',
    fontFamily: 'Arial',
    borderRadius: '5px'
  }
}

Download Examples

git clone https://github.com/grizzthedj/react-json-to-html.git
cd react-json-to-html
npm install
gulp demo
Browse http://localhost:8080

Backlog

1. Add more props to control styling and CSS
2. More tests