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

Name	Description	Type	Returns	Required
data	Data to be displayed in table	any valid JSON Object or Array	-	true
className	className used in table it can be a bootstrap class or your own class	string	-	false
onClickKey	get Key information on click	Function	event, rowKey, rowValue	false
onClickValue	get Value information on click	Function	event, rowValue	false
Onselect	Makes table rows selectable	Function	event, key, value, keyValue, selected	false
OnselectAll	Makes table rows selectable with select all checkbox	Function	event, allSelected	false
singleSelect	Makes table only one row selectable with radio checkbox	bool	event, key, value, keyValue, selected	false
HeaderText	Insert a table Header	string	-	false
HeaderStyle	Header stile (react css inline)	css inline	-	false

Storybook

start-storybook -p 6006