react-json-to-html-table v1.0.6

react-json-to-html-table

react-json-to-html-table is a small react component that convert any valid JSON array or object into an HTML table with some useful added feautures. No need to define Columns or Rows!

Installation • Examples • Props • Storybook

Installation

npm i react-json-to-html-table

Examples

Basic

import React from "react";
import ReactDOM from "react-dom";
import HtmlJsonTable from "react-json-to-html-table"
import "bootstrap/dist/css/bootstrap.min.css";


function MyTable() {
const data = {
  boolean_key: "--- true\n",
  empty_string_translation: "",
  key_with_description: "Check it out! This key has a description! (At least in some formats)",
  "key_with_line-break": "This translations contains\na line-break.",
  nested: {
    deeply: {
      key: "Wow, this key is nested even deeper.",
    },
    key: "This key is nested inside a namespace.",
  },
  null_translation: null,
  pluralized_key: {
    one: "Only one pluralization found.",
    other: "Wow, you have %s pluralizations!",
    zero: "You have no pluralization.",
  },
  sample_collection: ["first item", "second item", "third item"],
  simple_key: "Just a simple key with a simple message.",
  unverified_key: "This translation is not yet verified and waits for it. (In some formats we also export this status)",
};

return (
  <HtmlJsonTable data={data} className="table table-sm table-striped table-bordered table-responsive"/>
)}

Select

import React from "react";
import ReactDOM from "react-dom";
import HtmlJsonTable from "react-json-to-html-table"
import "bootstrap/dist/css/bootstrap.min.css";


function MyTable() {
const data = {
  boolean_key: "--- true\n",
  empty_string_translation: "",
  key_with_description: "Check it out! This key has a description! (At least in some formats)",
  "key_with_line-break": "This translations contains\na line-break.",
  nested: {
    deeply: {
      key: "Wow, this key is nested even deeper.",
    },
    key: "This key is nested inside a namespace.",
  },
  null_translation: null,
  pluralized_key: {
    one: "Only one pluralization found.",
    other: "Wow, you have %s pluralizations!",
    zero: "You have no pluralization.",
  },
  sample_collection: ["first item", "second item", "third item"],
  simple_key: "Just a simple key with a simple message.",
  unverified_key: "This translation is not yet verified and waits for it. (In some formats we also export this status)",
};

function Onselect(event, key, value, keyValue, selected) {
  console.log("Onselect selected", selected);
  console.log("Onselect keyValue", keyValue);
  console.log("Onselect key", key);
  console.log("Onselect value", value);
}

return (
  <HtmlJsonTable data={data} Onselect={Onselect} className="table table-sm table-striped table-bordered table-responsive"/>
)}

Props

Storybook

start-storybook -p 6006